Cara memasang tombol share keren dibawah postingan blog

Sering kita melihat blog orang lain memiliki widget media social baik yang terletak disamping kanan, kiri, dibawah judul postingan maupun diatas postingan.Pemasangan tombol share pada blog/web dapat membantu pengunjung dalam mempromosikan postingan kita.

Dalam tutorial Blog tips ini, kita akan membuat tombol share untuk google, facbook share, facebook like, twitter dan linkedin dengan tampilan yang menarik. Pemasangan tombol share pada blog tidaklah sulit. Berikut ini adalah hasil ataupun output dari tombol share yang akan kita buat dan pasang dibawah postingan blog, seperti yang ditunjukkan oleh Gambar.1 dibawah ini :

Gambar.1

Seperti yang terlihat pada Gambar.1, kita menambahkan tombol share untuk Google, Facebook like, Facebook share, Twitter, Linkedin berserta dengan counternya. Counter disini berfungsi berapa jumlah yang telah dishare dari masing-masing tombol tersebut. Namun untuk media social twitter, bagian counternya sudah tidak berjalan lagi. Hal ini dikarenakan twitter sejak november 2015 telah menghentikan layanan tersebut, jadi hanya berupa tombolnya saja tanpa ada counter.

Langkah-langkah menambah tombol share

---

1. Setelah anda login pada blog anda, pilih template ->edit html
2. Kemudian cari kode ]]</b:skin> atau </style> (Untuk mempercepat pencarian, tekan CTRL+F pada keyboard).
3. Kemudian copy paste code dibawah ini pada bagian atas ]]</b:skin> atau </style>

/* share buttons */
.share-buttons-box {
height: 85px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjx9B3h4XxG1Bf91dk624UTlqCou-4xldKaewI2OPLL2cKeL77A-DMmx8uJ5xxM-ekem68C0Cn6L98IwPqIhMwKWDoYZPaHTlobEho8orm_n5TVGSb9cqtbmM3QpOUJGSpIxN07o4xENE/s1600/tweetbird.png) no-repeat 330px -20px;
margin:20px 0 15px;
overflow:hidden;
}
.share-buttons {
margin:0 0;
height:85px;
float:left;
}
.share-buttons .share {
float:left;
margin-right:10px;
display:inline-block;
}

4. Langkah selanjutnya cari kode <data:post.body/> (Umumnya kode tersebut lebih dari satu, Silahkan anda pilih kode yang terakhir atau bisa anda coba satu-satu.)
5. Lalu tambahkan kode css berikut dibawah <data:post.body/>

<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)?&#39;http&#39;:&#39;https&#39;;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);</script>

6. Kemudian save template. Setelah savenya berhasil, silahkan buka salah judul postingan blog anda, maka tombol share akan muncul dibawah postingan blog seperti pada Gambar.1 diatas.

Begitulah cara memasang tombol share keren dengan sisi kanan ada gambar logo twitter. Namun seperti yang sudah diutarakan diatas, khusus tombol share twitter tidak tersedia lagi layanan counter. Sehingga tidak mengetahui berapa banyak pengunjung yang telah mengtweet postingan kita.