Cara Memasang Widget Sharing Super Keren Di Bawah Posting

Bagikan ke Google+Tambahkan ke DeliciousTweet dong..Share ke FacebookSubmit ke StumbleUponKirim ke Digg

Untuk membuat sebuah posting, biasanya waktu saya yang terbuang tidak lebih dari 30 menit. Tapi, untuk beberapa minggu ini, saya menghabiskan waktu 2 hari hanya untuk menulis satu posting. Penyebab dari semua ini tidak lain dan tidak bukan karena kodisi fisik saya yang drop yang disebabkan oleh perjalanan jauh yang saya lakukan minggu kemarin. Biasanya, teknik paling ampuh untuk mengobati keadaan yang seperti ini saya lakukan dengan dua cara yaitu dengan melakukan pijat refleksi atau teknik sedot darah dengan metode Bekam.

Waduh... Jadi kebanyakan cerita. Oya... Buat sobat blogger saya ingin memasang Widget Sharing Social atau tombol berbagi atau share button atau apalah istilahnya. Anda bisa menggunakan kode yang saya siapkan ini. Kode ini akan menghasilkan Widget Social Sharing yang sangat keren. Kalau pengunjung blog Anda mengarahkan crussor-nya ke arah widget ini, maka widget ini akan terlihat meredup (Kecuali pada ikon yang ditunjuk, tetap terang dan menampilkan teks). Untuk demo-nya atau live preview bisa di lihat di bawah ini!

Demo

Bagikan Artikel ini ke teman Anda...!!!

• 
  Facebook
  
• 
  Twitter
  
• 
  Google+
  
• 
  Pinterest
  
• 
  StumbleUpon
  
• 
  Dig
  
• 
  LinkedIn
  

Untuk memasang widget berbagi ini di bawah artikel atau posting blog tidak sulit. Coba Anda ikuti saja langkah-langkah di bawah ini!

• Anda masuk dulu ke blogger.com
• Pilih Template dan Edit HTML
• Cari kode ]]> </ b: skin> dan letakkan kode berikut di atas kode ]]> </ b: skin>

