Cara Memasang Widget Jam Analog di Blogger

Cara Memasang Widget Jam Analog di Blogger - Mungkin kalian sering mendengar istilah "Time is Money", tapi kadang tanpa kita sadari kita sering melupakan waktu dan justru membuang waktu dengan percuma tanpa sesuatu yang penting. Oleh karena itu, dengan menambahkan sebuah jam analog klasik yang keren, bisa membuat tampilan blog kamu semakin dinamis sekaligus dapat membantu pengunjung untuk mengingat waktu yang aktual ketika mereka sedang sibuk membaca artikel diblog kita.

Beberapa waktu lalu, ada salah seorang pengunjung blog saya bertanya tentang bagaimana cara membuat dan menambahkan sebuah jam analog klasik di blogger? Nah, pada kesempatan kali ini, saya akan berbagi sedikit tips untuk kalian semua tentang bagaimana cara memasang widget jam analog di blogger dengan mudah.

Apa itu Jam Analog?

Sebuah jam bisa dikatakan analog ketika angka jam terdiri dari 1 sampai 12  atau bisa dibilang menggunakan format sistem 12 jam dan jam analog bergerak menunjukan jam, menit, dan detik secara manual. Jam analog merupakan tampilan dasar sebuah jam. Dan perbedaan antara jam analog dan jam digital yaitu jika jam digital menunjukan waktu menggunakan angka-angka bukan garis.

Cara Memasang Widget Jam Analog di Blogger?

Sebelum kita melihat tutorialnya, ada baiknya jika kalian melihat preview widget jam analog ini terlebih dahulu. Untuk preview silahkan klik live preview.

Bagaiaman, tertarik? Nah, bagi kamu yang penasaran dan ingin mencoba memasang widget jam analog ini di blo kalian. Silahkan ikuti langkah-langkah dibawah ini dengan benar, untuk memasang widget jam analog di blog kalian.

Pertama, kita harus menambahkan script javascript untuk dapat memasang widget jam analog ini di blog. Untuk details lengkap script javascript ini, bisa dilihat dibawah ini. Kalian bisa menambahkan script javascript berikut ini dan meletakannya di atas kode </head> didalam template blog kalian.

<script type='text/javascript'>
/*<![CDATA[*/
// Analog Clock
initLocalClocks();
setUpMinuteHands();
function initLocalClocks() {
  // Get the local time using JS
  var date = new Date;
  var seconds = date.getSeconds();
  var minutes = date.getMinutes();
  var hours = date.getHours();


  // Create an object with each hand and it's angle in 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 set 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 minute hand, note the seconds position (to calculate minute position later)
        if (hands[j].hand === 'minutes') {
          elements[k].parentNode.setAttribute('data-second-angle', hands[j + 1].angle);
        }
    }
  }
}

function YourTime() {
  // Get the local time using JS
  //var date = new 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 with each hand and it's angle in 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 set 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 first minute hand movement (less than 1 minute), then rotate it every minute after that
 */
function setUpMinuteHands() {
  // Find out how far into the minute we are
  var containers = document.querySelectorAll('.minutes-container');
  var secondAngle = containers[0].getAttribute("data-second-angle");
  if (secondAngle > 0) {
    // Set a timeout until the end of the current minute, to move the hand
    var delay = (((360 - secondAngle) / 6) + 0.1) * 1000;
    setTimeout(function() {
      moveMinuteHands(containers);
    }, delay);
  }
}
/*
 * Do the first minute's rotation
 */
function moveMinuteHands(containers) {
  for (var i = 0; i < containers.length; i++) {
    containers[i].style.webkitTransform = 'rotateZ(6deg)';
    containers[i].style.transform = 'rotateZ(6deg)';
  }
  // Then continue with a 60 second 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);
}
//------------WWW.INFAMOUS.WEB.ID------------------

/*]]>*/
</script>

Setelah kita menambahkan script javascript diatas, langkah berikutnya kamu juga harus menambahkan kode css untuk mempercantik tampilan jam analog diblog kita. Kamu bisa meletakkan kode css berikut ini dan paste-kan di atas kode ]]></b:skin> didalam template blog kalian.

.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;
}

Nah, setelah kita manambahkan kode javascript dan css, sekarang saatnya kita menambahkan kode html yang akan menampilkan jam analog diblog kalian. Disini saya memiliki lima tampilan warna dan design jam analog yang berbeda, kalian bisa memilih sesuai dengan selera dan kecocokan dengan blog kalian.

Untuk menampilkan jam analog di blog kalian menggunakan kode html, kalian bisa meletakkan kode html ini dimanapun dibagian blog kalian. Untuk menambahkan jam analog di blog kalian bisa klik layout > tambahkan gadget baru > html/javascript dan paste kode html jam analog dibawah ini didalam konten box.

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

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

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

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

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

Nah, jika semua sudah selesai, jangan lupa untuk menyimpan widget kalian. Jika tidak terdapat error, maka kalian bisa langsung melihat tampilan widget jam analog ini blog kalian. Nah, jika kamu memiliki kemampuan yang baik dibidang css, kamu juga bisa melakukan customize tampilan jam analog ini dibagian kode css untuk mendapatkan tampilan yang kalian inginkan.

Demikian artikel saya kali ini tentang Cara Memasang Widget Jam Analog di Blogger. Jika kalian memiliki masalah dengan penerapan widget ini, silahkan ajukan pertanyaan kalian melalui kotak komentar dibawah ini. Selamat mencoba!