Cara Memasang Tombol Back To Top Dengan Mudah

Cara Memasang Tombol Back To Top  Dengan Mudah - Halo selamat siang, kali ini saya akan memberikan tutorial untuk Cara Memasang Tombol Back To Top  Dengan Mudah, mungkin kebanyakan template sudah memiliki tombol tersebut, namun jika punya kalian tidak memilikinya kalian bisa mencoba memasangnya sendiri karena caranya juga cukup mudah. Tombol Back To Tap ini berfungsi untuk mengembalikan posisi tampilan blog yang dibuka dari bagian bawah ke paling atas dengan hanya mengklik tombol tersebut. Jadi tombol ini membuat para pengunjung tidak perlu ribet-ribet scroll atas lagi untuk kembali ke bagian paling atas blog.

Tombol Back To Tap sudah hampir digunakan semua blogger, dan juga sangat banyak desain-desain dari Tombol ini, namun biasanya jika bawaan dari template, desainnya akan mengikuti desain template itu sendiri. Contoh situs yang menggunakan tombol Back To Tap ini salah satunya adalah Yahoo, silahkan lihat dibawah ini untuk lebih jelasnya

Tombol Back Top Tap yang akan kita pasang akan terlihat seperti dibawah ini 

Jika kalian tertarik untuk memasangnya silahkan lakukan cara dibawah ini 

1. Masuk dashboard, pilih template lalu edit HTML

2. Cari kode </head> lalu pasang kode dibawah ini diatasnya

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"     rel="stylesheet"></link>

3. Cari kode ]]></b:skin> atau </style> dan pasang diatasnya

/* 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}

4. Cari kode </body> dan pasang diatasnya

<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>

5. Selesai

Mungkin itu saja untuk Cara Memasang Tombol Back To Top  Dengan Mudah, jika kalian mengalami masalah dalam proses pemasangannya silahkan berkomentar, mungkin saya bisa membantu. Semoga artikel ini bermanfaat dan terima kasih.