Wednesday, January 17, 2018

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

komputerdia.com - 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 yakni 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 supaya para pembaca blog tidak harus melaksanakan kegiatan scroll dikala sudah membaca sampai tamat 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 arahan ]]></b:skin> atau </style> dengan menekan tombol CTRL + F dan ketikkan perintah ]]></b:skin> atau </style>
  • Salin dan tempelkan arahan 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 arahan </body> dan silahkan tempelkan arahan dibawah ini sempurna diatas arahan </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/j4vascript'> $("#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

Sumber http://www.komputerdia.com