Inilah Tombol Back To Top Ala Blog Kang Ismet Terbaru - Fezarzone

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 yakni 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 faktual 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 yakni adanya perhiasan 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 instruksi 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 instruksi 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="Inilah 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="Inilah 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="Inilah 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="Inilah 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 instruksi yang ditandai dengan alamat sosmed Anda.

3. Simpan template.

Result

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