Membuat Tombol Scroll Up Pada Blog

Sudah lama tidak membuat artikel baru dikarenakan ada sebuah urusan di dunia nyata hehe, tapi itu bukan suatu hal yang membuat saya lepas dari membuat artikel disini yah. Membuat tombol top up sangat dibutuhkan sekali untuk para pengunjung blog anda ketika sedang membaca sebuah artikel atau pun sedang melihat lihat judul-judul artikel anda.

Nah disinilah karena sangat penting nya sebuah tombol scroll top up ini saya berinisiatif untuk membuat sebuah tutorialnya untuk kalian tapi untuk para master bloggerm sepertinya sudah tidak asing lagi dengan sebuah artikel yang seperti ini yah, hehe

Banyak sekali model-model tombol scroll top up di mesin pencarian namun kebanyakan para blogger mencari yang model yang terlihat smooth indah dan tanpa lagging atau lemot ketika di klik. Langsung saja

Pertama sekali anda masuk di dashboard blogger anda

Kemudian anda pilih tab tata letak dan masukan pada opsi HTML/Javascript dan masukan kode dibawah ini

<!--Smooth Back to Top Button Start-->
<script>
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});
jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>
<style>
div#page {
max-width: 900px;
margin-left: auto;
margin-right: auto;
padding: 20px;
}
.back-to-top {
position: fixed;
bottom: 2em;
right: 0px;
text-decoration: none;
color: #000000;
background-color:transparent;
font-size: 12px;
padding: 1em;
display: none;
z-index:9999;
}
.back-to-top:hover {
text-decoration: none;
}
</style>
<a href="#" class="back-to-top"><i class="fa fa-arrow-up fa-3x fa-fw"></i></a>
<!--Smooth Back to Top Button End--> 

Catatan :
Jika anda ingin sedikit memodifnya tinggal ganti yang saya block warna dengan yang anda mau ya 

Ini yang saya gunakan pada blog ini. Jika anda ingin memodifikasinya mudah sekali caranya tapi sebelumnya anda harus menyelesaikan tutorial ini hehehe.
Kemudian anda simpan kode css dibawah ini tepat diatas kode ]]></b:skin>

body
{
 background-color:#F2F2F2;
 font-family:helvetica;
}
#wrapper
{
 text-align:center;
 margin:0px auto;
 padding:0px;
 width:760px;
}
#wrapper p{
 border: 1px solid #999;
 padding: 20px;
 margin: 20px;
 background: #fff;
}
#tombolScrollTop
{
 cursor: pointer;
 position:fixed;
 left:75%;
 bottom:50px;
 border:3px solid #585858;
 background-color:white;
 color:#585858;
 border-radius:100%;
 height:90px;
 width:90px;
 font-size:15px;
 display:none;
} 

Kemudian anda masukan kode Javascript ini tepat diatas kode </body>

$(document).ready(function(){
 $(window).scroll(function(){
  if ($(window).scrollTop() > 100) {
   $('#tombolScrollTop').fadeIn();
  } else {
   $('#tombolScrollTop').fadeOut();
  }
 });
});

function scrolltotop()
{
 $('html, body').animate({scrollTop : 0},500);
} 

Nah setelah ini beres tinggal save dan anda lihat hasilnya apa ada perubahana atau tidak? Jika ada berarti cara yang anda lakukan benar jika salah silahkan mencoba lagi.

Terima kasih anda telah membaca artikel Membuat Tombol Scroll Up Pada Blog. Jika anda kurang paham silahkan berkomentar dibawah & Ada baiknya jika artikel ini bermanfaat Share ke saudara atau teman anda.

Related Posts: