Friday, 11 August 2017

Cara Mudah Memasang Back To Top Responsive di Blog

Pengertian tombol Back To Top mungkin sudah tidak asing lagi bagi kalangan blogger, tapi mungkin masih ada yang belum mengetahui pengertian dan fungsi dari tombol Back To Top yang berada pada suatu blog. Tombol Back To Top adalah tombol yang berada pada suatu blog atau website yang biasanya berada dibagian bawah blog sebelah kanan ataupun sebelah kiri. Fungsi tombol Back To Top selain untuk menambah mempercantik tampilan blog, tombol ini berfungsi untuk mempermudah bagi pengunjung untuk kembali ke bagian atas blog dalam satu kali klik tanpa harus melakukan scrolling berkali-kali. Dengan demikian tombol back to top sangat penting sekali dan menjadikan blog menjadi sangat user friendly.

Penggunaan tombol Back To Top dirasakan sangat butuh sekali apalagi kalau postingannya panjang sekali sampai kebawah sampai-sampai melakukan scrolling berulang-ulang, maka dari itu saya akan uraikan bagaimana langkah-langkah Cara Mudah Memasang Back To Top Responsive di Blog adalah sebagai berikut :

Langkah ke#1. Login Blogger -> Template -> Edit HTML
Langkah ke#2. Simpan kode dibwah ini tepat diatas kode </head>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"></link>
 
Langkah ke#3. Selanjutnya simpan kode CSS dibawah ini tepat diatas kode  ]]></b:skin> atau </style>
/* Back To Top */
#back-to-top{background:#E73037;color:#ffffff;padding:8px 10px;font-size:24px}
.back-to-top{position:fixed!important;position:absolute;bottom:20px;right:20px;z-index:999}


Langkah ke#4. Selanjutnya simpan kode Jquery dan HTML dibawah ini tepat diatas kode </body>
<div class='back-to-top'><a href='#' id='back-to-top' title='back to top'>
<i class='fa fa-chevron-up'/>
</a></div>
<script>           
$(window).scroll(function() {
if($(this).scrollTop() &gt; 200) {
$(&#39;#back-to-top&#39;).fadeIn();
} else {$(&#39;#back-to-top&#39;).fadeOut();}});
$(&#39;#back-to-top&#39;).hide().click(function() {
$(&#39;html, body&#39;).animate({scrollTop:0}, 1000);
return false;});
</script> 


Langkah ke#5. Setelah kode diatas terpasang semua silahkan "Save template".

Pemasangan tombol Back To Top telah selesai silahkan cek pada halaman blog Anda akan muncul tambahan tombol di sisi kanan blog, maka dengan begitu sekarang Anda tidak perlu susah-susah untuk kembali ke bagian atas halaman blog tinggal klik satu kali saja akan langsung tersaji pada bagian atas halaman blog.


Demikian untuk pembahasan kali ini telah selesai semoga uraian dari saya tentang Cara Mudah Memasang Back To Top Responsive di Blog, semoga dapat bermanfaat.

No comments:

Post a Comment