Membuat Back To Top Keren Di Blogger

Sebenarnya di template yang aku pakai kini telah ada fitur Back To Top ini sobat, namun alasannya yaitu aku putuskan untuk mengganti tampilan footernya, kesannya aku korbankan saja back to top dari template yang aku gunakan.

Nah, sebagai penggantinya, aku memakai back to top ala mbak Arlina Design. Widget ini dilengkapi dengan fitur Auto Hide, jadi hanya akan muncul dikala user scroll kebawah. Terima kasih untuk mbak arlina yang telah membagikannya.

Untuk teman yang ingin memakai back to top ini yang telah aku modifikasi sedikit, teman dapat menguikuti tutorial singkat berikut ini.

Pertama pasang Font awesome terlebih dahulu pada template sobat, kalau sudah ada di dalam template, Lewati langkah ini atau ganti dengan arahan yang aku berikan berikut.

<script type='text/javascript'> //<![CDATA[ function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) } loadCSS("//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"); //]]> </script>

Script Font Awesome itu telah aku lengkapi dengan script yang akan meload data font awesome secara async. Kaprikornus tidak akan membebani loading blog sobat. O ya, letakkan arahan tersebut diatas arahan </head>.

Selanjutnya tambahkan CSS berikut ini diatas ]]></b:skin> atau </style>.

.smoothscroll-top {position:fixed;opacity:0;visibility:hidden;overflow:hidden;text-align:center;z-index:99;background-color:#09c;color:#fff;width:47px;height:44px;line-height:44px;right:25px;bottom:-25px;padding-top:2px;border-radius:none;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;}

Pengaturan pada warnanya hanya perlu anda perhatikan pada #09c dan ganti sesuai warna yang teman inginkan. Setelah itu untuk mengganti warna hovernya teman ganti pada #3eb2ea, ganti sesuai wana yang teman inginkan, atau selaraskan dengan warna blog sobat.

Setelah itu kita masuk ke langkah terakhir sobat, tambahkan arahan dibawah ini sempurna diatas arahan </body>.

<div class='smoothscroll-top'>     <span class='scroll-top-inner'>         <i class='fa fa-2x fa-chevron-up'/>     </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').animate({scrollTop:25},200).animate({scrollTop:0},150) .animate({scrollTop:0},50); } //]]> </script>

Selanjutnya jangan lupa untuk Simpan Template, dan coba lihat di blog sobat. Seharusnya sudah bersemayam back to top dibagian bawah kanan blog sobat. Semoga bermanfaat 🙂

Source : http://arlinadesign.blogspot.com/2014/09/memasang-smooth-back-to-top-di-blog.html


Sumber https://www.iwanberbagi.com