Membuat widget social share di bawah postingan

Membuat  Widget Social Share Di Bawah Postingan - widget social share memang sangat penting untuk memenuhi kebutuhan blog sebagai sarana upaya untuk menyebarluaskan postingan blog kita ke dalam jejaring-jejaring sosial seperti facebook, twitter, RSS, dll.

Tombol share sangat penting untuk meningkatkan pengunjung ke blog. sebenarnya blogspot sendiri sudah menyediakan widget share yang default akan tetapi tampilannya kurang menarik membuat pengunjung kurang tertarik untuk membagikannya..Namun untuk menarik perhatian pengunjung blog agar mau berbagi artikel yang dibaca ke berbagai jejaring sosial, tentunya anda membutuhkan tombol share yang menarik. Sebelumnya saya juga membuatkan tutorial cara membuat widget sharing is sexy ,tapi kali ini saya berikan widget share versi yang lain.

Berikut Cara membuat Widget Social Share Di Bawah Posting Blog :

1. Pada Dashboard Blogger anda pilih Template >> Edit HTML
2. Gunakan tombol Ctrl + F untuk mencari kode <data:post.body/>
3. Copy dan pastekan  kode dibawah kemudian letakan di bawah kode <data:post.body/>
   <style>
   .sharebelow a { display:block; height:48px; width:48px; padding:0 4px; float:left; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfS-b9sGisU-sf10GVBZPeBsk1D4Gan8sHwqIaCtQhL3Mz8_NaRPaVQVrr99uljZjchBt4-uVY7Brh9VdK6R_FSDPOlVHhpvQ6h3md8R4ZmU_c3uJp6NBcaG0sbtOIdJTQsJqgsIU3bUA/s1600/sharebelow.png) no-repeat; }
   .sharebelow a.googleplus { background-position: 0px -348px; }
   .sharebelow a.googleplus:hover { background-position: 0px -406px; }
   .sharebelow a.pinterest { background-position: 0px -464px; }
   .sharebelow a.pinterest:hover { background-position: 0px -522px; }
   .sharebelow a.delicious { background-position: 0px 0px; }
   .sharebelow a.delicious:hover { background-position: 0px -58px; }
   .sharebelow a.digg { background-position: 0px -116px; }
   .sharebelow a.digg:hover { background-position: 0px -174px; }
   .sharebelow a.stumbleupon { background-position: 0px -812px; }
   .sharebelow a.stumbleupon:hover { background-position: 0px -870px; }
   .sharebelow a.technorati { background-position: 0px -928px; }
   .sharebelow a.technorati:hover { background-position: 0px -406px; }
   .sharebelow a.twitter { background-position: 0px -928px; }
   .sharebelow a.twitter:hover { background-position: 0px -986px; }
   .sharebelow a.facebook { background-position: 0px -232px; }
   .sharebelow a.facebook:hover { background-position: 0px -290px; }
   .sharebelow a.reddit { background-position: 0px -580px; }
   .sharebelow a.reddit:hover { background-position: 0px -638px; }
   .sharebelow a.rss { background-position: 0px -696px; }
   .sharebelow a.rss:hover { background-position: 0px -754px; }
   </style>
   <div class='sharebelow'>
   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <div class="shareandbookmark">
   </div>
   <!--Facebook-->
   <a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Share this on Facebook :&gt;'/>
   <!--Google Plus-->
   <a class='googleplus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:post.url' rel='external nofollow' target='_blank' title='+1 it :&gt;'/>
   <!-- Twitter -->
   <a class='twitter' expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Tweet this :&gt;'/> <!-- Pinterest -->
   <a class='pinterest' href="http://pinterest.com/" rel='external nofollow' target='_blank' title='Pin it :&gt;'/> <!-- Delicious -->
   <a class='delicious' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Add this to Delicious :&gt;'/> <!--Stumble--> <a class='stumbleupon' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Stumble this :&gt;'/>
   <!--DIGG-->
   <a class='digg' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url' rel='external nofollow' target='_blank' title='Digg this :&gt;'/>
   <!-- Reddit -->
   <a class='reddit' expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Add this to Reddit :&gt;'/>
   <!--RSS -->
   <a class='rss' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' target='_blank' title='Bookmark :&gt;'/>
   </b:if>
   </div>
   <div style="clear:both"/>

4. Save Template , lihat hasilnya

Jika masih bingung tinggalkan komentar di bawah ini .