Material Design Membuat Tombol Back To Top Effect Ripple Di Blog

Hallo sobat blog ID Dzgn, kali ini saya akan coba membagikan tutorial untuk: Material Design Membuat Tombol Back To Top Effect Ripple Di Blog, sudah hampir satu bulan saya tidak membuat postingan artikle untuk sobat semua, maklum akhir-akhir ini saya kena demam (Males Ngeblog) kalo ada yang mungkin punya solusi untuk penyakit saya ini tolong di bagikan yaa di kotak komentar di bawah.

Material Design Membuat Tombol Back To Top Effect Ripple Di Blog: Back To Top pada blog digunakan untuk memudahkan pengunjung untuk men-scroll posisi dari bawah laman postingan ke atas sesuai dengan efek animasi keyframe yang di gunakan. Tombol back to top ini akan muncul bila scroll mouse atau scroll vertikal di geser ke bawah.
Tombol ini juga biasanya akan menambah kesan menarik tampilan web/blog sehingga tampilan akan terlihat prefesional di mata pengunjung, Hampir seluruh pengguna blog dan website menggunakan tombol back to top ini namun dengan tampilan yang berbeda-beda.
Nah yang kali ini saya bagikan adalah tombol back to top material design yang menggunakan effect ripple, jika kurang jelas silahkan lihat gambar demonya di bawah ini.

Tertarik membuatnya?? Yuk intip cara membuat dan memasangnya di bawah!!☺

Material Design Membuat Tombol Back To Top Effect Ripple Di Blog

1. Silahkan kamu buka Blogger>Tema>Edit Html lalu cari kode ]]></b:skin> pastekan kode CSS berikut tepat di atasnya, untuk mempercepat pencarian silahkan kamu klik tombol

CTRL

+

F

pada keyboard leptop kamu.

#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}

2. Jika sudah selanjutnya silahkan kamu pastekan kode berikut tepat di atas 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>

3. Terakhir silahkan kamu save/simpan tema

Nah jika 3 tahap di atas sudah kamu lakukan sekarang coba kamu lihat hasilnya di blog kamu.
Mungkin hanya itu saja yang saya bisa sampaikan pada artikle tutorial kali ini, semoga bisa bermanfaat buat kamu terimakasi.

Artikel Terkait