Cara Membuat Tombol Back to Top di Blog

Kali ini Saya akan membagikan tutorial blogger "Cara Membuat Tombol Back to Top di Blog", tujuan dari Tombol Back To Top ini tentunya untuk mempermudah "navigasi" bagi pengunjung blog dalam menjelajah postingan kita yang panjang dan juga untuk "memperindah tampilan blog". Coba Anda scroll blog ini sampai ke bawah maka akan muncul seperti gambar di atas pada bagian kanan bawah blog ini. "Cara Membuat Tombol Back to Top di Blog" tidaklah sulit hanya dengan mengikuti langkah-langkah sederhana di bawah ini.

Langkah-Langkah Membuat Tombol Back to Top di Blog

Login ke blog Anda dan masu ke Edit Template > HTML, ceklist Expand Template Widget.

Tekan tombol CTRL+F, cari kode ]]></b:skin>.

Lalu Paste  kode CSS di bawah ini tepat di atas kode ]]></b:skin>.

/* Back to top */ #toTop { display:none; text-decoration:none; position:fixed; bottom:10px; right:10px; overflow:hidden; width:51px; height:51px; border:none; text-indent:100%; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ1so4zRqCf02p6aW0l-PdHu2LUPoRTJkKeZWAiyoqSk9N5KaUclj9XsOTlOjJuVuAPefxjGCKdd53Tsk_1cI0hRvL9nz0fhgC3se9H3kHKfgZFMuJI2wVbaOhGIVKFPXfzSLmGvGZlTw2/s1600/back+to+top.png) no-repeat left top; } #toTopHover { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ1so4zRqCf02p6aW0l-PdHu2LUPoRTJkKeZWAiyoqSk9N5KaUclj9XsOTlOjJuVuAPefxjGCKdd53Tsk_1cI0hRvL9nz0fhgC3se9H3kHKfgZFMuJI2wVbaOhGIVKFPXfzSLmGvGZlTw2/s1600/back+to+top.png) no-repeat left -51px; width:51px; height:51px; display:block; overflow:hidden; float:left; opacity: 0; -moz-opacity: 0; filter:alpha(opacity=0); } #toTop:active, #toTop:focus { outline:none;

Selanjutnya cari kode  </body> lalu pastekan kode di bawah ini tepat di atas kode  </body>.

<!-- jquery --> <script src='http://code.jquery.com/jquery-1.9.1.min.js' type='text/javascript'/> <!-- easing plugin ( optional ) --> <script src='http://back-to-top-plugin.googlecode.com/files/easing.js' type='text/javascript'/> <!-- BacktoTop plugin --> <script src='http://back-to-top-plugin.googlecode.com/files/totop.js' type='text/javascript'/> <!-- Starting the plugin --> <script type='text/javascript'> $(document).ready(function() { /* var defaults = { containerID: 'toTop', // fading element id containerHoverID: 'toTopHover', // fading element hover id scrollSpeed: 1200, easingType: 'linear' }; */ $().UItoTop({ easingType: 'easeOutQuart' }); }); </script>

Jika ingin mengganti gambarnya sesuai dengan keinginan Anda, perhatikan kode pertama, maka akan ter dapat 2 url gambar yang digunakan sebagai tampilannya, seperti berikut ini.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ1so4zRqCf02p6aW0l-PdHu2LUPoRTJkKeZWAiyoqSk9N5KaUclj9XsOTlOjJuVuAPefxjGCKdd53Tsk_1cI0hRvL9nz0fhgC3se9H3kHKfgZFMuJI2wVbaOhGIVKFPXfzSLmGvGZlTw2/s1600/back+to+top.png

Ganti dengan url tersebut dengan url gambar yang kalian inginkan lalu pilih Pratinjau untuk melihat hasilnya. Jika sudah sesuai dengan keinginan Anda langkah terakhir pilih Save Template untuk menyimpan perubahan yang Anda lakukan.

Demikianlah tutorial blogger "Cara Membuat Tombol Back to Top di Blog", semoga Artikel ini bermanfaat. Jika ada yang kurang jelas silahkan tinggalkan komentar di bawah ini.