Selamat tiba kembali di , sesudah sekian usang admin tidak update postingan untuk kali admin kembali lagi untuk menunjukkan informasi yang bermanfaat kepada pembaca sekalian. Pada postingan ini, admin akan menunjukkan tutorial bagaimana cara memasang tombol back to top di blog (blogger) yang tentunya gampang untuk diterapkan.
Tombol back to top atau tombol kembali ke atas merupakan tombol yang berkhasiat untuk mempermudah pengunjung dikala ingin kembali pada halaman teratas.
Maksudnya menyerupai ini ...
Ketika pengunjung telah membaca artikel anda sampa ke bawah dan ingin kembali ke atas lagi, maka beliau tidak perlu menscroll lagi cukup diklik tombolnya saja. Tentu saja hal ini elok jikalau dipasang sebab user friendly (ramah pengunjung) sehingga sangat disukai Google.
Tombol ini terletak di pojok kanan bawah dan akan muncul dikala kita menscroll halaman tersebut. Membuat tombol back to top kita butuh 5 komponen
Jika sebelumnya jQuery telah tersedia di dalam template anda, maka anda tidak perlu menerapkan langkah ini.
Anda boleh tidak memasang tag comment
/*---- Back To Top --- */ sebab tag itu hanya sebagai penjelas saja.
Tombol back to top? Tombol apa itu?
Tombol back to top atau tombol kembali ke atas merupakan tombol yang berkhasiat untuk mempermudah pengunjung dikala ingin kembali pada halaman teratas.
Maksudnya menyerupai ini ...
Ketika pengunjung telah membaca artikel anda sampa ke bawah dan ingin kembali ke atas lagi, maka beliau tidak perlu menscroll lagi cukup diklik tombolnya saja. Tentu saja hal ini elok jikalau dipasang sebab user friendly (ramah pengunjung) sehingga sangat disukai Google.
Tombol ini terletak di pojok kanan bawah dan akan muncul dikala 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 eksklusif 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()>600) { $('#ScrollToTop').fadeIn()} else { $('#ScrollToTop').fadeOut();}});$('#ScrollToTop').click(function(){$('html,body').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 --- */ sebab 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/AVvXsEgS-RohM0GqpYJjNggnesMkRovItv_g4oO6hPbWsXbZXssiGTHrPMmAJTLKOEekRrnHrSZnT7radZurbxgIXWt9QY984g8ahqp52M9duVbgK_dJYUFujSEETugDl2fFUCBSKUuKmb2X14Zn/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.
Demikianlah sedikit informasi perihal cada memasang tombol back to top di blog, jikalau ada hal yang tidak dimengerti, monggo jangan sungkan untuk bertanya. Semoga informasi ini bermanfaat bagi pembaca.
Jika semua langkah diatas telah anda lakukan, maka lihatlah hasilnya.
Demikianlah sedikit informasi perihal cada memasang tombol back to top di blog, jikalau ada hal yang tidak dimengerti, monggo jangan sungkan untuk bertanya. Semoga informasi ini bermanfaat bagi pembaca.