Kali ini saya akan membagikan cara memasang tombol back to top di blog Anda.
Nantinya tampilannya akan seperti ini:
Dan fungsi dari gadged ini yaitu mempermudah pengunjung blog untuk scroll up pada postingan Anda. Jadi pengunjung gak perlu susah-susah menggeser layar ke atas. Tinggal klik langsung geser ke atas dengan sendirinya. Heheee...
Ok langsung saja.
Cara Memasang Tombol Back To Top:
- Masuk kemenu "tata letak/layout".
- Kemudian klik "add gadged" di side bar.
- Lalu pilih "HTML/Javascript"
- Copy pastekan kode dibawah ini akan ada 2 kolom, kolom yang atas biarkan kosong aja.
<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/AVvXsEgHn1hKWAawcV-kbgVXB5jABUOog9FM7VmXy8I-2OnjAzLy4VkF7m1RI0x4F87jeKtWnHbhwxlJiYbzO4zdFvNQayFPMpbRpIBZq9NxBO3zwhCNcRQhCyVl9f5OKyEmw7YSIdVZ0pZ8YYU/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>
.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/AVvXsEgHn1hKWAawcV-kbgVXB5jABUOog9FM7VmXy8I-2OnjAzLy4VkF7m1RI0x4F87jeKtWnHbhwxlJiYbzO4zdFvNQayFPMpbRpIBZq9NxBO3zwhCNcRQhCyVl9f5OKyEmw7YSIdVZ0pZ8YYU/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>
- Lalu simpan dan lihat perubahannya.
Atau bisa langsung ditanamkan ke template blog Anda dengan cara:
- Klik "template".
- Edit Html
- Cari </body>
- Pastekan kode tersebut tepat diatas kode </body>.
- Lalu simpan dan lihat diblog Anda.
Jika masih belum muncul coba pastekan kode Jqueri ini ke template blog Anda. Caranya:
- Klik "template".
- Edit Html.
- Cari (CTRL+F) kode </head>.
- Copy dan pastekan kode ini diatas kode </head>.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
- Lalu save.Saya hanya menggunakan cara pertama dan terbukti sukses diblog saya. Heheeee...
Dan sebagai penutup.
Thanks to contohblog yang sudah membantu, karena sudah saya ubek-ubeg di google dan ketemu yang cocok disana.
Semoga bisa membantu Anda juga.
