Cara Membuat Tombol Share Di Bawah Judul Posting Blog

Memasang tombol Share atau tombol berbagi di bawah judul posting akan memancing pengunjung blog sobat blogger untuk membagikan posting dari blog sobat yang sedang mereka baca ke situs-situs jejaring sosial. Tombol Share pada tutorial ini, tidak sama dengan Tombol Share melayang yang saya berikan pada kesempatan sebelumnya. Tombol Share ini tidak tampil dalam bentuk vertikal tetapi dalam bentuk horizontal dan posisinya tepat di bawah judul posting.

Social Media Sharing Buttons ini terdiri atas tombol share Twitter, tombol share Facebook, tombol share Google Plus, tombol share Pinterest dan tombol share Digg. Seperti yang sobat blogger ketahui bahwa kelima situs Social Network tersebut merupakan Social Network yang akan membawa atau memberikan BackLink buat blog sobat blogger jika ada pengunjung atau visitor yang membagikan Posting sobat ke jejaring sosial mereka.

---

Cara Membuat Tombol Berbagi Di Bawah Judul Posting Blog

---

• Sign In di blogger.com
• Pada menu drop down, pilih template
• Backup template sobat terlebih dahulu
• Klik Edit HTML dan klik Proceed
• Kasih tanda centang pada Expand Widget Template
• Backup Template sobat blogger terlebih dahulu
• Cari kode <div class='post-header-line-1'/> dan letakkan kode berikut tepat di bawahnya

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='padding:4px;'>
<table border='0'><tbody><tr>
<td>
<div style='margin-right:5px;'>
<a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
</td>

<td>
<div style='margin-right:5px;'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp; action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; margin-left:0px; width:100px; height:20px;'/>
</div>
</td>

<td>
<div style='margin-right:5px;'>
<g:plusone expr:href='data:post.url' size='medium'/>
</div>
</td>

<td>
<div style='margin-right:5px;'>
<a expr:href="&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url" class="pin-it-button" count-layout="horizontal"><img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" /></a>
<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>
</div>
</td>

<td>
<div style='margin-right:5px;'>
<script type="text/javascript">
(function() {
var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://widgets.digg.com/buttons.js';
s1.parentNode.insertBefore(s, s1);
})();
</script>
<a class='DiggThisButton  DiggCompact' expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title'></a>
</div>
</td>
</tr></tbody></table>
</div>
</b:if>

• Simpan template sobat

Tambahan :
Terdapat dua kode <div class='post-header-line-1'/> di dalam template, letakkan kode di atas tepat di bawah kode <div class='post-header-line-1'/> yang pertama.