Widget Sharing Social Dibawah Post Blogger

Ini adalah Widget Sharing Social Dibawah Post Blogger. di tutorial ini saya akan menjelaskan, bagaimana menambahkan di Bawah posting blogger. itu termasuk judul bagus efek hover juga. Dengan menggunakan widget ini, Anda dapat berbagi sosial Anda dengan satu klik. Artinya, Anda bisa mendapatkan beberapa
pengunjung blog Anda jika seseorang melakukan Sharing. saya menggunakan CSS3 dan HTML.

1. Pergi ke Blogger.com >> Situs Anda.
2. Klik Template >> Edit HTML.
3. Sekarang Anda baru masuk dalam Blogger HTML Editor tekan CTRL+F untuk mencari code ]]> </ b: skin>
4. Pastekan Kode dibawah ini di atas kode ]]> </ b: skin>

ul.social_TempatBlogging {
list-style:none;
display:inline-block;
margin:15px auto;
}
ul.social_TempatBlogging li {
display:inline;
float:left;
background-repeat:no-repeat;
}
ul.social_TempatBlogging li a {
display:block;
width:50px;
height:50px;
padding-right:10px;
position:relative;
text-decoration:none;
}
ul.social_TempatBlogging 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_TempatBlogging li.abfacebook {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvb4EdrABhHaidGP4KHQlq55e3jxdYbegkuSsCjGJ4b3KXPTT7kB3rv7RGKkGotBlhpfvr68ynS7okE9U7o5fMhdnHwj8AzRcchyphenhyphenfgFig1GG-YvyOFYiGEXOL045BgvgideTUeRNCpTprK/s1600/TempatBlogging-facebook-icon.png);
}
ul.social_TempatBlogging li.abtwitter {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7x2jRulJGPbSBvMxb73h3okMALpqPu9NjMdYQA1XFdqjzwSEy1kcvSU9XZXc85eNmSVYnqZ1KDBS2xnR5-LHyqWjeLv2134KdoTTH7XdeNrUdS8QJ7HkA7V5w7iwjEC2daPSZtG_i-S4h/s1600/TempatBlogging-twitter-icon.png);
}
ul.social_TempatBlogging li.abgoogleplus {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRsLjn1OrMoGGipOVD0eZxScDgEpCWGipd2HoFRhqTsGjXDZafnK8OUdUB7BEMYhVAxLnOzWERwzQK_jot8zgKAlsTlu4txQIFpP9NMgER1qVgr8cMiymeGhaD46qNwweJkMz54T698Mqo/s1600/TempatBlogging-google-icon.png);
}
ul li.abpinterest {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFcuCI_r2uM7OJ7yO7PDgj34rR0q0AF83buUdmLN-NY8EOqkimeTqALggI7epRrnIB4xW3_rKSDpvCHcXE2bYhAug2XC5CkK20hFjUGAlpQ8LdQTd6r9Ue-JotM83UNoR8gdJ8sonOhRyt/s1600/TempatBlogging-Pinterest-icon.png);
}
ul.social_TempatBlogging li.abstumbleupon {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-tjWrVOLcVJzbN2qPHctIed6w2szbxJN3TczxYtm0t_IDJpKcYSumRwyoNCUn8t3DEO2qtiYaoPWlkKdaR5vLXbtTRj7L5a0xLVvVpKPO4omOGgDFfX9coRjSG3qVbqluBBfGloKU1eAR/s1600/TempatBlogging-StumbleUpon-icon.png);
}
ul.social_TempatBlogging li.abdig {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuWhN7AygZ9ZCF7n0pVCkcbq4N5_mG5kTZyPv57pNwZOi7wX3zTCDPubrM7QCSTvkdc2IW2MRgbJg60tJEhyEpOHmOljwsja8kDJqAo6ndvJIgjF4P74vH_ngJXcZMPh1Xkk_oxAUE2DGS/s1600/TempatBlogging-Digg-icon.png);
}
ul.social_TempatBlogging li.ablinkedin {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHQS9K1pphyVBPNAJjKe0M6uRABuL3YlLDHXun4CbMcP_Y21SUEtHuS65VxEVAI2cDfhluVKPgj9UcNApV26SdapU7gkLRLw7bJ8l2CrFGne5NEX7tVnylvYWbmyIWXbGk8CttS7wp9OIg/s1600/TempatBlogging-Linkedin-icon.png);
}
#animation_TempatBlogging:hover li {
opacity:0.2;
}
#animation_TempatBlogging li {
-webkit-transition-property:opacity;
-webkit-transition-duration:500ms;
-moz-transition-property:opacity;
-moz-transition-duration:500ms;
}
#animation_TempatBlogging li a strong {
opacity:0;
-webkit-transition-property:opacity, top;
-webkit-transition-duration:300ms;
-moz-transition-property:opacity, top;
-moz-transition-duration:300ms;
}
#animation_TempatBlogging li:hover {
opacity:1;
}
#animation_TempatBlogging li:hover a strong {
opacity:1;
top:-10px;
}

     5. Cari tag <data:post.body/> dengan menggunakan Ctrl + F 
     6. Paste kode di bawah Sebelum tag <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='font-size: 22px;'><b>Share this article with your friends.</b></div>
    <ul class='social_TempatBlogging' id='animation_TempatBlogging'>
    <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>

      7. Simpan Template Anda.

Selamat: Anda Telah Sukses Memasang Widget Sharing Social Dibawah Post Blogger, sekarang pergi dan Periksa situs Anda untuk melihat apakah itu bekerja baik-baik saja atau tidak. Jika Anda masih menghadapi kesalahan, maka cobalah metode alternatif.

Kami harap artikel ini telah memfasilitasi Anda dalam menambahkan Widget Sharing Social Dibawah Post Blogger. Marilah kita tahu metode mana yang Anda gunakan, apa alasan mengapa Anda menggunakannya, keuntungan apapun dari kotak seperti di mata Anda. Jika Anda suka artikel ini, mengapa kau tidak mengikuti kami di FB?

Share this post