Back To Top berfungsi untuk mempermudah pengunjung blog untuk kembali ke atas dengan sekali klik setelah selesai membaca artikel, apalagi jika artikel tersebut panjang tentu akan mempersulit pengunjung jika harus men-scroll untuk kembali ke atas. Cara memasang back to top sangat mudah sekali, berikut cara mudah memasang back to top pada blog, mangga disimak langkah-langkahnya !!
1. Pastikan kode berikut sudah ada dalam template anda
2. Jika belum ada, silahkan memasangnya terlebih dahulu. Caranya<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
» Masuk ke Blogger
» Pilih Template » Edit HTML
» Pasang kode diatas tadi di atas kode </head>
» Simpan Template
3. Jika telah terpasang, pada blogger » Pilih Tata Letak » Add Gadget
4. Selanjutnya, pilih HTML/JavaScript
5. Pasang kode berikut pada kolom HTML/JavaScript
<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/AVvXsEjp-B0JSePkUiJQdLFlGc-B1TbdV5NDxyOx7xJY3VCN2ABYyV26lAzZaa551caXY9TgtEm4vkaqQUQL36tXTdLfUY5cRUYUcUNyE-EQ1kui0OghWNvh1FrcldwoQiFwNJmH3esfmus1b6k/s1600/back+to+top.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>
Baca juga :
» Cara Gampang Menyembunyikan Dan Mengganti Judul Header
» Cara Membuat Tulisan Berjalan Pada Postingan Blog
» Tips Paling Jitu Agar Daftar Adsense Mudah Diterima
Note.
» Kode yang berwarna biru bisa diganti dengan url gambar yang anda punya
6. Simpan dan lihat hasilnya
Demikian cara mudah memasang back to top pada blog, semoga dapat membantu dan bermanfaat. Terima kasih atas kunjungannya and happy blogging.
0 Response to "Cara Mudah Memasang Back To Top Pada Blog"
Post a Comment