Blogger Widget: Beautiful Search Box

Маш дажгүй өнгө үзэмжтэй блогт зориулсан хайлтийн загварийг оруулж байна. Блогтоо нэмж хийхэд маш хялбар загварийн сонголлтойгоор код тус бүрийг орууллаа. За тэгээд хийгээд үзээрэй.

Хийх алхамууд:

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/AVvXsEjr383sNlqfObzFlMVR0RTG6L7dfAgsUV3MitmmL4_qNNRMSp9Plbh4nOEKPy935wNg3T9xiES6ipyxJfreJVesTulb1_Kp8rO3sWB6coNLDts2CyaRIJMFtROZxF4o6J7jWTNon10uZbWv/) 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/AVvXsEhKFwcr7cSKDTzprH7GcGA9aw9ApeK9Kg6d5i1PyyLV9ETvbOQ1KgaIFcc5C8b-rncOAK1mIOeezp5bvQM6Xxae7LYQDmnq0G7PiZDdyG3nCAooNGpN2JN4eg7tKeloe5A4tz1x8l6G2ItG/) 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/AVvXsEj_Pb7uD5gN8yxCmW32D573TAVjuyqhpKTSp5av6WUsb9S_ppZnMpClDkHmpcJS6NuK2EKeGw_fODsn06ax1REayFh8pmYjawYDwhxOzz4fjAbrdFx1N8skDZpMKbna0p22iZV78GOv-5go/) 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/AVvXsEjYxFyidznRmiif_OpH5mEOR5nSg_no9uIc1oTOgEzBi_fpEypzs8Uq6C6_ITTbwv432kxYWVc5oqu6mYPLhSYzfSiMMGI0mWZ2Wo6Dcz27B8xmx_tSsV_89XPSjY9qevikTgtwz2c_r7SK/) 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/AVvXsEgNpD0n0rgW4UPFmQno1dsQzKc4W5moMzBRZhgnfxXQk_xmK6-pHq-up_y67IsozvzFjRlcP2Aj0CoU8YvhepHWbChAAo0xqdeDBCtKgbS8nnIl7j0hFcp-u_2n8KwKBUviC6JNHjJJtVfI/) 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/AVvXsEiga8G205NW36l3q36_m7BDeEvLv5GSMM0_5vSrYz4fEtaDmC2lNh38SvUzhYN6N9AJ5TF3DZb3IBMxV8_MtJoozl-sDdEoBz2w2PMd-0-7xNaT7tpcXVpl1TwDkvR_e18lEdHp3JiK48WW/) 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>