Home Kunto Aan Yopi Wahyudi Jerry

Home > widget > Cara Membuat Gambar Berputar Seperti Jam Pada Blog

Cara Membuat Gambar Berputar Seperti Jam Pada Blog

Posted on Selasa, 21 Februari 2012 by Cowok Ipa 3

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"> <br /> <br />     * {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;} <br /> <br />     </style><script src="http://generation-platinum.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"> <br /> <br />     </script><script type="text/javascript"> <br /> <br />     $(document).ready(function() {setInterval( function() {var seconds = new Date().getSeconds();var sdegree = seconds *<span style="color: #444444;"> 6</span>; <br /> <br />     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}); <br /> <br />     }, 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 );}); <br /> <br />     </script><ul id="clock">
<li id="sec"><div class="details">
 <br /> <br />     <img src="<span style="color: #4c1130;">MASUKAN URL GAMBAR</span>" /></div>
<br /> <br />     </li>
<br /> <br />     </ul>

3. Ganti kode dengan url gambar anda dan simpan.

Created By: Wahyudi permana darlis

Category Article widget

Tweet

What's on Your Mind...