ဘေလာ့မွာ လွပတဲ့ Social Widget ေလးေတြကို CSS3 နဲ႕ အလွဆင္ထားၾကမယ္

မဂၤလာပါ သည္ေန႕ ေရးျဖစ္တာေလးကေတာ့ ဘေလာ့မွာ Social Widget ေလးေတြ ကိုပုံေလးနဲ႕

လွပေသသပ္စြာ ထားနိဳင္မဲ့ နည္းလမ္းေလးဘဲ ျဖစ္ပါတယ္... မိမိတို႕ရဲ႕ Facebook ေတြ Twitter ေတြ

Google Plusin ေတြကို ပုံေလးေတြ နဲ႕ ဆိုဒ္ဘားမွာ ေသသပ္စြာ ထားရွိ ျခင္းနည္းလမ္းေလးပါ..

ေအာက္မွာ ေသျခာ ရွင္းျပ ျပီး လိုအပ္တဲ့ ကုဒ္ေတြပါ ေပးလိုက္ပါတယ္ေနာ္ လုပ္ၾကည့္လိုက္ပါေနာ....

 ►1-  Blogger Singin ၀င္လိုက္ပါ။
►2-  Dashboard  ကိုသြားလိုက္ပါ။
►3-  Template    ကိုကလစ္ပါ..။
►4-  Edit  Html   ကို၀င္ပါ..
►5- Ctrl+F  (သို႕မဟုတ္) F3  အကူညီျဖင့္ ေပးထားတဲ့ ကုဒ္ကို ရွာလိုက္ပါ။

  ]]></b:skin>  ကုဒ္ကိုရွာပါ.... သည္ကုဒ္မွာ ျပႆနာ ခဏခဏျဖစ္ပါတယ္ ရွာမရတဲ့ျပႆနာေပါ့

ဒါကို ေသျခာရွင္းျပပါ့မယ္  သူက တက္ပလက္ အသစ္ေျပာင္းလိုက္တဲ့ခါမွာ အရင္ကလို ကုဒ္ဒင္းေတြ ရွာေဖြ ရမလြယ္ေတာ့ပါဘူး  အေၾကာင္းကေတာ့ တက္လက္မွာ အတြင္းပိုင္းကုဒ္ေတြကို ေခါက္ထားလို႕ပါဘဲ အဲေတာ့ ကိုယ္လိုျခင္တာ ေရးရွာတာနဲ႕ ထြက္မလာတတ္ပါ

တတ္ပါဘူး ဒါကိုက်ေနာ္တို႕ နည္းလမ္ သုံးၾကည့္ရပါတယ္    ]]></b:skin>  သည္ကုဒ္အတိုင္းရွာမရပါဘူး  သည္ေတာ့ b:skin  ဆိုတာေလးကိုဘဲ ေရးထည့္ရွာၾကည့္ပါ...

ေတြ႕မွာ ေသျခာပါတယ္ ေတြ႕တဲ့ခါ  ေဘးမွာ မွ်ားအနက္ေလးနဲ႕ ေတြ႕မယ္ အဲမွ်ားကိုကလစ္လုိက္ျခင္းျဖင့္

သူေခါက္ထားတဲ့ ကုဒ္ေတြကို ျဖန္႕လုိက္တာျဖစ္ပါျပီ ဒါဆို ကိုယ္လိုျခင္တဲ့ ကုဒ္တိုင္း ေရးရွာနိဳင္ပါျပီေနာ္..

