Langkah-langkah membuat tombol share dibawah postingan blog

Peranan media sosial begitu besar dalam mempromosikan sesuatu. Hampir bisa dipastikan semua web pasti terdapat tombol share, dimana ada pengunjung yang tertarik dengan isi dari konten web/blog kita, dengan mudah si visitor dapat mengshare ke user-user lainnya. Bahkan tombol share ini bisa saja  menjadi alternatif untuk memperbanyak visitor mengunjungi blog/web kita, selain melakukan penerapan SEO. Namun alangkah baiknya, teknik SEO dan promosi melalui media sosial dua-duanya diterapkan. 

Pada tutorial Blog tips kali ini, kita akan memasang tombol share untuk Google, Facebook share, Facebook like, Twitter dan linkedin diakhir postingan seperti yang ditunjukkan oleh Gambar.1 dibawah ini :

Gambar.1

Kenapa harus diakhir postingan ?
Kenapa kita tidak memasangnya dibawah judul postingan ?. Sekarang pertanyaannya kita balik, apakah visitor langsung bersedia mengshare postingan kita tanpa membacanya terlebih dahulu. Kalaupun ada, itu sangat kecil sekali. 

Lo...bagaimana setelah visitor membaca, namun tidak mengshare postingan kita. Itu artinya postingan tidak menarik. 

Bisa saja kita membuat postingan dengan ukuran font yang kurang menarik, spasi antar paragraf yang terlalu rapat, susunan kalimat yang susah dipahami, penjelasan yang harusnya disertai dengan gambar namun tidak kita sajikan dan berbagai faktor lainnya.

Jadi disini kita juga harus fair, kalo postingan kita mau dishare oleh orang lain. Maka kita juga harus menyajikan konten dengan menarik juga. Nah jika kita menyajikan artikel yang menarik, maka sediakan tombol share dibawah postingan...agar popularitas blog/web kita bertambah.

Memasang tombol share diakhir postingan

---

1. Pertama-tama, login terlebih dahulu pada blog anda, kemudian pilih template ->edit html
2. Setekah itu cari kode ]]</b:skin> atau </style> (Untuk mempercepat pencarian, tekan CTRL+F pada keyboard).
3. Langkah selanjutnya 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/AVvXsEhDFoekSzMM8HXjmvp8yHZtz_-8vj6PlYWxo335vVs7pJMnAM30MwuOserbviJiwvx9fF2lVjOSegFBAjFUubjtqEABtmwo-NKlsOwNfSkosA99J5DUcB8j-X-6bymLRoKsHkSoQvLST2o/s1600/dtcwebsoc1.png) no-repeat 450px 0px;
    margin: 20px 0 15px;
    padding-left: 120px;
    padding-top: 12px;
    border: 1px solid rgba(96, 125, 139, 0.07);
    background-color: rgba(96, 125, 139, 0.07);
    overflow: hidden;
}
.share-buttons {
margin:0 0;
height:85px;
float:left;
}
.share-buttons .share {
float:left;
margin-right:10px;
display:inline-block;
}

4. Tahap berikutnya 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. Jika semuanya sudah berjalan sempurna,  savelah  template. Setelah savenya berhasil, coba buka salah judul postingan blog anda, maka tombol share akan muncul dibawah postingan blog seperti pada Gambar.1 diatas.

Jika anda melihat tombol share twitter berbeda dengan tombol share Google+ dan Facebook yang memiliki counter, hal ini disebabkan karena tidak tersedia lagi layanan counter.Sehingga tidak mengetahui berapa banyak pengunjung yang telah mengtweet postingan kita.

Begitulah cara membuat tombol share diakhir postingan. Bagi yang membutuhkan jenis tombol share keren lainnya seperti Gambar.2 dibawah ini :

Gambar.2

Silahkan baca postingan dengan judul :Cara memasang tombol share keren dibawah postingan blog.