Recently, I posted stunning Analog Clocks for your Weebly site, now take a look with this elegant digital clock from tutorialzine. It comes with two themes; light and dark, to match you site. The clock works perfectly and you don't have to edit anything. It also includes the day of the week and an alarm.
1. Download the following JS and CSS simply by right clicking on them and choose "save link as".
digiclock.js
digiclock.css
2. Now upload them by going to Weebly > Design > Edit HTML/ CSS > Add new files and select what you've just downloaded on step 1. Save your template.
3. Proceed to your site's <head> (<head> tips here) and paste the following code:
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.0.0/moment.min.js"></script>
<script src="http://myweeblytricksdemo.weebly.com/files/theme/digiclock.js"></script>
<link rel="stylesheet" type="text/css" href="http://myweeblytricksdemo.weebly.com/files/theme/digiclock.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.0.0/moment.min.js"></script>
<script src="http://myweeblytricksdemo.weebly.com/files/theme/digiclock.js"></script>
<link rel="stylesheet" type="text/css" href="http://myweeblytricksdemo.weebly.com/files/theme/digiclock.css">
Just change the text in red color with your own site address.
4. After configuring your site's <head>, go to your selected page and paste the following HTML code via "embed code" element:
<div id="clock" class="dark">
<div class="display">
<div class="weekdays"></div>
<div class="ampm"></div>
<div class="alarm"></div>
<div class="digits"></div>
</div>
</div>
<div class="display">
<div class="weekdays"></div>
<div class="ampm"></div>
<div class="alarm"></div>
<div class="digits"></div>
</div>
</div>
You can choose whether to have a light or dark theme, simply change the text in green color. Publish your site and be amazed with this simple yet elegant digital clock only from tutorialzine. Oh yeah, the alarm is decoration-only for now. Subscribe via email to get latest updates!
sir how to reduce its size
ReplyDeleteHi Sarmad,
DeletePlease use the forum for proper help. TY.
This was seriously helpful! Thanks Man!
ReplyDelete