Tombol Back to Top Versi Umpan Ikan - Tombol Back to Top ialah suatu tombol untuk kembali ke atas dari halaman website tanpa harus memakai 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 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.
1. Buka Blog > Template > Simpan arahan ini diatas arahan ]]></b:skin> atau </style>
2. Kemudian simpan arahan ini diatas arahan </body>
3. Simpan arahan ini dibawah arahan <body>
4. Simpan template.
Bagaimana berdasarkan kalian? Unik bukan, mudah-mudahan Tombol Back to Top Versi Umpan Ikan ini sanggup menawarkan nuansa gres bagi kalian. Semoga bermanfaat.
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 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 menawarkan nuansa gres bagi kalian. Semoga bermanfaat.
