Cara Memasang Widget Sharing Super Keren Di Bawah Posting

Dalam hari ini taukahbahwa.blogspot.com akan membahas posting tentang Cara Memasang Widget Sharing Super Keren Di Bawah Posting. Semoga dengan berita Cara Memasang Widget Sharing Super Keren Di Bawah Posting akan menambah pengetahuan untuk anda pembaca setia taukahbahwa.blogspot.com

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/AVvXsEg5l98lz8gSCwftxccN5O3PjiEfmMHb4vLCa-1ZfaOkCs4TKqn4UwkxqNnXPamq58-QRwNzXPQUmEFzUhSJVBd4ewH3y1rYpRJ53OLjJLksAxlf0PpJryf2P4vwtYBRaVvSuPSuM5xf8USM/s1600/tutorialblogspot-facebook-icon.png)}ul.social_tutorialblogspot li.abtwitter{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGNXUUnX-0XSebDZ4o4vzOxM13IKdXQoE9NOJ53igSOfoERZjV6D9hVeQcPNGjsyLKvfrDnYXFikux2FSvmQDkikvN5WkMjyEpVaiMFzv0gzt3ZPyJVUQuatV6lir5laxGlkh9aSXrpZ2d/s1600/tutorialblogspot-twitter-icon.png)}ul.social_tutorialblogspot li.abgoogleplus{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwhnELBfDLymBmfPAPx_jGKKZKPpvVotoReAqHWO8IdqWZ7MRFZeB8F5HReqzexRGwF0TrWs3YISnRi1WooP1yVZOzT1lGSQPnwntcIbifHnImQQw4Vw2Ckw9ohtxjIPKb3B-6MMdUF9wK/s1600/tutorialblogspot-google-icon.png)}ul li.abpinterest{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik1MU3QMVzxK8hkoS78KljJ3vvrCKLDjxfx4_M1pW0KPan7VJvRHMs83mRdM80GpK5m5uaIMBKDbW_5bnRTBELsh9jkyCT4fZfRmPmr97OmKfMUW4Rgs69Ocn1sFaN2E1y__6mpf_ZYDZr/s1600/tutorialblogspot-Pinterest-icon.png)}ul.social_tutorialblogspot li.abstumbleupon{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOqhHhSHSQL353Co8RM00PXAszbI2bhvIXUb6zrDNvKC_eEFD_h9ak9nB6S_7zeWsiRLi5OqTgwA_Mtqkv41OWiaAYYx08lfIEm7SyJuuCs7n50AlUuGOD6JvFwrovP2ZW_uSt1tJajVzP/s1600/tutorialblogspot-StumbleUpon-icon.png)}ul.social_tutorialblogspot li.abdig{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFZtpuzbwh1C88ZWuSSBFFrSzTDRDC1I1renOloLD8IswMqVegoVui_JNAsROw3k1gEb3xjPWtmf0iKJJ6B7Fjh-o068zJ0dfEQICjqYH1rpaHH-IytJrpzUyeoWSqXdogq2L1Ikb71ozJ/s1600/tutorialblogspot-Digg-icon.png)}ul.social_tutorialblogspot li.ablinkedin{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRHiqHu4lqR5CJXlj-H1iM_rvP_YZ3U3QQa7XCJuIT34wv5iXir2XfvP7FEtUrCxcjK2Pgu96bJs635PiK0E_PfZDF72jrTkDMQbNuMYgzUPETn8b8iRptpLDYx0jvKxdiypmi2QdMmMMh/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.

Dapatkan berita terupdate dan unik setiap saat hanya di taukahbahwa.blogspot.com

Homepage|http://taukahbahwa.blogspot.com