Cara membuat tombol back to top blogspot dengan jquery tutorial bergambar

Cara membuat tombol back to top blogspot dengan Jquery - cara membuat tombol back to top di blog, membuat tombol back to top dengan css, aplikasi tombol back, aplikasi tombol back to top. hallo kali ini DB akan membagikan tutorial cara membuat tombol back to top yang akan muncul saat halaman di scroll ke bawah, seperti yang DB aplikasikan pada blog ini, kegunaan dari tombol back to top sendiri untuk memudahkan para pembaca artikel kita ke navigasi menu yang ada di atas, dengan efek smooth atau rocket.

Tutorial ini khusus untuk pengguna web blogspot namun tidak menutup kemungkinan tutorial ini dapat diterapkan untuk web yang lain.

langkah pertama

Login blogspot lalu > klik template > klik edit HTML.

setelah diklik maka tampilan akan berubah menjadi halaman yang penuh dengan code-code.

langkah kedua

klik didalam area code HTML lalu > tekan CTRL+F (untuk fungsi search).

langkah ketiga

sekarang cari code "]]></b:skin>" didalam area code HTML dengan menggunakan search box, setelah ditemukan. Copy kan style css tombol back to top di atas tag "]]></b:skin>", style css dapat dilihat dibawah.

/* Tombol Back to top */

#easy-top{background:rgba(0,0,0,.5);text-align:center;position:fixed;bottom:15px;right:15px;cursor:pointer;width:38px;height:38px;line-height:38px;border-radius:4px;padding:4px;display:none;-webkit-transform:translateZ(0);box-sizing:initial;transition:all .3s ease-out}#easy-top:hover{background:rgba(0,0,0,.9)}#easy-top:before,#easy-top:after{-webkit-backface-visibility:hidden;box-sizing:initial;}#easy-top:before{content:'';height:8px;width:8px;display:block;border:3px solid #fff;border-left-width:0;border-bottom-width:0;transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg);position:absolute;top:15px;left:18px}#easy-top:after{content:'';height:16px;width:3px;display:block;background:#fff;position:absolute;top:17px;left:22px}#easy-top:hover:after{border-color:transparent transparent rgba(0,0,0,.9)transparent}

langkah keempat

sekarang cari code "</body>" didalam area code HTML dengan menggunakan search box.

setelah ditemukan copy kan script tombol back to top di atas tag "</body>". 

<div id='easy-top'/><script type='text/javascript'>//<![CDATA[$(function(){$(window).scroll(function(){$(this).scrollTop()>600?$("#easy-top").fadeIn(100):$("#easy-top").fadeOut(0)}),$("#easy-top").click(function(){$("html, body").animate({scrollTop:0},{duration:2e3,easing:"easeOutQuint"})})});//]]></script><script src='https://cdn.rawgit.com/Arlina-Design/redvision/master/easing.js' type='text/javascript'/>

Sekarang kamu bisa cek web blog kamu. jika hasil yang tampil tidak sesuai dengan tutorial ini beritahu DB via comment. Dan jika kamu merasa tutorial ini bermanfaat, bantu DB untuk membagikan tutorial ini.

Sekarang DB dilengkapi dengan fasilitas download untuk semua tutorial, untuk mendownload tutorial ini tinggal klik gambar download.

Tutorial PDF - Cara membuat tombol back to top blogspot dengan jquery