دروستکردنی ( سێرچ بۆکس ) ( Search Box ) بۆ بلۆگەرەکەت

دروستکردنی ( سێرچ بۆکس ) ( Search Box ) بۆ بلۆگەرەکەت بە شێوازێکی نوێ و بە ڕەنگی جیاواز

١ -  بچۆرە ‌حسابەکەت لە بلۆگەر و Layout بکەرەوە  .

٢ -   کلیک لەسەر Add Gadget and select بکەوHTML/Javascript’ هەڵبژێرە ‘ 

٣ -  پاشان ئەم کۆدەی لای خوارە کۆپی بکە و لەوێ پەیستی بکە و پاشان کلیک لەسەر  Save arrangement بکە  واتە سەیڤی بکە .  

بۆ ستایلی ( ١ )

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpoYw399zH3-T7S2kFf2n_P1zl7PquG-tc9Gg1wNAd5WBIVGOvbAP39SHqX6Yx2dYHdZPCip7XXi0aRbrKNNnM-01p-7PKq895ChV7Z43QfdcDEw5OJCWUp_AfI-2NcuT2S2no2LiQTGrK/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>   
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

بۆ ستایلی ( ٢ )

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC83T08dVNf4vy1e4rkfSbX9q0JO2BSbcy_iauGMqaukoWMH4P2-hGeGTVRt53CBn2ZHhEZT1W3a23-7dRwj0GQeqC7DmAPdVZt-7gSyIPAzWw5tdNrqC1TGldE9q4z3np3iBZDs9w_QhC/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>   
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

بۆ ستایلی ( ٣ )

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ0jTAoy0n8iPV1R06UUnUnQzm3M_seckV28w2nVI38iXC1_f28vgsrJFMfGLAeWUj6DxmsqweHgBvG9skfpKqOFGpFNBAJFwptQDpxlDXfgdTgr_3jWHAUk7_vtYmNRSJ3PRBXxp8sqXb/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>   
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

بۆ ستایلی ( ٤ )

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz6k3WsDI5AK7_8QcEuCww9hkNgA_4JiDDrdgdInxkjPW9ifiUdMtQjuALEh3n2Po8LhRV9S9D79rjEYYpWs-9wvh10yDmwxqJEtMu8yOXlr7e7DTG_3X_q_prdu0O9s5ZvQNCynW34jOX/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>   
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value=""/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

بۆ ستایلی ( ٥ )

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiitSy_7TnfDASKX1BvlpgOoE9bdt7mQTp76f-fAPBTqtm-UPkvU5Urw6Z6C-kBtxm1owBBS2pEcRTsT0jBocdMDgLc5WsT-cgMTjxNyxMx7bDlItyfWDpMOv_0AB4WSiFcvvoaYzgO36FK/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>   
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value=""/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

بۆ ستایلی ( ٦ )

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3F6ABbuYleR2ZnEaf6eUXMJcgo1nAr3-f3pb2RcTsABBDvfooJMVKaJTmXaQH51wJhcLXGT-DIfwJQQrAEieDjqa_N8QUI9N-a_KEUZ5PkCYN2V8UxJ2dWS_I5wEpsSFXY0K-qyanADVA/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>   
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value=""/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>