Cara Menciptakan Tombol Back To Top Di Blogger & Wordpress

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 dikala halaman blog di-scroll.

Tombol Kembali ke Atas ini memudahkan pengunjung kembali ke halaman bab teratas dalam satu klik atau tap. So, tombol back to top ini sangat dianjurkan dipasang di blog alasannya user friendly (ramah pengguna).

Kebanyakan situs gosip terkemuka juga memasang tombol ini alasannya sangat memanjakan pembaca kembali ke bab atas halaman tanpa harus scroll mouse, melainkan dengan satu klik atau tap saja.

Cara Memasang Tombol Back to Top

1. Di dashboard blogger, klik hidangan "Template" > "Edit HTML"
2. Cari (Ctrl+F) instruksi </body>
3. Copas instruksi berikut ini di atas </body>

<!-- JAVASCRIPT BACK TO TOP -->
<a href="#" class="back-to-top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDV_Fn_wAIbfOFNJYPH6ReqRJO7RzsbLxy507au-piNJs85mGj0TaW0jazzf3XwVWr3_QOYQLPW9PFGOuw29vOE-VBiRMhUmm68In8JmkrzgdfUZCZmpGCq_Y3aoPj90V6UnREECa3qRbi/s50-Ic42/back+to+top+.png" alt="Cara Memasang atau Membuat Tombol Back to Top Cara Membuat Tombol Back to Top di Blogger & Wordpress"/></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 ialah link gambar panah back to top. Anda dapat ganti dengan gambar lain sesuai dengan ketentuan perundangan yang berlaku :)

4. Cari instruksi ]]></b:skin> atau </style>
5. Copas instruksi 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, instruksi 5 pasang di file style.css.

6. Save Template! 
Beres.

Pastikan di template Anda sudah ada instruksi jQuery menyerupai ini:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'/>

Jika belom ada, pasang instruksi tersebut di atas instruksi </head>

Demikian Cara Membuat Tombol Back to Top di Blog Blogger dan WordPress. Wasalam. (http://blogromeltea.blogspot.com).*

Sumber