Cara Memasang Tombol Back To Top Di Blog (Blogger)

Selamat tiba kembali di , sesudah sekian usang admin tidak update postingan untuk kali admin kembali lagi untuk memperlihatkan informasi yang bermanfaat kepada pembaca sekalian. Pada postingan ini, admin akan memperlihatkan tutorial bagaimana cara memasang tombol back to top di blog (blogger) yang tentunya gampang untuk diterapkan.

Tombol back to top? Tombol apa itu?

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

Maksudnya ibarat ini ...

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

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

Gambar (Gambar back to top). Bisa anda desain sendiri atau dapat ambil pribadi di google. Pastikan gambar dicompress dulu. Bagi yang belum tau cara compress gambar dapat membaca artikel Berikut Ini
jQuery (bebas menggunakan 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 melaksanakan tutorial ini pastikan anda telah memback up template terlebih dahulu untuk mengamankan template anda. Yuk, tanpa menunggu usang simak dan ikuti cara-caranya.

Cara Memasang Tombol Back To Top

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

Pasang jQuery berikut ini diatas isyarat </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 isyarat javascript berikut sempurna 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 isyarat 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 --- */ alasannya ialah tag itu hanya sebagai penjelas saja.

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

<div id='ScrollToTop'><img alt='Back to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio9ywLP_HYWSVMv7XFFN1ZimNUn64SYPuu3XvxL9z4V6WLEfIigp8DkHIxy5jBBtp55dRTIzECCZO9VzJbGkD5Uet8kCZpNu7GIWb0fH28grO2Ykt89GbezpgHc_BWNyizoP7x409AXfDg/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 wacana cada memasang tombol back to top di blog, kalau ada hal yang tidak dimengerti, monggo jangan sungkan untuk bertanya. Semoga informasi ini bermanfaat bagi pembaca.