Cara Memasang Tombol Back To Top di Blog (Blogger)

Baca Juga Artikel Berikut Ini

Selamat datang kembali di Blog Firdaus, setelah sekian lama admin tidak update postingan untuk Blog Firdaus kali admin kembali lagi untuk memberikan informasi yang bermanfaat kepada pembaca sekalian. Pada postingan ini, admin akan memberikan tutorial bagaimana cara memasang tombol back to top di blog (blogger) yang tentunya mudah untuk diterapkan.

Tombol back to top? Tombol apa itu?

Tombol back to top atau tombol kembali ke atas merupakan tombol yang berguna untuk mempermudah pengunjung ketika ingin kembali pada halaman teratas.

Maksudnya seperti ini ...

Ketika pengunjung telah membaca artikel anda sampa ke bawah dan ingin kembali ke atas lagi, maka dia tidak perlu menscroll lagi cukup diklik tombolnya saja. Tentu saja hal ini bagus jika dipasang karena user friendly (ramah pengunjung) sehingga sangat disukai Google.

Tombol ini terletak di pojok kanan bawah dan akan muncul ketika kita menscroll halaman tersebut. Membuat tombol back to top kita butuh 5 komponen

Gambar (Gambar back to top). Bisa anda desain sendiri atau bisa ambil langsung di google. Pastikan gambar dicompress dulu. Bagi yang belum tau cara compress gambar bisa membaca artikel Berikut Ini
jQuery (bebas memakai versi berapa saja)
HTML
CSS untuk mengatur posisi tombol back to top
Javascript

Bagaimana Cara Memasang Tombol Back To Top?

Cara memasangnya cukup mudah. Sebelum melakukan tutorial ini pastikan anda telah memback up template terlebih dahulu untuk mengamankan template anda. Yuk, tanpa menunggu lama simak dan ikuti cara-caranya.

Cara Memasang Tombol Back To Top

Buka Dashboard Blogger --> Tema --> Edit HTML

Pasang jQuery berikut ini diatas kode </head>

<script src='//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'/>

Jika sebelumnya jQuery telah tersedia di dalam template anda, maka anda tidak perlu menerapkan langkah ini.

Pasang kode javascript berikut tepat dibawah jQuery

<script type='text/javascript'>

$(function() { $(window).scroll(function() {if($(this).scrollTop()&gt;600) { $(&#39;#ScrollToTop&#39;).fadeIn()}

else { $(&#39;#ScrollToTop&#39;).fadeOut();}});$(&#39;#ScrollToTop&#39;).click(function(){$(&#39;html,body&#39;).animate({scrollTop:0},800);

return false})});

</script>

Berikutnya, pasang kode CSS berikut diatas </style>

/*---- Back To Top --- */

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

#ScrollToTop:hover{opacity:1;}

Anda boleh tidak memasang tag comment
/*---- Back To Top --- */ karena tag itu hanya sebagai penjelas saja.

Terakhir, taruh kode HTML berikut ini diatas </body>

<div id='ScrollToTop'><img alt='Back to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgL9VTAP_A-9E3lo6IJ2J52EOCd58CUpxbxPax0ARRnTWwdGvrxwE4rvbNOkwwMSWu1Ow6_nTRshvftEfG8V5FfrGE4WeafG0iehLVw4PFJR6RodtxOEprjfZ-_vVLv4P4ejdh9jLBZ7HE/s1600/PicsArt_05-05-02.40.38-min.png'/></div>

Perhatikan url yang berwarna diatas. URL tersebut url gambar back to top yang telah dipersiapkan sebelumnya. Silahkan di sesuaikan dengan url gambar anda sendiri.

Jika semua langkah diatas telah anda lakukan, maka lihatlah hasilnya.

Lihat Hasilnya Disini

Demikianlah sedikit informasi tentang cada memasang tombol back to top di blog, jika ada hal yang tidak dimengerti, monggo jangan sungkan untuk bertanya. Semoga informasi ini bermanfaat bagi pembaca.