Tombol Back to Top Versi Umpan Ikan - Tombol Back to Top adalah suatu tombol untuk kembali ke atas dari halaman website tanpa harus menggunakan scrollbar. Back to top ini fungsinya untuk memudahkan pengunjung untuk kembali ke atas dengan cepat. Kita sering menjumpai tampilan back to top yang biasa, namun kali ini akan berbeda dari biasanya.
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.
Baca Juga: Cara Cerdas Mempromosikan Jasa Online Anda
Memasang Tombol Back to Top Versi Umpan Ikan
1. Buka Blog > Template > Simpan kode ini diatas kode ]]></b:skin> atau </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}2. Kemudian simpan kode ini diatas kode </body>
<script type='text/javascript'>
//<![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.
Sumber : Tombol Back to Top Versi Umpan Ikan