Cara Membuat Back To Top Button + Menu SosMed Blog

Back to top button adalah sebuah tombol yang digunakan untuk mengarahkan pengunjung menuju paling atas di blog kita. Sekali klik maka pengunjung akan otomatis ditarik keatas tanpa harus menggunakan scroll bar. Dengan begini akan menyingkat waktu pengunjung seandainya pembaca ingin membaca artikel kita dari awal. Dengan memang tombol "kembali ke atas" ini maka akan memudahkan pengunjung menuju keatas. 

Banyak sekali model tombol back to top yang bisa anda gunakan. Biasanya untuk template premium anda tidak perlu menambahkan lagi tombol back to top karena biasanya memang sudah ada. Tapi jika anda memakai template bawaan blogger maka harus menambahkannya sendiri.

Membuat tombol back to top button kembali ketas dengan sosial media icon. Menu sosmed medsos keren dan menarik.

Keunikan dari tombol back to top yang akan saya bagikan ini adalah tombol back to top ini dilengakapi dengan menu sosial media blog. Yang bisa anda isi dengan link sosial media blog anda. Tentu bisa meningkat followers anda dimedia sosial. Tanpa basa-basi lagi berikut ini langkah-langkahnya.

Cara Memasang Tombol Back To Top + Icon Sosial Media

Langkah 1
Silakan anda masuk dulu ke blogger, pilih Template → Edit HTML

Langkah 2
Cari kode ]]></b:skin> atau </style> ,lalu salin kode dibawah ini dan letakkan diatas kode ]]></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}

Langkah 3
Salin kode dibawah ini dan letakkan diatas kode </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>

Terakhir simpan template.

Selesai sekarang coba buka blog anda dan lihat apakah tombol back to top with sosial media icon nya sudah muncul di blog anda atau belum. Jika anda mengalami kesulitan dan kendala silakan tanyakan dikolom komentar.

Subscribe to receive free email updates:

5 Responses to "Cara Membuat Back To Top Button + Menu SosMed Blog"

  1. Kalau membuat scroll box yang seperti Mas Angga gimana? Adat tulisan HTML dll.

    ReplyDelete
    Replies
    1. Ini ada artikelnya gan http://www.anggasave.com/2017/02/cara-membuat-kotak-kode-html-di-blog.html

      Delete

Jangan ada link aktif di komentar karena komentar anda di moderasi!