Header Ads Widget

Responsive Advertisement

Widget Jam Analog Sexy

Monoz 12:26 PM

Biar ga bosen sama widget yang itu-itu aja... kali ini saya buatkan widget jam analog sexy buat di web atau blog pribadi. Widget jam analog menggunakan jQuery sederhana. Widget jam analog ini cukup menarik perhatian pengunjung blog karena selain unik dan menarik widget ini juga sebagai pengingat waktu buat pengunjung blog, seperti yang terlihat pada contoh di postingan artikel ini. Buat yang tertarik monggo disalin kodenya.

Penting !!! ada baiknya sobat blogger mem-backup terlebih dahulu template blog sobat untuk menghindari  hal-hal yang tidak diinginkan dalam menerapkan widget ini.

Cara Pemasangan :
  • Login ke blog sobat...

  • Klik "More Options" selector box kemudian klik "Tata Letak" setelah itu pilih "Add Widget" dan pilih "HTML / Javascript", seperti gambar di bawah ini.





  • Copy-paste kode di bawah ini dan taruh di kotak gadget blog. Silakan sesuaikan beberapa parameter kode tersebut agar sesuai dengan tema blog sobat.
    <div id="clock">
<div id="sec"></div>
<div id="hour"></div>
<div id="min"></div>
</div>
<style type="text/css">
#clock {
position: fixed;
width: 200px;
height: 200px;
bottom: 0;
right: 0;
margin: 20px auto 0 auto;
list-style: none;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-gHnGsvtCcgqAJcH0rgElYcK0J0PuGiR63z_fX3ZTjNo6mIZf6TLLchlwUU5hLXRP2GpxaNTFM27pWGXp-hjYLogkA7e3vhjosua9bSVGnCQ_Ufn7wahJS6zQyahX57o7qmrvnsgMufOj/s1600/Clock.png)no-repeat;
background-size: 100% 100%;
}
#sec, #min, #hour {position: fixed;}

#sec {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp7Aq_9pSOgbKKbWgAOWwGfKMEvljX_TLr-2zOWYb7eVeqrEX_-TBh_SZ-LEtEkDxTQwcMbPj9tmcw1qRclOp-DJThIFy7e8PV8OACT6Q35NSoIIiUtaiKr6mA2axOODtI-TnIpUBlbWuq/s1600/nurse.png)no-repeat;
width: 55px;
height: 150px;
bottom: 24px;
right: 75px;
background-size: 55px 150px;
z-index: 1;
}

#min {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhId0TXZ3knRb1TB0GvENDiUsXojbSr4QuPywEOqGC_oi3ketabRpHH4w1FM7S36qWedchDxEH1z5hS80JV_e2gWBtopkXI5yxRAOOml4n9HcoCLFmXgbeto_3Y7CsHbDjakVFgTe-rC_LI/s1600/min.png)no-repeat;
width: 55px;
height: 150px;
bottom: 24px;
right: 75px;
background-size: 55px 150px;
z-index: 2;
}

#hour {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1vpS-_26ntA7U-9fvCDr0J0uhNl5TDHvSqJZGNt19ITY84mRL-ENt3eMxBvrGhg7SmTdxLq5U7cSFslJZKFvoj4eFMhU54rLxUA83EvA5FqN9LEBr2pn8w2IEWJpzz46HthLM07S8HGzD/s1600/hour.png)no-repeat;
width: 55px;
height: 150px;
bottom: 24px;
right: 75px;
background-size: 55px 150px;
z-index: 3;
}
</style>
<script type="text/javascript">
setInterval(function() {
var seconds = new Date().getSeconds();
var sdegree = seconds * 6;
var srotate = "rotate(" + sdegree + "deg)";
$("#sec").css({
"-moz-transform": srotate,
"-webkit-transform": srotate
});}, 1000);

setInterval(function() {
var hours = new Date().getHours();
var mins = new Date().getMinutes();
var hdegree = hours * 30 + (mins / 2);
var hrotate = "rotate(" + hdegree + "deg)";
$("#hour").css({
"-moz-transform": hrotate,
"-webkit-transform": hrotate
});}, 1000);

