Tombol Back to Top Versi Umpan Ikan

11/30/2015
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 Versi Umpan Ikan

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.

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.

Artikel Terkait

Next Article
« Prev Post
Previous Article
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline gunakan <u></u>.
  • Untuk menulis huruf strikethrought gunakan <strike></strike>.
  • Untuk menulis kode HTML gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silakan parse kode pada kotak parser di bawah ini.

Disqus
Tambahkan komentar Anda

No comments

Silakan tambahkan komentar sesuai dengan topik dan komentar dengan link akan dihapus, terima kasih.