Snippet, Tips Blogger

Tombol Back To Top Ala Blog Kang Ismet Terbaru

Halo, Kali ini Aliva mau ngasih sebuah tombol back to top yang keren ala blog kang ismet. Siapa sih yang gak kenal kang Ismet, kang Ismet adalah seorang blogger yang terkenal di Indonesia lewat keunikan dari tutorial blog yang selalu membuat pengunjung betah berlama-lama parkir di blognya.


Singkat cerita, tahun kemarin entah kenapa blog kang Ismet yang beralamat di blog.kangismet.net jadi jarang update. Tapi kini blog kang ismet sudah bangun kembali dan mulai berbagi tutorial-tutorial menarik untuk Anda sobat Blogger.

Oke tanpa panjang lebar, di sini saya akan share sebuah tombol back to top yang dipakai pada blog kang Ismet dengan tampilan terbarunya. Yang menarik dari tombol ini adalah adanya tambahan icon link sosmed yang bisa Anda isi dengan link akun sosmed. Bagaimana tertarik untuk mencobanya? Silakan ikuti tutorial berikut ini.

Memasang Tombol Back To Top Ala Blog Kang Ismet Terbaru

1. Login ke blog > Buka Tema > Salin kode di bawah ini sebelum </head>

<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}
</style>

2. Kemudian salin kode 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="Site on Google+"><span class="fa fa-google-plus" style="margin-top:8px"></span></a>
<a class="fb" href="#" target="_blank" title="Site on Facebook"><span class="fa fa-facebook" style="margin-top:8px"></span></a>
<a class="twit" href="#" target="_blank" title="follow me"><span class="fa fa-twitter" style="margin-top:8px"></span></a>
<a class="impoh" href="#" title="Info"><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 kode yang ditandai dengan alamat sosmed Anda.

3. Simpan template.

Mungkin itu saja sedikit yang bisa saya bagi, jika ada kurang dan lebihnya bisa ditambahkan di kolom komentar. Terima kasih sudah membaca, semoga bermanfaat dan wassalam.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *