လၢႆးသႂ်ႇလွၵ်းၶူၼ်ႉသွၵ်ႈႁႃ (Search Bar) တီႈၼႂ်းပလွၵ်ႉ

ၵမ်းၼႆႉ ၶႃႈႄတမႃးလၢတ်ႈႄၼ လွၵ်းလႆၢးသႂ်ႇလွၵ်းၶူၼ်ႉသွၵ်ႈႁႃ (Search Bar) တီႈၼႂ်းပလွၵ်ႉၼႆယဝ်ႉ။

လႆၢးႁဵတ်းႁူဝ်ယွႆႈမၼ်းႄတႉ ယွၼ်ႉဝႃႈလၢတ်ႈႄၼ 

ႁဵတ်းႄၼမႃးလႆၢၵမ်းယဝ်ႉႄလႈ ေတၼႄလႆၢးငႆၢႈမၼ်းဢဝ်ၵူၺ်းယဝ်ႉ။

႑ႉ ၶဝ်ႈၵႂႃႇတီႈ Layout

႒ႉ တဵၵ်း Add a Gadget

႓ႉ လိူၵ်ႈဢဝ် HTML/JavaScript ၼၼ်ႉယဝ်ႉ Copy ဢဝ်ၶူတ်ႉ (Code) ပႃႈတႂ်ႈၼႆႉေသ ၵႂႃႇသႂ်ႇပၼ်တီႈ Content ၼၼ်ႉတႃႉ။

မႆၢတွင်း ၶူတ်ႉ (Code) ၼၼ်ႉၸဝ်ႈၵဝ်ႇလႆႈၸႂ်ဢၼ်လႂ်ေၵႃႈ လိူၵ်ႈဢဝ်ဢၼ်ၼၼ်ႉလႆႈယူႇ။

 

<style type="text/css">

#searchbox{background:#d8d8d8;border:4px solid #e8e8e8;padding:20px 10px;width:250px}input:focus::-webkit-input-placeholder{color:transparent}input:focus:-moz-placeholder{color:transparent}input:focus::-moz-placeholder{color:transparent}#searchbox input{outline:none}#searchbox input[type="text"]{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivN4IsGe-4H3BvGUUjvg009XhNo47kJkwyhhMSsdwKcTYgGPSej1VzTaVY_onyNRVVKpQ6-G_4u79uvSax_b3mqW1voHhIYm7Ab_3yI7EHwRCgZp0Haol2gSES4JRP87P_rZyPajjnj06C/s1600/search-dark.png) no-repeat 10px 6px #fff;border-width:1px;border-style:solid;border-color:#fff;font:bold 12px Arial,Helvetica,Sans-serif;color:#bebebe;width:55%;padding:8px 15px 8px 30px}#button-submit{background:#6A6F75;border-width:0;padding:9px 0;width:23%;cursor:pointer;font:bold 12px Arial,Helvetica;color:#fff;text-shadow:0 1px 0 #555}#button-submit:hover{background:#4f5356}#button-submit:active{background:#5b5d60;outline:none}#button-submit::-moz-focus-inner{border:0}
</style>
<form id="searchbox" method="get" action="/search">
<input name="q" type="text" size="15" placeholder="Type here..." />
<input id="button-submit" type="submit" value="Search" /></form>

 

<style type="text/css">

#searchbox{width:240px}#searchbox input{outline:none}input:focus::-webkit-input-placeholder{color:transparent}input:focus:-moz-placeholder{color:transparent}input:focus::-moz-placeholder{color:transparent}#searchbox input[type="text"]{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivN4IsGe-4H3BvGUUjvg009XhNo47kJkwyhhMSsdwKcTYgGPSej1VzTaVY_onyNRVVKpQ6-G_4u79uvSax_b3mqW1voHhIYm7Ab_3yI7EHwRCgZp0Haol2gSES4JRP87P_rZyPajjnj06C/s1600/search-dark.png) no-repeat 10px 13px #f2f2f2;border:2px solid #f2f2f2;font:bold 12px Arial,Helvetica,Sans-serif;color:#6A6F75;width:160px;padding:14px 17px 12px 30px;-webkit-border-radius:5px 0 0 5px;-moz-border-radius:5px 0 0 5px;border-radius:5px 0 0 5px;text-shadow:0 2px 3px #fff;-webkit-transition:all 0.7s ease 0s;-moz-transition:all 0.7s ease 0s;-o-transition:all 0.7s ease 0s;transition:all 0.7s ease 0s;}#searchbox input[type="text"]:focus{background:#f7f7f7;border:2px solid #f7f7f7;width:200px;padding-left:10px}#button-submit{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5g8acx7a7OUZkptW-FfcT9YbUiAB_Zs8q3gtznhE87-T0Ljk5xo5SGqEGlVxDw7BPvlTc9Tw-uVRWpooYxTTZRw1uUIH6-DdxXavy4Q-2DGf0VctUwsLxIVb_UMiozxLhwCNqE8Dq7D8w/s1600/slider-arrow-right.png) no-repeat;margin-left:-40px;border-width:0;width:43px;height:45px}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off"><input name="q" type="text" size="15" placeholder="Enter keywords here..." />
<input id="button-submit" type="submit" value=" "/></form>

 

