March 31, 2014

Weebly Tricks #45 - Elegant Digital Clock

Posted by Domz at 3/31/2014

Add a Digital clock to Weebly



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">

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>

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!

Get email updates and more access! (Free)
Email *
email marketing by activecampaign


If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to my regular Email Updates. Subscribe Now!

...

3 comments:

 

© 2014. All Rights Reserved | My Weebly Tricks | Template by Blogger Widgets

Home | | Privacy Policy | Top