Cara Membuat Tombol Back to Top di Blogger & Wordpress

Romeltea | Follow @romel_tea
Tombol Back to Top
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://lh3.googleusercontent.com/-N411Yy0fRk8/Vxgzr51rKNI/AAAAAAAAOas/jJ73hCuBF_gkS0M8irQl50Y2rb-lnkkYwCCo/s50-Ic42/back%2Bto%2Btop%2B.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;}


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. (http://blogromeltea.blogspot.com).*

Sumber
Previous
« Prev Post
Author Image

Romeltea
Romeltea adalah onair dan online name Asep Syamsul M. Romli aka Kang Romel. Blogger from Bandung, Jawa Barat, Indonesia. Follow me: facebook twitter instagram twitter youtube

Recommended Posts

No comments on Cara Membuat Tombol Back to Top di Blogger & Wordpress

Post a Comment

No Spam, Please!

Contact Form

Name

Email *

Message *