Tombol "Back to Top" memudahkan user atau pengunjung kembali ke bagian atas blog, dalam satu klik, tanpa harus men-scroll mousenya atau "mengusap-usap" jarinya di "touch pad" atau layar SmartPhone-nya.
Saya merasa butuh memasang tombol "kembali ke atas" ini karena kadang/sering harus membuka postingan dengan komentar yang banyak, sehingga "turun banget" dan harus bersusah-payah "scroll" ke bagian atas.
Nah, dengan adanya tombol "Back to Top" ini, saya tinggal "klik" dan tampilan bagian atas blog akan tersaji secara otomatis.
oke langsung saja kita kita cekidot ke caranya
- Pastikan Blog anda sudah ada jquery kode, yaitu :
- Setelah itu, mari kita menuju template blogger, pilih add widget lalu klik html/java script lalu masukkan kode berikut :
- Setelah diganti kode yang berwarna merah di atas itu dengan link gambar back to top yang kalian inginkan lalu klik ok.
- Lalu lihat hasilnya pada blog anda, begitu mudah, keren, simple dan menawan bukan? Hahaha
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
- kalau belum ada,lakukan langkah ini:
- - Template > Edit HTML
- Cari (CTRL+F) kode </head>
- COPY salah satu kode tersebut dan PASTE kode </head> tadi.
- Save!
<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/AVvXsEjOE1qzcHR4Bv0oO0XaD-KJg6CzOb-L4yDFaTByd0dlNpq8xIotJaMBVi4Sl-fH5IlwC35y55KNl7UNaIHDqb3zua10NGZUxE4geecaNNTXNAeNk661-TW3UAWAwvRfPEWkozIB1omp3fA/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>
.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/AVvXsEjOE1qzcHR4Bv0oO0XaD-KJg6CzOb-L4yDFaTByd0dlNpq8xIotJaMBVi4Sl-fH5IlwC35y55KNl7UNaIHDqb3zua10NGZUxE4geecaNNTXNAeNk661-TW3UAWAwvRfPEWkozIB1omp3fA/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>
- Setelah di masukkan kode diatas lalu ubah tulisan / kode yang berwarna merah diatas dengan link gambar back to top yang kalian inginkan.contoh gambar back to top dapat dicari di google maupun di sumber lainnya
Mungkin itu saha yang SEARCHING bisa sampaikan tentang Cara membuat widget back to top di blogger, sekian dari saya, TERIMA KASIH
Hi, 'Mencari ilmu hingga ke negri China' adalah kata kata yang dimaksudkan bahwa ilmu itu luas, dan tidak hanya ada di sekitar kita namun juga ada di sekitar orang lain. Setiap umat manusia itu wajib mencari, menjelajahi, atau menelusuri ilmu di dunia untuk mencapai kebaikan, keberhasilan, dan kesuksesan hidup di dunia maupun di akhirat.
0 komentar:
Posting Komentar