Tombol Back To Top Ala Blog Kang Ismet Terbaru

Tombol Back To Top Ala Blog Kang Ismet Terbaru - Halo, Kali ini saya mau ngasih sebuah tombol back to top yang keren ala blog kang ismet. Siapa sih yang gak kenal kang Ismet, kang Ismet ialah seorang blogger yang populer di Indonesia lewat keunikan dari tutorial blog yang selalu menciptakan pengunjung betah berlama-lama nangkring di blognya.

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 acara di dunia kasatmata yang tidak memungkinkan untuk update di dunia maya hehe... Tapi sekarang blog kang ismet sudah bangkit kembali dan mulai menyebarkan 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 pelengkap 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 aba-aba 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 aba-aba 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 aba-aba yang ditandai dengan alamat sosmed Anda.

3. Simpan template.

Result

Mungkin itu saja sedikit yang dapat saya bagi, jikalau ada kurang dan lebihnya dapat ditambahkan di kolom komentar. Terima kasih sudah membaca, biar bermanfaat.

Share this post