Blog එකට ලස්සන Css3 Search bar widget එකක්

      Css3 search bar wedget for blogger 

                

අද මන් ඔයාලගේ blog එකට දාගන්න ලස්සන search bar wedget එකක් දෙනවා.ඔයාල පහතින් සඳහන් වන code එක  layout>>gadget>>ගිහින් html/javascript box එකට paste කරන්න

ඊළඟට save button එක clik කරන්න.

 <form id="abt-css3-search" action="/search" method="get">
<input id="search" name="q" type="text" placeholder="Type here" />
<input id="submit" type="submit" value="Search" />
</form>
<style>
#abt-css3-search{background:lightblue;background-image:0;-moz-border-radius:10px;border-radius:10px;width:270px;height:35px;overflow:hidden;border-color:#c4d9df #a4c3ca #83afb7;border-style:solid;border-width:1px;padding:10px}
#search,#submit{float:left}
#search{height:23px;width:180px;border:1px solid #a4c3ca;font:normal 13px 'trebuchet MS', arial, helvetica;background:#f1f1f1;-moz-border-radius:50px 3px 3px 50px;border-radius:50px 3px 3px 50px;-moz-box-shadow:0 1px 3px rgba(0,0,0,0.25) inset, 0 1px 0 rgba(255,255,255,1);-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.25) inset, 0 1px 0 rgba(255,255,255,1);box-shadow:0 1px 3px rgba(0,0,0,0.25) inset, 0 1px 0 rgba(255,255,255,1);padding:5px 9px}
#submit{background:pink ;background-image:0;-moz-border-radius:3px 50px 50px 3px;border-radius:3px 50px 50px 3px;-moz-box-shadow:0 0 1px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.3) inset;-webkit-box-shadow:0 0 1px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.3) inset;box-shadow:0 0 1px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.3) inset;height:35px;width:60px;cursor:pointer;font:bold 14px Arial, Helvetica;color:#23441e;text-shadow:0 1px 0 rgba(255,255,255,0.5);border-color:#7eba7c #578e57 #447d43;border-style:solid;border-width:1px;margin:0 0 0 10px;padding:0}
#submit:hover{background:#95d788;background-image:0}
#submit:active{background:#95d788;outline:none;-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset}
#submit::-moz-focus-inner{border:none}
#search.placeholder{color:#9c9c9c!important;font-style:italic}
#search:focus{background:#fff;outline:none;border-color:#8badb4}
#search::-webkit-input-placeholder,#search:-moz-placeholder{color:#9c9c9c;font-style:italic}
</style>

මේක වැඩකරන්නැති අය ඉන්නවනම් comment එකක් දාන්න. මේකෙ පාට එහෙම customize කරල ඔයාලට ඕන විදිහට හදාගන්න පුළුවන්.මොනව හරි තියෙනවනම් comment එකක් දාන්න.