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.

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.