What is an Analog Clock?
H5N1 clock or sentinel is labeled equally "Analog" when it has hours marked from 1 to 12 in addition to has 3 moving hands to demonstrate minute, hr in addition to seconds. Its basic purpose is to display the time. The divergence betwixt an analog clock in addition to a digital clock is that, digital clock shows the fourth dimension using numbers non hands.
How to add together an Analog Clock inwards Blogger?
Before nosotros jump to our tutorial, you lot would similar to encounter analog clock widget inwards alive action, thus instruct to the live preview.
To Add a beautiful analog clock inwards Blogger carefully apply the next instructions on your blog.
To Add a beautiful analog clock inwards Blogger carefully apply the next instructions on your blog.
Firstly, you lot demand to install the analog clock scripts to your weblog for that instruct to Blogger >> Template >> Edit HTML >> search for the </head> tag in addition to only to a higher house the it glue the following
<script type='text/javascript'>
/*<![CDATA[*/
// MBL Analog Clock
initLocalClocks();
setUpMinuteHands();
component initLocalClocks() {
// Get the local fourth dimension using JS
var appointment = novel Date;
var seconds = date.getSeconds();
var minutes = date.getMinutes();
var hours = date.getHours();
// Create an object alongside each mitt in addition to it's angle inwards degrees
var hands = [
{
hand: 'hours',
angle: (hours * 30) + (minutes / 2)
},
{
hand: 'minutes',
angle: (minutes * 6)
},
{
hand: 'seconds',
angle: (seconds * 6)
}
];
// Loop through each of these hands to prepare their angle
for (var j = 0; j < hands.length; j++) {
var elements = document.querySelectorAll('.' + hands[j].hand);
for (var k = 0; k < elements.length; k++) {
elements[k].style.webkitTransform = 'rotateZ('+ hands[j].angle +'deg)';
elements[k].style.transform = 'rotateZ('+ hands[j].angle +'deg)';
// If this is a infinitesimal hand, banknote the seconds seat (to calculate infinitesimal seat later)
if (hands[j].hand === 'minutes') {
elements[k].parentNode.setAttribute('data-second-angle', hands[j + 1].angle);
}
}
}
}
component YourTime() {
// Get the local fourth dimension using JS
//var appointment = novel Date;
var hours = document.getElementById("hours_in").value;
var minutes = document.getElementById("minutes_in").value;
var seconds = document.getElementById("seconds_in").value;
document.getElementById('scy').style.animation='rotate 60s infinite steps(60)';
// Create an object alongside each mitt in addition to it's angle inwards degrees
var hands = [
{
hand: 'hours_y',
angle: (hours * 30) + (minutes / 2)
},
{
hand: 'minutes_y',
angle: (minutes * 6)
},
{
hand: 'seconds_y',
angle: (seconds * 6)
}
];
// Loop through each of these hands to prepare their angle
for (var j = 0; j < hands.length; j++) {
var elements = document.querySelectorAll('.your_time .' + hands[j].hand);
for (var k = 0; k < elements.length; k++) {
elements[k].style.webkitTransform = 'rotateZ('+ hands[j].angle +'deg)';
elements[k].style.transform = 'rotateZ('+ hands[j].angle +'deg)';
1
if (hands[j].hand === 'minutes_y') {
elements[k].parentNode.setAttribute('data-second-angle', hands[j + 1].angle);
}
}
}
}
/*
* Set a timeout for the starting fourth dimension infinitesimal mitt possess (less than 1 minute), thus rotate it every infinitesimal after that
*/
component setUpMinuteHands() {
// Find out how far into the infinitesimal nosotros are
var containers = document.querySelectorAll('.minutes-container');
var secondAngle = containers[0].getAttribute("data-second-angle");
if (secondAngle > 0) {
// Set a timeout until the halt of the electrical current minute, to motion the hand
var delay = (((360 - secondAngle) / 6) + 0.1) * 1000;
setTimeout(function() {
moveMinuteHands(containers);
}, delay);
}
}
/*
* Do the starting fourth dimension minute's rotation
*/
component moveMinuteHands(containers) {
for (var i = 0; i < containers.length; i++) {
containers[i].style.webkitTransform = 'rotateZ(6deg)';
containers[i].style.transform = 'rotateZ(6deg)';
}
// Then proceed alongside a lx 2d interval
setInterval(function() {
for (var i = 0; i < containers.length; i++) {
if (containers[i].angle === undefined) {
containers[i].angle = 12;
} else {
containers[i].angle += 6;
}
containers[i].style.webkitTransform = 'rotateZ('+ containers[i].angle +'deg)';
containers[i].style.transform = 'rotateZ('+ containers[i].angle +'deg)';
}
}, 60000);
}
//----------------------------------------------------------
/*]]>*/
</script>
After adding the script, the side past times side matter you lot demand to add together is the CSS codes thus directly over again inwards Template >> search for ]]></b:skin> tag in addition to only to a higher house it glue the next code:
.label {
background: #fff;
border-radius: 0.3em;
color: #646464;
font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro, 'Myriad Pro', Helvetica, Arial, sans-serif;
font-size: 1em;
font-weight: bold;
text-transform: uppercase;
padding: 1em 1em 0.6em;
position: absolute;
top: -4em;
left: 50%;
transform: translate(-50%, 0);
box-shadow: 0 7px 15px rgba(0, 0, 0, 0.2);
}
.label_y {
background: #fff;
border-radius: 0.3em;
color: #646464;
font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro, 'Myriad Pro', Helvetica, Arial, sans-serif;
font-size: 1em;
font-weight: bold;
text-transform: uppercase;
padding: 1em 1em 0.6em;
position: absolute;
top: -4em;
left: 50%;
transform: translate(-50%, 0);
box-shadow: 0 7px 15px rgba(0, 0, 0, 0.2);
}
.clock_local {
border-radius: 50%;
background: #fff url(http://mybloggerlab.com/Images/clock.svg) no-repeat center;
background-size: 88%;
height: 300px;
width: 300px;
float: left;
position: relative;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}
.clock_local2 {
border-radius: 50%;
background: #bae2f6 url(http://mybloggerlab.com/Images/clock2.svg) no-repeat center;
background-size: 88%;
height: 300px;
width: 300px;
float: left;
margin-left: 50px;
position: relative;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}
.clock_local::after {
background: red;
border-radius: 50%;
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 4%;
height: 4%;
z-index: 10;
}
.clock_local2::after {
background: red;
border-radius: 50%;
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 4%;
height: 4%;
z-index: 10;
}
.minutes-container,
.hours-container,
.seconds-container,
.seconds-container_y {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.hours {
background: #000;
height: 20%;
left: 48.75%;
position: absolute;
top: 30%;
transform-origin: 50% 100%;
width: 2.5%;
}
.minutes {
background: #000;
height: 40%;
left: 49%;
position: absolute;
top: 10%;
transform-origin: 50% 100%;
width: 2%;
}
.seconds {
background: #dc0000;
height: 45%;
left: 49.5%;
position: absolute;
top: 14%;
transform-origin: 50% 80%;
width: 1%;
z-index: 8;
}
.hours_y {
background: #000;
height: 20%;
left: 48.75%;
position: absolute;
top: 30%;
transform-origin: 50% 100%;
width: 2.5%;
}
.minutes_y {
background: #000;
height: 40%;
left: 49%;
position: absolute;
top: 10%;
transform-origin: 50% 100%;
width: 2%;
}
.seconds_y {
background: #dc0000;
height: 45%;
left: 49.5%;
position: absolute;
top: 14%;
transform-origin: 50% 80%;
width: 1%;
z-index: 8;
}
@keyframes rotate {
100% {
transform: rotateZ(360deg);
}
}
.hours-container {
animation: rotate 43200s infinite linear;
}
.minutes-container {
animation: rotate 3600s infinite steps(60);
}
.seconds-container {
animation: rotate 60s infinite steps(60);
}
.skin2 {
border-radius: 50%;
background: #fff url(http://mybloggerlab.com/Images/clock4.svg) no-repeat center;
background-size: 88%;
height: 200px;
width: 200px;
float: left;
position: relative;
margin: 20px;
box-shadow: 0 7px 15px rgba(0, 0, 0, 0.2);
}
.skin3 {
border-radius: 50%;
background: #fff url(http://mybloggerlab.com/Images/clock5.svg) no-repeat center;
background-size: 88%;
height: 200px;
width: 200px;
float: left;
position: relative;
margin: 20px;
box-shadow: 0 7px 15px rgba(0, 0, 0, 0.2);
}
.skin4 {
border-radius: 50%;
background: #fff url(http://mybloggerlab.com/Images/clock6.svg) no-repeat center;
background-size: 88%;
height: 200px;
width: 200px;
float: left;
position: relative;
margin: 20px;
box-shadow: 0 7px 15px rgba(0, 0, 0, 0.2);
}
.skin2::after {
background: red;
border-radius: 50%;
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 4%;
height: 4%;
z-index: 10;
}
.skin3::after {
background: red;
border-radius: 50%;
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 4%;
height: 4%;
z-index: 10;
}
.skin4::after {
background: red;
border-radius: 50%;
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 4%;
height: 4%;
z-index: 10;
}
.label {
background: #fff;
border-radius: 0.3em;
color: #646464;
font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro, 'Myriad Pro', Helvetica, Arial, sans-serif;
font-size: 1em;
font-weight: bold;
text-transform: uppercase;
padding: 1em 1em 0.6em;
position: absolute;
top: -4em;
left: 50%;
transform: translate(-50%, 0);
box-shadow: 0 7px 15px rgba(0, 0, 0, 0.2);
}
.label_y {
background: #fff;
border-radius: 0.3em;
color: #646464;
font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro, 'Myriad Pro', Helvetica, Arial, sans-serif;
font-size: 1em;
font-weight: bold;
text-transform: uppercase;
padding: 1em 1em 0.6em;
position: absolute;
top: -4em;
left: 50%;
transform: translate(-50%, 0);
box-shadow: 0 7px 15px rgba(0, 0, 0, 0.2);
}
.clock_local {
border-radius: 50%;
background: #fff url(http://mybloggerlab.com/Images/clock.svg) no-repeat center;
background-size: 88%;
height: 300px;
width: 300px;
float: left;
position: relative;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}
.clock_local2 {
border-radius: 50%;
background: #bae2f6 url(http://mybloggerlab.com/Images/clock2.svg) no-repeat center;
background-size: 88%;
height: 300px;
width: 300px;
float: left;
margin-left: 50px;
position: relative;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}
.clock_local::after {
background: red;
border-radius: 50%;
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 4%;
height: 4%;
z-index: 10;
}
.clock_local2::after {
background: red;
border-radius: 50%;
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 4%;
height: 4%;
z-index: 10;
}
.minutes-container,
.hours-container,
.seconds-container,
.seconds-container_y {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.hours {
background: #000;
height: 20%;
left: 48.75%;
position: absolute;
top: 30%;
transform-origin: 50% 100%;
width: 2.5%;
}
.minutes {
background: #000;
height: 40%;
left: 49%;
position: absolute;
top: 10%;
transform-origin: 50% 100%;
width: 2%;
}
.seconds {
background: #dc0000;
height: 45%;
left: 49.5%;
position: absolute;
top: 14%;
transform-origin: 50% 80%;
width: 1%;
z-index: 8;
}
.hours_y {
background: #000;
height: 20%;
left: 48.75%;
position: absolute;
top: 30%;
transform-origin: 50% 100%;
width: 2.5%;
}
.minutes_y {
background: #000;
height: 40%;
left: 49%;
position: absolute;
top: 10%;
transform-origin: 50% 100%;
width: 2%;
}
.seconds_y {
background: #dc0000;
height: 45%;
left: 49.5%;
position: absolute;
top: 14%;
transform-origin: 50% 80%;
width: 1%;
z-index: 8;
}
@keyframes rotate {
100% {
transform: rotateZ(360deg);
}
}
.hours-container {
animation: rotate 43200s infinite linear;
}
.minutes-container {
animation: rotate 3600s infinite steps(60);
}
.seconds-container {
animation: rotate 60s infinite steps(60);
}
.skin2 {
border-radius: 50%;
background: #fff url(http://mybloggerlab.com/Images/clock4.svg) no-repeat center;
background-size: 88%;
height: 200px;
width: 200px;
float: left;
position: relative;
margin: 20px;
box-shadow: 0 7px 15px rgba(0, 0, 0, 0.2);
}
.skin3 {
border-radius: 50%;
background: #fff url(http://mybloggerlab.com/Images/clock5.svg) no-repeat center;
background-size: 88%;
height: 200px;
width: 200px;
float: left;
position: relative;
margin: 20px;
box-shadow: 0 7px 15px rgba(0, 0, 0, 0.2);
}
.skin4 {
border-radius: 50%;
background: #fff url(http://mybloggerlab.com/Images/clock6.svg) no-repeat center;
background-size: 88%;
height: 200px;
width: 200px;
float: left;
position: relative;
margin: 20px;
box-shadow: 0 7px 15px rgba(0, 0, 0, 0.2);
}
.skin2::after {
background: red;
border-radius: 50%;
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 4%;
height: 4%;
z-index: 10;
}
.skin3::after {
background: red;
border-radius: 50%;
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 4%;
height: 4%;
z-index: 10;
}
.skin4::after {
background: red;
border-radius: 50%;
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 4%;
height: 4%;
z-index: 10;
}
After adding the JavaScript in addition to CSS codes its fourth dimension to insert HTML codes that volition play cardinal role inwards displaying your analog clock, nosotros bring developed dissimilar themes for clocks to jibe everyone's demand in addition to taste.
Now next are the clocks along alongside at that spot HTML code which tin travel used to display clocks on whatever component of your blog. Go to Blogger >> Layout >> Add a gadget >> Add HTML/JavaScript and glue whatever ane of the next code:
Style 1:
<div class="clock_local2">
<section class="label">Local time</section>
<div class="hours-container">
<div class="hours"></div>
</div>
<div class="minutes-container">
<div class="minutes"></div>
</div>
<div class="seconds-container">
<div class="seconds"></div>
</div>
</div>
Style 2:
<div class="clock_local">
<section class="label">Local time</section>
<div class="hours-container">
<div class="hours"></div>
</div>
<div class="minutes-container">
<div class="minutes"></div>
</div>
<div class="seconds-container">
<div class="seconds"></div>
</div>
</div>
Style 3:
<div class="skin2">
<div class="hours-container">
<div class="hours"></div>
</div>
<div class="minutes-container">
<div class="minutes"></div>
</div>
<div class="seconds-container">
<div class="seconds"></div>
</div>
</div>
Style 4:
<div class="skin3">
<div class="hours-container">
<div class="hours"></div>
</div>
<div class="minutes-container">
<div class="minutes"></div>
</div>
<div class="seconds-container">
<div class="seconds"></div>
</div>
</div>
Style 5:
<div class="skin4">
<div class="hours-container">
<div class="hours"></div>
</div>
<div class="minutes-container">
<div class="minutes"></div>
</div>
<div class="seconds-container">
<div class="seconds"></div>
</div>
</div>
Now ane time everything is done press "Save" in addition to you lot bring successfully added a analog clock to your blog. If you lot are proficient alongside CSS, you lot tin customize the appearance of the widget otherwise you lot tin bask the v dissimilar styles that nosotros bring pre-made for non technical users.
We promise this analog clock widget would travel an amazing improver to your weblog or website. Let us know what are your thoughts well-nigh this widget inwards the comments below.
No comments:
Post a Comment