Tombol Back to Top Versi Umpan Ikan
Snippet Tips Blogger
Tombol Back to Top yang satu ini seolah-olah kita sedang memancing, jadi saat scrollbar digulung kebawah otomatis kail dengan umpan ikan turun kebawah, saat scrollbar digulung ke atas kail naik lagi ke atas. Lalu ketika kail dengan umpan di klik, scrollbar menggulung kembali ke atas.
Memasang Tombol Back to Top Versi Umpan Ikan
1. Buka Blog > Template > Simpan kode ini diatas kode </head>
<style>
/* Back to Umpan Ikan */
.umpanikan{background-image:url(https://3.bp.blogspot.com/-cYh1IxsmhD4/VyLubMGA9gI/AAAAAAAADAw/v5_BdKLkkrwVosuBC8gTlXYSN_l0Qo_NwCLcB/s1600/umpanikan.png);background-repeat:no-repeat;position:relative}
#umpanikan{cursor:pointer;width:30px;height:530px;background-size:41px;position:fixed;top:-700px;left:7%;transition:all .7s ease-in-out;-webkit-transition:all .7s ease-in-out;z-index:21}
#umpanikan-bubble{background:#fff;border-radius:50px;color:#06f;display:block;font-size:12px;line-height:14px;opacity:0;overflow:visible;padding:5px;position:absolute;top:445px;left:20px;text-align:center;transition:all .3s ease-in-out;-webkit-transition:all .3s ease-in-out;visibility:hidden;width:60px;height:auto;z-index:99}
#umpanikan:hover > #umpanikan-bubble,#umpanikan:hover > #umpanikan-bubble:after{opacity:1;transition:all .3s ease-in-out;-webkit-transition:all .3s ease-in-out;visibility:visible}
#umpanikan-bubble:after{border-bottom:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #fff;border-left:5px solid #fff;content:"";display:block;position:absolute;top:0%;left:10px;width:0;height:0;z-index:99}
</style>2. Kemudian simpan kode ini diatas kode </body>
<script>
//<![CDATA[
jQuery(document).ready(function(n){n(window).on("scroll",!1,function(){var o=n(window).scrollTop();o>700?n("#umpanikan").css("top","0"):n("#umpanikan").css("top",o-700+"px")}),n("#umpanikan").unbind("click").click(function(){n("html,body").animate({scrollTop:n("#umpanikanTOP").offset().top},"slow")})});
//]]>
</script>3. Simpan kode ini dibawah kode <body>
<div id="umpanikanTOP"></div>
<div class="umpanikan" id="umpanikan">
<div id="umpanikan-bubble">Kembali ke atas</div>
</div>Silakan Anda ganti tulisan yang Saya tandai sesuai dengan keinginan.
4. Simpan template.
Bagaimana menurut kalian? Unik bukan, mudah-mudahan Tombol Back to Top Versi Umpan Ikan ini dapat memberikan nuansa baru bagi kalian. Semoga bermanfaat.