March 29, 2014

Weebly Tricks #44 - Best Analog Clocks from CoolClock

Posted by Domz at 3/29/2014

Best Analog Clocks for Weebly sites.


CoolClock has the best analog clocks you can insert to your Weebly site. With more than 15 types of design, I'm sure you will adore them. You can actually get clock widgets from other websites but these collections are premium types and free of any ads. You can insert multiple clocks on one page with any GMT you specified. Keep them as large as your page or tiny for your sidebar it's up to you!








1. First, you need to download the following items. To do that, just right click on them and choose "save link as".

excanvas.js
coolclock.js
moreskins.js

2. Now, upload those three files by going to Design > Edit HTML/CSS > Add new files and select all of them. Save your template.

3. Paste the following to your site's <head> (<head> tips here):

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js?ver=3.4.2"></script>
<!--[if IE]><script type="text/javascript" src="http://myweeblytricksdemo.weebly.com/files/theme/excanvas.js"></script><![endif]-->
<script type="text/javascript" src="http://myweeblytricksdemo.weebly.com/files/theme/coolclock.js"></script>
<script type="text/javascript" src="http://myweeblytricksdemo.weebly.com/files/theme/moreskins.js"></script>

Change the lines in green color with your site address.

4. Go to the page you want to insert an analog clock and paste the following sample code:

<canvas id="s11" class="CoolClock:Disc:150:noSeconds:-7"></canvas>

From the above code, there are only five values we need to modify which is as follows:

Canvas ID: You can simply insert any value but remember to keep it unique from others.
Style Type: You can choose from swissRail, chunkySwiss, chunkySwissOnBlack, fancy, machine, simonbaird_com, classic, modern, simple, securephp, Tes2, Lev, Sand, Sun, Tor, Cold, Babosa, Tumb, Stone, Disk, watermelon
Clock Radius: Specify the size of your clock, by default it is 85.
Secondhand Visibility (optional): If you don't want to show the secondhand simply remove the "noSeconds".
GMTOffset (optional): If you don't specify the value than it shows your local time. Insert value to indicate hours behind GMT.

Careful with the spelling and follow the capitalization indicated on each value like "tor" is not "Tor". Each class value is separated by colon (:). You can simply remove any value if not necessary or unspecified. BUT NEVER DELETE THE COLONS that separates them, only the value inside it.

You're done! Questions and comments please write below. Enjoy your Clock? Like us on Facebook or subscribe by email to get the latest tutorials for your Weebly site.

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!

...

0 comments:

Have any question? Feel Free To Post Below:

 

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

Home | | Privacy Policy | Top