Cara Membuat Tombol Back To Top Ala Kang Ismet

Banyak sekali hal yang keren bisa kita dapatkan dari seorang " master " atau orang yang lebih hebat dari kita. Salah satunya tampilan blognya, sebenarnya awalnya saya ragu untuk memposting tutorial ini namun sekarang saya sudah cukup yakin karena kang ismet sudah menshare template " droidpluss " yang menggunakan tombol back to top ini. ( Demo : klik disini | Untuk postingan berikutnya akan saya share template tersebut )

Memang banyak sekali tombol back to top yang anda gunakan, namun menurut saya tombol ini memiliki " kharisma " yang lain karena dengan menggunakan bentuk budar (bukan kotak, yang biasanya digunakan ) maka orang akan tertarik untuk kembali ke bagian atas blog anda dan mencoba menggunakan menu horizontal anda untuk dengan mudah bernavigasi.

cara pemasangan di blog

• Step 1  Buka blogger.com lalu pilih blog  anda
• Step 2  Pilih template lalu edit html
• Step 3  Cari kode ]]></b:skin> dengan mengklik   CTRL +F 
• Step 4  Copy kode berikut lalu pastekan pada diatas kode ]]></b:skin> tadi

#BounceToTop {background:#5c6c7e;text-align:center;position:fixed;bottom:10px;right:10px;cursor:pointer;width:40px;height:40px;border-radius:1000px;padding:5px;display:none;transition:all .3s ease-out;} #BounceToTop:hover {background:#2a3542;} #BounceToTop:before {content:""; position:absolute; bottom:18px; right:14px; width:0; height:0; border-style:solid; border-width:0 11px 16px 12px; border-color:transparent transparent #fff transparent; line-height:0;} #BounceToTop:after {content:""; position:absolute; bottom:18px; right:15px; width:0; height:0; border-style:solid; border-width:0 10px 14px 11px; border-
color:transparent transparent #5c6c7e transparent; line-height:0;transition:all .3s ease-out;} #BounceToTop:hover:after {border-color:transparent transparent #2a3542 transparent;}

• Step 5  Cari kode </head> dengan mengklik   CTRL +F 
• Step 6  Copy kode berikut lalu pastekan pada diatas kode </head>  tadi

<script type='text/javascript'> $(function() { $(window).scroll(function() { if($(this).scrollTop()&gt;100) { $(&#39;#BounceToTop&#39;).slideDown(200); } else { $(&#39;#BounceToTop&#39;).slideUp(300); } }); $(&#39;#BounceToTop&#39;).click(function() { $(&#39;body,html&#39;).animate({scrollTop:0},800) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:10},100) .animate({scrollTop:0},50); }); }); </script>

• Step 7  masih di atas kode </head> tadi pastekan kode berikut

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

Jika jquery plugin sudah ada di blog anda ( versi berapapun ) maka lewati langkah ini

• Step 8  Kembali ke menu samping bloggger, Pilih tata letak
• Step 9  Buka pilihan gadget lalu HTML/Javascript
• Step 10  Copy kode berikut lalu pastekan pada HTML/Javascript tadi

<style type='text/css' scoped='scoped'> #BounceToTop{position:fixed; bottom:0px; right:3px; cursor:pointer;display:none} </style> <div id="BounceToTop" style="display: block;"></div>

• Step 11  Simpan lalu cek bog anda untuk melihat hasilnya

Jika anda berpikir widget back to top  ini kurang sesuai dengan tampilan blog anda,jangan khawatir kami sudah menyediakan beragam widget back to top lainnya( Klik Disini )


jika ada yang ingin agan tanyakan  silahkan berkomentar/mengcontact saya di fb yang bisa anda lihat urlnya di bagian contact us.assalamualaikum wr.wb.