Cara Membuat Script Back To Top | back to top adalah sebuah link yang dibuat untuk memudahkan pengunjung untuk memposisikan tampilan layarnya ke posisi paling atas. Biasanya para pengunjung akan membaca sampai bawah postingan kita, bahkan ada pula yang lebih kebawah lagi karena membaca komentar - komentar yang ada.Coba bayangkan bila komentar kita sampai puluhan bahkan ada yang sampai seratus atau lebih. Pastinya anda akan capek memutar mouse atau menggeser scroll. Dengan bantuan script atau yang sering di sebut Back To Top semua itu akan berbeda. Hanya dengan satu klik posisi layar kita akan secara otomatis kembali ke atas (paling atas).
Bagaimana ? tertarik untuk mencobanya ?? pastinya !! karena script ini tidak memberatkan loading blog anda kok. Berikut adalah cara membuat back to top
<a id='top-nav' title='kembali ke atas'/>
<script type='text/javascript'>
//<![CDATA[
$(window).scroll(function() {
if($(this).scrollTop() > 600) {
$('#top-nav').fadeIn();
} else {
$('#top-nav').fadeOut();
}
});
$('#top-nav').click(function() {
$('html, body').animate({scrollTop:0}, 1000);
return false;
});
//]]></script>
<script type='text/javascript'>
//<![CDATA[
$(window).scroll(function() {
if($(this).scrollTop() > 600) {
$('#top-nav').fadeIn();
} else {
$('#top-nav').fadeOut();
}
});
$('#top-nav').click(function() {
$('html, body').animate({scrollTop:0}, 1000);
return false;
});
//]]></script>
Letakkan kode di atas tepat dibawah </footer> kemudian copy kode di bawah ini
a#top-nav{display:none;width:38px;height:138px;position:fixed;bottom:56px;right:0;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyQ8VPCi-S4NfO_k6BUiD56z_3d7R02aWiMhA1rjSGMzpwtI6x2PkX3O9V4Q5ZBIFtG2zf1JgJIVV2o6TQTwmSUde4RtnARixFbBr34KpjLkQNWvEvOuzw185WC-SkaMm8388ZU5JkF1w/s1600/return-top.png);background-position:0 0;background-repeat:no-repeat;cursor:pointer}
a#top-nav:hover {background-position: -38px 0;}
a#top-nav:hover {background-position: -38px 0;}
Kemudian taruh tepat diatas ]]></b:skin> Ganti yang warna biru sesuei keinginan anda.
600 = munculnya gambar dari jarak paling atas
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyQ8VPCi-S4NfO_k6BUiD56z_3d7R02aWiMhA1rjSGMzpwtI6x2PkX3O9V4Q5ZBIFtG2zf1JgJIVV2o6TQTwmSUde4RtnARixFbBr34KpjLkQNWvEvOuzw185WC-SkaMm8388ZU5JkF1w/s1600/return-top.png = Gambar yang akan muncul
Semoga dengan membuat Back To Top blog anda akan semakin banyak pengunjungnya. Bila kode di atas tidak bekerja mohon kasih tau saya di komentar. terima kasih sudah berkunjung.
kalau ada widget back to top ini bisa bermanfaat untuk mempermudah kita dalam mempercepat skrol dengan sekali klik. tapi ternyata untuk memasang nya diblog cukup rumit :D
BalasHapushehehe.. agk rumit tp mnfaatnya mbak..
Hapusdemi kenyamann pngunjung
iya benar juga ya. Pengunjung akan lebih mudah dalam menavigasi situs jika ada widget back to top. sepertinya bisa dicoba nich :)
Hapussilahkan... :d mudah"n bisa mmbantu :))
Hapusback to top memang sangat berguna, saya sudah memasangnya di blog walau berbeda kode mungkin dengan yang ini :)
BalasHapusbrbeda tp 1 tujuan gan hehehe..
Hapusmksh udh mmpir
hehe back to top ini sebenarnya sangat keren, namun blog saya tidak dapat terapkan, karena blog saya ada pasang sliding artikel terkait. hhehe mungkin lain waktu butuh hehehe.. simpan dulu ya master
BalasHapuskalau saya lihat memang begitu agan wati :D secara fungsi penerapanya memang sama :D coba nanti dibuat bareng slidenya dan back to topnya hehehe..
Hapus