Free Clock Widget 2024: You may display clock widget in your blogger blog or WordPress website. 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 post. This is very simple to add a simple clock widget in your blogger blog or WordPress website without any plugin.
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.
Display Clock Widget on WordPress Website
To display a simple digital clock on your website, you have to just copy and paste these code into your site.
Here is the demo for Clock Widget:
You may copy all codes (JavaScript, CSS and HTML) in a single place where you want to display your clock or follow the below mentioned step-by-step guide.
JavaScript Code for Clock Widget
Following are the hosted JavaScript code, you have to paste this in your site. If you are using WordPress then paste these codes into either footer.php or header.php file.
<script type="text/javascript" src="https://www.superwebtricks.com/wp-content/uploads/clock.js.txt"></script>CSS Code for Clock Widget
Following are the CSS code to display clock widget in center. Additionally, you may customize the CSS codes as per your preferences like text and background color, font size, and border etc.
<style>
#swtClock {text-align: center;
}
</style>In the above code we have just used text-align to display clock in center of widget.
HTML Code for Clock Widget
Paste this code where you want to display your clock.
<div id="swtClock"></div><div
style='float:Right;font-size:5px;'><a
href="https://www.superwebtricks.com/display-time-date-clock-widget/" target="_blank" title="Powered by Showeblogin">Clock</a></div>Note: Last div tag is used to give credit to this website. However, if you don’t want to give any credit, you may not need to use the second div code.
Just copy this code to display clock on your website:
<div id="swtClock"></div>Now, you will see the digital clock on your website. Enjoy!
If you have any problem, please feel free to contact for help.
How to Display Time and Date on Blogger
Following steps will help you to display clock on your blog or website.
Step-1 (Log on to Blogger.com): Log in to Blogger.com 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.
<div id="swtClock"></div><div
style='float:Right;font-size:5px;'><a
href="https://www.superwebtricks.com/display-time-date-clock-widget/" target="_blank" title="Powered by Showeblogin">Clock</a></div><style>
#swtClock {text-align: center;
}
</style><script type="text/javascript" src="https://www.superwebtricks.com/wp-content/uploads/clock.js.txt"></script>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.