Cara Membuat Tombol Back to Top Versi Kail Pancing - Tombol Back to Top merupakan suatu tombol yang berfungsi untuk kembali ke atas (top) dari posisi halaman blog, tanpa harus menggunakan scrollbar. Sehingga keberadaan tombol back to top tersebut memudahkan para pengunjung untuk kembali ke atas halaman secara cepat, tentu hal tersebut memiliki nilai efisien dalam segi waktu. Jika kalian masih bingung tentang apa itu fungsi dari tombol back to top. Silahkan kalian coba untuk scroll ke bawah maka secara otomatis kalian akan melihat sebuah tombol berwarna merah dibagian pojok bawah pada halaman ini.
Namun yang seperti kalian lihat, bahwa tombol kembali ke atas seringkali kita jumpai pada tampilan yang sederhana, terlihat biasa hanya berupa petunjuk arah atau yang sejenisnya. Maka pada kesempatan kali ini, saya akan membagikan tutorial cara memasang tombol back to top yang lain dari biasanya, unik, dan pastinya anti mainstream.
Seperti yang telah sudah saya singung diatas, bahwa fungsi tombol ini memudahkan pengunjung untuk kembali ke atas halaman tanpa menggunakan scrollbar sehingga cukup menghemat waktu. Selain itu, tampilan dari tombol kembali ke atas yang akan saya bagikan ini berbeda dari yang lainnya. Sebab berupa kail pancing ikan. Sehingga terlihat seolah-olah kita sedang memancing ikan, jika scrollbar diarahkan kebawah maka secara otomatis kail pancing tersebut akan turun kebawah, dan ketika scrollbar diarahkan ke atas, maka kalin pancing tersebut akan ikut naik ke atas. Disamping itu, jika kail pancing tersebut di klik, maka scrollbar akan kembali menuju ke atas. Begitu juga dengan kail pancingnya.
Langsung saja, ikuti langkah-langkah dibawah ini dalam membuat sebuah tombol back to top (kembali ke atas) versi kail pancing sebagai berikut.
Tombol Back to Top Versi Kail Pancing
1. Masuk terlebih dahulu ke dalam akun blog kalian
2. Klik pada bagian Template > Edit HTML
3. Kemudian carilah kode ]]></b:skin> atau </style> (dengan cara klik Ctrl+F pada tombol keyboard kalian)
4. Tambahkan kode CSS di bawah ini, tepat berada di atas kode ]]></b:skin> atau </style>
/* Back to Umpan Ikan */
.kailpancing{background-image:url(https://3.bp.blogspot.com/-cYh1IxsmhD4/VyLubMGA9gI/AAAAAAAADAw/v5_BdKLkkrwVosuBC8gTlXYSN_l0Qo_NwCLcB/s1600/umpanikan.png);background-repeat:no-repeat;position:relative}
#kailpancing{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}
#kailpancing-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}
#kailpancing:hover > #kailpancing-bubble,#kailpancing:hover > #kailpancing-bubble:after{opacity:1;transition:all .3s ease-in-out;-webkit-transition:all .3s ease-in-out;visibility:visible}
#kailpancing-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} 5. Selanjutnya, tambahkan kode jQuery di bawah ini. Tepat berada di atas 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("#kailpancing").css("top","0"):n("#kailpancing").css("top",o-700+"px")}),n("#kailpancing").unbind("click").click(function(){n("html,body").animate({scrollTop:n("#kailpancingTOP").offset().top},"slow")})});
//]]>
</script> 6. Setelah itu, tambahkanlah kode HTML di bawah ini. Tepat berada di bawah kode <body>
<div id="kailpancingTOP"></div>
<div class="kailpancing" id="kailpancing">
<div id="kailpancing-bubble">Back to Top</div>
</div> Silahkan kalian ganti tulisan Back to Top sesuai dengan tulisan yang diinginkan
7. Klik pada tombol Simpan Template
Demikianlah tadi tutorial, cara membuat tombol back to top, yang terlihat unik dan berbeda dari yang lainnya. Semoga tutorial ini bermanfaat bagi kita semua, selamat berkarya. Sekian dan terimakasih.
EmoticonEmoticon