How To Add A Countdown Timer To Your Blogger Site

Countdown timers can be very effective in terms of getting user engagement. It could be for an event, a sale or simply a New Year countdown. But can you add it in a Blogger/Blogspot site? You most certainly can. You can add it as an HTML/JavaScript gadget. Just follow the below easy steps to add a beautiful, animated timer in just about 5 minutes.

1. In your Blogger dashboard, go the option ‘Layout’ in the sidebar.
2. You’ll see your blog’s layout. Click ‘Add a Gadget’ wherever you want to add the countdown timer.
3. You’ll see a list of available gadgets. Choose ‘HTML/JavaScript’.
4. Now, you can generate a script from any ‘timer’ service and add it there.
   There are many such awesome platforms out there that can be used for free. One such app is MotionMail. It’s generally used for adding a countdown timer in emails but can be just as well used on websites/blogs.
5. Once you sign up on MotionMail, you can create a timer from four different design options. You can add the details like timer end time, timezone etc. and apply design customizations like text colour, background colour etc. and simply save the changes to create the timer.
   
6. After saving the timer, you’ll get a screen like below. Click on ‘Copy’.
   

7. Paste it in the ‘Content’ field as we have in step 3 and click on ‘Save’.
   

I added this gadget in the footer area and as you can see in the screenshot below, we have the countdown timer appeared and working.

I added this timer only for the demo. You can make better, more relevant design enhancements like transparent background, blog theme colours etc.

Happy blogging!

How To Add Facebook Like Box Into Blogger Blog 2017

Many other blog posts on adding a Facebook likebox on Blogger have become outdated since, earlier, like box plugin was used for this purpose but now it has been deprecated by Facebook.

Let's see how we can add a Facebook like box widget as in the below image on Blogger blog page.

Step-1: 

Head over to Facebook's Page Plugin docs → https://developers.facebook.com/docs/plugins/page-plugin.

Step-2: 

Enter your Facebook page URL as asked on that page. You'll get the preview of how your like box will look as shown in the image below.

If the preview doesn't show up, it means that your page is not published yet. In that case, head over to your Facebook page and publish it first.

Step-3:

By default, the box shows the page's posts too. Now, many of us including me wouldn't want that. So for that just remove the value 'timeline' from the field 'Tabs' and let it be blank.

Step-4:

Next click on the button 'Get Code' right below the preview. You'll get a popup as shown below.

There are two tabs at the top. Click on 'IFrame'.

Copy the code in the IFrame tab.

Step-5:

Now you need to paste the code wherever you want the like box to appear. 

For that, go to your Blogger dashboard and click on Layout option in the sidebar. There, click on 'Add a Gadget' where you want the box to appear.

I want it in my right sidebar so I click on the option there as seen below.

Step-6:

Click on the gadget HTML/JavaScript.
Add your code in the 'Content' box and the 'Title' field blank.

Step-7:

Click on Save. Then click on Save Arrangement button in the top right corner.

And, you're done! Your blog now has a Facebook like box of your page.

Wanna go a step ahead and add a Facebook Like button too for each of your posts?
I have done that for my blog and have written about it too here,
How To Add A Facebook Like Button To Each Blogger Post

You can do a similar thing with Twitter by adding 'Click to tweet' links which I've covered here, How To Add A Click To Tweet Link To Your Blog Or Website

How To Add A Facebook Like Button To Each Blogger Post

Step 1: Go to your Blogger Dashboard.

Step 2: In the sidebar, click on 'Theme' and then 'Edit HTML'.

Step 3: Click anywhere in the Code Area and press Ctrl+F. A Search Box will appear in the upper right corner.
Enter this code in the box and press Enter twice. We need to work with the second result.

<data:post.body/>

Step 4: Now, we have to paste the code for our Facebook Like button.
If you wish to add the like button above the posts, add the code before the <data:post.body/> tag and if you want it to appear at the end of each post, add it after the tag.
Select the code as per your choice among the following types of Facebook Like buttons.

Copy this code for button_count Facebook like button.

<br/><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.canonicalUrl + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:21px;'/>

Copy this code for box_count Facebook like button.

<br/><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.canonicalUrl + &quot;&amp;layout=box_count&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:55px; height:62px;'/>

Copy this code for standard Facebook Like button.

<br/><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.canonicalUrl + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:35px;'/> 

Step 5: Click on 'Save Theme'.

The Facebook Like button will be added to all your existing posts as well as the posts you create thereafter.