Tombol Back to Top yang satu ini seakan-akan kita sedang memancing, jadi ketika scrollbar digulung kebawah otomatis kail dengan umpan ikan turun kebawah, ketika 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 instruksi ini diatas instruksi ]]></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 instruksi ini diatas instruksi </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 instruksi ini dibawah instruksi <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.
0 Response to "Tombol Back To Top Versi Umpan Ikan"
Post a Comment