Cara Memasang Tombol Back To Top Dengan Ripple Effect Di Blog

Cara Memasang Tombol Back To Top Dengan Ripple Effect Di Blog - Halo sobat gretong :D, hari ini ane kembali akan share tutorial blog. Tombol atau Button Back to top sangat diperlukan untuk kenyamanan pengunjung, tombol atau button back to top ini berfungsi untuk halaman ke posisi atas, jika tombol navigasi kamu fixed atau sticky mungkin tidak terlalu dibutuhkan, namun jika tombol navigasi kamu seperti template ini yaitu berada diatas, maka tombol atau button back to top ini sangatlah dibutuhkan :D. Oke langsung saja ane akan menjelaskan bagaimana Cara Memasang Tombol Back To Top Dengan Ripple Effect Di Blog.

1. Buka Dashbor Blogger.
2. Masuk ke Template > Edit HTML.
3. Cari kode </b:skin> , lalu letakkan kode dibawah ini tepat diatas </b:skin>.

#BackToTop{overflow:hidden;position:fixed;transform:scale(0);z-index:90;right:30px;bottom:31px;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);width:55px;height:55px;color:#fff;text-align:center;background-color:#ed145b;font-size:22px;line-height:52px;cursor:pointer;border-radius:100%;transition:all .2s ease-in-out}#BackToTop:hover{background-color:#ed145b;color:#fff;box-shadow: 0 25px 55px 0 rgba(0, 0, 0, 0.21), 0 16px 28px 0 rgba(0, 0, 0, 0.22);-webkit-transition: all 0.2s ease-out;-moz-transition: all 0.2s ease-out;-ms-transition: all 0.2s ease-out;-o-transition: all 0.2s ease-out;transition: all 0.2s ease-out;}#BackToTop.active{transform:scale(1)}.ripplelink{border:1px solid rgba(0,0,0,0.12);position:relative;overflow:hidden;-webkit-transition:all .2s ease;-moz-transition:all .2s ease;-o-transition:all .2s ease;transition:all .2s ease;z-index:0}.ink{display:block;position:absolute;background:rgba(255,255,255,0.3);border-radius:100%;-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);transform:scale(0)}.animate{-webkit-animation:ripple .65s linear;-moz-animation:ripple .65s linear;-ms-animation:ripple .65s linear;-o-animation:ripple .65s linear;animation:ripple .65s linear}@-webkit-keyframes ripple{100%{opacity:0;-webkit-transform:scale(2.5)}}@-moz-keyframes ripple{100%{opacity:0;-moz-transform:scale(2.5)}}@-o-keyframes ripple{100%{opacity:0;-o-transform:scale(2.5)}}@keyframes ripple{100%{opacity:0;transform:scale(2.5)}}.kbrd{border-radius:3px;border:1px solid #a3a3a3;box-shadow:1px 0 1px 0 #FFF,0px 2px 0 2px #D3D3D3,0px 2px 0 3px #888;box-sizing:border-box;display:inline;font-family:inherit;font-stretch:inherit;font-style:inherit;font-variant:inherit;font-weight:inherit;line-height:inherit;margin:0 5px;padding:1px 5px;text-transform:capitalize;vertical-align:baseline}

4. Selanjutnya cari kode </body>, lalu letakkan kode dibawah ini tepat diatas </body>.

<div class="ripplelink" href="#" id="BackToTop">
<i class="fa fa-angle-up"></i></div>
<script type="text/javascript">
jQuery(document).ready(function(e){var t=e("#BackToTop");e(window).scroll(function(){e(this).scrollTop()>=200?t.show(10).animate("#BackToTop").addClass("active"):t.animate("#BackToTop").removeClass("active")});t.click(function(t){t.preventDefault();e("html,body").animate({scrollTop:0},400)})})
//<![CDATA[
$(function(){var t,e,i,n;$(".ripplelink").click(function(o){0===$(this).find(".ink").length&&$(this).prepend("<span class='ink'></span>"),t=$(this).find(".ink"),t.removeClass("animate"),t.height()||t.width()||(e=Math.max($(this).outerWidth(),$(this).outerHeight()),t.css({height:e,width:e})),i=o.pageX-$(this).offset().left-t.width()/2,n=o.pageY-$(this).offset().top-t.height()/2,t.css({top:n+"px",left:i+"px"}).addClass("animate")})});//]]></script>

5. Jika sudah, silahkan save template dan lihatlah hasilnya :D.

Sekian artikel tentang Cara Memasang Tombol Back To Top Dengan Ripple Effect Di Blog, semoga bermanfaat, jangan lupa untuk Like Fanspage, Share dan Komen.