ဘေလာ့ search box လွလွေလးထည့္ဖို႕

သည္တခါတင္မည့္ ပို႕စ္ေလးကေတာ့ search box ေလး လွလွပပနဲ႕ တင္တဲ့နည္းလမ္းေလးပါ။

အေပၚက ပုံေလးလိုေပါ့ မိမိတို႕ဘေလာ့မွာ လွလွေလးသုံးချခင္ရင္ေတာ့  လုပ္ၾကည့္ပါေနာ္..
နည္းလမ္းေလးကေတာ့.......

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

<form action='/search' id='searchform' method='get' style='display:inline;'>
<input id='searchbox' maxlength='255' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search this blog...&quot;;}' onfocus='if (this.value == &quot;Search this blog...&quot;) {this.value = &quot;&quot;}' type='text' value='Search this blog...'/>
<input id='searchbutton' type='submit' value='Search'/>
</form>

• 7. Save လုိက္လို႕ရပါျပီ။

စတုိင္ေလးျဖစ္လာဖို႕ဆက္လုပ္ပါမယ္...

1.  Template  ကိုကလစ္ပါ
 2.  Edit HTML ကေနသြားပါ Proceed  ဆက္သြားပါ အမွန္ျခစ္ခဲ့ေနာ္ ထုံးးစံေပါ့..
3. သည္ကုဒ္ကိုရွာလုိက္ပါ    ]]></b:skin>
4. ေတြ႕ျပီဆိုတာနဲ႕  ]]></b:skin>  ေလးရဲ႕ အေပၚမွာ past ခ်ေပးလိုက္ပါ...

#searchform { margin: 0; padding: 0; overflow: hidden; display: inline; } #searchbox { background: #fff !important; width: 180px; color: #202020; font-size: 12px; font-family: Georgia, Times New Roman, Trebuchet MS; font-weight: normal; margin: 0; padding: 3px 0 8px 5px; border-top: 1px solid #DDD; border-right: 1px solid #666; border-left: 1px solid #DDD; border-bottom: 1px solid #666; display: inline; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4); box-shadow: 0 1px 2px rgba(0, 0, 0, .4); border:1px solid #6BB5FF; } #searchbox:hover { background: #fff !important; width: 220px; color: #202020; font-size: 12px; font-family: Georgia, Times New Roman, Trebuchet MS; font-weight: normal; margin: 0; padding: 3px 0 8px 5px; border-top: 1px solid #DDD; border-right: 1px solid #666; border-left: 1px solid #DDD; border-bottom: 1px solid #666; display: inline; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, .4); -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, .4); box-shadow: 0 1px 4px rgba(0, 0, 0, .4); border:1px solid #6BB5FF; } #searchbutton { -moz-box-shadow:inset 0px 1px 0px 0px #bbdaf7; -webkit-box-shadow:inset 0px 1px 0px 0px #bbdaf7; box-shadow:inset 0px 1px 0px 0px #bbdaf7; background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5) ); background:-moz-linear-gradient( center top, #79bbff 5%, #378de5 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5'); background-color:#79bbff; -moz-border-radius:22px; -webkit-border-radius:22px; border-radius:22px; border:1px solid #84bbf3; display:inline-block; color:#ffffff; font-family:arial; font-size:11px; font-weight:bold; padding:3px 11px; text-decoration:none; text-shadow:1px 1px 0px #528ecc; }#searchbutton:hover { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff) ); background:-moz-linear-gradient( center top, #378de5 5%, #79bbff 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff'); background-color:#378de5; }#searchbutton:active { position:relative; top:1px; }

 5. save template လိုက္ပါေတာ့

 မွတ္ခ်က္။    ။ ကုဒ္ထဲက အနီေရာင္နဲ႕ျပထားတဲ့ နံပါတ္ေနရာမွာ မိမိတို႕ ဘေလာ့နဲ႕ ကုိက္ညီေအာင္ ျပင္ေပးနိဳင္ပါတယ္..

ေအာင္ေအာင္(မကစ) ရဲ႕ ဘေလာ့ခရီးသည္ေလးအား အားေပးေနၾကတဲ့အတြက္ ေက်းဇဴးအထူးတင္ပါတယ္.. တုန္႕ျပန္မွဳအေနနဲ႕ fb like ေလးေတာ့ လုပ္ေပးခဲ့ၾကပါေနာ္.. တတ္စြမ္းသမွ် ေတြ႕ ရွိသမွ်ေလးေတြကို ျပန္လည္ မွ်ေ၀ေနပါ့မယ္...။ www.aungsanmks.blogspot.com
www.ledimyethar.com

Posted in: Search Box