Cara membuat tombol Back to Top di Blog
Cara membuat tombol Back to Top di Blog - 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. Nah, dengan adanya tombol "Back to Top" ini, sobat tinggal "klik" dan tampilan bagian atas blog akan tersaji secara otomatis.
 |
| Cara membuat tombol Back to Top di Blog |
Cara Membuat Tombol Back to Top
1. Pastikan di template blog sobat sudah ada kode jquery, yaitu kode seperti ini:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
Atau seperti ini:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
jika belum ada, lakukan langkah seperti ini:
- Template > Edit HTML
- Cari (CTRL+F) kode </head>
- COPY salah satu kode tersebut dan PASTE di atas kode </head> tadi.
- Save!
2. Klik "Layout" (Tata Letak)
3. Klik "Add Gadget" di Sidebar
4. Pilih "Javascript/HTML"
5. 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/AVvXsEhCQzn6ETJaGoZ_zKeTNgE8IqwDpfYI_4MROJAon_59nawBj-RzGCFIcDr-c4d2Hlk7net4fITYxH_FCypOK3iMzgK8o-82LuUOgInj_SRVaXtwjHJtwK_esbji50rZO3QpCOhHC-C4pfU/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/AVvXsEhCQzn6ETJaGoZ_zKeTNgE8IqwDpfYI_4MROJAon_59nawBj-RzGCFIcDr-c4d2Hlk7net4fITYxH_FCypOK3iMzgK8o-82LuUOgInj_SRVaXtwjHJtwK_esbji50rZO3QpCOhHC-C4pfU/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>
Kode yang berwarna merah adalah url image "Back to Top". sobat bisa menggantinya dengan gambar lain sesuai dengan selera sobat.
6. Terakhir Save template dan Lihat Hasilnya !!
Itulah urutan bagaiman Cara membuat tombol Back to Top di Blog, Semoga bermanfaat dan bisa anda terapkan di blog masing-masing.
