Tapike.com

Cara Membuat Tombol Share Show/Hide

Cara Membuat Tombol Share Show/Hide
Cara Membuat Tombol Share Show/Hide - Pada kali ini kita akan membuat tombol share show/hide atau membuat share button dengan efek toogle. Tombol share merupakan element yg paling penting untuk menyebarluaskan suatu artikel ke social media. Dengan ini pengunjung tidak hanya datang melalui mesin pencari saja, tapi bisa juga dari jejaring sosial. Sayangnya tombol share memiliki ukuran yg besar dan bisa membuat loading blog menjadi lambat. Untuk itu kita perlu membuat custom share button yg bisa meminimalkan proses pemuatan blog. Nah bagi yg ingin membuat widget tombol share show/hide, simak langkah-langkah berikut.

CSS Tombol Share Show/Hide

  • Login akun blogger.
  • Kemudian klik template.
  • Klik edit.
  • Paste kode berikut diatas ]]></b:skin>.

Script Tombol Share Show/Hide

  • Masuk ke blogger.
  • Kemudian klik template.
  • Klik edit html.
  • Pastekan script berikut diatas </body>.
<script type="text/javascript">
var toggle = document.getElementById('shrtoggle');
var more = document.getElementById('moreBtns');
shrtoggle.addEventListener('click', function (){
if (more.className === 'hid'){more.className = 'vis';}
else{more.className = 'hid';}});
</script>

HTML Tombol Share Show/Hide

  • Sign in ke akun blogger.
  • Klik menu template.
  • Klik edit
  • Pastekan kode berikut dibawah <data:post.body/>

Membuat Share Button Show Hide Responsive

  • Login ke akun blogger.
  • Kemudian klik menu template.
  • Klik edit html.
  • Pastekan kode berikut diatas kode ]]></b:skin>.
@media screen and (max-width: 689px){
.shrtoggle, .share, .share a{width: 100%;border-radius: 0;margin-bottom: 5px;line-height: 26px;background-size: 23px;padding: 0;font-size: 12px;}.share a span{padding-right:10px;}.vis{display:block;}}

Demikianlah penjelasan saya mengenai cara membuat tombol share show/hide atau cara membuat share button dengan efek toogle. Semoga artikel ini dapat bermanfaat bagi kita semua.
3 Comments Blogger
Disqus
  1. Wahh..harus saya bongkar lagi nih Kang template saya..hahah..sipp juga nih.

    BalasHapus
  2. demonya share yang dibawah itu ya...show hide banget sih cuman kenapa jadi ada ruang kosong dibawahnya ya?
    ngilanginnya gimana tuh?

    BalasHapus
    Balasan
    1. Ruang kosong cuma ada di demo aja mas, karena demonya saya gunakan jsfiddle. Kalo di pasang di blog, gak ada ruang kosong mas, liat live demonya di http://www.tapike.com/2016/02/cara-membuat-tombol-share-show-hide.html?m=1 pada bagian footer post.

      Hapus


Join This SiteInstagram