Latest News

Cara Membuat Back To Top Button + Menu SosMed Blog

Back to top button ialah 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 mampu anda gunakan. Biasanya untuk template premium anda tidak perlu menambahkan lagi tombol back to top alasannya biasanya memang sudah ada. Tapi kalau anda memakai template bawaan blogger maka harus menambahkannya sendiri.

Back

Keunikan dari tombol back to top yang akan aku bagikan ini ialah tombol back to top ini dilengakapi dengan menu sosial media blog. Yang mampu anda isi dengan link sosial media blog anda. Tentu mampu 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 isyarat ]]></b:skin> atau </style> ,lalu salin isyarat dibawah ini dan letakkan diatas isyarat ]]></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 isyarat dibawah ini dan letakkan diatas isyarat </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=Cara Membuat Back To Top Button +  Menu SosMed Blog><span class="fa fa-google-plus" style="margin-top:8px"></span></a> <a class="fb" href="#" target="_blank" title=Cara Membuat Back To Top Button +  Menu SosMed Blog><span class="fa fa-facebook" style="margin-top:8px"></span></a> <a class="twit" href="#" target="_blank" title=Cara Membuat Back To Top Button +  Menu SosMed Blog><span class="fa fa-twitter" style="margin-top:8px"></span></a> <a class="impoh" href="#" title=Cara Membuat Back To Top Button +  Menu SosMed Blog><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>

Terakhit 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.