Cara Memasang atau Membuat Tombol Back to Top (Kembali ke Atas) di Blog Blogger & WordPress.TOMBOL Kembali ke Atas (Back to Top Button) merupakan salah satu "trending" desain website/blog. Tombol BtT ini umumnya ada di kanan bawah saat halaman blog di-scroll.
Tombol Kembali ke Atas ini memudahkan pengunjung kembali ke halaman bagian teratas dalam satu klik atau tap. So, tombol back to top ini sangat dianjurkan dipasang di blog karena user friendly (ramah pengguna).
Kebanyakan situs berita terkemuka juga memasang tombol ini karena sangat memanjakan pembaca kembali ke bagian atas halaman tanpa harus scroll mouse, melainkan dengan satu klik atau tap saja.
Cara Memasang Tombol Back to Top
1. Di dashboard blogger, klik menu "Template" > "Edit HTML"2. Cari (Ctrl+F) kode </body>
3. Copas kode berikut ini di atas </body>
<!-- JAVASCRIPT BACK TO TOP -->
<a href="#" class="back-to-top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguY-ifqDaXZH-vcej0PSDH6fu4Ig__sfK-DCqZH4U3iY3hu6zmo_QrbPT2-8lBTnn8dWDTdGoLiiYzpYKlZxPGDJhpbheq2jnYYDs8brISctjpdjbdEh4mIVTHdpAwhWYegFvPFy8d-dY0/s50-Ic42/back+to+top+.png" alt="Back to Top"/></a>
<script>
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});
jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>
<a href="#" class="back-to-top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguY-ifqDaXZH-vcej0PSDH6fu4Ig__sfK-DCqZH4U3iY3hu6zmo_QrbPT2-8lBTnn8dWDTdGoLiiYzpYKlZxPGDJhpbheq2jnYYDs8brISctjpdjbdEh4mIVTHdpAwhWYegFvPFy8d-dY0/s50-Ic42/back+to+top+.png" alt="Back to Top"/></a>
<script>
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});
jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>
Kode warna merah adalah link gambar panah back to top. Anda bisa ganti dengan gambar lain sesuai dengan ketentuan perundangan yang berlaku :)
4. Cari kode ]]></b:skin> atau </style>
5. Copas kode berikut ini di atas ]]></b:skin> atau </style>
.back-to-top {
display:none;
position: fixed;
bottom: 2em;
right: 0px;
text-decoration: none;
color: #000000;
background-color: rgba(235, 235, 235, 0.80);
font-size: 12px;
padding: 1em;
}
.back-to-top:hover {
background-color: rgba(135, 135, 135, 0.50);
text-decoration:none;
color:#ffffff;}
display:none;
position: fixed;
bottom: 2em;
right: 0px;
text-decoration: none;
color: #000000;
background-color: rgba(235, 235, 235, 0.80);
font-size: 12px;
padding: 1em;
}
.back-to-top:hover {
background-color: rgba(135, 135, 135, 0.50);
text-decoration:none;
color:#ffffff;}
Untuk blog Selfhoted WordPress, kode 5 pasang di file style.css.
6. Save Template!
Beres.
Pastikan di template Anda sudah ada kode jQuery seperti ini:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'/>
Jika belom ada, pasang kode tersebut di atas kode </head>
Demikian Cara Membuat Tombol Back to Top di Blog Blogger dan WordPress. Wasalam.
0 Komentar