Cara Menciptakan Button Sosial Media Di Kombinasikan Dengan Tombol Back To Top

bang2 sutara - Seberapa pentingkah tombol back to top dengan button sosial media? Perlu kita ketahui bahwa setiap abjad blogger mempunyai typical atau ciri khas nya masing-masing. Namun tujuan utama dari para blogger yaitu mempunyai nilai artikel yang berkualtas dan tentunya dapat bermanfaat untuk orang lain.

Dengan adanya Tombol back to top dan tombol sosial media, tentunya fitur ini akan sangat membantu untuk kelangsungan para pembaca yang sedang bereksplorasi di blog yang kita miliki.

Tombol back to top berfungsi semoga para pembaca blog tidak harus melaksanakan acara scroll dikala sudah membaca sampai simpulan halaman dan akan menuju kembali ke bab atas hanyah dengan menekan tombol back to top tersebut.

Sementara itu, untuk tombol sosial media mempunyai kegunaan untuk dikala pembaca blog kalian akan melaksanakan share / mengembangkan artikel yang mereka anggap dapat bermanfaat juga untuk orang lain. Dengan adanya tombol - tombol tersebut, secara tidak eksklusif popularitas blog kalian akan berangsur menjadi lebih baik.

Baca Juga Artikel Selanjutnya :

Seberapa pentingkah tombol back to top dengan button sosial media Cara Membuat Button Sosial Media Di Kombinasikan Dengan Tombol Back To Top

Cara Membuat Tombol Back To Top + Tombol Sosial Media

Langkah pertama silahkan kalian login ke akun blog kalian
Masuk ke sajian tema atau theme lalu pilih menu edit html
Setelah itu silahkan kalian isyarat ]]></b:skin> atau </style> dengan menekan tombol CTRL + F dan ketikkan perintah ]]></b:skin> atau </style>
Salin dan tempelkan isyarat dibawah ini sempurna 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 selanjutnya, silahkan kalian cari isyarat </body> dan silahkan tempelkan isyarat dibawah ini sempurna 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 Button Sosial Media Di Kombinasikan Dengan Tombol Back To Top"><span class="fa fa-google-plus" style="margin-top:8px"></span></a> <a class="fb" href="#" target="_blank" title="Cara Membuat Button Sosial Media Di Kombinasikan Dengan Tombol Back To Top"><span class="fa fa-facebook" style="margin-top:8px"></span></a> <a class="twit" href="#" target="_blank" title="Cara Membuat Button Sosial Media Di Kombinasikan Dengan Tombol Back To Top"><span class="fa fa-twitter" style="margin-top:8px"></span></a> <a class="impoh" href="#" title="Cara Membuat Button Sosial Media Di Kombinasikan Dengan Tombol Back To Top"><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>

Langkah terakhir silahkan kalian tekan tombol simpan, dan lihat hasilnya
Semoga bermanfaat untuk kalian semuanya