ခ်မ္းေျမ့နည္းပညာ(သိမ္ဇရပ္သားေလး)
မိမိရဲ႕ Blog မွာ Search Box လွလွေလး ထားဖို႕ အတြက္HTMCode ေလးေတြမွ်ေ၀ေပးလိုက္ပါတယ္ဗ်ာ။ မိမိၾကိဳက္တဲ႕ အေရာင္ကိုေရြးျပီးသံုးရံုပါဘဲ ေအာက္မွာ အေရာင္ 5ေရာင္ အတြက္ ကုဒ္ငါမ်ိဳးေပးထားပါတယ္ဗ်ာ။ ထည္႕သြင္းပံုက လည္း Blogger ညီအကိုမ်ားအားလံုး လိုက္လုပ္ႏိုင္ပါတယ္။ပံုနဲ႕တကြေသခ်ာေလးရွင္းျပထားပါတယ္။အဆင္ေျပၾကပါေစေနာ္။
အဆင့္ 1 Design > Layout > Add a Gadget ကိုႏွိပ္ပါ။အဆင္႕ 2 Eidt HTML ကုိေရြးေပးပါ။ ျပီးသြားရင္ ေအာက္က Code ကိုကူးထည္႕ေပးပါ။
အဆင္႕ 3 Save ႏွိပ္ေပးပါ။
Style 1
<style type="text/css">
#btrix-searchbox {
border-radius: 5px;
background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvr_nc-ZlXPN0LWG2d8xXU1RnrtW2o0N3iq6izUbin7USCHZwdx1RSnQ6a2mVBjd-R7aPHu0NYMzVu60O5PC7ZpMoJlF3AteCcJrSbSjjLj-a8N37edfBd47o8qme5NJxUy76Z4nOCf8Ot/s1600/red.png) no-repeat scroll center center transparent;
width: 307px;
height: 50px;
disaply: block;
}
form#btrix-searchform {
display: block;
padding: 9px 16px;
margin: 0;
}
form#btrix-searchform #s {
padding-left: 24px !important;
padding: 7.5px;
margin: 0;
width: 198px;
font-size: 16px;
font-family: georgia;
font-style: italic;
color: #666666;
vertical-align: top;
border: none;
background: transparent;
}
form#btrix-searchform
#sbutton {
margin: 0;
padding: 0;
height: 40px;
width: 74px;
vertical-align: top;
border: none;
background: transparent;
}
</style>
<div id="btrix-searchbox">
<form id="btrix-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">
#btrix-searchbox {
border-radius: 5px;
background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_whXoJcUspbXlcQCfruPkuPDT3vYaW3fv48muzTlgSmDmXkU9GhitDt_kSyYeopltJ0PY0_X5HQ3Q1pzNPTDzD4MxI0LofTBv-XkS_TrsxE7dXMRndd19byBhRA_jGKsFfu8Udop9B_IV/s1600/purple.png) no-repeat scroll center center transparent;
width: 307px;
height: 50px;
disaply: block;
}
form#btrix-searchform {
display: block;
padding: 9px 16px;
margin: 0;
}
form#btrix-searchform #s {
padding-left: 24px !important;
padding: 7.5px;
margin: 0;
width: 198px;
font-size: 16px;
font-family: georgia;
font-style: italic;
color: #666666;
vertical-align: top;
border: none;
background: transparent;
}
form#btrix-searchform
#sbutton {
margin: 0;
padding: 0;
height: 40px;
width: 74px;
vertical-align: top;
border: none;
background: transparent;
}
</style>
<div id="btrix-searchbox">
<form id="btrix-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">
#btrix-searchbox {
border-radius: 5px;
background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg21ngUJdPxVnW_HH8LSxQUAS5oRCQ5TnG92WfCf7SlAs0gTwL8Qq-HqPyosRKUJBbz8ue0-eEI48WtzAmLvB5K2K5SoYZFEi8pLIIk4l8_hVsUzwJR03YBWeWuD3x0OmBhTHkQEKBLq8Fe/s1600/green.png) no-repeat scroll center center transparent;
width: 307px;
height: 50px;
disaply: block;
}
form#btrix-searchform {
display: block;
padding: 9px 16px;
margin: 0;
}
form#btrix-searchform #s {
padding-left: 24px !important;
padding: 7.5px;
margin: 0;
width: 198px;
font-size: 16px;
font-family: georgia;
font-style: italic;
color: #666666;
vertical-align: top;
border: none;
background: transparent;
}
form#btrix-searchform
#sbutton {
margin: 0;
padding: 0;
height: 40px;
width: 74px;
vertical-align: top;
border: none;
background: transparent;
}
</style>
<div id="btrix-searchbox">
<form id="btrix-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">
#btrix-searchbox {
border-radius: 5px;
background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTtjZGZ73dcev84OyophRNnH3U6zK01bz2q21qELQGgaSjBvRY_BM-iEnQPblxJ3KaH00g963i9-dkbnc_IvJ78mC1GQU1_YhhZm24FjkmjgwTr9T2eCwhpVMEy0CkxYO7QLlaV-7CeWtT/s1600/blue.png) no-repeat scroll center center transparent;
width: 307px;
height: 50px;
disaply: block;
}
form#btrix-searchform {
display: block;
padding: 9px 16px;
margin: 0;
}
form#btrix-searchform #s {
padding-left: 24px !important;
padding: 7.5px;
margin: 0;
width: 198px;
font-size: 16px;
font-family: georgia;
font-style: italic;
color: #666666;
vertical-align: top;
border: none;
background: transparent;
}
form#btrix-searchform
#sbutton {
margin: 0;
padding: 0;
height: 40px;
width: 74px;
vertical-align: top;
border: none;
background: transparent;
}
</style>
<div id="btrix-searchbox">
<form id="btrix-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 5
<style type="text/css">
#btrix-searchbox {
border-radius: 5px;
background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLYYx-kf14ijB16jN14o9Uz0g73xP9fSSqVypXmbyBq5lQrvk8MMCyqRWV9GJ77m0Io9eQixW4hkc0F3VBJC9KRrr7xw8lDo1gYY3QcjOFeC-znADckqNqlI_vjb8R3uT4JQFeQMB7tG7r/s1600/orange.png) no-repeat scroll center center transparent;
width: 307px;
height: 50px;
disaply: block;
}
form#btrix-searchform {
display: block;
padding: 9px 16px;
margin: 0;
}
form#btrix-searchform #s {
padding-left: 24px !important;
padding: 7.5px;
margin: 0;
width: 198px;
font-size: 16px;
font-family: georgia;
font-style: italic;
color: #666666;
vertical-align: top;
border: none;
background: transparent;
}
form#btrix-searchform
#sbutton {