Membuat Tombol Back To Top Pada Blog Admin : Unknown

Cara Mudah Membuat Tombol Back To Top / Kembali Keatas pada Blogger. - Tips Membuat Tombol Back To Top Ala Evo Magz di Blog | Back to Top / Kembali Keatas Otomatis - Scroll to Top atau yang biasa di sebut back to top merupakan sebuah widget dimana ketika kita menekan tombol tersebut maka secara otomatis kita akan kembali lagi ke bagian atas , untuk lebih jelasnya silahkan tekan tombol back to top di blog ini.

1. Login ke akun blogger
2. Menuju dasbor/rancangan
3. Pilih Template dan Klik Edit HTML

4. Pasang dulu css font awesome.
Cari  kode </head> (gunakan ctrl+f) dan letakan kode dibawah ini diatasnya

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

5. Kemudian pasang 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}

Warna merah diatas bisa sobat sesuaikan dengan warna yang diinginkan. Untuk mendapatkan kode warna,Sobat bisa lihat dibagian bawah blog ini.

6. Setelah itu cari lagi kode </body> dan letakan kode berikut 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>

Terkahir simpan Template dan lihat hasilnya..Selamat mencoba dan semoga bermanfaat.  

Selain cara diatas sobat juga bisa lihat tampilan yang berbeda dengan tambahan tombol home,tombol up/down dan refresh di tutorial disini KLIK DISINI