Cara Memasang Back To Top Di Blog
Cara Memasang Back To Top Di Blog - Kali ini saya akan membagikan cara memasang tombol back to top di blog Anda.
Nantinya tampilannya akan seperti ini:
Dan jika diterapkan diblog nantinya akan muncul 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...
Baca Juga : Cara Agar Artikel Dapat Muncul Di Page One Google
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.
Nice post. I be taught one thing more difficult on totally different blogs everyday. It will all the time be stimulating to read content material from other writers and observe just a little something from their store. Id favor to make use of some with the content material on my weblog whether you dont mind. Natually Ill offer you a link on your web blog. Thanks for sharing.
(Link on comment will be removed)
Thank you, I have recently been looking for information about this topic for ages and yours is the best I've discovered till now. But, what about the bottom line? Are you sure about the source?
(really sorry, Link has been removed)