ဘေလာ့အတြက္ search လွလွေလးမ်ား
အရင္ဆုံ ကုဒ္ကို Copy ယူ ၿပီးရင္ Layout ကိုသြား ၿပီး Add a Gadget ကHTML/JavaScript မွာ ကုဒ္ကို save လိုက္ပါ
Search Box Style 1
<style type="text/css">
#helperblogger-searchbox {
border-radius: 5px;
background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2nnhg0GC8WFZyPJnyuT5nqICaiOTOmq3sweq1Yu-_qGonI3P8zFHoX4doOpBOEcBYRkfDeH5M6odiHC4BCP4xSUEoN3DGviH8S6OpKmfP_GsTtQynBXWglmLmrB12n1B9AG2t0XlrdLU/s1600/helperblogger.com-white.png) no-repeat scroll center center transparent;
width: 307px;
height: 50px;
disaply: block;
}
form#helperblogger-searchform {
display: block;
padding: 10px 12px;
margin: 0;
}
form#helperblogger-searchform #s {
padding-left: 24px !important;
padding: 7.5px;
margin: 0;
width: 220px;
font-size: 14px;
font-family: verdana;
vertical-align: top;
border: none;
background: transparent;
}
form#helperblogger-searchform
#sbutton {
margin: 0;
padding: 0;
height: 40px;
width: 44px;
vertical-align: top;
border: none;
background: transparent;
}
</style>
<div id="helperblogger-searchbox">
<form id="helperblogger-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>
Search Box Style 2
<style type="text/css">
#helperblogger-searchbox {
border-radius: 5px;
background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5nGTiu_AeDJwrb2bZIMZl_vWoyf046WL3K4MZhtGheV3zgFIOPL0kLhWLr6glVdKyOhe5qT1U0Sy4mQdZj3g9nmU9BVfXu-eqgWLNg8gU45Eo6tHmilgjlnPjb4trSXdim8OaXqfbBE8/h57/helperblogger.com-blue.png) no-repeat scroll center center transparent;
width: 307px;
height: 50px;
disaply: block;
}
form#helperblogger-searchform {
display: block;
padding: 10px 12px;
margin: 0;
}
form#helperblogger-searchform #s {
padding-left: 24px !important;
padding: 7.5px;
margin: 0;
width: 220px;
font-size: 14px;
font-family: verdana;
vertical-align: top;
border: none;
background: transparent;
}
form#helperblogger-searchform
#sbutton {
margin: 0;
padding: 0;
height: 40px;
width: 44px;
vertical-align: top;
border: none;
background: transparent;
}
</style>
<div id="helperblogger-searchbox">
<form id="helperblogger-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>
Search Box Style 3
<style type="text/css">
#helperblogger-searchbox {
border-radius: 5px;
background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIfj46OyYwotKMLkEz0jcY9nlm9YTTb2JODRVnFSVUMUVLzEmPh6l6TnFzyYs9CAb5T1_MLOAoQLxVAD6pgFoxE0s1XCv7TM28f-Y0R6EbBHpAks1GSNSnKOKAVi7V9c8nF6Kpl_5vROw/s1600/helperblogger.com-black.png) no-repeat scroll center center transparent;
width: 307px;
height: 50px;
disaply: block;
}
form#helperblogger-searchform {
display: block;
padding: 10px 12px;
margin: 0;
}
form#helperblogger-searchform #s {
padding-left: 24px !important;
padding: 7.5px;
margin: 0;
width: 220px;
font-size: 14px;
font-family: verdana;
vertical-align: top;
border: none;
background: transparent;
}
form#helperblogger-searchform
#sbutton {
margin: 0;
padding: 0;
height: 40px;
width: 44px;
vertical-align: top;
border: none;
background: transparent;
}
</style>
<div id="helperblogger-searchbox">
<form id="helperblogger-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>
Search Box Style 4
<style type="text/css">
#helperblogger-searchbox {
border-radius: 5px;
background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguKvEReqNlRjVDySHBZcaC-HilxZttXDxS3IlFJhbWpe9UXnHow9JVRxM7bJ1IF2POQyU5fmqHaEbHPyIyqINvvuOX7Ery581hUHbkkJyeoX_zBqqnjq5Yi0PsFyfBxbWxCLVZDBG3Zj8/s1600/helperblogger.com-orange.png) no-repeat scroll center center transparent;
width: 307px;
height: 50px;
disaply: block;
}
form#helperblogger-searchform {
display: block;
padding: 10px 12px;
margin: 0;
}
form#helperblogger-searchform #s {
padding-left: 24px !important;
padding: 7.5px;
margin: 0;
width: 220px;
font-size: 14px;
font-family: verdana;
vertical-align: top;
border: none;
background: transparent;
}
form#helperblogger-searchform
#sbutton {
margin: 0;
padding: 0;
height: 40px;
width: 44px;
vertical-align: top;
border: none;
background: transparent;
}
</style>
<div id="helperblogger-searchbox">
<form id="helperblogger-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>
Search Box Style 5
<style type="text/css">
#helperblogger-searchbox {
border-radius: 5px;
background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmUf1HUa7_9WKkc9n5QIz-sYcr9ta0-FkNwaUTDaPf2Gr74bEBG38-VZVf0l7FBRdAW5T7Yuhab1nHX_fMfrCA9oyw43g6yCpCCRLEPUOF-SJS1uZt-b8ClXMGKyXoY-yYzigQlRIwa6o/h57/helperblogger.com-pink.png) no-repeat scroll center center transparent;
width: 307px;
height: 50px;
disaply: block;
}
form#helperblogger-searchform {
display: block;
padding: 10px 12px;
margin: 0;
}
form#helperblogger-searchform #s {
padding-left: 24px !important;
padding: 7.5px;
margin: 0;
width: 220px;
font-size: 14px;
font-family: verdana;
vertical-align: top;
border: none;
background: transparent;
}
form#helperblogger-searchform
#sbutton {
margin: 0;
padding: 0;
height: 40px;
width: 44px;
vertical-align: top;
border: none;
background: transparent;
}
</style>
<div id="helperblogger-searchbox">
<form id="helperblogger-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>
How To Add Sleek Search Boxes To Blogger
- First choose any search box below
- Copy the code of that search box
- Go to Blogger Dashboard > Layout
- Click Add a Gadget
- Select HTML/JavaScript
- Paste code and save it
- Drag it to the top of your siderbar,if you are good blogger :)
Search Box Style 1
<style type="text/css">
#helperblogger-searchbox {
border-radius: 5px;
background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2nnhg0GC8WFZyPJnyuT5nqICaiOTOmq3sweq1Yu-_qGonI3P8zFHoX4doOpBOEcBYRkfDeH5M6odiHC4BCP4xSUEoN3DGviH8S6OpKmfP_GsTtQynBXWglmLmrB12n1B9AG2t0XlrdLU/s1600/helperblogger.com-white.png) no-repeat scroll center center transparent;
width: 307px;
height: 50px;
disaply: block;
}
form#helperblogger-searchform {
display: block;
padding: 10px 12px;
margin: 0;
}
form#helperblogger-searchform #s {
padding-left: 24px !important;
padding: 7.5px;
margin: 0;
width: 220px;
font-size: 14px;
font-family: verdana;
vertical-align: top;
border: none;
background: transparent;
}
form#helperblogger-searchform
#sbutton {
margin: 0;
padding: 0;
height: 40px;
width: 44px;
vertical-align: top;
border: none;
background: transparent;
}
</style>
<div id="helperblogger-searchbox">
<form id="helperblogger-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>
Search Box Style 2
<style type="text/css">
#helperblogger-searchbox {
border-radius: 5px;
background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5nGTiu_AeDJwrb2bZIMZl_vWoyf046WL3K4MZhtGheV3zgFIOPL0kLhWLr6glVdKyOhe5qT1U0Sy4mQdZj3g9nmU9BVfXu-eqgWLNg8gU45Eo6tHmilgjlnPjb4trSXdim8OaXqfbBE8/h57/helperblogger.com-blue.png) no-repeat scroll center center transparent;
width: 307px;
height: 50px;
disaply: block;
}
form#helperblogger-searchform {
display: block;
padding: 10px 12px;
margin: 0;
}
form#helperblogger-searchform #s {
padding-left: 24px !important;
padding: 7.5px;
margin: 0;
width: 220px;
font-size: 14px;
font-family: verdana;
vertical-align: top;
border: none;
background: transparent;
}
form#helperblogger-searchform
#sbutton {
margin: 0;
padding: 0;
height: 40px;
width: 44px;
vertical-align: top;
border: none;
background: transparent;
}
</style>
<div id="helperblogger-searchbox">
<form id="helperblogger-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>
Search Box Style 3
<style type="text/css">
#helperblogger-searchbox {
border-radius: 5px;
background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIfj46OyYwotKMLkEz0jcY9nlm9YTTb2JODRVnFSVUMUVLzEmPh6l6TnFzyYs9CAb5T1_MLOAoQLxVAD6pgFoxE0s1XCv7TM28f-Y0R6EbBHpAks1GSNSnKOKAVi7V9c8nF6Kpl_5vROw/s1600/helperblogger.com-black.png) no-repeat scroll center center transparent;
width: 307px;
height: 50px;
disaply: block;
}
form#helperblogger-searchform {
display: block;
padding: 10px 12px;
margin: 0;
}
form#helperblogger-searchform #s {
padding-left: 24px !important;
padding: 7.5px;
margin: 0;
width: 220px;
font-size: 14px;
font-family: verdana;
vertical-align: top;
border: none;
background: transparent;
}
form#helperblogger-searchform
#sbutton {
margin: 0;
padding: 0;
height: 40px;
width: 44px;
vertical-align: top;
border: none;
background: transparent;
}
</style>
<div id="helperblogger-searchbox">
<form id="helperblogger-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>
Search Box Style 4
<style type="text/css">
#helperblogger-searchbox {
border-radius: 5px;
background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguKvEReqNlRjVDySHBZcaC-HilxZttXDxS3IlFJhbWpe9UXnHow9JVRxM7bJ1IF2POQyU5fmqHaEbHPyIyqINvvuOX7Ery581hUHbkkJyeoX_zBqqnjq5Yi0PsFyfBxbWxCLVZDBG3Zj8/s1600/helperblogger.com-orange.png) no-repeat scroll center center transparent;
width: 307px;
height: 50px;
disaply: block;
}
form#helperblogger-searchform {
display: block;
padding: 10px 12px;
margin: 0;
}
form#helperblogger-searchform #s {
padding-left: 24px !important;
padding: 7.5px;
margin: 0;
width: 220px;
font-size: 14px;
font-family: verdana;
vertical-align: top;
border: none;
background: transparent;
}
form#helperblogger-searchform
#sbutton {
margin: 0;
padding: 0;
height: 40px;
width: 44px;
vertical-align: top;
border: none;
background: transparent;
}
</style>
<div id="helperblogger-searchbox">
<form id="helperblogger-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>
Search Box Style 5
<style type="text/css">- See more at: http://www.helperblogger.com/2012/06/beautiful-and-sleek-search-boxes-for.html#sthash.L8RrwNvn.dpuf
#helperblogger-searchbox {
border-radius: 5px;
background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmUf1HUa7_9WKkc9n5QIz-sYcr9ta0-FkNwaUTDaPf2Gr74bEBG38-VZVf0l7FBRdAW5T7Yuhab1nHX_fMfrCA9oyw43g6yCpCCRLEPUOF-SJS1uZt-b8ClXMGKyXoY-yYzigQlRIwa6o/h57/helperblogger.com-pink.png) no-repeat scroll center center transparent;
width: 307px;
height: 50px;
disaply: block;
}
form#helperblogger-searchform {
display: block;
padding: 10px 12px;
margin: 0;
}
form#helperblogger-searchform #s {
padding-left: 24px !important;
padding: 7.5px;
margin: 0;
width: 220px;
font-size: 14px;
font-family: verdana;
vertical-align: top;
border: none;
background: transparent;
}
form#helperblogger-searchform
#sbutton {
margin: 0;
padding: 0;
height: 40px;
width: 44px;
vertical-align: top;
border: none;
background: transparent;
}
</style>
<div id="helperblogger-searchbox">
<form id="helperblogger-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>
Subscribe to:
Post Comments
(
Atom
)
No comments :
Post a Comment