Blog မ်ားအတြက္ New Social Media Widget

Blog မ်ားအတြက္ Social Media Widget အသစ္ေလးတင္ေပးလိုက္ပါတယ္။ Icon
ေလးေတြကို Pointer နဲ႕ထိလိုက္တာနဲ႕လည္သြားတဲ့ Widget ေလးပါ။ျပဳလုပ္ရတာ
လြယ္ကူျပီးကိုယ့္ရဲ႕ facebook, twitter, stumbleupon,  feedburner ေတြရဲ႕ Link ေတြ
ကိုညြန္းေပးမွာပါ။ျပဳလုပ္နည္းေလးေအာက္မွာၾကည့္ေပးပါ။

အရင္ဆံုး Blog ကို Log in ၀င္ပါ၊ ပံုမွာျပထားတဲ့အတိုင္း Layout ကိုႏိုိပ္ပါ

Add Gadget ကိုႏိုပ္ျပီး HTML/Javascript ကိုေရြးခ်ယ္ပါ

ေအာက္ပါ Code မ်ားကိုကူးထဲ့ပါ

<style>
p#socialicons img {    -moz-transition: all 0.2s ease-in-out;    -webkit-transition: all 0.2s ease-in-out;    -o-transition: all 0.2s ease-in-out;    -ms-transition: all 0.2s ease-in-out;    transition: all 0.2s ease-in-out;} 
p#socialicons img:hover {    -moz-transform: rotate(70deg);    -webkit-transform: rotate(70deg);    -o-transform: rotate(70deg);    -ms-transform: rotate(70deg);    transform: rotate(70deg);}
p#socialicons1 img {    -moz-transition: all 0.8s ease-in-out;    -webkit-transition: all 0.8s ease-in-out;    -o-transition: all 0.8s ease-in-out;    -ms-transition: all 0.8s ease-in-out;    transition: all 0.8s ease-in-out;}
p#socialicons1 img:hover {    -moz-transform: rotate(360deg);    -webkit-transform: rotate(360deg);    -o-transform: rotate(360deg);    -ms-transform: rotate(360deg);    transform: rotate(360deg);} 
p#socialicons2 img {    -moz-transition: all 0.5s ease-in-out;    -webkit-transition: all 0.5s ease-in-out;    -o-transition: all 0.5s ease-in-out;    -ms-transition: all 0.5s ease-in-out;    transition: all 0.5s ease-in-out;} 
p#socialicons2 img:hover {    -moz-transform: rotate(-360deg);    -webkit-transform: rotate(-360deg);    -o-transform: rotate(-360deg);    -ms-transform: rotate(-360deg);    transform: rotate(-360deg);}</style>

<center><p id="socialicons">    
<a href="http://www.facebook.com/winhtuttin" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCrcHWKRj1qoQX7uNb1f7cPyvma9dyc5YZQwOQnAh-3Pe8UaLb41veYapgVgThQW3cQ_UWi00JbX5J8B5z7mQaPkDIOdDc51YE8G0I52n4znaHg4EWnxAlmcj_9njmW_0jfJwpaWt-I-eG/s1600/bloggertrix-facebook.png" /></a>    
<a href="http://www.twitter.com/winhtuttin" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvGCohW0dE6dUCnnVI7vFM0K8BbI2n3dyV95qTyMxOVUSIEhHnkNt9GfOxXIiC1F8cc9FCX8A4qyQhWgxWAuEyP7Y_c57QvIjjtfPJbSKCFlFg9db42PzeETUFOjbkCihl2dv3RNqakzbt/s1600/bloggertrix-twitter.png" /></a>    
<a href="https://www.stumbleupon.com/winhtuttin" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwJmBWsrC5DnzbgyGrnB6EPLkw0VA73Vokx3L-c4XMsnqM2g-1PKpx7ei85dgRvCGYS7j-QyMCmH0_13WJOq4Xu6_37FY47_bf0g887FvNB-TzOECXfxK5Frv92rSqqUU96hJ22iME59jp/s1600/bloggertrix-stumbleupon.png" /></a>    
<a href="http://feeds.feedburner.com/winhtuttin/" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfcVRMa2N04YeS9_TdP6rpCOMBw9kimjlG0ZKyhXjCJvjlzF99PWaPtGwbMS-93NnWkEhiR871mCkHXmLTEYV9wgc_dECoQwvTCdMImsmUTUBMt1q66qNud2d0ZYOGM0tP33idqwQPRKn9/s1600/bloggertrix-rss.png" /></a></p></center>

Colour နဲ႕ျပထားတဲ့ Link ေနရာမွာကိုယ့္ရဲ႕ Link ကိုအစားေပးလိုက္ပါ။ ဥပမာ
http://www.facebook.com/winhtuttin ဆိုတဲ့ link တစ္ခုလံုးကိုကိုယ့္ရဲ႕ Link နဲ႕
အစားထားေပးပါ။

Posted in: Blog နည္းပညာမ်ား