Memasang Widget Back To Top Via Jquery




Tutorial kali ini Koisine Blog akan membahas tentang tutorial membuat Widget Back To Top atau kembali ke atas pada blog, dengan memasang widget ini juga berfungsi apabila blog penuh dengan komentar yang memanjang kebawah atau artikel yang panjang kita tidak perlu capek-capek scroll dari mouse tetapi kita hanya mengklik back to top yang sudah tersedia di sebelah kanan bawah blog, dan juga memasang widget ini juga untuk memperindah blog agar lebih baik untuk dilihat dan agar pengunjung setia terhadap blog kalian. Tutorialnya sangat gampang asalkan kalian mengikuti tutorial yang sudah tersedia secara lengkap di bawah ini.

Tutorialnya !

  • Masuk ke Blogger yang sobat punya,
  • Pada dasbor blog kalian pilih Rancangan -- Edit HTML -- Ceklist Expand Template Widget,
  • Silahkan cari kode ]]></b:skin>
  • Sesudah itu silahkan kalian taruh kode di bawah ini di atas kode tersebut,

#backtotop {
padding:5px;
position:fixed;
bottom:10px;right:10px;
cursor:pointer;
}
  • Sesudah itu silahkan sobat cari kode </body>
  • Silahkan kalian letakan kode di bawah ini tepat di atas kode tersebut, 
  • <a href="#" id="backtotop"><img src="Alamat Gambar" alt="back to top" /></a>
Note : Masukan Alamat Gambar yang sudah tersedia di bawah ini !
 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS_3A_utwjxplayur8R9t6Cqv8unS4xhQyNW_noIA3bjU6BcUkg3g-5QkEBQY19CAWMWTV7feJWABjrv1cKoiUtkIluatojkDV4h_nRjopGWOzpse7YCe5OrVj-sLCkUuqP7yo2kWHiqnw/s400/bttp-10.png
 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5ht6v-c485aoB-vUr9Vr4IYeHAjkKffGT4sqvzgp2vL_6KuaI8KiDYz4FAXyFlW2w7mGV3vV0CH9s-9lqpG78IbostwOdKLi0sGWRBNQ3_WGG2nsmhIZaNdzgkx4LuF8e270F9D_tm9kY/s400/bttp-9.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyTjThln2sOGd_sYM1clCDp0FhphtSJe3q2sMqyiZBbJis0aSJVnStAAyUE7uQU-k4QQ-Ck2u7BpH0Q4Fj3SQf2i0fZot9zj2ASfl_lGT4bosPfHeCNSOf6ZqlYpHCX0ICv8L28Sa3O2Ae/s400/bttp-8.png
 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggmedOtXLsCFQRwjEsyePfiOEYTqZyOqyY1QWMjq6dMXaAK9hstzmYrQ9oxUPlY40sqoDuagrcQiemjvGSAdaIxbU5E_iFk9ZXrWEM5oNPNOeZmzFAwrh3jEZaStABFxS2o_sJeh6Gf4Ds/s400/bttp-11.png
 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8puSqX0HVXRK7ynFJOgZJHRqmhkVQ2vfsbqZw_eAhw8d5c1bHuZcbUqw3NdWEdfcNddYT7ZIlT3CzcJco1ayctekCgn8qjaPU2-GJVbIZk0JNrwSal8s9BFAJKAM08HVjZNm17i_3mgk9/s400/bttp-12.png
 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmC5iz-2WLwsqJTHZocD9uW76CeBEYTFSVDOg614CI_gMi1aHlOde_iZe36Y-nrKauxtXl0VlQnW7YROywM1c27qiZOLiuep9DIA9kSvlDJkdGlxkrYhjr2jGlXdDgpT7Z-hLBbve8oecV/s400/bttp-13.png
 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyf-PYwO5hBqvoBU8JA8Dil3toSXWFpeYxpHVae59TUPMEiGb3TWrl3qWluhVCJOYAEYLhyphenhyphenNEV-Oxhiq1CoVjkm0_FzhylfA9udsqRl8MMkAATPah_K5MXLHH8rCt5uoldITSFvF5U6cTX/s400/bttp-14.png


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD0FIqWVVqAfZ5oFZVS_fy-B7bzNm01AfO4k__1HaH3m_n7UJXjakH-Eba6pKJ-6HUwE98Midd8uMijN_t7RkCsl1NVN3sGwqXsxtYmUQs6iVsWYMh_EXRI51F1QuNaFm71w0i5jbpTJRf/s400/bttp-19.png

  • Letakan link gambar di atas ke Alamat Gambar yang tersedia,

Contohnya !

<a href="#" id="backtotop"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGfnKrCxWbFSfL6P9jYVrjnv9Dyi2Aq7943jC6KiHn9rMtCOacoa940wcvZm4g2S6ab_HKNdJ5_pkC_dTGe6TgA-_ghbQVDPhV_WwStTOh0xjkhFpj6-vsTGh9n57DY2XR5GwTsfrfiCVM/s400/20.png" alt="back to top" /></a>

  • Selanjutnya silahkan kalian caro kode </head>
  • Letakan kode di bawah ini di atas kode tersebut,
&lt;script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'
type='text/javascript'&gt;&lt;/script&gt;
&lt;script language=&quot;javascript&quot;&gt;
$(window).ready(function(){
$('#backtotop').click(function(e){
e.preventDefault();
$('html, body').animate({scrollTop:0}, 'slow');
});
});
&lt;/script&gt;
  •  Simpan Template.
Selesai, Sekian tutorial dari koisine blog semoga artikel ini bermanfaat bagi kalian semua dan hargai lah karya orang lain jangan kalian hanyak copas tanpa sumber terkait.
Kalian boleh copas artikel tetapi jangan lupa sumbernya.

Terima Kasih. 

0 komentar:

Posting Komentar