နိုင္ငံတကာနွင့္ ျပည္တြင္းသတင္း၊ နည္းပညာ၊ ေဆာ့ဝဲလ္ႏွင့္ ဗဟုသုတမ်ား

အားေပးၾကတဲ့မိတ္ေဆြမ်ား

Showing posts with label Code for blog. Show all posts
Showing posts with label Code for blog. Show all posts

Thursday, August 01, 2013

Social sharing widget



ပို႔စ္ေတြရဲ႕ေအာက္မွာလည္း ထားလို႔ရတဲ့ sharing widget ကေလးကို မွ်ေဝေပးလိုက္ပါတယ္။

ဒီ sharing widget ကသင့္ရဲ႕ sharing ႏွဳန္းတိုးေစပါတယ္။ အလွထားရင္လည္း ၾကည့္ေကာင္းပါတယ္။

လိုခ်င္ရင္ ဒီေအာက္က Add to Blogger ဘတ္တံကို အရင္ ႏွိပ္ပါ။

Add Page Element ဆုိၿပီး page ေပၚလာပါလိမ့္မယ္။ Add Widget ကို ကလစ္ႏွိပ္ပါ။


Add to Blogger ဘတ္တံကို ႏွိပ္၍ ကုဒ္ေတြယူပါ။


ေအာက္မွ နမူနာျပထားေသာ widget မ်ားအား ႏွိပ္၍ ႐ွယ္ႏိုင္ပါသည္။





Read More »

Monday, March 04, 2013

Attractive Subscribe Section + Search Box For Blogger



အခုတခါတင္လိုက္တာကေတာ့ Subscribe Section နဲ႔ Search Box တြဲရက္ Widget ေလးျဖစ္ပါတယ္။

အေပၚကပုံစံေလးပါဘဲ၊ ႐ိုး႐ိုး႐ွင္း႐ွင္းေလးနဲ႔မို႔ ၾကည့္လို႔ ေကာင္းပါတယ္။

ႏွစ္သက္သေဘာက်ရင္ ေအာက္မွာ ျပဳလုပ္နည္းေလးဆက္ၾကည့္လိုက္ၾကပါအုန္း။

  1. Blogger home Page ကိုသြားပါ။
  2. Termplate ကို ကလစ္ပါ။
  3. သင့္ Template ကို Backup အရင္လုပ္ပါ။
  4. Expand widget Templates စာေ႐့ႇကအကြက္တြင္ အမွန္ျခစ္ေလးထည့္ေပးပါ။
  5. ၿပီးရင္ ေအာက္မွာ ေပးထားတဲ့ ကုဒ္ကို႐ွာပါ။

</head>

6. ေတြ႔ၿပီဆိုရင္ ဒီ </head> ရဲ႕အေပၚမွာ ေအာက္က ကုဒ္ေတြကို ကူးၿပီး ထည့္ေပးလိုက္ပါ။

