Countdown Timer for your Squarespace or Shopify Website

Are you looking for a simple yet highly customisable Countdown Timer for your website? This might be what you are looking for.

Step 1 - Insert this HTML code to wherever you want the timer to run

HTML

<h1>Countdown Timer - Rename this Title</h1>
<div id="clockdiv">
  <div>
    <span class="days"></span>
    <div class="smalltext">Days</div>
  </div>
  <div>
    <span class="hours"></span>
    <div class="smalltext">Hours</div>
  </div>
  <div>
    <span class="minutes"></span>
    <div class="smalltext">Minutes</div>
  </div>
  <div>
    <span class="seconds"></span>
    <div class="smalltext">Seconds</div>
  </div>
</div>

Step 2 - Add this script to your Header or Footer "Code Injection" area

iQuery

<script>
function getTimeRemaining(endtime) {
  var t = Date.parse(endtime) - Date.parse(new Date());
  var seconds = Math.floor((t / 1000) % 60);
  var minutes = Math.floor((t / 1000 / 60) % 60);
  var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
  var days = Math.floor(t / (1000 * 60 * 60 * 24));
  return {
    'total': t,
    'days': days,
    'hours': hours,
    'minutes': minutes,
    'seconds': seconds
  };
}

function initializeClock(id, endtime) {
  var clock = document.getElementById(id);
  var daysSpan = clock.querySelector('.days');
  var hoursSpan = clock.querySelector('.hours');
  var minutesSpan = clock.querySelector('.minutes');
  var secondsSpan = clock.querySelector('.seconds');

  function updateClock() {
    var t = getTimeRemaining(endtime);

    daysSpan.innerHTML = t.days;
    hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
    minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
    secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

    if (t.total <= 0) {
      clearInterval(timeinterval);
    }
  }

  updateClock();
  var timeinterval = setInterval(updateClock, 1000);
}

var deadline = new Date(Date.parse(new Date('2020/10/10')) + 150 * 24 * 60 * 60 * 1000);
initializeClock('clockdiv', deadline);
</script>

Change the Date '2020/10/102' in the last line accordingly but keep the quotation marks.

Step 3 - Design your countdown timer to your own judgement. 

CSS

#clockdiv{
    color: #c42130;
    display: inline-block;
    font-weight: 100;
    text-align: center;
    font-size: 50px;
    padding-bottom:30px;
}

#clockdiv > div {
    padding: 10px;
    background: ;
    display: inline-block;
}

#clockdiv div > span{
    padding: 20px;
    border-radius: 100%;
    background: #ffff;
    display: inline-block;
}

.smalltext {
    padding-top: 5px;
    font-size: 16px;
    color:#000000;
}

That's it. Enjoy!

"Scroll Up Button" for any Squarespace Website

If you are looking for a very easy way to link back to the top of your page without any extra scripts, here is a super simple solution for just doing that.

Step 1 - Add a "Code Block" where you want to insert the button
Step 2 - Make sure it’s set to HTML and the Display Source option is unchecked
Step 3 - Add this code:

<a href="#" class="scrollup">Scroll Up</a>

Done!


To change the feel, look and design follow along...

CSS - Design It

.scrollup {
   width: 50px;
   height: 50px;
   opacity: 0.5;
   position: fixed;
   bottom: 50px;
   right: 100px;
   display:none;
   text-indent: -9999px;
   background: url('scroll-up-icon.png') no-repeat;
 }

Replace 'scroll-up-icon.png' with your scroll up button and you can mess with the exact positioning, color, width, ... with the according CSS values.


You are looking for a smooth scroll up then just a big jump. Here is how...

jQuery

Step 1 - Go to "Page Header Code Injection"
Step 2 - Add this code:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script>
   $(document).ready(function () {
       $(window).scroll(function () {
           if ($(this).scrollTop() > 100) {
               $('.scrollup').fadeIn();
           } else {
               $('.scrollup').fadeOut();
           }
       });
       $('.scrollup').click(function () {
           $("html, body").animate({
               scrollTop: 0
           }, 600);
           return false;
       });
   });
 </script>

How to get rid of unwanted table (cell) border

Today most design problems can be solved through CSS but sometimes you still need (or want) to design certain things using tables. In that case you might have come across the problem of unwanted space between cells. This might help to solve the problem of unwanted table space.

CSS

#table { 
  margin: 0px;
  padding: 0px;
}

#table img {
  display: block
}

How to delete old DNS records on you Windows computer?

