Post ေတြရဲ႔ေအာက္မွာ Social Sharing Widget ထည့္နည္း

Demo

How to add Social Sharing Widget For blogger

1. View Blog ေဘးက Down Arrow ကို ႏွိပ္ပါ။

2. အဲဒီထဲက "Template" ကို ေရြးပါ။

3. Customize နဲ႔ Html ႏွစ္ခုရွိတဲ့အထဲမွာ HTML ကို ႏွိပ္ၿပီး EDIT လုပ္ပါ။

4. Ctrl+F ကို ႏွိပ္]]></b:skin> ဆိုတဲ့ စာစုကေလးကို ရွာပါ။

5. ]]></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/AVvXsEhgNkVwA52xFSw1GArxmwDETzq0JlQWq3y3sNDt25HROpwygftgT6lGn4A_40boLk2qvdp8ARIV1hyphenhyphenC8JAS4snW9ihVeaxJoDWRhi772Dk70jKkZKrVHahptfCAzK98AxowernKeIkgvBDB/s1600/btrix-facebook-icon.png);
}
ul.social_btrix li.abtwitter {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhsBI6lX2Pkt3RqNWB5FkAvBgzWIhUMpib8hCtdRko1kbUgH3bjImQRRK8Mf2IbdH7rXr3a-P0c-d8lnPy1hWcX31UeZtwvSMmb1sRqXSl32qW5_ACLmA5mHEOXHDoOT7wv1KsYTN1BT0V/s1600/btrix-twitter-icon.png);
}
ul.social_btrix li.abgoogleplus {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhExtZp6kJyYGstZzsCc9WGf_TNrUTg5Fr0SqrcSv7cAXclA-Im9vlwDJbhQL40FZH0CsbNtUD5rb1ItxY6ae96mepuxJg2ZSHiryIY5U1Kh_3ZhD7XFMcTujtuI2-8jpsrb_BvUM3_yM0-/s1600/btrix-google-icon.png);
}
ul li.abpinterest {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNMOa3DFfBIbIZ0MHMKe1lORNg0KpR5aGo594IlOMHRBsbLIto59YKHxxSd1ZnbB9jKb-lQLMcdQMIwaPyPZFjvsBJ2Wly4HtD_SD17XPb0dArVt_2ncRHVkxMh0uO4xy1iI0Rj9s0eMzw/s1600/btrix-Pinterest-icon.png);
}
ul.social_btrix li.abstumbleupon {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP15zo6e2h2KmNOUKbWZ3htUpR8EFLl9_McCl-nIgeLo0owGdfb2ZJ-utrvh45BwvlvulCK5yErjF1iliwgMCl6viuxAL5qhR7UXHnBBqdh-VzTo32hrYFf1wfUijboB431ylC67ECBHfr/s1600/btrix-StumbleUpon-icon.png);
}
ul.social_btrix li.abdig {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLeFhoctxngEPo4a0XScHlNDwiv25RyAx-Gnn2ZD3LqNvqACkgeZq-qfGEAyXVabknJ_2ZcO1FoMME8U3n26dqjRvAU7PqCDVux4xL5jQqPV1xzhlQQIy1SYNOvN22S9ei3cKLromXele_/s1600/btrix-Digg-icon.png);
}
ul.social_btrix li.ablinkedin {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbWhf5kFS4OjBhrBWBGbr7UPwmxQudz9MpdQzuYqJ6HhHQ8AJKVqkoHRGVxzsFgHr_Nz_rbNi_2eo0pOGO5evsFnZH9BGJtyrJU4afY37U7xDoYG6Pu3jW79NT02WXbnP5-ZgeQYGDeAPe/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. ၿပီးရင္ Ctrl+F ျဖင့္ <data:post.body/> ကုဒ္ကိုလိုက္ရွာပါ။

7. ေတြ႔ရင္ <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. ၿပီးရင္  template ကို save လုပ္ပါ။ ၿပီးပါၿပီ..........။