Tutorial Membuat Tombol Back To Top Di Blog

Hay semua .

Sudah banyak sobat blogger yang menanyakan tentang tombol back to top (tombol kembali ke atas) Blogger yang saya gunakan, karena berbeda dengan tombol yang sebelumnya sudah saya bagi. Jika yang lama hanya menggunakan fungsi hashtag pada url HTML (#top atau #), Nah sekarang kita menggunakan Jquery. So, pada prosesnya, saya telah menemukan script back/scroll to top yang jauh lebih cocok, dan dapat dengan mudah saya modifikasi sehingga cocok untuk Blogger. Script ini nantinya dihost sendiri di server Blogger (dimasukkan melalui widget/gadget editor), sehingga modifikasi dapat dilakukan sewaktu-waktu tanpa harus mengupload dan meng-host file javascript ke server lain.

Sekilas Adsense adalah blog kecil saya

Agar tidak terjadi kesalahan harap mengikuti tutorial dibawah ini dengan teliti.

1.Login Ke Blogger

2.Pilih Template >>>> Klik Edit HTML
3.Cari Kode </head> ( gunakan ctrl+f untuk mempercepat pencarian) letakkan kode jQuery ini
tepat diatas </head>

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

4.Letakkan Juga Kode dibawah ini tepat diatas </head>

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

5.Kemudian Cari Kode ]]></b:skin> dan letakkan kode dibawah ini tepat diatas ]]></b:skin>

#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;}

6.Klik Simpan Template
7.Langkah terakhir yaitu masuk ke Tata Letak >> Tambahkan Gadget >> Pilih HTML/Javascript
dan masukkan kode dibawah didalamnya

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

8.Simpan
SELESAI dan Nikmati Hasilnya