Cara Membuat Tombol Back To Top Di Blogger

Tutorial kali ini Blog Pintasku akan memberikan tutorial Cara Membuat Tombol Back To Top Di Blogger, dengan menambahkan fitur tombol back to top itu memudahkan pengunjung untuk kembali ke bagian atas blog, jadi pengunjung tidak perlu repot- repot men-scroll.

Terkadang juga kita sebagai owner blog memerlukan fitur ini jika, membuka artikel yang panjang atau artikel yang memiliki komentar yang banyak kita harus men-down scrool ke bawah terus harus men-scrool kembali ke atas, itu sangatlah memerlukan waktu dan tenaga. Nahh untuk menambahkan tombol back to top itu sangatlah mudah, sobat hanya perlu mengikuti tutorialnya berikut ini.

Cara Menambahkan Tombol Back To Top Di Blogger

1. Masuk ke menu Templates > Edit HTML
2. Jika sudah masuk, sekarang tambahkan jquery pada blog sobat, dengan cara meletakan kode dibawah ini, tepat di atas tag </head>. Jika pada template blog sobat sudah dipasang maka jangan di tambahkan.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

3. Sekarang, letakan kembali script dibawah ini dan letakan juga di bagian atas tag </head>.

<script type='text/javascript'>
$(function() { $(window).scroll(function() {if($(this).scrollTop()&gt;500) { $(&#39;#ScrollToTop&#39;).fadeIn()}
else { $(&#39;#ScrollToTop&#39;).fadeOut();}});$(&#39;#ScrollToTop&#39;).click(function(){$(&#39;html,body&#39;).animate({scrollTop:0},700);
return false})});
</script>

4. Nahh sekarang kita letakan kode CSS berikut ini dan letakan tepat di atas kode ]]></b:skin>

#ScrollToTop{text-align:center;z-index:9999;position:fixed;bottom:40px; right:30px;cursor:pointer;display:none;opacity:0.7;}
#ScrollToTop:hover{opacity:1;}

5. Lalu kita cari lagi tag </body> dan letakan kode berikut ini tepat di atas tag </body>

<div id='ScrollToTop'><img alt='Back to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIOaAbrKqOYOKJVjUTncV20-MqR2On3ygklx_OynJIWX2bs3f9NAY7oUxn-NQ8TL_W-16ekQx-f8MMUXxY84w_eewoo7pHO0ssHsWW-M6xMQ9Ei_2lk50tBLwFRwT7FvYYojK4d0RjFqw/s1600/backtotop.png'/></div>

Note : tulisan yang berwarna merah di atas URL gambar dari tombol, sobat bisa ganti gambarnya dengan cara mengganti URL di atas.

6. Save dan lihat hasilnya.

Sekian Tutorial Cara Membuat Tombol Back To Top Di Blogger, semoga tutorial ini bisa bermanfaat dan bisa membantu semuanya, terimakasih.