Singkat cerita, tahun kemarin entah kenapa blog kang Ismet yang beralamat di blog.kangismet.net jadi jarang update. Saya sendiri kurang tahu penyebabnya apa, kemungkinan ada urusan atau aktivitas di dunia aktual yang tidak memungkinkan untuk update di dunia maya hehe... Tapi sekarang blog kang ismet sudah berdiri kembali dan mulai membuatkan tutorial-tutorial menarik untuk Anda teman Blogger.
Oke tanpa panjang lebar, di sini saya akan share sebuah tombol back to top yang digunakan pada blog kang Ismet dengan tampilan terbarunya. Yang menarik dari tombol ini ialah adanya embel-embel icon link sosmed yang dapat Anda isi dengan link akun sosmed. Bagaimana tertarik untuk mencobanya? Silakan ikuti tutorial berikut
Memasang Tombol Back To Top Ala Blog Kang Ismet Terbaru
1. Login ke blog > Buka Template > Salin isyarat di bawah ini sebelum ]]></b:skin> atau </style>
#fixed-bar{position:fixed;bottom:0;right:0;z-index:100;width:25%;height:38px;clear:both;margin:0;overflow:hidden}#fixed-bar a{float:right;margin:0;padding:0;width:38px;height:42px;font-size:22px;text-align:center;color:#fff;transition:all .3s ease-in}#fixed-bar a.first{background-color:#48cf89}#fixed-bar a.first:hover{background-color:#40bb7b}#fixed-bar a.gplus{background-color:#c95325}#fixed-bar a.gplus:hover{background-color:#bd4e23}#fixed-bar a.fb{background-color:#4591b1}#fixed-bar a.fb:hover{background-color:#3f84a1}#fixed-bar a.twit{background-color:#76bdda}#fixed-bar a.twit:hover{background-color:#67acc8}#fixed-bar a.impoh{background-color:#f8b26b}#fixed-bar a.impoh:hover{background-color:#e9a25a}.bottom-wrapper{max-width:100%;;margin:0 auto}2. Kemudian salin isyarat di bawah ini sebelum </body>
<div id='fixed-bar' style='display:none'> <div class="bottom-wrapper"> <a class="go-top first" href="#"><span class="fa fa-arrow-up"></span></a> <a class="gplus" href="#" target="_blank" title="Tombol Back To Top Ala Blog Kang Ismet Terbaru"><span class="fa fa-google-plus" style="margin-top:8px"></span></a> <a class="fb" href="#" target="_blank" title="Tombol Back To Top Ala Blog Kang Ismet Terbaru"><span class="fa fa-facebook" style="margin-top:8px"></span></a> <a class="twit" href="#" target="_blank" title="Tombol Back To Top Ala Blog Kang Ismet Terbaru"><span class="fa fa-twitter" style="margin-top:8px"></span></a> <a class="impoh" href="#" title="Tombol Back To Top Ala Blog Kang Ismet Terbaru"><span class="fa fa-paperclip" style="margin-top:8px"></span></a> </div> </div> <script type='text/javascript'> $("#fixed-bar").hide(),$(function(){$(window).scroll(function(){$(this).scrollTop()>600?$("#fixed-bar").slideDown(200):$("#fixed-bar").slideUp(200)}),$(".go-top").click(function(){return $("html,body").animate({scrollTop:0},600),!1})}); </script>Ganti isyarat yang ditandai dengan alamat sosmed Anda.
3. Simpan template.
Mungkin itu saja sedikit yang dapat saya bagi, kalau ada kurang dan lebihnya dapat ditambahkan di kolom komentar. Terima kasih sudah membaca, agar bermanfaat.