Tombol Back To Top Ala Blog Kang Ismet Terbaru

3/10/2015
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 adalah seorang blogger yang terkenal di Indonesia lewat keunikan dari tutorial blog yang selalu membuat pengunjung betah berlama-lama nangkring di blognya.

Tombol Back To Top Ala Blog Kang Ismet Terbaru

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 kegiatan di dunia nyata yang tidak memungkinkan untuk update di dunia maya hehe... 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

Memasang Tombol Back To Top Ala Blog Kang Ismet Terbaru


1. Login ke blog > Buka Template > Salin kode 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 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.

Artikel Terkait

Next Article
« Prev Post
Previous Article
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline gunakan <u></u>.
  • Untuk menulis huruf strikethrought gunakan <strike></strike>.
  • Untuk menulis kode HTML gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silakan parse kode pada kotak parser di bawah ini.

Disqus
Tambahkan komentar Anda

No comments

Silakan tambahkan komentar sesuai dengan topik dan komentar dengan link akan dihapus, terima kasih.