Tombol Back To Top Versi Umpan Ikan
Tombol Back to Top Versi Umpan Ikan - Tombol Back to Top yakni 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 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.
1. Buka Blog > Template > Simpan isyarat ini diatas isyarat ]]></b:skin> atau </style>
2. Kemudian simpan isyarat ini diatas isyarat </body>
3. Simpan isyarat ini dibawah isyarat <body>
4. Simpan template.
Bagaimana berdasarkan kalian? Unik bukan, mudah-mudahan Tombol Back to Top Versi Umpan Ikan ini sanggup menunjukkan nuansa gres bagi kalian. Semoga bermanfaat.
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 isyarat ini diatas isyarat ]]></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 isyarat ini diatas isyarat </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 isyarat ini dibawah isyarat <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 menunjukkan nuansa gres bagi kalian. Semoga bermanfaat.
0 Response to "Tombol Back To Top Versi Umpan Ikan"
Post a Comment