setInterval(function() {
var mins = new Date().getMinutes();
var mdegree = mins * 6;
var mrotate = "rotate(" + mdegree + "deg)";
$("#min").css({
"-moz-transform": mrotate,
"-webkit-transform": mrotate
});}, 1000);
</script>

    KETERANGAN :
    • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-gHnGsvtCcgqAJcH0rgElYcK0J0PuGiR63z_fX3ZTjNo6mIZf6TLLchlwUU5hLXRP2GpxaNTFM27pWGXp-hjYLogkA7e3vhjosua9bSVGnCQ_Ufn7wahJS6zQyahX57o7qmrvnsgMufOj/s1600/Clock.png // Gambar latar belakang jam ukuran 300x300 pixel.
    • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp7Aq_9pSOgbKKbWgAOWwGfKMEvljX_TLr-2zOWYb7eVeqrEX_-TBh_SZ-LEtEkDxTQwcMbPj9tmcw1qRclOp-DJThIFy7e8PV8OACT6Q35NSoIIiUtaiKr6mA2axOODtI-TnIpUBlbWuq/s1600/nurse.png // Gambar penunjuk detik ukuran 55x150 pixel.
    • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhId0TXZ3knRb1TB0GvENDiUsXojbSr4QuPywEOqGC_oi3ketabRpHH4w1FM7S36qWedchDxEH1z5hS80JV_e2gWBtopkXI5yxRAOOml4n9HcoCLFmXgbeto_3Y7CsHbDjakVFgTe-rC_LI/s1600/min.png // Gambar penunjuk menit ukuran 55x150 pixel.
    • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1vpS-_26ntA7U-9fvCDr0J0uhNl5TDHvSqJZGNt19ITY84mRL-ENt3eMxBvrGhg7SmTdxLq5U7cSFslJZKFvoj4eFMhU54rLxUA83EvA5FqN9LEBr2pn8w2IEWJpzz46HthLM07S8HGzD/s1600/hour.png // Gambar penunjuk jam ukuran 55x150 pixel.

  • Klik "Save" dan lihat hasilnya...

Pilihan Gambar
  • Jarum Jam

    Link : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1vpS-_26ntA7U-9fvCDr0J0uhNl5TDHvSqJZGNt19ITY84mRL-ENt3eMxBvrGhg7SmTdxLq5U7cSFslJZKFvoj4eFMhU54rLxUA83EvA5FqN9LEBr2pn8w2IEWJpzz46HthLM07S8HGzD/s1600/hour.png

    Link : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0qJZcjzmuJu6mJSiJ__-3ub98toSxE1axutKcUpvzRsYizEpKfGoweclvI-JeKUPi_VOzrlzMTCwM0WZ24NUc9DmP4Zweh5hL6z2fz9gIak1nV6VbTZg5_ljUcchZvuzvNDdnflyx09Fk/s1600/hour-blue.png

  • Jarum Menit

    Link : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhId0TXZ3knRb1TB0GvENDiUsXojbSr4QuPywEOqGC_oi3ketabRpHH4w1FM7S36qWedchDxEH1z5hS80JV_e2gWBtopkXI5yxRAOOml4n9HcoCLFmXgbeto_3Y7CsHbDjakVFgTe-rC_LI/s1600/min.png

    Link : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3tqSEdyIKbtoFxFuNprgQYN-cfO3vuWLnfQGl2u3k1_e88I5YiNb7h3ZH_JYy3lwjQoeb611ZCZ2sDc6j76svdXvBXAstvP18eLNin8HDtC93db_zkPlvM1InlGmyDo_DnacBFZVYR4yN/s1600/min.png

  • Jarum Detik

    Link : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp7Aq_9pSOgbKKbWgAOWwGfKMEvljX_TLr-2zOWYb7eVeqrEX_-TBh_SZ-LEtEkDxTQwcMbPj9tmcw1qRclOp-DJThIFy7e8PV8OACT6Q35NSoIIiUtaiKr6mA2axOODtI-TnIpUBlbWuq/s1600/nurse.png

    Link : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNmpX4vp-uhJ3HrGbdugs9Z2-7EOAFZcx3u_4BU12pu-KLBgc6PoMsO-uFpEsKcHvocfrs2Rvsbtp3XpRd25Ci1Ym4fQkhB8YA15fajAAwjpj7Uw_mLJwDRYpj-Wc9ZHbisfEvVvyKgr5G/s1600/red-hot.png




Oke sobat monozcore jangan lupa meninggalkan jejak komentarnya yaa... biar postingan berikutnya semakin unik dan menarik.. happy blogging...

.: Semoga Bermanfaat :.
Tags:
Monoz

Posted by: Monoz

Post a Comment

0 Comments