ေတြ႕ျပီဆိုတာနဲ႕  သူ႕အေပၚကပ္လွ်က္  ေအာက္ကေပးထားတဲ့ ကုဒ္ေတြ ကို copy ယူျပီးထည့္ေပးလိုက္ပါ။

             /* Start CSS X-Gen Sosial Media Button */ #xgen-socmed{ margin:5px auto;width:220px;} .xgen-fb{float:left;background:#254dfd;padding:20px 5px;-webkit-border-radius:8px 8px 8px 0;-moz-border-radius:8px 8px 8px 0;border-radius:8px 8px 8px 0;margin:7px;width:40px;max-height:20px;text-align:center;border-top:5px solid #0121b1;border-right:5px solid #0121b1;-webkit-transition: all 0.26s ease-out 0s;-moz-transition: all 0.26s ease-out 0s;-o-transition: all 0.26s ease-out 0s;transition: all 0.26s ease-out 0s;} .xgen-fb:hover{-webkit-border-radius:50px;-moz-border-radius:50px;border-radius:50px;} .xgen-fb a:link{font-weight:700;font-size:50px;color:#fff;text-decoration:none} .xgen-fb a:visited{font-weight:700;font-size:50px;color:#fff;text-decoration:none} .xgen-tweet{float:left;background:#00cae8;padding:20px 5px;-webkit-border-radius:8px 8px 8px 0;-moz-border-radius:8px 8px 8px 0;border-radius:8px 8px 8px 0;margin:7px;width:40px;max-height:20px;text-align:center;border-top:5px solid #006f7f;border-right:5px solid #006f7f;-webkit-transition: all 0.26s ease-out 0s;-moz-transition: all 0.26s ease-out 0s;-o-transition: all 0.26s ease-out 0s;transition: all 0.26s ease-out 0s;} .xgen-tweet:hover{-webkit-border-radius:50px;-moz-border-radius:50px;border-radius:50px;} .xgen-tweet a:link{font-weight:700;font-size:50px;color:#fff;text-decoration:none} .xgen-tweet a:visited{font-weight:700;font-size:50px;color:#fff;text-decoration:none} .xgen-gplus{float:left;background:#313232;padding:12px 5px 28px 5px;-webkit-border-radius:8px 8px 8px 0;-moz-border-radius:8px 8px 8px 0;border-radius:8px 8px 8px 0;margin:7px;width:40px;max-height:20px;text-align:center;border-top:5px solid #000;border-right:5px solid #000;-webkit-transition: all 0.26s ease-out 0s;-moz-transition: all 0.26s ease-out 0s;-o-transition: all 0.26s ease-out 0s;transition: all 0.26s ease-out 0s;} .xgen-gplus:hover{-webkit-border-radius:50px;-moz-border-radius:50px;border-radius:50px;} .xgen-gplus a:link{font-weight:700;font-size:50px;color:#fff;text-decoration:none} .xgen-gplus a:visited{font-weight:700;font-size:50px;color:#fff;text-decoration:none} /* end */

ဒါဆို မိမိတို႕ တက္ပလက္ကို ရဲရဲ ၀ံ႕၀ံ႕ ေဆ့လိုက္ပါေနာ္..မွားေတာ့ျပန္ဖ်က္တာေပါ့...ေိေိေိ...စတာ

ေနာက္တဆင့္ကေတာ့ အရမ္းလြယ္ပါျပီ.....ေနာ္  ေအာက္ကတိုင္းသြားလိုက္ပါ

   ►1.  Login လုပ္လုိက္ပါ ဘေလာ့ကာကို
   ►2.  Layout ကိုကလစ္ရပါ့မယ္ မိမိတို႕  Dashboard ကေနေပါ့
   ►3.  Add a Gadget ကိုကလစ္ေပးလုိက္ပါ
   ►4.  HTML/Javascript. ကိုကလစ္ျပီး က်လာတဲ့ ေဘာက္ေလးထဲမွာဘဲ
   ►5.  ေအာက္ကေပးထားတဲ့ ကုဒ္ေတြကို ေကာ္ပီယူ ထည့္လိုက္ပါ

<!-- Start HTML X-Gen CSS Button -->
<div id="xgen-socmed">
<div class="xgen-fb">
<a href="Link Facebook">f</a>
</div>
<div class="xgen-tweet">
<a href="Link Twitter">t</a>
</div>
<div class="xgen-gplus">
<a href="Link Google Plus">g</a>
</div>
</div>
<!-- End -->

သည္လိုထည့္တဲ့ခါ ကုဒ္ထဲမွာ ပါတဲ့အစိမ္းေရာင္ကာလာေတြျဖစ္တဲ့ 
"Link Facebook" ေနရာမွာ မိမိတို႕ fb link ထည့္ေပးလိုက္ပါ။
"Link Twitter" ေနရာမွာ လည္းထို႕နည္းတူပါဘဲ လင့္အစားထိုးေပးပါ။
"Link Google Plus" ေနရာကိုလည္းအထက္ကနည္းတိုင္း ပါဘဲေနာ္..
ဒါဆို လွပေသသပ္တဲ့  ပုံေလးေတြနဲ႕အတူ ေတြ႕ျမင္ရမွာ ျဖစ္ပါတယ္ေနာ္....

ခုလိုအားေပးတဲ့အတြက္ အထူးေက်းဇဴးတင္ပါေၾကာင္း ေျပာၾကားပါရေစ..ဘေလာ့ခရီးသည္မွ နည္းပညာမ်ားအား မည္သူမဆို လြတ္လပ္စြာ ကူးယူသုံးစြဲနိဳင္ပါတယ္.. ကြ်န္ေတာ္ ပိုင္ဆိုင္ေသာေနရာေလးမ်ားအား ဆက္လက္ လည္ပါတ္လိုပါက ***************************************

ဘေလာ့ခရီးသည္သို႕ { ဒီမွာ } သြားလိုက္ပါ
လယ္တီေျမသားသို႕{ ဒီမွာ } သြားလိုက္ပါ

စာေပနန္းေတာ္သို႕{ ဒီမွာ } သြားလိုက္ပါ   

Posted in: Social Widget