More than ones my PC was showing me an old website after changing the DNS records successfully. My Mac computer was already showing the new website, and if I looked up the DNS records on a web service like: intodns I could see that the DNS records were configured correctly.

If you ever run into this problem just reset the DNS table on your Windows computer. And that's how it's done:

Click on the Windows START button / open the system console (CMD) / and make the following entry:
ipconfig /flushdns

Done. Now your Windows computer will also show you the new website! 

How to insert a new editable block to your Squarespace template

Most Squarespace templates come with a set of code injection points out of the box. But sometimes you need an extra area to put some code where the template doesn't have one. In my case a wanted to add some information above my header but inside the canvas.

STEP 1: Add a new block, or use one of the code injections points (header/footer). Then add your extra information (text, images, etc.) into that block.

Example:

<div id="pre-header">
  Free Legal Evaluation, CALL NOW (XXX) xxx-xxxx
</div>

STEP 2: Get the block id. Use Firebug or similar app to track down the unique identifier for the new blog you've just created. If you add a new div element within your SQSP code injections points, as I did, you don't need to.

STEP 3: Use jQuery to re-position your block. jQuery allows you to move your newly created block to or inside another area of your page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script type="text/javascript">
   $(function() {
   $("#pre-header") .prependTo ("#canvas");
});
</script>

In my case adding a phone numer above the header was pretty simple. First, I added a div element called "pre-header" to the code injection point (footer) to make sure that it will be displayed on all pages. If I would add a block to the sidebar section, my new block might not show up on every page, depending on the settings.

Step 4 -  Add some custom CSS to make it look right.

#pre-header {
  font-size:15px;
  font-weight: bold;
  letter-spacing:1px;
  color:#ffffff;
  padding: 10px;
}

That's it.

Dynamic toggle function to Show or Hide content

You have extra information you want to make available to your website visitors but you don't want to mess-up your design by to much content? A dynamic toggle to Show or Hide this extra information might be what you're looking for.

It's pretty simple.

Step 1 - Add the following script to your templates header injection point.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">

<script type="text/javascript">
function myFunction() {
    var x = document.getElementById('myDIV');
    if (x.style.display === 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }
}
</script>

Line 1 simply loads the minimized jQuery library from the Google library page. The rest is what the action does.

Step 2 - Add the additional HTML code with your extra text.

<h3 onclick="myFunction()">Click Me</h3>

<div id="myDIV">
  This is my DIV element.
</div>

Step 3 - Use CSS to make it look right.

#myDIV {
   background-color:#e1e1e1;
   padding: 20px;
   display:none; 
 }

And if you want to show your extra content by default just remove: "display:none;" from the CSS style entry!

That's it!

see it in action...

Click Me

This is my DIV element.

Common CSS Properties

Text inside the Search Field

If you want to have some text, for example: "Search Site" inside your Squarespace Search field, you can easily do this with the following jQuery code.

Just add the following Script to your "Extra Header Code".

Then just rename "Search Site" to whatever you want it to say. Keep the quotation marks!

jQuery

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script type="text/javascript">
$(function() {
$('.search-form-pt .queryFieldWrapper input').attr({value:"Search Site" });
});
</script>

Why does your company need Search Engine Optimization (SEO)?

Search Engine Optimization (SEO)

SEO is tricky to get right, but once done it will improve your page ranking and therefore lead to more business and customers. Done wrong, it can damage your site and reputation which as you know can be very hard to fix.

So why does your company even need SEO?

The majority of web traffic is still driven by search engines like Google, Bing and Yahoo. If your site cannot be found by search engines, you miss out on an incredible opportunity. If you can't be found on the internet, then for many you won't exist. Therefore, it is vital to make sure that you will be found.

SEO essentials

There are many factors that influence whether a particular web site appears in web search results and in what ranking. Some factors play a big roll, others a small and some you can't even influence. But let's have look at what you can and should do.

Backlinks

Backlinks are external links to your site. The more you have, the better. But make sure they are only on decent websites or it could damage your reputation. As true in real life, good acquaintances will bring you further but bad ones will most likely cause more damage than good.

Accessibiltiy

All your pages should be easy to access by humans and by the robots (also knows as spiders) from search engines. It may even be useful to think of search engines as users with substantial constraints. They can't read text in images or interpret JavaScript or Flash content. Therefore make sure all your pages are accessible by at least one static link and that you fill in the attributes.

META tags

META tags are HTML codes that will help search engines understand, catalog and categorize your web page and are often not directly visible to your visitors. Your META tags should be configured right but they are not the "magic bullet" that will skyrocket your site to the top of all search page listings as you might have been told before.

Keywords

Choose the right keywords. For instance, if you have a site about cats, do not try and optimize for the keyword “cat”. Instead, focus on keywords like “ragdoll kitten for sale”, “homemade cat food” or “cat training facility”. Think about what words your potential customers might type into the search bar to find your services and use them. To succeed on a very popular one-word keyword is very difficult. Instead, focus on less competitive and more specific keywords.

Content

Write for the human users first. Google and Co.'s robots will crawl your site and it’s important that they find what you want them to. But they will not buy anything form you, sign-up for a newsletter or pick up the phone to call you about your services. Humans do those things, so make sure you write for them first. Also, content which is different from the content on other sites is a real boost for your site's rankings and if you regularly add new content it will make it even better.

Blog

Start a blog. Search engines love blogs for the fresh and highly structured data. Beyond that, there’s no better way to interact with your customers and community.

Code

Make sure your web site is written in valid HTML code. Search engines have to parse the HTML code of your web site to find the relevant content. If you HTML code contains errors, search engines might not be able to find the content on the page, which will end your SEO efforts right there.

Headings

When you write your web site copy make sure you use correct headings (h1, h2, h3, ...). Heading tags label your headlines so that search engines will recognize it as "important" and make it easy for them to determine what your web site is all about. When writing your headings, try to include your main keywords.

Social Media

The use of Facebook, Twitter, Youtube and other social platforms can be extremely helpful in getting a better page ranking. The problem is, it's a lot of work and if you don't have a proper marketing plan in place it might not be worth the time and money. On top of that, Social Media is very fast changing environment. And with the new Google+, 1 more big player has joined the game. We will provide more about Social Media Marketing in a separate blog post.

Hosting

Downtime of your website can lead to vastly decreased performance in organic search. A reliable hosting service is very important to your SEO and should not be underestimated. Good hosting service is always worth the money.

A few more tips & trick that will help your page ranking

Look

Build a beautiful web site. If you want to show up on the first page of search results make sure your site is looking good and easy to navigate. If your site is unattractive or if they can’t find what they are looking for, even the best SEO will not be of much value to you.

Commitment

Commit yourself to the process. SEO isn’t a one time event, it requires a long-term outlook and commitment.

Patience

Be patient. SEO isn’t about instant glory. Results often take months to see. This is especially true if you are a small and new company.

And finally, here are a few myths about Search Engine Optimization

Submission

In the late 1990’s search engine had “submission” forms. You would “submit” your site to make sure it would be crawled by the varies search engines. You can still see submission pages for Google, Bing, Yahoo and Co but these are remains of time long past. This is something you don't have to worry about anymore. In fact, if you hear a pitch from an SEO expert offering “search engine submission” services, run as fast as you can.

Adsense

Adsense might boost your income but Google will not give you a ranking bonus because of hosting ads.

Adwords

Adwords done right will bring more traffic to your site but this will not affect your ranking on search engines in any way.

Summary

SEO plays a very important part in your online appearance but remember that no one can guarantee a #1 ranking on Google, Bing or other search engines. But get the SEO essentials right and you will have a much more effective website.

High Resolution Icon for your iPhone or iPad

  • Design your icon in your favorite graphic application like Photoshop
  • The resolution needs to be 114 x 114 pixels
  • Save the file as a PNG image, named: apple-touch-icon.png
  • Upload your icon to your main storage location on your SquareSpace site

 

Note: You don't have to apply any of the cool Apple icon effects (rounded corners, gloss, etc.) just design your icon
with plain square edges, the effects will be created for you

 

Code (Extra Header Code)

<link rel="apple-touch-icon" href="http://www.yourwebsite.com/storage/apple-touch-icon.png" />

 

If you need help designing your icon. Please feel free to contact us!

How to install Accordion on your Squarespace site

This is a short instruction on how to install Accordion on your Squarespace site. To start with you have to upload the following files and scripts:

  • jQuery
  • Accordion script
  • Accordion CSS file

You can download the .zip file with all the scirpts and files HERE.

 

Preparation

  • Go to your Squarespace storage and create a folder named scripts
  • Then Upload the .zip file into that folder (tick: Decompress Zip Files After Uploading)

 

Script

<link type="text/css" href="/storage/scripts/accordion/css/jquery-ui-1.8.14.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="/storage/scripts/accordion/scripts/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="/storage/scripts/accordion/scripts/jquery-ui-1.8.14.custom.min.js"></script>
<script>
$(function() {
$( "#accordion" ).accordion({
event: "mouseover"
});
});
</script>

 

HTML Code

<div class="demo">
<div id="accordion">
<h3><a href="#">Section 1</a></h3>
<div>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et.</p>
</div>
<h3><a href="#">Section 2</a></h3>
<div>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et.</p>
</div>
<h3><a href="#">Section 3</a></h3>
<div>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et.</p>
<ul>
</ul>
</div>
<h3><a href="#">Section 4</a></h3>
<div>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et.</p>
</div>
</div>
</div>

 

CSS Code

If you want to change the design and look of your Accordion widget, you will find the CSS file at:
/storage/scripts/accordion/css/jquery-ui-1.8.14.custom.css

Don't waist your time and money. How to get your message heard!

Get Your Message Heard

Most companies put a lot of time, effort and money in SEO (Search Engine Optimization) to make their site easy to find. But it shouldn't stop there!

Once people find your site, the next challenge is keeping them there. Does your website make it easy for your visitors to navigate around and find what they need? Is your message clear?

For a website to be successful, at least one of the following actions must happen:

  • They find the information they are looking for.
  • They sign-up or give permission to follow up.
  • They click and buy something.
  • They tell a friend.
  • They click somewhere you want them to go.

If one or more of the above actions does not happen, you are wasting your time and money!

Always make it very easy for customers to find the information they are looking for. If this is not clear straight away, its hard to hold their interest.

Remember that if they choose to come by to your site, they are most likely interested in what you have to offer and will be willing to follow. If you would like their permission for you to contact them in the future, make it obvious!

Insure that your site is easy for them to share for example on Facebook or Twitter. Nowadays, when people find something interesting on the internet, they want to share it with friends and acquittance's. Don't miss out on this opportunity to be advertised for free.

Most importantly, it should always be very clear to your visitors what you want them to do. We may have found the answer to that one for you...

We recently discovered a very simple but powerful tool called 'Hello Bar'. Its is a notification bar that pops up on your website to deliver your message instantly. You can implement it onto your site customising it to make it appeal to your visitors and encourage more clicks. Its very easy to install, and will guarantee your message is heard. To find out more, click HERE. We can highly recommend it!

Hellobar

To get the 'Hello Bar' you need (for now) an invite. We still have a few invites to give away, just send as a short messge via mail, Twitter or leave a comment.

Third Party Software & Applications for Squarespace Sites

We love Squarespace, it is a great service. But sometimes our customers need a little more than Squarespace offers out of the box. Here is a short list of the best 3-Party Software & Services we often use for our Squarespace web projects:

 

If you need help with the integration of one of the above mentioned services, just let us know!

How to get some extra space around your images

If you align your images on your Squarespace site to the right or left the text gets a bit too close.
Insert the following Code to the custom CSS section:

 

CSS Code

.full-image-float-right { margin-left: 30px; margin-top:5px; margin-bottom: 20px; }
.full-image-float-left { margin-right: 30px; margin-top:5px; margin-bottom: 20px; }

/* gives your images when aligned left or right a bit more space */

 

Move Sidebar Section (for example Search Widget)

This is a short instruction on how to move or replace a sidebar section in Squarespace. In our example we will move the Search Widget to the page header of our Code Journal page (see top of the page).

To make the following code work you must upload and install jQuery fist. You can download the .zip file with the latest jQuery HERE.

 

Preparation

  1. Go to your Squarespace storage and create a folder named scripts
  2. Then Upload the .zip file into that folder (tick: Decompress Zip Files After Uploading)
  1. Add a new section to your sidebar and add the Search Widget
  2. Get the ID of that new created section (Firebug might help you here)
  3. Get the ID of the Page header you want to put your Search Widget in

 

Add the following Script to your "Extra Header Code". You will find this under: Website Management / Website Settings / Code Injection.

 

Script

<script src="/static/50ec6cd6e4b0b0518bc6333a/50f556e3e4b0c61109871aa2/50f556e4e4b0c61109871b72/1298976184697/jquery-1.5.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
   $(function() {
   $("#sectionContentYour-ID") .appendTo("#modulePageYOUR-ID .header");
});
</script>

 

Now use CSS (added to the Custom CSS panel: Style Editing Mode / Custom CSS) to make it look right.

 

CSS Code

#sectionContentYOUR-ID {margin-top: 15px; margin-bottom: 15px; }
/*Change the look of your Search Widget
*/

 

We also changed the Value of the search button from ">>" to "Search Code Journal"

 

Extra Script Code

$('.search-form-pt .queryButtonWrapper input').attr({value:"Search Code Journal"});