Cara Pasang Back To Top Dengan Efek Ripple Pada Blogger




Cara Pasang Back To Top Dengan Efek Ripple Pada Blogger
Cara Pasang Back To Top Dengan Efek Ripple Pada Blogger : Sebelumnya saya tidak suka memasang tombol Back To Top, alasan saya takut menganggu para pengunjung yang sedang membaca artikel milik saya. Dan sekarang mencoba untuk memasang tombol "Back to Top" di Blog mizipediacom ini. 
Alasan saya memasang tombol "Back to Top" ini adalah untuk memudahkan user atau pengunjung kembali ke bagian atas blog, dalam satu klik, tanpa harus men-scroll mousenya atau "mengusap-usap" jarinya di "touch pad" atau layar SmartPhone-nya mereka. Dan karena terkadang/ sering harus membuka postingan dengan komentar yang banyak, sehingga "turun banget" dan harus bersusah-payah "scroll" ke bagian atas. 

Oh ya saya akan menjelasakan sedikit mengeni Back To Top Dengan Efek Ripple. Mungkin rekan blogger pasti ada yang sudah tau atau ada juga yang belum mengetahui apa itu ripple? Ripple Adalah seperti animasi bergerak ketika kita menyentuh air. Tentu saja pasti anda mengetahui saat menyentuh air dan bagaimana efek nya tersebut? Begitu juga dengan ini tombol Back To Top Dengan Efek Ripple ini. Ketika kita pencet tombol back to top nya akan ber efek ripple. 

Nah untuk masalah loading pada saat website kita sedang di akses oleh pengunjung, anda tidak perlu takut Efek ini tidak akan membuat loading anda menjadi lemot/ lambat. Bagi anda yang penasaran bagaimana bentuk dari Back To Top Dengan Efek Ripple tersebut. Bisa anda lihat demonya langsung di blog saya ini, anda scroll ke bawah dan lihat Back To Top tersebut.

Jika anda suka dengan Back To Top Dengan Efek Ripple ini bisa langsung anda mengikuti langkah- langkah di bawah ini.

Back To Top Dengan Efek Ripple Pada Blogger

  1. Pertama , pastikan anda udah masuk di dasbhor anda sendiri
  2. Kemudian anda masuk pada bagian editor template , caranya pilih Menu Template -> Edit HTML.
  3. Copas kode di bawah ini dan tempel kan di atas 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. copas kode di bawah ini dan lalu anda cari letakan kode di bawah ini 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>
  5. Jika sudah langsung anda klik Save Template dan lihat hasilnya. 
  6. Taraaa berhasil kan.
Demikian penjelasan pada malam ini, selamat mencoba dan semoga berhasil ya. Jangan sampai kelewatan update panduan terbaru dari mizipediacom.

Share Google URL Shortener: Get Short URLloading short url

Bila Anda merasa memang artikel-artikel di blog ini bisa bermanfaat, maka Anda bisa membantu memberikan donasi melalui Paypal Dana hasil dari donasi akan digunakan untuk memperpanjang domain mizipedia.com - Terima kasih.

Comment Policy Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Peraturan Berkomentar di mizipediacom
1. Berkomentarlah dengan Relevan dan Sopan
2. Jangan Spam
3. Tidak Porn dan Sara
4. Berkomentar dengan link tanpa relevan maka akan otomatis terhapus
5. Semua komentar pasti akan saya baca dan dibalas. Show Emoticon. Klik ==>

+ Follow
Join on this site

with Google Friend Connect