Cara Membuat Gambar Berputar Seperti Jam Pada Blog

Sering kita menjumpai di blog atau website ada gambar yang berputar seperti jam, nah kali ini saya akan memberikan kodenya untuk membuat gambar berputar di blog.
Langkah- langkahnya seperti ini:
1. Loginlah dulu di Blogger > Tata Letak > Elemen Laman > Klik Tambah Gadget>HTML/Java Scripts..
2. Jika sudah buatlah nama pada widget yang baru ini lalu Copy-Paste kode dibawah ini ke dalam widget HTML/Java Scripts tadi:

<style type="text/css"> * {margin: 0;padding: 0;}#clock {position: relative;width: 300px;height: 300px;margin: 10px auto 0 auto;background: url();list-style: none;}#sec, #min, #hour {position: absolute;width: 331px;height: 220px;top: 0px;left: 100px;}#sec {background: url();z-index: 3;}#min {background: url();z-index: 2;}#hour {background: url();z-index: 1;}p {text-align: center; padding: 10px 0 0 0;} </style><script src="http://generation-platinum.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"> </script><script type="text/javascript"> $(document).ready(function() {setInterval( function() {var seconds = new Date().getSeconds();var sdegree = seconds *<span style="color: #444444;"> 6</span>; var srotate = "rotate(" + sdegree + "deg)";$("#sec").css({"-moz-transform" : srotate, "-webkit-transform" : srotate});},<span style="color: #274e13;"> 1000</span> );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><ul id="clock"><li id="sec"><div class="details"> <img src="<span style="color: #4c1130;">MASUKAN URL GAMBAR</span>" /></div> </li> </ul>

3. Ganti kode dengan url gambar anda dan simpan.

Artikel terkait :