Blogger မ်ားအတြက္ Social Media Widget အလန္းေလး

 

                        Blogger ညီအကိုမ်ားအတြက္ မိမိရဲ႕ Blog မွာ Social Media Widget ကိုဘဲ Animation

ေလးနဲ႕ ထည္႕ခ်င္တဲ႕သူငယ္ခ်င္းမ်ားအတြက္ Code ေလးေတြမွ်ေ၀ေပးလိုက္ပါတယ္ဗ်ာ။ နမူနာကို

ေတာ႕ Demo မေပးေတာ႕ပါဘူး။ ပံုေလးကိုဘဲ  ၾကည္႕လိုက္ေနာ္။ စိတ္၀င္စားေသာ သူငယ္ခ်င္းမ်ား

လည္း လိုက္လုပ္ႏိုင္ေအာင္ ပံုေလးနဲ႕ပါရွင္းျပထားပါတယ္ေနာ္။ေအာက္ Code မွာ ျပင္ရမယ္႕ Code

ေလးေတြကိုလည္း အနီနဲ႕ ေရးေပးထားတယ္ေနာ္။ အဲဒါေလးေတြကိုေတာ႕ျပင္ေပးဖို႕လို႕ပါတယ္။

လြယ္ပါတယ္ဗ်ာ။

Facebook ရဲ႕ Like button ကိုႏွိပ္ျခင္းျဖင္႕ မိမိရဲ႕ Facebook ေပၚမွာ ဒီ Post ေလးေရာက္သြားမွာပါ။ 

ဒီ Post ေလးကိုသေဘာက်တယ္ဆိုရင္လည္း Like Button ေလးကိုႏွိပ္ခဲ႕ေပးပါေနာ္။

အဆင့္ 1  Design > Layout > Add a Gadget ကိုႏွိပ္ပါ။
အဆင္႕ 2 Eidt HTML ကုိေရြးေပးပါ။ ျပီးသြားရင္ ေအာက္က Code ကိုကူးထည္႕ေပးပါ။
အဆင္႕ 3 Save ႏွိပ္ေပးပါ။

အဆင္႕ 4   Add Gadget ႏွိပ္ျပီးရင္ ေအာက္က ပံုစံေလးကိုေတြ႕ေအာင္ရွာျပီး HTML/JavaScript ကို
                 ႏွိပ္လိုက္ပါ။



ဒီေအာက္က Code ကို ကူးထည္႕ျပီး Save လုပ္ေပးရမွာပါ။ ဒါဆိုရင္လုပ္ေဆာင္ခ်က္ျပီးဆံုးသြားပါျပီ။

<style> 
/*--------B2W Touch Me Sharing Widget ------*/ 
.touchme a { 
display:block; 
height:50px; 
width:50px; 
padding:0 4px; 
float:left; 
background:transparent url(http://beautifulbloggerwidgets.googlecode.com/files/

Sharing%20Touch%20Me.png) no-repeat; 
-webkit-transition: ease-in 0.2s all;    
-moz-transition: ease-in 0.2s all;    
-o-transition: ease-in 0.2s all;    
-ms-transition: ease-in 0.2s all;    
transition: ease-in 0.2s all; 
cursor:pointer;
}

.touchme a.googleplus { 
background-position: 0px -58px;
} 
.touchme a.googleplus:hover { 
background-position: 0px 0px; 
}

.touchme a.twitter { 
background-position: 0px -290px;
} 
.touchme a.twitter:hover { 
background-position: 0px -232px;
} 
.touchme a.facebook { 
background-position: 0px -406px;
} 
.touchme a.facebook:hover { 
background-position: 0px -348px;
}

.touchme a.rss { 
background-position: 0px -174px;
} 
.touchme a.rss:hover { 
background-position: 0px -116px;
}

</style>
<p style="display:none;">Cool Social Media Sharing Touch Me Widget by <a href= 

"http://beautifulbloggerwidgets.blogspot.com/">Beautiful Blogger Widgets</a></p>
<div class='touchme'>
<!--RSS--> 
<a class='rss' href="YOUR RSS LINK" rel='external nofollow' target='_blank'></a>
<!--Google Plus--> 
<a class='googleplus' href="YOUR GOOGLE PROFILE LINK" rel='nofollow' target='_blank'>

</a>
<!--Facebook--> 
<a class='facebook' href="YOUR FACEBOOK LINK" rel='nofollow' target='_blank'></a>
<!-- Twitter --> 
<a class='twitter' href="YOUR TWITTER LINK" rel='nofollow' target='_blank' ></a>
</div>