You may display clock widget in your blogger blog. Time 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.

It will be a great help for your reader to see the time while reading your blog. This is very simple to add a simple clock widget in your blogger blog.

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 through clock widget

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

Step-1 (Log on to Blogger.com):

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

Step-2 (Blogger Layout):

Navigate the layout page of your blog.

Step-3 (Add New Gadget):

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 (Paste Code):

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! You have done it for your blog. Now, you see a beautiful clock widget is displayed on the sidebar of your blogger blog.