searchbox
Posted on Saturday, December 14, 2013
|
No Comments
Маш дажгүй өнгө үзэмжтэй блогт зориулсан хайлтийн загварийг оруулж байна. Блогтоо нэмж хийхэд маш хялбар загварийн сонголлтойгоор код тус бүрийг орууллаа. За тэгээд хийгээд үзээрэй.
1. Юуны түрүүнд блогтоо нэвтэрч орно.
2. Blogger Dashboard -> Design хэсгээс -> Page Elements
3. Тэгээд хажуу талд байрлах Add a Gadget гэснийг дарна.
4. Тэгээд гарж ирэх цонхноос HTML/JavaScript гэдгийг сонгоно.
5. Гарж ирсэн цонхондоо доорхи кодуудыг хуулж тавиад Save ингээд боллоо.
STYLE 1
<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimTi0em7WFknoQUfa0Cp-xP8OvWryxqWJR4k5psJa8scz7EuRU10vFUdtGSrMcB5A4Jkmkhlg3_6lhu1BMlDg-uzoy30gdnRrHJ_oR2cPue_x5TwAeRslsXyUWXSTg2JGYIL7WEDzO338g/) 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 2
<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSjfFHP65VhZvqIH4OJC-POxL_kBLv3dcJIYkVPnBPJbkwj6gdcWuE1id2KEzb3hE_ZghLR0hODIhRZamTqgY6q40BxeNnlH-8wpdm9xOBHuASaD4DSvW663VfiuNEmBDmEyuXa-3pbpax/) 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 3
<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQUrxY0j3jTnWHV24AcFTmF8J973ntgm_HODIQNoXfpqWKkVlvKBzS8NH9_dvzSI31khjHGhCXOC6LoTA3OL8wlYSwBykRePUTKzFStxUODhpN45ySozDQC3PspYUsqrFs-F02_xgxj0eO/) 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 4
<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5gK0yPuBu0pRKN0mC12kM_zWDo69BI_XGTNEuqBX3WC7ayyI0y_PVS_OIqTk4WJUVbEP8MTbMZaqDiSbwD7oTYDPz7AQBCTY6iWu9h9ZxyIO5cpehXSH3n-fMtTw-zJFCOUlLTue2m7RN/) 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 5
<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq6bAwHllWaH78xCUfkbibfyL2Zw1n72evujKo1rUIx_MlnifKr_0_udvQb7gZrAfTyQ2zOlOGB4O2WCEB8E1n_LwOWXsDMKKICn3tlDPj_hr5yDEqcLCBbDHx3RxMC3bb5LvM6myCvUuC/) 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 6
<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia3wuLSRUuqoM72n2Tq5WaZNBoU6sQD6jW2SmaZQ1edIUhuSbWP-4AuSTBu6RdkqJFKbpMKt0BNr_H-flHtftgmWHQ6p3I0piJocDp6aATgSbq03Ik8h7RyhvW7i5BiItdNgbODBkug0hW/) 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>
