Blog Personal tentang tips Blogging dan Internet

Memasang Back To Top Button Pada Blog

Back To Top Button
Memasang back to top button sangat penting agar memudahkan pengunjung, bila sebelumnya Saya share tentang Membuat Back To Top Unik Dengan Cacing. Kali ini saya share back to top button sederhana. Pada versi ada agak sedikit berbeda, yaitu ada penambahan efek smoothing.

Cara Memasang Back To Top

1. Template Anda harus sudah terpasang jQuery Libary, jika belum pasang jQuery ini diatas kode </head>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
2. Simpan kode ini diatas kode ]]></b:skin> atau </style>

/*Back To Top*/
#top{background-color:#444;margin:0;padding:10px;border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;position:fixed;bottom:10px;right:10px;cursor:pointer;display:none;}
#top:hover{background-color:#E73138}
3. Kemudian simpan kode ini diatas kode </body>

<a href='#' id='top'><img alt='Back To Top' src='http://4.bp.blogspot.com/-ifgZkuwnPnE/U33PmO8aLpI/AAAAAAAAAoY/CXnILaXEP88/s1600/btp.png'/></a>
<script type='text/javascript'>
//<![CDATA[
//Scroll Top
(function(a){a(window).scroll(function(){if(a(this).scrollTop()>280){a("#top").removeAttr("href");a("#top").fadeIn()}else{a("#top").fadeOut()}});a(function(){a("#top").click(function(){a("html, body").animate({scrollTop:0},"slow");return false})})})(jQuery);
//]]>
</script>

Berlangganan : Masukan e-mail Anda untuk mendapatkan kiriman artikel terbaru dari Kang Mousir langsung di pesan kotak masuk.

feedburner

3 Komentar untuk "Memasang Back To Top Button Pada Blog"

Faruki Vackoth

oke mantap gan.....
ijin copas yah

Ichwan Jamiel

Guud bro :D ane pakai ya ;) oh iya, kan kalo sebelum di klik warna merah tuh, diganti kodenya yang mana ya buat ganti warna ?thx

Silakan berkomentar sesuai dengan topik. Jangan menyisipkan link pada komentar dan jangan sampai komentar Anda masuk komentar SPAM.

Jangan salahkan Saya bila komentar Anda dihapus !

Klik emoticon : :) :D :( :-o @@, :s :wow: 8) :x :P :| ;) :lol: :oops: :cry: :evil: :twisted: :roll: :!: :?: :idea: :arrow: :mrgreen: :-d