<style>
.subbox{width:305px;border:0 solid #141414;overflow:hidden}
.addthis_toolbox{padding:15px 0 5px 0;text-align:center}
.addthis_toolbox .custom_images a{width:32px;height:32px;margin:0 4px 0 4px;padding:0}
.addthis_toolbox .custom_images a:hover img{opacity:1}
.addthis_toolbox .custom_images a img{opacity:0.85}
.rssbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.rssbox:hover{border:1px solid #92aed1}
.rssbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.rssbox a:hover{color:#7c8a9b;text-decoration:underline}
.emailsbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.emailsbox:hover{border:1px solid #92aed1}
.emailsbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.emailsbox a:hover{color:#7c8a9b;text-decoration:underline}
.twitterbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.twitterbox:hover{border:1px solid #92aed1}
.twitterbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.twitterbox a:hover{color:#7c8a9b;text-decoration:underline}
.facebookbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.facebookbox:hover{border:1px solid #92aed1}
.facebookbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.facebookbox a:hover{color:#7c8a9b;text-decoration:underline}
#search{width:290px;padding:2px 2px;background:#f7f6f6;border:1px solid #ccd1d7;height:28px;margin-top:0;margin-left:5px;display:inline;float:left}
#search:hover{border:1px solid #92aed1}
#search form{margin:0;padding:0}
#search fieldset{margin:0;padding:0;border:none}
#search p{margin:0;font-size:85%}
#s{width:200px;margin:0 0 0 0;padding:5px 5px 5px 5px;border:none;font:normal 80% "Tahoma",Arial,Helvetica,sans-serif;color:#000;float:left;background:#f7f6f6;display:inline}
input#searchsubmit{float:right;display:inline;margin:0 0 0 0;height:28px;background:#b2b2b2;color:#000;border:0 solid #222}
</style>

Save your template ကိုႏွိပ္ပါ။

မွတ္ခ်က္။။ ဒီ widget ေလးကို သင္ထားမည့္ ေနရာႏွင့္ အံဝင္ဂြင္က်ျဖစ္ေစရန္ (width) အက်ယ္
မ်ားကို ခ်ိန္ဆ၍ေျပာင္းႏိုင္ပါသည္။

ေသခ်ာေအာင္ Notepad တြင္ အရင္ ကူးၿပီး ဘယ္ေနရာေတြမွာ ဘယ္လိုေျပာင္းလို႔ရသလဲဆိုတာ အရင္ေလ့လာေစခ်င္ပါတယ္။

  • ေနာက္တစ္ဆင့္ မွာ Page Lay out ကိုသြားပါ။
  • Add a Gadget ကိုကလစ္ပါ။
  • Edit HTML/Java scrip ကို ေ႐ြးပါ။
  • ေအာက္မွာေပးထားတဲ့ကုဒ္ေတြကို ကူးထည့္ေပးလိုက္ပါ။


မွတ္ခ်က္။။ Save မလုပ္ခင္မွာ ေအာက္ပါအတိုင္း ျပဳလုပ္ပါ။   FEEDBURNER-ID FEEDBURNER-ID ကို ၄ ခုျဖည့္ေပးရပါမယ္။ TWITTER-USERNAME TWITTER-USERNAME ကို ၂ ခုျဖည့္ေပးရပါမယ္။   FACEBOOK-USERNAME FACEBOOK-USERNAME ကို ၂ ခုျဖည့္ေပးရပါမယ္။ သင္ထားမည့္ေနရာႏွင့္ အံဝင္ရြင္က် ျဖစ္ေစရန္ Icon အ႐ြယ္အစားေျပာင္းႏိုင္သည္။  height='32'  width='32' မွတ္ခ်က္။။ အျမင့္ႏွင့္အက်ယ္ အ႐ြယ္အစားတူရပါမည္။
Read More »

Saturday, March 02, 2013

How To Add jQuery Colour Picker to Blogger


ဒီေန႔တင္တဲ့ ပုိ႔(စ္)ေလးကေတာ့ Blogger နဲ႔ Website အတြက္အသုံး၀င္တဲ့ jQuery Colour Picker ေလးပါ။

HTML Colour Cond ေတြကုိ တင္ေပးရတာ မနဲေတာ့ပါဘူး။

တစ္ခုနဲ႔တစ္ခု ပံုစံေတြ Cond ေတြလည္း မတူတာေၾကာင့္ ထပ္ခါထပ္ခါတင္ေပးလုိက္တာပါ။

ႀကဳိက္ၾကမယ္လုိ႔လည္းေမွ်ာ္လင့္ပါတယ္။


Box ေလးကုိ Mouse နဲ႔ တစ္ခ်က္ Click လုိက္ရင္ ေအာက္ပုံ အတုိင္ ျမင္ရပါတယ္။


၁။Sign In Blogger
၂။ Template
၃။ Edit HTML
၄။ Proceed
၅။ေအာက္က Cond ကုိရွာ ပါ။ Ctrl + F ကုိတြဲနုိပ္၍ရွာပါ ၊ ရွာရလြယ္ပါတယ္။

</head>

၆။ ေတြ႕ၿပီးဆုိရင္ </head> ရဲ႕အေပၚမွာ ေအာက္က Cond ကုိ ထပ္ထည့္ေပးလုိက္ပါ။


ရ။ ထည့္ၿပီးရင္ Save Template ကုိနုိပ္ ေပးလုိက္ပါ။

၈။ ေနာက္ဆုံးအဆင့္ - ေအာက္က Code ေတြကုိ Add a Gadget ကလစ္ၿပီး HTML/javascrip ယူ၍ ထည့္ေပးလိုက္ပါ။

<form id="bg" action="#">

<fieldset>
<legend>Background Color</legend>

<div class="fields">

<div>
<label for="colorpicker">Color Picker:</label> <input type="text" id="colorpicker" name="colorpicker"/></div>
<div class="submit">
<button id="dochange">Change Background</button>
</div>
</div>
</fieldset>
</form>
<a href="http://simonvlog.blogspot.com/2012/11/how-to-add-jquery-colour-picker-to.html" target="_blank"><small>+Grab</small></a>  


Save လိုက္ရင္ ၿပီးပါၿပီ။
Read More »