How to add a Responsive Countdown widget in Blogspot Blog – As you guys already know that, A countdown displays a small box on your Blogger page that counts down the days until a big event, such as Christmas, Valentine’s Day or even the birth of a baby. And every blogger want to display these type of cool widgets on their blog. So that is the main reason today I’m going to share with you a simple stylish counter plugin for your blog. The best part of this widget is that, it’s showing the left days, hours, minutes, and seconds.
Now, before you set up this plugin on your blog, make sure to take a look of this widget by clicking on the below demo button.
LIVE DEMO
Now, if you want to install this countdown plugin on your own blog, then simply follow the below simple steps.
At the first, visit to your blogger dashboard. Go to the “Template” section. Click on the “Edit html” button.
In the “Template Editor” add the below CSS code just before ]]></b:skin>
#pikcounter{background:#31acce;color:#ffe8a0;font-size:18px;text-align:center;padding:30px 15px;font-weight:700;border-radius:3px;line-height:normal;font-family:'Open Sans',Verdana,Arial,sans-serif;background:#e73138}.digitaltime,.digitaltext{color:#fff}@media screen and (max-width:920px){h2.entry-title{padding:15px 0}.infoarlina-meta .lefty .labels{display:none}}@media screen and (max-width:767px){.post-thumbnail{margin:0 0 5px auto;float:none}}Copy the below JavaScript code and paste it just before </body>
<script type='text/javascript'>//<![CDATA[var target_date=new Date("Jan 01, 2017").getTime();var days,hours,minutes,seconds;var smartpikcount=document.getElementById("smartpikcount");setInterval(function(){var current_date=new Date().getTime();var seconds_left=(target_date- current_date)/ 1000;days=parseInt(seconds_left/86400);seconds_left=seconds_left%86400;hours=parseInt(seconds_left/3600);seconds_left=seconds_left%3600;minutes=parseInt(seconds_left/60);seconds=parseInt(seconds_left%60);smartpikcount.innerHTML=days+" <span class='digitaltime'>Days</span> "+ hours+" <span class='digitaltime'>Hours</span> "+ minutes+" <span class='digitaltime'>Minutes</span> "+ seconds+" <span class='digitaltime'>Seconds Left</span> <span class='digitaltext'>For 2017</span>";},1000);//]]></script>The above code contains two highlighted sections. The first one is the targeted date and the second one is the text about the event. You can replace this two sections with your own content.
After that, apply the below “HTML” code anywhere you want to show this widget
<div id="pikcounter"><span id="smartpikcount"></span></div>All done, If you face any kind of problem, then feel free to ask me via the comment section. I hope you like this Widget! Stay tuned for more blogger widgets!