Search box For blogger

က်ေနာ္႔ဘေလာ႔ရဲ႕ Search box အတြက္ ေမးခဲ႔တဲ႔သူေတြ ရိွပါတယ္။ အခ်ိန္မရေသးတာနဲ႔ မေျပာျပျဖစ္တာပါ။ က်ေနာ္လည္း Search အမ်ိဳးမ်ိဳး blog မွာသံုးၾကည္႔ဘူးပါတယ္။ အဆင္ေျပဆံုးကေတာ႔ ဒီတစ္ခါေပါ႔။ ေနာက္ၿပီး Search ေနရမွာ မိမိေရးထားတာေတြကို click လုပ္လုိက္ရံုနဲ႔ blank ျဖစ္သြားတာက ပိုအဆင္ေျပေစတာပါ။

မိမိဘေလာ႔ရဲ႕ Layout ကိုသြား၊ Add a Gadget ကိုႏွိပ္ၿပီး HTML/JavaScript ေနရာမွာ ေအာက္က စာသားေတြ ထည္႔ေပးလိုက္ပါ။
<form id=”searchform” action=”/search” method=”get”> <input id=”s” onfocus=”if (this.value == “ဤေနရာတြင္ ေရး၍ရွာပါ “) {this.value = “”}” value=”ဤေနရာတြင္ ေရး၍ရွာပါ ” name=”q” onblur=”if (this.value == “”) {this.value = “ဤေနရာတြင္ ေရး၍ရွာပါ “;}” type=”text”/> <input id=”searchsubmit” value=”" type=”submit”/> </form>

က်ေနာ္ ျမန္မာလိုေရးထားတဲ႔ ေနရာေတြမွာ မိမိေရးခ်င္တာကို ေျပာင္းႏိုင္ပါတယ္။ သံုးေနရာလံုးကို ေျပာင္းေပးရမွာျဖစ္ပါတယ္။ အဲဒါမွ click လိုက္တဲ႔ အခ်ိန္မွာ blank ျဖစ္ပါလိမ္႔မယ္။ ဒါထည္႔ရံုေလာက္နဲ႔ က်ေနာ္႔အတိုင္းႀကီးေတာ႔ မရေသးဘူး။ သူက Search box ျဖစ္ရံုေလး ေအာက္ကပံုအတိုင္းပဲ ရိွလိမ္႔ဦးမယ္။

(အခ်ိဳ႕ ဘေလာ႔ Template ေတြမွာ Search အတြက္ စတိုင္ထည္႔ေပးၿပီးသားဆိုရင္ေတာ႔ သူ႕မွာေရးထားတဲ႔ပံုအတိုင္းေပၚမွာေပါ႔)
မပါခဲ႔ဘူး(သို႕) ျပင္ခ်င္တယ္ဆိုရင္ #header ဆိုတာကိုရွာလိုက္ပါ။ အေပၚနားေလးမွာပဲ ရိွပါတယ္။

သူ႔ရဲ႕အေပၚမွာ ေအာက္က စာသားေတြထည္႔ေပးလိုက္ပါ။


/* Search */ #search { height:28px; width:auto; padding-top:10px ; margin-right:15px; margin-top:78px; width:260px; float:right; background:url(http://img28.picoodle.com/img/img28/2/6/21/thanlonengal/f_searchm_f8934af.jpg); } #search form { margin: 0; padding: 0; } #search fieldset { margin: 0; padding: 0; border: none; } #search p { margin: 0; font-size: 85%; } #s { margin-left:10px; float: left; width:170px; padding: 4px 7px; background:#fff url(http://img27.picoodle.com/img/img27/2/6/21/thanlonengal/f_formm_6867730.gif) repeat-x; border:1px solid #fff; font: normal 100% “Zawgyi-One”, Zawgyi-One, Helvetica, sans-serif; color:#B71C1A; } #searchsubmit { width:48px; float: left; margin-left: 5px; background:#fff url(http://img36.picoodle.com/img/img36/2/6/21/thanlonengal/f_submitm_5e0ac75.jpg); border:1px solid #30627e; font: bold 100% “Zawgyi-One”, Zawgyi-One, Helvetica, sans-serif; color: #FFFFFF; height:27px; }
အဲဒါဆိုရင္ က်ေနာ္႔ပံုစံအတိုင္းျဖစ္သြားပါလိမ္႔မယ္။ အဲဒီမွာ ပံုသံုးပံုရဲ႕ လင္႔ကို ေတြ႔ပါလိမ္႔မယ္။ Search box အတြက္ ေနာက္ခံပံုရယ္၊ ေဘာင္ကြတ္ရယ္၊ ခလုပ္ရယ္ ျဖစ္ပါတယ္။ မိမိကိုယ္တိုင္ စိတ္ႀကိဳက္ျပန္ဆြဲၿပီး ျပင္ႏိုင္ပါတယ္။ (ဘေလာ႔ဂါေတြအတြက္ သိၿပီးသားပဲ ျဖစ္မွာပါ)

ခက္ခက္ခဲခဲလည္း ဘာမွ မရိွပါဘူး။ အဆင္ေျပလိမ္႔မယ္လို႔ထင္ပါတယ္။

Source...သံလံုငယ္