Cara Membuat Tombol Share Dibawah Postingan Blog


ANDROIDBARU.COM -  Kali ini saya akan memberikan tutorial membuat tombol share dibawah postingan blog, untuk model tombol share button ini saya ambil dari template Viomagz versi 2.7.5 buatan mas sugeng. Fiturnya yang ada di tombol share button ini adalah Facebook share, Twitter share, Google Plus share dan Whatsapp share.

Fungsi dari tombol share button ini sangantlah penting, ketika ada pengunjung dari blog kamu menyukai artikel kamu dan merasa artikel kamu bermanfaat otomatis si pengunjung ingin membagikan artikel tersebut di sosial media nah otomatis di setiap postingan blog kamu membutuhkan tombol share sosial media ini.

Nah bagi kamu blogger yang ingin menambah tombol share sosial media yang ditaruh dibawah postingan, berikut langkahnya,

1. Pertama kamu cari menu Template/Theme
2. Lalu pilih Edit HTML
3. Kemudian Ctrl + F setelah itu masukan kata kunci </style> setelah ketemu, taruhlah script dibawah ini tepat diatas </style> lalu simpan

/* Share button */ .share-this-pleaseeeee { display: inline-block; margin: 0; color: #afafaf; text-transform: uppercase; font-size: 16px; background: #fff; z-index: 1; position: relative; padding: 0 10px; font-weight: 500; } #share-container { margin: 20px auto; overflow: hidden; } #share { width: 100%; text-align: center; } #share a { width: 25%; height: 40px; display: block; font-size: 24px; color: #fff; transition: opacity 0.15s linear; float: left; } #share a:hover { opacity: 0.8; } #share i { position: relative; top: 50%; transform: translateY(-50%); } .facebook { background: #3b5998; } .twitter { background: #55acee; } .googleplus { background: #dd4b39; } .linkedin { background: #0077b5; } .pinterest { background: #cb2027; } .whatsapp { background: #25d366; }

4. Setelah itu cari kembali Ctrl + F  dengan kata kunci <data:post.body/> jika sudah ketemu, copy dan paste script dibawah ini tepat dibawah <data:post.body/> dan biasanya <data:post.body/> tidak hanya satu jadi cobalah satu persatu

<div id='share-container'>
<div class='label-line-c'>
<p class='share-this-pleaseeeee'>Share this post</p>
</div>
<div id='share'>
  <!-- facebook -->
  <a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a>
  <!-- twitter -->
  <a class='twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a>
  <!-- google plus -->
  <a class='googleplus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/></a>
  <!-- linkedin
  <a class='linkedin' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' rel='nofollow' target='_blank'><i class='fa fa-linkedin'></i></a> -->
  <!-- pinterest
  <a class='pinterest' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;amp;media=&quot; + data:blog.postImageUrl + &quot;&amp;amp;description=&quot; + data:post.title' rel='nofollow' target='_blank'><i class='fa fa-pinterest-p'></i></a> -->
  <a class='whatsapp' data-action='share/whatsapp/share' expr:href='&quot;whatsapp://send?text=&quot; + data:post.title + &quot;%20%2D%20&quot; + data:post.url'><i aria-hidden='true' class='fa fa-whatsapp'/></a>
</div>
</div>

5. Jika sudah ditaruh, kemudian simpan lalu cek pada postingan blog apakah sudah benar apa belum, jika sudah benar selamat kamu sudah bisa memasang tombol share sosial media dibawah postingan blog.

Dan saya kira tombol share sosial media yang saya berikan adalah yang paling baru dan up to date, dilihat dari icon sosial medianya keren dan juga bisa responsive ketika membuka blog di versi moble.
Banner iklan disini

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel