Cara Membuat Back To Top Berputar

Bandar Bloger - Kali ini kita akan belajar Membuat Back To Top Berputar, setelah sebelumnya setelah sebelumnya membahas tentang Cara Mengamankan Akun Google dengan Verifikasi 2 Langkah. Pembuatan Back To Top ini sebenarnya Optinal digunakan tapi sebagai Admin tentu akan berusaha menyediakan vasilitas fitur demi kemudahan para pengunjung, mungkin 1 - 2 orang tidak akan membutuhkkan fitur ini tapi yang lain mungkin membutuhkannya.

Pembuatan Back To Top ini tentu sudah banyak yang membahas, bervariasi serta bentuk-bentuknya unik. Tergantung kita mau pilih mana yang sesuai dengan keinginan. Saya rasa cukup Cuap-cuapnya, langsung ajha kita ke cara membuatnya :

Cara Membuat Back To Top Berputar :

Lihat Demo Back To Top Pada Blog Edyn Laskar (<== Klik disini)

1. Pastikan sobat sudah Login keblog
2. Masuk ke Editor HTML dengan cara Pilih menu Template ==> Edit HTML ==> Beri Centang pada Expand Template Widget
3. Copy code Skrypt berikut dan letakan diatas kode </head>
   

   <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'/>
    <script type='text/javascript'>
    $(function() {$(window).scroll(function() { if($(this).scrollTop() &gt; 100) {$(&#39;#BackToTop&#39;).fadeIn();} else {$(&#39;#BackToTop&#39;).fadeOut();}}); $(&#39;#BackToTop &gt; img&#39;).click(function() {$(&#39;body,html&#39;).animate({scrollTop:0},800).animate({scrollTop:25},200).animate({scrollTop:0},150).animate({scrollTop:10},100).animate({scrollTop:0},50);});}); 
   </script>
   

4. Save Template, Lalu buka menu Tata Letak dan tambahkan sebua Widget Baru
5. Copy kode berikut dan letakan kedalam widget yang kita tambahkan tadi
   

   <style> #BackToTop {text-align:center; position:fixed; bottom:0px; right:10px; cursor:pointer;  display:none;} #BackToTop img:hover { -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg);
   -ms-transform:rotate(360deg); 
   -o-transform:rotate(360deg); 
   transform:rotate(360deg); } 
   </style> 
   <div id='BackToTop'> <img alt="Bandar Bloger Top" src='Url gambar Disini' title="" style='margin-right:-9px'/> </div>
   

6. Terakhir Save dan Lihat hasilnya

Warna mera (360deg) adalah Jumlah Putaran, jadi jika ingin berputar 2 kali maka ganti dengan angka 720. Untuk yang warna Biru (Url gambar Disini), ganti dengan Url gambar kreasi sobat. (asal jangan Copy Ikon Back To Top pada Blog ini karena Icon ini khusus untuk orang-2 tertentu, hehe).

Sekian dari saya semoga Trik Cara Membuat Back To Top Berputar ini bisa bermanfaat untuk anda semua. Jangan lupa baca juga artikel lainnya pada Menu Daftar isi.

Terimakasi Sudah Menyimak.
Salam Dariku

Edyn Laskar

Share ke: Facebook Twitter Google+ Linkedin Digg

Title : Cara Membuat Back To Top Berputar
Bandar Bloger - Kali ini kita akan belajar Membuat Back To Top Berputar , setelah sebelumnya setelah sebelumnya membahas tentang Cara Menga...
Rating : 5