Cara Menciptakan Tombol Back To Top Widget

Tombol Back To Top Widget - Memiliki banyak konten berarti banyak bergulir. Ini membantu untuk menciptakan sesuatu yang sedikit lebih gampang bagi pembaca Anda kalau Anda termasuk cara gampang untuk melompat sepanjang perjalanan kembali ke atas halaman. Menambahkan Back To Top tombol sanggup dengan gampang memecahkan duduk kasus bergulir dan benar-benar sederhana untuk menerapkan. Saya telah menyertakan benar-benar gampang Kembali ke tombol Atas sini untuk Anda bahwa Anda sanggup menambahkan ke website atau blog. Yang Anda butuhkan untuk mengedit ialah file CSS tema dan utama file HTML Template.

Cara Membuat Tombol Back To Top Widget

Berikut langkah - langkahnya :

1. Untuk awal menggunakannya masuk ke Template > Edit HTML
2. Pastikan di template blog Anda sudah ada aba-aba jquery, yaitu aba-aba menyerupai ini kalau tidak ada letakkan aba-aba dibawah ini sempurna diatas </head> dan copy salah satunya :

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

atau 

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

3. Klik "Layout" (Tata Letak)
4. Klik "Add Gadget" di Sidebar
5. Pilih "Javascript/HTML"
6. Copy dan Paste kode berikut ini:

 <style> .mbw-back-to-top {     position: fixed;     bottom: 2em;     right: 10px;     text-decoration: none;     padding: 1em;     display: none;     cursor:pointer; } </style> <img class="mbw-back-to-top" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCCbw8sthGxBHcv2wr_rYlOCdCmYXk96SoRRUY9rmts0t0AI-Ag5ETAcwmk4IaQ0sjbi_qlanyj3-dyrO1_oW0xkA2Fw-W5jrNrCdXzP7gIC3wGFRbvJb6q4Bbvr7Xgu-_vm_NRC18TPI/s1600/back+to+top+button.png "/> <script type="text/javascript"> /*****mybloggersworld.com***/ jQuery(document).ready(function() {     var offset = 220;     var duration = 500;     jQuery(window).scroll(function() {         if (jQuery(this).scrollTop() > offset) {             jQuery('.mbw-back-to-top').fadeIn(duration);         } else { //www.mybloggersworld.com             jQuery('.mbw-back-to-top').fadeOut(duration);         }     });         jQuery('.mbw-back-to-top').click(function(event) {         event.preventDefault();         jQuery('html, body').animate({scrollTop: 0}, duration);         return false;     }) }); </script>  <style> .mbw-back-to-top {     position: fixed;     bottom: 2em;     right: 10px;     text-decoration: none;     padding: 1em;     display: none;     cursor:pointer; } </style> <img class="mbw-back-to-top" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCCbw8sthGxBHcv2wr_rYlOCdCmYXk96SoRRUY9rmts0t0AI-Ag5ETAcwmk4IaQ0sjbi_qlanyj3-dyrO1_oW0xkA2Fw-W5jrNrCdXzP7gIC3wGFRbvJb6q4Bbvr7Xgu-_vm_NRC18TPI/s1600/back+to+top+button.png "/> <script type="text/javascript"> /*****mybloggersworld.com***/ jQuery(document).ready(function() {     var offset = 220;     var duration = 500;     jQuery(window).scroll(function() {         if (jQuery(this).scrollTop() > offset) {             jQuery('.mbw-back-to-top').fadeIn(duration);         } else { //www.mybloggersworld.com             jQuery('.mbw-back-to-top').fadeOut(duration);         }     });         jQuery('.mbw-back-to-top').click(function(event) {         event.preventDefault();         jQuery('html, body').animate({scrollTop: 0}, duration);         return false;     }) }); </script> 

Untuk warna merah anda sanggup mengganti linknya sesuai gambar yang anda inginkan. Simpan template Anda dan Anda harus melihat Kembali ke Atas Link muncul dikala Anda gulir ke bawah halaman. Demikian isu wacana Cara Membuat Tombol Back To Top Widget. Maaf kalau ada kekurangan, silahkan tambahkan beberapa kekurangan pada artikel di kolom komentar. Saya harap isu ini bermanfaat.