Jumat, 15 Juni 2012

Tutorial ini saya dapat dari blog teman hehee. Saya suka yang back top seperti ini. Apalagi back top nya yang bergambar hehee. Ini back top nya mempunyai efek bounce. Penasaran ?
Cara membuatnya :

1.   Login ke blogger, kemudian pilih Template, lalu Edit HTML
2.   Jangan lupa centang Expand Template Widget
3.   Lalu cari kode ]]></b:skin> dengan CTRL +F supaya mudah
4.   Kemudian copy paste kan kode dibawah ini tepat diatas kode ]]></b:skin>
#toTop { text-align:center; position:fixed; bottom:0px; right:10px; cursor:pointer; display:none; color:#000; font-family:verdana; font-size:11px;}
5.   Kemudian cari kode </head>
6.   Copy kan kode dibawah ini tepat dibawah 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;#toTop&#39;).fadeIn(); } else { $(&#39;#toTop&#39;).fadeOut(); } });
$(&#39;#toTop &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>
7.   Kemudian simpan template
8.   Heitss masih ada lagi nih, lalu klik Tata Letak di dasbor
9.   kemudian pilih Tambah Gadget dan pilih HTML/.Javascript
10.Lalu copy kan kode dibawah ini :
<div id='toTop'><!-- Back to top animation written by farizemo | edited by ilham mboh --><img src='http://picturestack.com/408/690/3RMToTopyonbijEz.png' style='margin-right:-9px'/></div>
Kemudian di simpan.
Tulisan warna hijau bisa diganti dengan URL gambar yang kamu inginkan.

{ 7 Komentar... read them below or Comment }

  1. udah aku coba,tapi cara masang agar melayarang gimana?

    BalasHapus
  2. aku dah,coba sekali lagi behasil kakak.thanks atas tutorialnya,aku numpang share ya!

    BalasHapus
  3. hahahaha..iya juga ya makasih ya untuk tutorialnya

    BalasHapus
  4. Kakak,banner kaka yang 480 x 60 aku nggak taruh di header ya!
    tapi aku taruh disini

    Jadi maaf ya kak!

    BalasHapus

Jika ingin copy paste artikel ini, jangan lupa sertakan sumbernya ya, hargai usaha admin ^^, Kalau mau komentar jangan yang bersifat menghina maupun mengejek. Tidak sopan tau hahaa. Terima kasih sudah berkunjung ke blog ku. Jangan lupa di follow dan pasang banner ku ya \^^,/

Arsip Blog

Ayat Alkitab

Friend's Banner

Copyright © 2013 David As'Chri ChieLietonga 06 | Robotic Notes | Powered by Blogger

Designed by : Johanes Djogan | Redesignde by : David As'Chri ChieLietonga 06: Cara Membuat Back To Top Dengan Efek Bounce