Membuat tombol share keren dibawah posting blog tanpa JS mudah dan cepat

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>

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

Tweet