Sebelumnya sobat pasti udah pada tau kan kegunaan tombol ini? kalo belum tau Back To Top Button itu kegunaannya adalah untuk kembali ke atas, intinya kalo sobat sudah berada di bagian bawah halaman web atau blog dan jika sobat menekan tombol Back To Top maka sobat akan lansung di bawa kembai ke bagian atas, tanpa sobat harus susah-susah menggerakkan cursor ataupun scroll, tapi tombol back to top ini tergantung pemilik web atau blog memasangnya atau tidak.
Kegunaannya cukup istmewa bukan kegunaanya?!?
Nah dalam postingan kali ini blog ini akan membahas tentang bagaimana cara memasang Back To Top Button di blogger dan kali ini kita akan menggunakan Jquery jadi akan lebih simple pemasangannya seperti pada judul di atas Memasang Tombol Smooth Scroll to Top With jQuery, dan pemasangan Tombol Smooth Scroll to Top With jQuery ini akan kita pasang di blogger sobat. oke kita lansung aja ya, alnya perut saya dah laper ni, cekidot . . .
Cara pemasang Tombol Smooth Scroll to Top With jQuery Di Blogger:
1. Masuk ke akun blogger sobat.
2. Pada menu klick Rancangan ➨ Edit HTML.
3. Sekarang sobat centang Expand Template Widget ➨ Download dulu template sobat, untuk mengantisipasi bila terjadi kesalahan.
4. Selanjutnya pada kotak edit template sobat cari kode <head> jika kesulitan mencarinya, coba sobat baca Cara Cepat Mencari Kode HTML.
5. Jika sudah ketemu copy kode di bawah ini dan paste atau letakkan di atas kode tadi.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
6. Masih di dalam edit template, sekarang sobat cari kode </head> ,lalu copy paste atau letakkan kode berikut di atas kode </head>.
<style type='text/css'>
#O.W toTop {display:none;text-decoration:none;position:fixed;bottom:10px;right:10px;overflow:hidden;width:51px;height:51px;border:none;text-indent:-999px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDZ7zssnmUdOBW5Y2feQMRAwsvB8f9YoF32iQ8G_rbzjXocDKHo555vkhjlpWzVZUGyhQDSd7m3jTDqdcidZFvNCsANBkk6ENCKCnpco5t4cVS3OuQlH1crFEh5RhnbVJngWR8guIiHWM/s1600/otowebsite.blogspot.com_totop.png) no-repeat left top;}
#O.W toTopHover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDZ7zssnmUdOBW5Y2feQMRAwsvB8f9YoF32iQ8G_rbzjXocDKHo555vkhjlpWzVZUGyhQDSd7m3jTDqdcidZFvNCsANBkk6ENCKCnpco5t4cVS3OuQlH1crFEh5RhnbVJngWR8guIiHWM/s1600/otowebsite.blogspot.com_totop.png) no-repeat left -51px;width:51px;height:51px;display:block;overflow:hidden;float:left;opacity: 0;-moz-opacity: 0;filter:alpha(opacity=0);}
#O.W toTop:active, #O.W toTop:focus {outline:none;}
</style>
<script src='http://otowebsite.googlecode.com/files/otowebsite_jquery.totop.js' type='text/javascript'/>
<script type='text/javascript'>
/*<![CDATA[*/
;(function($){$().UItoTop({easingType:'easeOutCirc'});})(jQuery);
/*]]>*/
</script>
#O.W toTop {display:none;text-decoration:none;position:fixed;bottom:10px;right:10px;overflow:hidden;width:51px;height:51px;border:none;text-indent:-999px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDZ7zssnmUdOBW5Y2feQMRAwsvB8f9YoF32iQ8G_rbzjXocDKHo555vkhjlpWzVZUGyhQDSd7m3jTDqdcidZFvNCsANBkk6ENCKCnpco5t4cVS3OuQlH1crFEh5RhnbVJngWR8guIiHWM/s1600/otowebsite.blogspot.com_totop.png) no-repeat left top;}
#O.W toTopHover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDZ7zssnmUdOBW5Y2feQMRAwsvB8f9YoF32iQ8G_rbzjXocDKHo555vkhjlpWzVZUGyhQDSd7m3jTDqdcidZFvNCsANBkk6ENCKCnpco5t4cVS3OuQlH1crFEh5RhnbVJngWR8guIiHWM/s1600/otowebsite.blogspot.com_totop.png) no-repeat left -51px;width:51px;height:51px;display:block;overflow:hidden;float:left;opacity: 0;-moz-opacity: 0;filter:alpha(opacity=0);}
#O.W toTop:active, #O.W toTop:focus {outline:none;}
</style>
<script src='http://otowebsite.googlecode.com/files/otowebsite_jquery.totop.js' type='text/javascript'/>
<script type='text/javascript'>
/*<![CDATA[*/
;(function($){$().UItoTop({easingType:'easeOutCirc'});})(jQuery);
/*]]>*/
</script>
7. Simpan, dan lihat hasilnya.
Keterangan:
Jika di template sobat sudah ada terinstal jquery/1.6.4 maka sobat tidak perlu memasang kode yang pertama lagi.
Nah sekian dulu untuk kali ini,semoga bisa bermanfaat!!!
Bagaimana apakah sobat berhasil menerapkannya ke blog sobat? silahkan tinggalkan tanggapan atau komentar sobat tentang postingan atau articles kali ini!
makasih banyak buat infonya,, nice post..
BalasHapushttp://goo.gl/ayK8bh