Cara Memasang Tombol Back To Top Diblog

Cara memasang back to top diblog - mungkin sudah banyak menghiasi di intetnet tentang tutorial cara memasang tombol back to top diblog dan pada kesempatan kali inisaya akan berbagi tips mengenai tutorial tersebut.

Peranan dan fungsi dari tombol back to top sendiri cukup penting, yaitu memberikan kemudahan bagi pengunjung yang ingin scrool ke bawah maupun keatas tanpa haru menggeser tulisan.

Tanpa perlu berlama-lama lagi, Berikut ini adalah cara memasangnya;

1. Login dulu ke blogger, Dashboard > Pilih blog > Pilih Template > Edit HTML, kemudian simpan kode dibawah ini setelah <head> atau sebelum </head>

Kode CSS

Jika template anda sudah terpasang font awesome di atas, abaikan langkah pertama lanjut ke langkah berikutnya

2. Simpan CSS dibawah ini sebelum ]]></b:skin> atau </style>

Kode CSS

.smoothscroll-top {

position:fixed;

Opacity:0;

Visibility:hidden;

Text-align:center;

Z-index:99;

background-color:#2ba6e1

;

color:#fff;

width:47px;

height:44px;

line-height:44px;

right:25px;

bottom:-25px;

padding-top:2px;

border-radius:5px;

transition:all 0.5s ease-in-out;

transition-delay:0.2s;

}

.smoorhscroll-top:hover {

background-color:#3eb2ea;

color:#fff;

transition:all 0.2s ease-in-out;

transition-delay:0s

}

.smoothscroll-top.show

visibility:visible;

cursor:pointer;

opacity:1;

bottom:25px;

}

.smoothscroll-top i.fa {

Line-height

}

3. Sebelum jQuery dan Html dibawah ini sebelum </body>

kode CSS

<div class="smoothscroll-top">
<span class="scroll-top-
inner">
<i class="fa fa-2x
fa-arrow-circle-up"></i>
</span>
</div>
<script type='text/javascript
//<[DATA[
$(function( ){
$(document).on( 'scroll'
, function( ){
if ($(window) .
scrollTop( ) > 100) {
$( ' .smoothscroll
-top' ).addClass('show');
} else {
$( ' .smoothscroll
-top' ).removeClass('show');
}
});
$( ' .smoothscroll-Top' ) .
on( ' click' , ,scrollToTop) ;
} ) ;
function scrollToTop( ). {
verticalOffset = typeof (
verticalOffset). != '
undefined' ? verticaloffset
: 0;
element = $( 'body' ) ;
offset = element.offset
( ) ;
offsetTop = offset.top;
$( 'html, body' ).animate
( {scrollTop: offsetTop}, 600
, 'linear' );
}
//]]>
</script>

4. Setelah itu simpan template dan lihat hasilnya di blog anda

Jika anda mau mengganti warna silahkan tinggal edit kembali sesuka kalian.
Sekian dari saya, semoga bermanfaat untuk kalian semua.

Stay Positive