<style type="text/css">

#searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzx6UWO3S7IBxxZQXKnBw-56vS8Spwx1F1JiOnrOc_6L9cWDrW3uNRC6rAolTaw81SxWpyam98qEr34IgWYoEa4GWlVlx5_JAa5O5PijB2KtaEQa-6cBTtUUXV6JS1-5UyeT4FEMirB33B/s1600/searchbar.png) no-repeat;width:208px;height:29px}input:focus::-webkit-input-placeholder{color:transparent}input:focus:-moz-placeholder{color:transparent}input:focus::-moz-placeholder{color:transparent}#searchbox input{outline:none}#searchbox input[type="text"]{background:transparent;margin:3px 0 0 20px;padding:5px 0;border-width:0;font-family:"Arial Narrow",Arial,sans-serif;font-size:12px;color:#828282;width:70%;display:inline-table;vertical-align:top}#button-submit{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGTS0OsjhpjQeO_Uhrvsf3Hc-CxTNaTVa_koFLHHTr6sVhamuzvyGINrxY8GcnugiGcXrQyvpePtv7evkwV563bvxgYGmrCnuZoQG5mDDmkTi_MiQtEr1FkHcPajX1AKdhohPjhms0YS5Q/s1600/magnifier.png) no-repeat;border-width:0;cursor:pointer;margin-left:10px;margin-top:4px;width:21px;height:22px}#button-submit:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmCagJgg_ZjghpEUsB4IT-MdRLsTvLVmvXjgYCDGSFKOf0mq4nJl5UnzbBzjqhm5byTjgnz89zTblRLz0F7Kb9LqmJbyV39j8fmEsXSoclmh3j8TJuAVtCbwl3NgVbL0XWmCfTa80uO_rI/s1600/magnifier-hover.png) no-repeat}#button-submit:active{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmCagJgg_ZjghpEUsB4IT-MdRLsTvLVmvXjgYCDGSFKOf0mq4nJl5UnzbBzjqhm5byTjgnz89zTblRLz0F7Kb9LqmJbyV39j8fmEsXSoclmh3j8TJuAVtCbwl3NgVbL0XWmCfTa80uO_rI/s1600/magnifier-hover.png) no-repeat;outline:none}#button-submit::-moz-focus-inner{border:0}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off"><input name="q" type="text" size="15" placeholder="search..." /><input id="button-submit" type="submit" value="" /></form>

 

<style type="text/css">

#searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8401b4tkb3mc3JU0suLK2R0TWY5Jqpr0BCMuWZSiPCs_tIfQ6mcSR7p8wf_uZ3pJ1srTMFiiatmZjTtSMAG3azzvsBbQtzLgnqzpOU7vMokTQDccQiFr9ji7rXPMYOZtIQ3-2r4Non3pi/s1600/search-box.png) no-repeat;height:27px;width:202px}input:focus::-webkit-input-placeholder{color:transparent}input:focus:-moz-placeholder{color:transparent}input:focus::-moz-placeholder{color:transparent}#searchbox input{outline:none}#searchbox input[type="text"]{background:transparent;margin:0 0 0 12px;padding:5px 0;border-width:0;font:italic 12px "Arial Narrow",Arial,sans-serif;width:77%;color:#828282;display:inline-table;vertical-align:top}#button-submit{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoixbc7fIsoyoLew4cX7CHp_WBrUjOVJaOT9F11NgMxJHto-JT8-YqYi6-qBGjVQXp42RTPHUSAteNfolIWWeVlk7JdHSK0HmRAOUmXq7cll71ooyd91nuS5CVNrVnVo4tpG7UnbypAjZU/s1600/search-button.png) no-repeat;border-width:0;cursor:pointer;width:30px;height:25px}#button-submit:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUmX6a3eeXknZtFR3iQcfyT9udd6Kk1AdvZSzqDisnidqEqG6PW3DtKckR0N5zoYUCdZkKkrYRFIhwFOd-c3tg7buFafgp0OtV42xCHXB9vvHMh9mgkAqIgkONx98jTbUbYkos05YVvNEj/s1600/search-button-hover.png) no-repeat}#button-submit::-moz-focus-inner{border:0}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off"><input name="q" type="text" size="15" placeholder="search..." /><input id="button-submit" type="submit" value="" /></form>

 

<style type="text/css">

#searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWYzBgHIqCD_3zNrczw7R9gbjwtF3e3u8aQnRTWRv81yC5CAvwJ5Gw590yOmPWjsqvCc-esfOK0ega9DlWx9NML-ATLQ6zm0fh_0lZJwC6VaRFxzl7Odh5g-jDGWOSw1YLn47k2KYQo3uK/s1600/search-box1.png) no-repeat;width:250px;height:65px}input:focus::-webkit-input-placeholder{color:transparent}input:focus:-moz-placeholder{color:transparent}input:focus::-moz-placeholder{color:transparent}#searchbox input{outline:none}#searchbox input[type="text"]{background:transparent;padding:2px 0 2px 20px;margin:10px 15px 0 0;border-width:0;font:bold 16px "Brush Script MT",cursive;color:#595959;width:65%;display:inline-table;vertical-align:top}#button-submit{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxwgAoJnrbevRlwLoABLN_jVjQztwLiAlEa7gCetq_-ez3qDol518X8O3EkEDeMDgFIRABCGp9DHuG8qf5OGa6vH5B7eFCzNC-xp0n_yHwz6s_1VsMONuymrAHmiH1_ADzMvs5UR6c04Fd/s1600/magnifier.png) no-repeat;border-width:0;cursor:pointer;margin-top:10px;width:19px;height:25px}#button-submit:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfEd6wPOWSq0zCCXO0-_dGBr6mjTzThGpEC6C6DYcfWQIc-o59Izfe8don5unPcHiX4l8CxTwATvKHzgUtTaSxN_L_68gVIi34i2IoW8o3aQm-VG4u7Ay-HIlo5wqJrHjsVDObyyJm6hyW/s1600/magnifier-hover.png) no-repeat}#button-submit:active{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfEd6wPOWSq0zCCXO0-_dGBr6mjTzThGpEC6C6DYcfWQIc-o59Izfe8don5unPcHiX4l8CxTwATvKHzgUtTaSxN_L_68gVIi34i2IoW8o3aQm-VG4u7Ay-HIlo5wqJrHjsVDObyyJm6hyW/s1600/magnifier-hover.png) no-repeat;outline:none}#button-submit::-moz-focus-inner{border:0}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off"><input class="textarea" name="q" type="text" size="15" placeholder="Search here..." /><input id="button-submit" type="submit" value="" /></form>

 

<style type="text/css">

#searchbox{width:280px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9n5ZMAaELjpZWpJUnpqv55sLlFvNIFQA22I_ahZ9OA8VnE7w7sl9X_uxzb0zTogXFcS-0n_wCTk25aKhIXU4icrPZa2_O6JduyeYdQvpXZX7F5SF6ezGqw1ceW0FHccFeda8A2dMycVjM/s1600/search-box.png) no-repeat}#searchbox input{outline:none}input:focus::-webkit-input-placeholder{color:transparent}input:focus:-moz-placeholder{color:transparent}input:focus::-moz-placeholder{color:transparent}#searchbox input[type="text"]{background:transparent;border:0;font:14px "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,"AppleGothic",sans-serif;color:#f2f2f2!important;padding:10px 35px 10px 20px;width:220px}#searchbox input[type="text"]:focus{color:#fff}#button-submit{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQFmMjgXY7Sjy-rbuxwtpzMHMjp5_J8wZU9irP1xDIlEfbYq7J3lthKqWsACLuTAM0OCOrI-1SkN89ef2KYWGCsB5N6n6oyH6eABiHsFN68t7f9j_CIIKsCn2_5jmHHi17EL0hoXs1_GDo/s1600/search-icon.png) no-repeat;margin-left:-40px;border-width:0;width:40px;height:50px;cursor:pointer}#button-submit:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUp2HcRoViqmhxd9Lhs8NLAHNiB5ENRCDRjnkQ4pz61ezB4RuAJFRsczVIozJ2LyWhzJ6c0k-VgwnJzTK1eaU15zPjEjIqJvtP0bbzwlNzp6FpfeltoQQeFIWh4xxORx8qT30XaE9qD_aU/s1600/search-icon-hover.png)}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off"><input name="q" type="text" size="15" placeholder="Enter keywords here..." /><input id="button-submit" type="submit" value=" "/></form>

သင်ဝႃႈ ဢမ်ႇပွင်ႇၸႂ် ဢမ်ႇၼၼ် မီးေၶႃႈထၢမ်ၼႆၸိုင် တွင်ႈထၢမ်မႃးလႆႈယူႇၶႃႈ။

ၵႅမ်မိူင်း