How to Display Free Clock widgets on your blogs or websites

With the help of this tutorial we are providing a very simple combo clock which displays time as well as date on your websites and blogs.

Add-Clock-WidgetTime value is money! Yes! Our time is precious for us and you never get back the time already gone. Accordingly, we plan our day to day life so that not a fraction of second would become wasteful unexpectedly.

Imagine, if your blog or site visitors would be able to see the time and date while reading your articles and posts. Therefore, we come with a simple dynamic Clock widget which can be added to your blog or website for displaying Time and Date with the help of some CSS and JavaScript codes.

How to Display Time and Date on your site

Following steps will help you to display clock on your blog or website.

Step-1:

Log in to Blogger account using your Gmail as username and password.

Step-2:

Navigate the layout page of your blog.

Step-3:

Click on Add a Gadget and once you find the HTML/JavaScript (Add third-party functionality or other code to your blog) widget, click on the blue plus sign symbol to add it to your blog’s layout.

Step-4:

Now, copy and paste the following CSS and JavaScript codes into the content field and leave the title blank or give it a name as you want to display.

<!-- SWT Clock START -->
<style>
.timebox {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000;
font-size: 12px;
text-decoration: none;
background-color: gainsboro;
border-top: 1px solid #0D89D5;
border-left: 5px solid #0D89D5;
border-right: 5px solid #0D89D5;
border-bottom: 1px solid #0D89D5;
}
</style>
<center><a
href="http://superwebtricks.com/" rel="dofollow" target="_blank"><img
src="http://goo.gl/whAnfb" border="0" style="position: fixed; top: 1%; left: 2%;" />
</a><div
id="swtClock" class="timebox" title="Powered by Showeblogin">
</div><a
href="http://superwebtricks.com/" rel="dofollow" target="_blank" ><img
src="http://img.superwebtricks.com/files/69.png" border="0" style="position: fixed; bottom: 2%; right: 1%;" />
</a></center><div
style='float:Right;font-size:5px;'><a
href="http://www.superwebtricks.com/blogger-beginner-guide/display-time-date-clock-widget/" rel="dofollow" target="_blank" title="Get It for Your Site">Credit</a>
<script type="text/javascript" src="http://img.superwebtricks.com/files/swtClock.js"></script></div>
<!-- SWT Clock END -->

Step-5:

Finally, save the widget pop-up and drag the same where you want to display the clock and also save arrangement on layout page.

Enjoy!

Shortlink: http://www.superwebtricks.com/?p=507 Free Technical Help
If you don't want to miss our daily tutorials then you may Subscribe to Showeblogin via Email | Facebook | Twitter | and Google Plus
Home»Blogging»Blogger Blog»Tips and Tricks»Widgets»How to Display Free Clock widgets on your blogs or websites
Top