Minggu, 22 Februari 2015

Cara Membuat Tombol Back To Top Keren di Blog

Cara Membuat Tombol Back To Top Keren di Blog
SimBale
Selamat pagi sobat SimBale. Wah saya merasa heran kalau membuka hompage website ini kok widget sebelah kanannya bisa turun itu kenapa coba, mungkin sobat tahu masalahnya bisa membenarkannya nanti admin beri hadiah deh... Oke kali ini admin akan posting sebuah artikel tentang Tips SEO. Tips kali ini adalah Cara Membuat Tombol Back To Top Keren di Blog. Tombol back to top berfungsi bila di klik akan kembali ke halaman bagian paling atas, seperti di blog ini. Untuk sobat yang mau memasangnya saya jamin tidak membuat berat blog sobat. Oke berikut adalah caranya...

Cara Pasang :
  1. Login ke akun gmail sobat
  2. Masuk ke dasbor blogger
  3. Lalu pilih blog yang akan sobat pasang
  4. Kemudian pilih Template => Edit HTML
  5. Cari kode </head> lalu copas kode dibawah ini :
<style> .mbw-back-to-top {     position: fixed;     bottom: 2em;     right: 10px;     text-decoration: none;     padding: 1em;     display: none;     cursor:pointer; } </style> <img class="mbw-back-to-top" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW-xrCZsmQCcy73lPmlwdcG4c4RLQE5rF11UozrW8YwR5PBrgTZI5kv72XJSdSM0F6fSo-IiED__sjeLKdttmlJusidFIhoQo8ZLBf3e1Q4EI02gtM9530foY3RqUL2dnvFEjnXNGJ_WE/s1600/back+to+top.png" /> <script type="text/javascript"> /*****mybloggersworld.com***/ jQuery(document).ready(function() {     var offset = 220;     var duration = 500;     jQuery(window).scroll(function() {         if (jQuery(this).scrollTop() > offset) {             jQuery('.mbw-back-to-top').fadeIn(duration);         } else { //www.mybloggersworld.com             jQuery('.mbw-back-to-top').fadeOut(duration);         }     });         jQuery('.mbw-back-to-top').click(function(event) {         event.preventDefault();         jQuery('html, body').animate({scrollTop: 0}, duration);         return false;     }) }); </script>
      6. Atau sobat bisa masuk Tata Letak => Tambah Gadget => HTML/Javascript
      7. Lalu masukkan kode diatas tadi.
      8. Selesai.

NB : Ganti kode berwarna merah dengan gambar back to top sobat.

Semoga bermanfaat
Best Regards
Admin - Aditya
 

Tidak ada komentar:

Posting Komentar