Hallo sobat blogger setelah beberapa hari saya tidak mengudate artikel karena memang saya sedang disibukkan untuk persiapan Ujian, akhirnya bisa saya sempatkan waktu saya untuk mengupdate artikel lagi. Pada kesempatan kali ini, akan saya bagikan Cara Memasang Tombol Back To Top Dengan Efek Untuk Blog. Tombol back to top yang akan saya bagikan disini adalah karya mbak Arlina Fitryiani, saya sangat mengagumi karya-karya template beliau yang luar biasa.
Oke, kembali ke topik. memasang tombol back to top pada blog akan memberikan kemudahan tersendiri untuk para pengunjung blog. Karena mereka tidak perlu bersusah payah menggunakan mouse mereka jika ingin kembali ke atas halaman. mereka hanya tinggal mengklik tombol back to topnya dan otomatis akan kembali ke atas.
Tombol back to top yang menggunakan efek juga memberikan kesan yang membuat blog sobat lebih menarik untuk para pengunjung, dimana jika para pengunjung mengklik tombol back to topnya, maka tombol ini akan memberikan efek terseret ke atas yang membuat pengunjung tertarik untuk memainkannya.
Oke, jika sobat tertarik untuk memasangnya pada blog sobat, beriku langkah-langkahnya
1. Sobat harus Login pada blogger terlebih dahulu.
2. Setelah itu, pilih menu Template
3. Kemudian jika sobat sudah masuk pada menu template, klik Edit HTML
4. Carilah kode <head> dan letakkan kode di bawah ini tepat di atas kode <head>
Untuk mempermudah pencarian kode <head>, ]]><b:skim> ataupun </body>, sobat bisa menggunakan fitur Find dengan menekan tombol CTRL + F.
Oke, kembali ke topik. memasang tombol back to top pada blog akan memberikan kemudahan tersendiri untuk para pengunjung blog. Karena mereka tidak perlu bersusah payah menggunakan mouse mereka jika ingin kembali ke atas halaman. mereka hanya tinggal mengklik tombol back to topnya dan otomatis akan kembali ke atas.
Tombol back to top yang menggunakan efek juga memberikan kesan yang membuat blog sobat lebih menarik untuk para pengunjung, dimana jika para pengunjung mengklik tombol back to topnya, maka tombol ini akan memberikan efek terseret ke atas yang membuat pengunjung tertarik untuk memainkannya.
 |
| Tampilan Tombol Back To Top yang akan di pasang pada blog Untuk warna bisa sobat ubah sesuai selera |
Oke, jika sobat tertarik untuk memasangnya pada blog sobat, beriku langkah-langkahnya
1. Sobat harus Login pada blogger terlebih dahulu.
2. Setelah itu, pilih menu Template
3. Kemudian jika sobat sudah masuk pada menu template, klik Edit HTML
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>5. Jangan simpan terlebih dahulu template sobat. Langkah berikutnya masih di Edit HTML, cari kode ]]></b:skin> dan letakkan kode di bawah ini tepat di atasnya.
.smoothscroll-top {6. Langkah selanjutnya, letakkan kode di bawah ini tepat diatas kode </body>
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;
}
<div class="smoothscroll-top">7. Setelah semuanya terpasang dengan benar, langkah terakhir, klik Simpan Template.
<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>
Untuk mempermudah pencarian kode <head>, ]]><b:skim> ataupun </body>, sobat bisa menggunakan fitur Find dengan menekan tombol CTRL + F.
Catatan:
Jika blog sobat sudah terpasang Font Awesome pada langkah nomor 4, Lewati saja langkah nomor ini dan langsung ikuti langkah nomor 5Itu tadi tutorial cara Memasang Tombol Back To Top Dengan Efek Seret Untuk Blog, Blogger yang baik selalu meninggalkan jejak. Jika sobat masih bingung dengan tutorial saya, bisa dituliskan pada kolom komentar dibawah artikel. Semoga Bermanfaat.
EmoticonEmoticon