Cara Membuat Tombol Share Dibawah Postingan Blog

tutorial cara pasang tombol share di bawah postingan blogspot

Cara Memasang Tombol Social Share Button di Blog. Kali ini blog mas tamvan akan share tutorial cara memasang tombol social share dan like button dilengkapi dengan counter.




Social share button ini saya ambil dari template evomagz dan kita akan pasang dibawah postingan blog. Fiturnya ada Google Plus Like, Facebook Like, Facebook Share, Twitter Share dan linkedin Share button. Tombol Social Share button ini kita akan pasang disetiap postingan blog.




Fungsinya dan manfaatnya apa tombol social share button ini? Fungsinya ya buat memudahkan agar ketika si pengunjung merasa artikel kalian bagus, bermanfaat / relevan dan ingin membagikannya ke social media maka dengan mudah tinggal pilih mau di share ke social media yang mana dan tinggal klik saja.




Nah bagi kalian yang ingin mencoba menerapkan widget social media share buton dibawah postingan blog ini, tinggal ikuti langkah demi langkah di blog mas tamvan ini :)




Dan jangan lupa mampir ke artikel lainnya yang sudah ada di blog ini :)

Tutorial Blogger Lainnya :

• 
  Double Click To Select All Text In Div
  




• 
  Membuat Widget Social Media Follower Counter
  




• 
  Membuat Slider Random Post Responsive Di Homepage
  

Kia lanjut ke tutorialnya...

membuat tombol share di setiap postingan

• Jangan lupa login terlebih dahulu ke akun blogger kalian

• Kalo sudah login, kalian pilih menu Template, Edit HTML

• Selanjutnya Cari Kode <data:post.body/>

• Biasanya kode tersebut ada banyak, tiap template beda-beda. Kalian pilih yang ke dua dan masukan script social share button dibawah ini tepat dibawah kode tadi



<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- Tombol share media sosial -->
<div class='share-buttons-box'>
  <div class='share-buttons'>
    <div class='share gplus'>
      <div class='g-plusone' data-size='tall' expr:data-href='data:post.url'/></div>
    <div class='share like'>
      <div class='fb-like' data-action='like' data-layout='box_count' data-share='false' data-show-faces='false' expr:data-href='data:post.url'/></div>
    <div class='share fbshare'>
      <div class='fb-share-button' data-type='box_count' expr:data-href='data:post.url'/></div>
    <div class='share tweet'><a class='twitter-share-button' data-count='vertical' data-lang='en' data-size='normal' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a></div>
    <div class='share linkedin'>
      <script src='//platform.linkedin.com/in.js' type='text/javascript'>
        lang: en_US
      </script>
      <script data-counter='top' expr:data-url='data:post.url' type='IN/Share'/>
    </div>
  </div>
</div>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<div style='clear: both;'/>
</b:if>

• Lanjut... Sekarang kalian cari kode </head>

• Kalo sudah ketemu, masukan css dibawah ini tepat diatasnya



<style type='text/css'>
/* share buttons */
.share-buttons-box{height:67px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhodsK5jRWo8jkkvLl8ckRY79O3phQbH-sxp3zBiz2DebfQip7FzB9ADxsfg7K7d4VvTPNXhWz3swHawEYI5ug6t_4m6KBNQIX-0drSako6e_k3aODxqW8BGSNFvMbmBDWGQCS0LdtZ29Oe/s1600/share.png) no-repeat 330px 10px;margin:20px 0 15px;overflow:hidden;position:relative}
.share-buttons{margin:0 0;height:67px;float:left}
.share-buttons .share{float:left;margin-right:10px;display:inline-block}
</style>

Kalo widget social share buttonya tidak tampil, silahkan taro html di bawah kode <data:post.body/> yang lainnya. Soalnya tiap template beda-beda.




Apabila masih tidak tampil, kalian bisa menggantinya dengan kode lain. Milasnya taro kode HTML social Share Buttonya di atas 'related-post atau di atas komentar.

• nah kalo sudah, tinggal save dan selesai!!!

Cukup sekian dan terima kasih, semoga artikel tentang cara membuat tombol share button seperti facebook di bawah postingan blog ini bermanfaat...




Buat yang tidak mengerti dengan tutorial ini, silahkan bertanya di kolom komentar ya gan :) Insya allah dibantu sampe tampil :)