Membuat tombol share keren dibawah posting blog tanpa JS

Membuat atau memasang tombol share media sosial di blog akan lebih mudah mudah untuk mendapatkan pengunjung baru apabila artikel anda bermafaat. Tombol share sengaja dipasang dibawah postingan blog bertujuan agar pengunjung yang sudah membaca artikel anda dapat membagikan ke sosial media jika artikel yang dirasa bermanfaat. Jika dipasang diatas posting maka kemungkin di bagikan sangat kecil karena pengunjung belum membaca artikel anda.
 
Bagi blog anda yang belum memiliki tombol share, silahkan ikuti cara membuat tombol share dibawah ini.

1. Login ke Blogger.
2. Klik menu Template > Edit HTML.
3. Cari kode ]]></b:skin>, gunakan (CTRL + F) untuk memudahkan pencarian.
4. Letakkan kode dibawah ini diatas kode ]]></b:skin>

   #share-btn{border-top:1px solid #d3d3d3;border-bottom:1px solid #d3d3d3;margin-top:10px;font-size:80%;width:100%;padding:10px;color:#000;}
   #share-btn img{margin:0px 10px 0px 0px;}

5. Setelah itu cari kode <data:post.body/> , jika lebih dari satu, maka letakkan di bagian yang ke dua atau tiga.
6. Copy kode dibawah ini dan letakkan di bawah <data:post.body/>
   

   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <div id='share-btn'>
   <b>Bagikan artikel ini :</b><br/><br/>
   <a expr:href='&quot;http://www.facebook.com/share.php?u=&quot; + data:post.url' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' rel='nofollow' target='_blank' title='Berbagi ke Facebook'><img src='https://lh6.googleusercontent.com/-Y_VUkOKNg1M/Ul_GST5_R0I/AAAAAAAAB-A/x9qSMfdS-JM/s35-no/facebook-icon.png'/></a>
   <a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; : &quot; + data:post.snippet' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' rel='nofollow' target='_blank' title='Berbagi ke Twitter'><img src='https://lh6.googleusercontent.com/-VzbOYSIoN8c/Ul_GTECar5I/AAAAAAAAB-M/M05Ouf28Yy8/s35-no/twitter-icon.png'/></a>
   <a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' rel='nofollow' target='_blank' title='Berbagi ke Google Plus'><img src='https://lh3.googleusercontent.com/-NlwgIK8uEuA/Ul_GSjHTOcI/AAAAAAAAB98/DWzGJWV0EsE/s35-no/google-plus-app-icon.jpeg'/></a>
   <a expr:href='&quot;http://www.blogger.com/blog-this.g?n=&quot; + data:post.title + &quot;&amp;source=&quot; + data:blog.title + &quot;&amp;b=&lt;a href=&#039;&quot; + data:post.firstImageUrl + &quot;&#039;&gt;&amp;lt;img src=&amp;#039;&quot; + data:post.firstImageUrl + &quot;&#039;/&gt;&lt;/a&gt;&lt;br/&gt;&quot; + data:post.snippet + &quot;&lt;br/&gt;&lt;a href=&#039;&quot; + data:post.url + &quot;&#039;&gt;Baca Selengkapnya...&lt;/a&gt;&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=500,width=700\&quot;); return false;&quot;' rel='nofollow' target='_blank' title='Berbagi ke Blogger'><img src='https://lh6.googleusercontent.com/-oWTQ9nPSrZk/Ul_GSet1KUI/AAAAAAAAB-E/1yB-61t7Qbk/s35-no/blogspot-495x331.jpg'/></a>
   <a expr:href='&quot;http://www.blogger.com/email-post.g?blogID=&quot; + data:blog.blogId + &quot;&amp;postID=&quot; + data:post.id' rel='nofollow' target='_blank' title='Kirimkan Ini Lewat Email'><img src='https://lh3.googleusercontent.com/-XBswmQor-LE/Ul_MFG03TII/AAAAAAAAB_A/8HLyaaLfwMQ/s35-no/email-icon.jpg'/></a>
   <a href='javascript:window.print()' rel='nofollow'><img src='https://lh4.googleusercontent.com/-xeE_3XyKYrE/Ul_NFrSWi_I/AAAAAAAAB_Y/6ZggawpD_Jk/s35-no/print.jpg'/></a>
   <br/>
   <textarea style='margin:5px 0px;padding:0px;border:1px solid #d3d3d3;width:97%!important;font-size:130%;color:D3D3D3;'><data:post.url/></textarea>
   </div>
   </b:if>

*Ket : Ganti tulisan warna biru dengan tulisan yang anda inginkan.

Simpan template dan lihat hasilnya, semoga berhasil... :)

Sumber: http://dokyasde.blogspot.com/2013/10/tombol-share-keren-dibawah-posting-blog.html