Cara Memasang Tombol Smooth Back To Top di Blog ~ Bejo Cius

Cara Memasang Tombol Smooth Back To Top di Blog - Buat para pecinta blogger tentu sudah tidak asing lagi dengan tombol smooth back to top, karena menu smooth back to top ini merupakan alat yang cukup penting agar blog yang kita punya lebih SEO friendly.

Selain itu peran dan fungsi dari tombol back to top sendiri bisa dibilang cukup penting, yaitu agar memberikan kemudahan bagi setiap pengunjung yang ingin men-scroll halaman blog yang mereka kunjungi kembali atas dengan mudah.

Berikut cara memasang tombol Back To TOP di blog.

1. Silahkan masuk ke Blogger.

2. Pilih menu "Template" lalu pilih "Edit HTML"

3. Lalu cari kode "<head>" dan letakkan kode dibawah ini tepat dibawah kode tersebut, atau anda juga bisa meletakkan kode dibawah ini tepat diatas kode "</head>".

NB : Jika di template blog anda sudah terpasang kode Fontawesome di atas, maka silahkan anda abaikan langkah diatas dan bisa langsung ke langkah berikutnya.

4. Lalu cari dan copy pastekan kode dibawah ini tepat di atas kode "]]></b:skin>" atau "</stile>", silahkan pilih salah satu.

.smoothscroll-top {
position:fixed;
opacity:0;
visibility:hidden;
overflow:hidden;
text-align:center;
z-index:99;
background-color:#2ba6e1;
color:#fff;
width:47px;
height:44px;
line-height:44px;
right:25px;
bottom:-25px;
padding-top:2px;
border-radius:5px;
transition:all 0.5s ease-in-out;
transition-delay:0.2s;
}
.smoothscroll-top:hover {
background-color:#3eb2ea;
color:#fff;
transition:all 0.2s ease-in-out;
transition-delay:0s;
}
.smoothscroll-top.show {
visibility:visible;
cursor:pointer;
opacity:1;
bottom:25px;
}
.smoothscroll-top i.fa {
line-height:inherit;
}

5. Lalu cari dan copy pastekan lagi kode jQuery dan HTML dibawah ini tepat diatas kode "</body>".

<div class="smoothscroll-top">
<span class="scroll-top-inner">
<i class="fa fa-2x fa-arrow-circle-up"></i>
</span>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function(){

$(document).on( 'scroll', function(){

if ($(window).scrollTop() > 100) {
$('.smoothscroll-top').addClass('show');
} else {
$('.smoothscroll-top').removeClass('show');
}
});

$('.smoothscroll-top').on('click', scrollToTop);
});

function scrollToTop() {
verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
element = $('body');
offset = element.offset();
offsetTop = offset.top;
$('html, body').animate({scrollTop: offsetTop}, 600, 'linear');
}
//]]>
</script>

6. Jika anda ingin menambahkan tombol back to top dengan efek bounce, silahkan anda ganti kode yang berada diatas (pada no 5) tadi dengan kode dibawah ini.

7. Untuk settingan warna, ukuran dan letak, silahkan anda edit dan sesuiakan sendiri sesuai selera anda.

8. Jika sudah klik "Save / Simpan Template" dan lihat hasilnya.

Demikianlah Cara Memasang Tombol Smooth Back To Top di Blog. Semoga artikel yang saya bagikan ini dapat bermanfaat dan menambah ilmu wawasan tentang blogging kita. Selamat mencoba dan apabila ada yang kurang jelas jangan sungkan-sungkan untuk meningggalkan komentar. Happy Blogging :)

Cara Memasang Tombol Smooth Back To Top di Blog

Related Post