Cara Membuat Back To Top Dengan Efek Ripple Di Blogger

Cara Membuat Back To Top Dengan Efek Ripple Di Blogger - Halo kawan kawan Warunkseo bagaimana kabarnya yang disana? Yang disitu? Disini saya baik baik saja.. Semoga kalian baik baik saja ya :D, pada postingan hari ini.. Saya akan membagikan sebuah tutorial sederhana yang berjudul Cara Membuat Back To Top Dengan Efek Ripple Di Blogger..

Tahukah kamu? Apa itu ripple? Ripple Adalah kayak animasi bergerak ketika kita menyentuh air.. Kalian tahu kan? Kalau kalian menyentih air gimana efek nya? Begitu juga dengan ini.. Ketika kita pencet tombol back to top nya akan ber efek ripple... Efek ini tidak akan membuat loading anda menjadi lemot.. Maka tenang saja dengan masalah kecepatan blog.. Oke langsung aja ya tanpa basa basi lagi..:D

- Pertama-tama, kalian mestinya harus buka situs blogger.com

- Setelah itu.. Masuk ke template>edit HTML
lalu kalian cari kode </b:skin>, dan jika sudah ketemu, kalian pastekan kode dibawah ini tepat diatas kode </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:#2196F3;font-size:22px;line-height:52px;cursor:pointer;border-radius:100%;transition:all .2s ease-in-out}#BackToTop:hover{background-color:#1976D2;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. Nah.. Jika sudah ada tahap satu lagi nih... Kalian cari kode </body>, setelah ketemu kalian tempel kode dibawah ini tepat diatas kode </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. Nah.. Kalau sudah.. Langkah terakhir yaitu simpan template...

Gimana tampilanya? Jadi bagus gak? Kalau bagus sekalian share ya ke teman teman kamu hehehe.. Semoga artikel ini bermanfaat bagi kawan kawan semua..:D