Cara Membuat Widget Sharing Dibawah Artikel Post

 

Cara Ini adalah Membuat widget sharing Sosial Di bawah Post. Widget ini cukup bagus bagus dari segi penampilan karena memiliki efek hover.
Dengan menggunakan widget ini, sobat dapat berbagi artikel ke berbagai social media hanya dengan skali klik. Widget ini menggunakan CSS3 dan HTML.
Lanjut ke tutorialnya...silahkan sobat ikuti langkah-langkah berikut ini :

1. Log in ke account blogger dan klik drop down.


2. Sekarang pilih "Template" Seperti bawah.



3. Sekarang Anda dapat melihat Live pada blog, klik tombol EDIT HTML "
4. Cari code ]]> </ b: skin> dengan menggunakan Ctrl + F
5. Paste kode di bawah diatas code ]]> </ b: skin>

ul.social_btrix {
list-style:none;
display:inline-block;
margin:15px auto;
}
ul.social_btrix li {
display:inline;
float:left;
background-repeat:no-repeat;
}
ul.social_btrix li a {
display:block;
width:50px;
height:50px;
padding-right:10px;
position:relative;
text-decoration:none;
}
ul.social_btrix 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_btrix li.abfacebook {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4BtvPjHvL1i9cqFs-fP4Phn2TLuG0TgVmvTNDLksIr264tl2YENSUzTMWmPi40RUTgdj1MjksOy8MDIoq6yxCB5J9mZHka79CDIB8kRdmy6k6GyCb5RHhoDvSDsOXw6xla8ASGSZEF1yn/s1600/btrix-facebook-icon.png);
}
ul.social_btrix li.abtwitter {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoU9i1M2UTSo8LkTaReNpxX272G04_hccDYd1tDrd-qW_TWGC2QkM3sqgEJK-U0Z3rggithhTDFInstAA0Cbo8MT_yAV-HbAgrDRmOWCUaxq2rbQ8BjiO8ZCioXOWaJY4jaBa1ZDY1bVsQ/s1600/btrix-twitter-icon.png);
}
ul.social_btrix li.abgoogleplus {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ3yjlZ9dZUZTcenm3zAGiEFiO58Z9KBA_NfMlTh788FzOS40MXEKfqQAhiKSHu0TIaeoQv6EcdNbgE9omhrzE3bdBFrafCcXv_4PI5iirY7dCLPDuPWrrYcHyKPqy9kfPvIpEOacDGBnh/s1600/btrix-google-icon.png);
}
ul li.abpinterest {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT-45pPcqwAQsZPpjklKDrzjcGBc8XqBWFgAuobK2dTwA0R04Cm6dmWtAkiHz16BFW2AMxC_ZXA1r5xUmw1WMFiAwkAxj9II2tqt5PFfoBAALUcqQRlNI1Kk3mCxVpUaTgcg-Z9gliQxZq/s1600/btrix-Pinterest-icon.png);
}
ul.social_btrix li.abstumbleupon {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEN_Xhya7VpgH70mII8Kau3z7umgF-jRRsRa05j8xcZ5MWElbVHjzb90JPA7oHMVr-vgEyD_LGYxI0hZjnqePlQJj5k1UaOT30-cLuEnXznuCFmIk7NW-Bdm39jL22tFrMXW7MHoeA8aTX/s1600/btrix-StumbleUpon-icon.png);
}
ul.social_btrix li.abdig {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf-Hhm6ww7KzBIFT-zse-JSR0k5_xa9QWHJi8Qikhhdm0uVDytsEyuhOVwNASwcqpVnbWbPqUfMn4AK3fCYQ820IJPcaO5hjod1ug-7psxp75sHCXszyRF30JAu4CuZIEQ4GcLX9CmyUOx/s1600/btrix-Digg-icon.png);
}
ul.social_btrix li.ablinkedin {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF_H1za8ZCUqxovl5n-p7WdACyldPMTdETo_zd_aihE1IxEr0ybAIQq-STR-GmhBj2IU-Us-y74YJT5xxaK_Y34fSxk_s4HOwXXJeSmDsQEkmOEnQdLClhMcqActReWcXMCSLMwYE1RdoC/s1600/btrix-Linkedin-icon.png);
}
#animation_btrix:hover li {
opacity:0.2;
}
#animation_btrix li {
-webkit-transition-property:opacity;
-webkit-transition-duration:500ms;
-moz-transition-property:opacity;
-moz-transition-duration:500ms;
}
#animation_btrix li a strong {
opacity:0;
-webkit-transition-property:opacity, top;
-webkit-transition-duration:300ms;
-moz-transition-property:opacity, top;
-moz-transition-duration:300ms;
}
#animation_btrix li:hover {
opacity:1;
}
#animation_btrix li:hover a strong {
opacity:1;
top:-10px;
}

6. Selanjutnya cari code <data:post.body/> dengan menggunakan Ctrl + F
7. Paste kode di bawah ini diatas code <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_btrix' id='animation_btrix'>
    <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>

8. Terakhir simpan template.