Cara Membuat / Memasang Smooth Scroll Back To Top di Blog ~ RATU MOVIE

Cara Memasang atau Membuat Back To Top Dengan Efek Smooth Scroll pada / di Blogspot | Assalamualaikum wr.wb hai sobat Cyber 88 selamat malam yah . Nah pada postingan kali ini admin Cyber 88 akan berbagi Tutorial Blogspot nih buat anda semuanya yaitu Cara Membuat / Memasang Smooth Scroll Back To Top di Blog .

Memang sekarang ini memasang Back To Top sudah tidak asing lagi bagi para blogger namun ada beberapa para newbie blogger yang menginginkan tutorial tersebut. Back To Top merupakan suatu tombol yang bergambarkan dengan arah ke atas dan berfungsi sebagai mempercepat mencapai halaman blogger keatas pada halaman tsb saat kita mengklik tombolnya, jadi kita tidak usah lagi susah susah mengklik scroll sampai halaman ke atas . Namun sekarang ini admin cyber 88 akan berbagi Memasang Back Top di Blog dengan Effect Smooth, jadi back to top tersebut akan lebih indah dan menarik apabila kita memasangnya . Nah jika anda menginginkan Tutorial Cara Membuat Atau Memasang Smooth Scroll Back To Top pada Blog anda bisa melihat tutorialnya dibawah ini .

Baca Juga --> Cara Membuat / Memasang Permalink kotak Author di Blogspot Menarik

Demo

Cara Membuat / Memasang Smooth Scroll Back To Top di Blog

Login di Blogger.com
Masuk ke Dashboard Blogger > Template
Click "EDIT HTML " > Tekan CTRL+F > Akan muncul kotak pencarian.
Masukkan kode ]]></b:skin> tepat di kotak pencarian tsb.
Jika sudah masukkan CSS kode dibawah ini tepat dibawah kode ]]></b:skin>.

<style type='text/css'>
#backtop{cursor:pointer;position:fixed!important;position:absolute;bottom:-70px;z-index:99;background-color:#7F007B;border:2px solid #333;-webkit-box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #333;-moz-box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #333;box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #333;width:45px;height:45px;overflow:hidden;text-indent:-999px;-webkit-border-top-left-radius: 30px;-moz-border-radius-topleft: 30px;border-top-left-radius: 30px;}

#backtop::after{content:"";position:absolute;top:-4px;left:15px;width:0;height:0; border-width:18px 7px;border-style:solid;border-color:transparent transparent #f7f7f7 transparent;}
</style>

Kemudian cari kode </body> lalu masukkan kode Script ini tepat diatas kode </body>

<div id='backtop'>Back to Top</div>
<script type='text/javascript'>
//<![CDATA[
$(window).scroll(function(){if($(this).scrollTop()>100){$("#backtop").removeAttr("href");$("#backtop").stop().animate({bottom:"-3",right:"0"},{duration:800,queue:false})}else{$("#backtop").stop().animate({bottom:"-50",right:"0"},{duration:1000,queue:false})}});$(function(){$("#backtop").click(function(){$("html, body").animate({scrollTop:0},"slow");return false})});
//]]>
</script>

Click Simpan Template.

Nah itulah artikel tentang Cara Membuat / Memasang Smooth Scroll Back To Top di Blog dan semoga back to top ini bisa membuat blog anda menjadi lebih indah dan menarik lagi . Demikianlah posting Cara Membuat / Memasang Smooth Scroll Back To Top di Blog dan semoga bisa bermanfaat bagi kita dan kalian semua wassalamualikum wr.wb.

iop

Add Comment