ul.social_tutorialblogspot{list-style:none;display:inline-block;margin:15px auto}ul.social_tutorialblogspot li{display:inline;float:left;background-repeat:no-repeat}ul.social_tutorialblogspot li a{display:block;width:50px;height:50px;padding-right:10px;position:relative;text-decoration:none}ul.social_tutorialblogspot li a strong{font-weight:400;position:absolute;left:20px;top:-1px;color:#fff;z-index:9999;text-shadow:1px 1px 0 rgba(0,0,0,0.75);background-color:rgba(0,0,0,0.7);-moz-border-radius:3px;-moz-box-shadow:0 0 5px rgba(0,0,0,0.5);-webkit-border-radius:3px;-webkit-box-shadow:0 0 5px rgba(0,0,0,0.5);border-radius:3px;box-shadow:0 0 5px rgba(0,0,0,0.5);padding:3px}ul.social_tutorialblogspot li.abfacebook{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1ylF6Q74_TUCDJK1aMmwcIQ9mOaxdV-tkg4JkPh5Qyn2Ti5MOP-PX1M4mLSnFnCP0uQ9JwLoN_ylemda2UoR2Cgq8a-ZvPCJOa1lRUOrztFPHLJt2xxZeRCMc3HzsguM7kIhhjDb0S7tq/s1600/tutorialblogspot-facebook-icon.png)}ul.social_tutorialblogspot li.abtwitter{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY5gXgbjVTzhvOhWPHeMyjSnZtO8mfHIhxzSbm-IeBSIupF2dhgvyHDR8VehdlcAWKCoFEkRZwDevmKfiQUBLqOx5GnKMsBfUItUl5_GBwzUgGFSn2zSdaOKaO1yUVoqPogtKseK7jtxRK/s1600/tutorialblogspot-twitter-icon.png)}ul.social_tutorialblogspot li.abgoogleplus{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHGZySMmLb73BehDC8iX3M9yMoVu59cBI3T9HUwydgZ1vCLjR5AosDmqmSqkp9S34_NGbWYGWmHcXtmx2Sg5OyW-88POZ3NtK1A7j19PoeBegya62ZFB0r2XxeVfpjVqRDT7EJITAnE72w/s1600/tutorialblogspot-google-icon.png)}ul li.abpinterest{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6S-Oux6n0CZVywGnP8m-O00Ucf4bpIcCd8LnCT_AprVM3CkJS90BQkXoc_75dSfoF644Ab6o55i_ddHAJ1wmty5tGd0zHFY9JBk_7oI552G_VBVb2Vzhyphenhyphenp9k29U7BUPnhwxI0yf1QZMB7/s1600/tutorialblogspot-Pinterest-icon.png)}ul.social_tutorialblogspot li.abstumbleupon{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTeS_rS4IA4kUvX4qK7e6ERy722OylJwcrIrGYnfQQF8bN3wqEy3qys1O9b_c8giLDHwuonYd3yrZsu2MpcolHcff1_aXnIvOOa7Za4G619YWG2e-0obUjcNEg9rp03vVL5PQQmhYM9G-x/s1600/tutorialblogspot-StumbleUpon-icon.png)}ul.social_tutorialblogspot li.abdig{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbzRnFDO9VH5bdYmxX7lUtgygSYzfXU2J_5HBNKOJt_Ko_zHvveZaaNmmy1rEwf3jdk-rtu5F0Jo_KPuWMmSh2QGKt0Q6VwJevOya0RFAaoweM8gBYkrJxuLvNnVKtHQPibr0Dn5SU_lRO/s1600/tutorialblogspot-Digg-icon.png)}ul.social_tutorialblogspot li.ablinkedin{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGx-ejsEKiGcBRVoYaleL4dCr-sF-RqPV_GXtJrlohVSpAwv4UwFiJJnp2R1JFSQsNzTa2jrRiyaZYFqirhzYTs-ktvR3p4-Qjx9-hVKMQc5TubW2IsASJYPBqV0ZGkWryfFBT9p3K3-_x/s1600/tutorialblogspot-Linkedin-icon.png)}#animation_tutorialblogspot:hover li{opacity:.2}#animation_tutorialblogspot li{-webkit-transition-property:opacity;-webkit-transition-duration:500ms;-moz-transition-property:opacity;-moz-transition-duration:500ms}#animation_tutorialblogspot li a strong{opacity:0;-webkit-transition-property:opacity,top;-webkit-transition-duration:300ms;-moz-transition-property:opacity,top;-moz-transition-duration:300ms}#animation_tutorialblogspot li:hover{opacity:1}#animation_tutorialblogspot li:hover a strong{opacity:1;top:-10px}

• Cari kode <data:post.body/> dan letakkan kode berikut SEBELUM kode <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='font-size: 22px;'><b>Bagikan Artikel ini ke teman Anda...!!!</b></div>
    <ul class='social_tutorialblogspot' id='animation_tutorialblogspot'>
    <li class='abfacebook'>
    <a expr:href='&quot;http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow'><strong>Facebook</strong></a>
    </li>
    <li class='abtwitter'>
    <a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' rel='nofollow' target='_blank'><strong>Twitter</strong></a>
    </li>
    <li class='abgoogleplus'>
<a expr:href='&quot;https://plusone.google.com/_/+1/confirm?hl=en&amp;url=&quot; + data:post.url' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank'><strong>Google+</strong></a>
    </li>
    <li class='abpinterest'>
<a href='javascript:void((function()%7Bvar%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)%7D)());' rel='nofollow' target='_blank'><strong>Pinterest</strong></a>
    </li>
    <li class='abstumbleupon'>
    <a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank'><strong>StumbleUpon</strong></a>
    </li>
    <li class='abdig'>
      <a expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><strong>Dig</strong></a>
    </li>
    <li class='ablinkedin'>
    <a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&amp;source=&quot;' rel='nofollow' target='_blank'><strong>LinkedIn</strong></a>
    </li>
    </ul>
</b:if>

• Preview template Anda terlebih dahulu baru di Save.

Tambahan :

1. Kalau Anda sudah menerapkan fitur read more otomatis, kode kedua sebaiknya diletakkan setelah kode Read More.
2. Kode CSS di atas sudah di kompress menggunakan Online YUI Compressor jadi Anda tidak perlu kompress lagi.