Tombol Back To Top Versi Umpan Ikan
Tombol Back to Top yang satu ini seakan-akan kita sedang memancing, jadi dikala scrollbar digulung kebawah otomatis kail dengan umpan ikan turun kebawah, dikala 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 arahan ini diatas arahan ]]></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 arahan ini diatas arahan </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 arahan ini dibawah arahan <body>
<div id="umpanikanTOP"></div> <div class="umpanikan" id="umpanikan"> <div id="umpanikan-bubble">Kembali ke atas</div> </div>Silakan Anda ganti goresan pena yang Saya tandai sesuai dengan keinginan.
4. Simpan template.
Bagaimana berdasarkan kalian? Unik bukan, mudah-mudahan Tombol Back to Top Versi Umpan Ikan ini sanggup memperlihatkan nuansa gres bagi kalian. Semoga bermanfaat.
