Cara Memasang Smooth Back To Top di Blog

Cara Memasang Smooth Back To Top di Blog - Memang mungkin sudah banyak tutorial untuk cara ini di google , namun beda lagi dengan versi dari mbak Arlina Fitriyani atau Arlina design .

Fungsi dari Tombol Smooth Back To Top di blog itu sendiri memang sangat baik dan bagus , karena dengan adanya tombol smooth back to top ini dapat memudahkan pengunjung yang ingin kembali ke atas atau header hanya dengan satu kali klik tombol ini .

Penting : Bila anda sudah pernah memasang tombol back to top ini , dan ingin memasang tombol back to top ala arlina ini ada baiknya anda hapus terlebih dahulu tombol back to top yang dulu.

Dan berikut tahap tahap cara pemasangan tombol back to top ini :

Masuk ke blogger > pilih blog > Template > edit HTML
Simpan kode di bawah ini , setelah kode <head> atau sebelum </head>

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

namun jika kode ini sudah di pasang , anda lanjut aja ke tahap kedua

Simpan CSS ini tepat di atas kode ]]></b:skin> atau </style>

.smoothscroll-top { position:fixed; opacity:0; visibility:hidden; overflow: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;}.smoothscroll-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:inherit;}

Simpan kode di bawah ini , sebelum/tepat di atas kode </body>

<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'>//<![CDATA[$(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>