What is an Analog Clock?
Influenza A virus subtype H5N1 clock or picket is labeled every bit "Analog" when it has hours marked from 1 to 12 together with has 3 moving hands to exhibit minute, threescore minutes together with seconds. Its basic purpose is to display the time. The deviation betwixt an analog clock together with a digital clock is that, digital clock shows the fourth dimension using numbers non hands.
How to add together an Analog Clock inward Blogger?
Before nosotros fountain to our tutorial, you lot would similar to come across analog clock widget inward alive action, thus larn to the live preview.
To Add a beautiful analog clock inward Blogger carefully apply the next instructions on your blog.
To Add a beautiful analog clock inward Blogger carefully apply the next instructions on your blog.
Firstly, you lot demand to install the analog clock scripts to your weblog for that larn to Blogger >> Template >> Edit HTML >> search for the </head> tag together with merely higher upwards the it glue the following
<script type='text/javascript'>
/*<![CDATA[*/
// MBL Analog Clock
initLocalClocks();
setUpMinuteHands();
constituent initLocalClocks() {
// Get the local fourth dimension using JS
var engagement = novel Date;
var seconds = date.getSeconds();
var minutes = date.getMinutes();
var hours = date.getHours();
// Create an object alongside each manus together with it's angle inward 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 laid upwards 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);
}
}
}
}
constituent YourTime() {
// Get the local fourth dimension using JS
//var engagement = 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 manus together with it's angle inward 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 laid upwards 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 kickoff infinitesimal manus own (less than 1 minute), thus rotate it every infinitesimal after that
*/
constituent 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 terminate of the electrical flow minute, to movement the hand
var delay = (((360 - secondAngle) / 6) + 0.1) * 1000;
setTimeout(function() {
moveMinuteHands(containers);
}, delay);
}
}
/*
* Do the kickoff minute's rotation
*/
constituent moveMinuteHands(containers) {
for (var i = 0; i < containers.length; i++) {
containers[i].style.webkitTransform = 'rotateZ(6deg)';
containers[i].style.transform = 'rotateZ(6deg)';
}
// Then hold alongside a threescore 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 affair you lot demand to add together is the CSS codes thus at i time once to a greater extent than inward Template >> search for ]]></b:skin> tag together with merely higher upwards 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 together with CSS codes its fourth dimension to insert HTML codes that volition play telephone commutation role inward displaying your analog clock, nosotros bring developed dissimilar themes for clocks to gibe everyone's demand together with taste.
Now next are the clocks along alongside at that topographic point HTML code which tin travel used to display clocks on whatever constituent of your blog. Go to Blogger >> Layout >> Add a gadget >> Add HTML/JavaScript and glue whatever i 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 i time everything is done press "Save" together with you lot bring successfully added a analog clock to your blog. If you lot are skillful alongside CSS, you lot tin customize the appearance of the widget otherwise you lot tin savour 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 nigh this widget inward the comments below.
Comments