Cara Membuat Button Sosial Media Di Kombinasikan Dengan Tombol Back To Top - Komputerdia | Berbagi Tutorial

Cara Membuat 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 karakter blogger mempunyai typical atau ciri khas nya masing-masing. Namun tujuan utama dari para blogger adalah mempunyai nilai artikel yang berkualtas dan tentunya bisa 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 agar para pembaca blog tidak harus melakukan aktivitas scroll ketika sudah membaca hingga akhir halaman dan akan menuju kembali ke bagian atas hanyah dengan menekan tombol back to top tersebut.

Sementara itu, untuk tombol sosial media berguna untuk ketika pembaca blog kalian akan melakukan share / berbagi artikel yang mereka anggap bisa bermanfaat juga untuk orang lain. Dengan adanya tombol - tombol tersebut, secara tidak langsung popularitas blog kalian akan berangsur menjadi lebih baik.

Baca Juga Artikel Selanjutnya :

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 menu tema atau theme kemudian pilih menu edit html
  • Setelah itu silahkan kalian kode ]]></b:skin> atau </style> dengan menekan tombol CTRL + F dan ketikkan perintah ]]></b:skin> atau </style>
  • Salin dan tempelkan kode dibawah ini tepat 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 kode </body> dan silahkan tempelkan kode dibawah ini tepat 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>
  • Langkah terakhir silahkan kalian tekan tombol simpan, dan lihat hasilnya
  • Semoga bermanfaat untuk kalian semuanya
.
.
.
.

Berlangganan Artikel terbaru (free):

Post a Comment