10/18/2012

မိမိရဲ႕ Blog မွာ Social Media Widget အလန္းေလးထည္႕ခ်င္သူမ်ားအတြက္


                  Mail ထဲကေနျပီး Ƹ̵̡Ӝ̵̨̄Ʒ❤ OSC@R ❤Ƹ̵̡Ӝ̵̨̄Ʒ: ကေတာင္းထားလို႕ ေတာင္းထားတာ ႏွစ္ခါ
ေတာင္ရွိျပီဆိုေတာ႕ ညတြင္းခ်င္းဘဲ တင္ေပးလိုက္ပါတယ္ဗ်ာ။ Blog တစ္ခုမွာေတာ႕ Social Media
Widget တစ္ခုေတာ႕ရွိထားရင္ေကာင္းမယ္ထင္လို႕ တင္ေပးလိုက္တာျဖစ္ပါတယ္။ ထည္႕သြင္းရတာ
လည္း လြယ္ကူပါတယ္။ ဒီဇိုင္းေလးကလည္း လန္းတယ္ေနာ္ ဥပမာ Facebook ကို Mouse ေလးနဲ႕ ထိလိုက္တာနဲ႕ ခြက္ေလးက ဂၽြမ္းေတြထိုးျပီးအေရာင္ေျပာင္းသြားတာေနာ္ Blog ကိုစတင္ေလ႕လာ
ေနေသာသူငယ္ခ်င္းမ်ားပါ လုိက္လုပ္ႏိုင္ေအာင္ ေအာက္မွာပံုနဲ႕ တကြရွင္းျပေပးထားပါတယ္ေနာ္။
 အဆင္ေျပၾကပါေစဗ်ာ။ oscar လည္း အဆင္မေျပရင္ျပန္ေျပာပါဦးဗ်ာ။ ကၽြန္ေတာ္လည္းနားလည္သ
ေလာက္ေလးကိုျပန္လည္မွ်ေ၀ေပးလိုက္တာပါ။

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

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



HTML JAVASCRIPT A simple Drop Down Menu For Blogger ဒီေအာက္က Code ကို ကူးထည္႕ျပီး Save လုပ္ေပးရမွာပါ။



<style> 
ul.social{list-style:none;overflow:hidden;margin-left: -40px;}
.social li{
float:left;overflow:hidden;
background:none!important;
padding:0!important;margin:0 6px}
.social li a{
display:block;width:46px;height:58px;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwqVFU5is7cVgme1QwWsz0TpGbNi1oydG5GQcACQ6AIeVlkB9MdUExVfCGEjVWiBXX_xmwIEgoQaypBAoi9FMZMyM1w85lxucZ4LBZWiFITqJxWOxFEuyQeG3eRePqxCH650yrSuG3LCA/s1600/social-icon.png") no-repeat transparent;text-indent:-99999em!important;-webkit-transition:ease-out 700ms;-moz-transition:ease-out 700ms;-o-transition:ease-out 700ms;-ms-transition:ease-out 700ms;transition:ease-out 700ms}
.social li a:hover{padding:0!important;transform:rotate(360deg);-ms-transform:rotate(360deg);-moz-transform:rotate(360deg);-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);-moz-transition-duration:700ms;-webkit-transition-duration:700ms;-o-transition-duration:700ms}
.social li.twicon a{background-position:0 -1px;border-right:1px solid #e6e6e6}.social li.pinicon a{background-position:-47px -1px;border-right:1px solid #e6e6e6}
.social li.rssicon a{background-position:-100px -1px;border-right:1px solid #e6e6e6}
.social li.fbicon a{background-position:-150px -1px;;border-right: 1px solid #e6e6e6;}
.social li.twicon a:hover{background-position:0 -60px;border-right:1px solid #e6e6e6}
.social li.gicon a{background-position:-200px -1px}
.social li.gicon a:hover{background-position:-200px -60px}
.social li.pinicon a:hover{background-position:-48px -60px;border-right:1px solid #e6e6e6}
.social li.rssicon a:hover{background-position:-100px -60px;border-right:1px solid #e6e6e6}
.social li.fbicon a:hover{background-position:-150px -60px;border-right: 1px solid #e6e6e6;}
.bloggertrix{width:300px;float:left}
.bloggertrix .count{color:#f17c18;font-size:14px;font-weight:bold;font-family:Helvetica,Arial;height:40px;line-height:40px;vertical-align:middle;width:310px;padding:0 0 0 4px;margin:0}
.bloggertrix .count span.bigcount{color:#f17c18;font-size:24px;font-family:Helvetica,Arial;line-height:39px;vertical-align:middle;margin:0;padding:10px 0 0 0}
.bloggertrix .subicons{border-bottom:1px solid #e6e6e6;margin:0;float:left;width:100%;font-family:Helvetica,Arial;font-size:12px}

</style><br /><div style="display: none;">Email Subscription box by<a href="http://www.bloggertrix.com/">Blogger tricks</a></div>
<div class="bloggertrix">
<h1 class="title">
<div class="subicons">
<ul class="social">
<li class="rssicon"><a href="http://feeds.feedburner.com/" rel="nofollow" target="_blank">Rss</a></li>
<li class="twicon"><a href="http://twitter.com/" rel="nofollow" target="_blank">Twitter</a></li>
<li class="fbicon"><a href="http://facebook.com/" rel="nofollow" target="_blank">FaceBook</a></li>
<li class="pinicon"><a href="https://pinterest.com/" rel="nofollow" target="_blank">Pinterest</a></li>
<li class="gicon"><a href="https://plus.google.com/" rel="nofollow" target="_blank">Google +</a></li>
</ul>
</div>
</div>