Free Countdown Timer Widget for Weebly Site

Countdown timer widget allows you to showcase a handy timer for the purpose of product launch, event launch, etc. The widget code can be embedded inside “Embed Code” element hence it can be added anywhere on the page along with other content. If you want to add it on a separate page for under construction site without navigation menus and footer then create a new page layout and add the widget code. In this article we will focus on adding the free countdown timer widget for Weebly site within a page content.

Countdown Timer Widget for Weebly Site

The countdown timer widget will look like below and you can modify the colors as you need to suit your site’s layout.

Download the script files for creating this widget.

Step 1 – Download and Add the Scripts

The widget is based on the scripts init.js / countdown.js and modified to suit on a Weebly site with additional CSS. Download the script files and upload them under “Theme > Edit HTML / CSS > Assets” section of your Weebly site. Then link the script files under the “Footer Code” section of your page as below:

<script src="/files/theme/countdown.js" type="text/javascript"></script>
<script src="/files/theme/init.js" type="text/javascript"></script>

You can also use the absolute file paths by prefixing your Weebly site name to the above URLs.

Step 2 – Adding CSS

Add the below CSS under “Header Code” section of your Weebly page:

<style>
.countdowntimer {
background: rgb(92, 57, 57) none repeat scroll 0% 0%;
padding:20px 0;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 25px;
}

.title #desc {
margin: 25px 0 25px 0;
text-align:center;
color: lightyellow;
font-size: 18px;
}

.title #head {
font-size: 30px;
color: #ffffff;
}

ul#countdown {
text-align:center;
}

ul#countdown li {
color:#fff;
display: inline-block;
margin-right:18px;
width: 100px;
height: 90px;
text-align: center;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: #333333;
-webkit-box-shadow: 1px 1px 4px rgba(50, 50, 50, 0.3);
-moz-box-shadow: 1px 1px 4px rgba(50, 50, 50, 0.3);
box-shadow: 1px 1px 4px rgba(50, 50, 50, 0.3);
}

ul#countdown li span {
font-size: 42px;
font-weight: bold;
color: #fff;
position: relative;
text-shadow: 1px 1px 2px rgba(150, 150, 150, 1);
top: 10px;
}

ul#countdown li p.timeRefDays,
ul#countdown li p.timeRefHours,
ul#countdown li p.timeRefMinutes,
ul#countdown li p.timeRefSeconds {
text-shadow: 1px 1px 2px rgba(150, 150, 150, 1);
margin-top: 15px;
}

</style>

Step 3 – HTML for the Countdown Timer

Add the below HTML code inside an “Embed Code” element and align the position to center. Don’t forget to replace the heading and description with your own.

<div class="countdowntimer">
<div class="title">
<h3 id="head">This is a countdown timer widget</h3>
<h5 id="desc">Remaining time for official product or website launch</h5>
</div>
<ul id="countdown">
<li>
<p class="timeRefDays">days</p>
<span class="days"></span>
</li>
<li>
<p class="timeRefHours">hours</p>
<span class="hours"></span>
</li>
<li>
<p class="timeRefMinutes">minutes</p>
<span class="minutes"></span>
</li>
<li>
<p class="timeRefSeconds">seconds</p>
<span class="seconds"></span>
</li>
</ul>
</div>

Step 4 – Setting Target Date

The target date for the timer is set inside “init.js” script file as “31 december 2016” for demo purpose. You can modify the date as per your need, save the changes and publish the site to see the countdown timer in action.

Full Width Parallax Countdown Timer Widget

Adding the above widget using embed code element will make it looking plain. You can make a beautiful parallax countdown timer using section element like below:

Follow the below instructions to create pie chart with parallax image background.

• Drag and drop a section element. Click on the section element on content area and then click “Edit Background” option.
• Choose image as background and set scrolling effect as parallax. You can also set color background and the video background is only available for pro users.
• Now drag and drop an embed code element and add the HTML code as provided in the above section.
• Publish your site and see the animated pie chart with parallax image background.