Today we will talk about advanced practices in designing a search box to make your blog a better place for your readers. Designing search box with onfocus or placeholder attribute or property is not a complex thing. Choosing any attribute is your choice. These attributes make your search box live, attractive and more educating. These attributes are able to show text inside search box and this text disappears as you place cursor or start typing inside it.
Custom Advanced Search Box for Blogger blogs
Onfocus Attribute:
This attribute is able to show text inside search box and text disappears as you place cursor inside it.
onfocus="if (this.value == "Type keyword here") {this.value = ""}" onblur="if (this.value == "") {this.value = "Type keyword here";}"
Placeholder Attribute:
This attribute is able to show text inside search box and text disappears as you start typing inside it.
placeholder="Type keyword here"
Simple search box in action
Simple search box code for Blogger
<form id="techprevue" action="/search" method="get"> <input search name="q" /> <input id="searchbutton" value="Search" type="submit" /></form>
Search Box using Onfocus Attribute
Search box using onfocus attribute in action
Search box code for onfocus attribute
<form id="techprevue" action="/search" method="get"> <input onfocus="if (this.value == "Type keyword here") {this.value = ""}" onblur="if (this.value == "") {this.value = "Type keyword here";}" value="Type keyword here" name="q" /> <input id="searchbutton" value="Search" type="submit" /></form>
Search Box using Placeholder Attribute
Search box using placeholder attribute in action
Search box code for place attribute
<form id="techprevue" action="/search" method="get"> <input placeholder="Type keyword here" name="q" /> <input id="searchbutton" value="Search" type="submit" /></form>
I believe this tutorial will help you choose you wisely as per your design requirement.
Please help me. I want to make a search box that will search only posts’ titles. I have a search box on my web but when I search, for example, “fast”, it shows me many results including contents of other posts, but I want it to show only if the word is in post title.
If you’re using Google Blogger then search option for post title only will not be possible. if you want to show only post title on search page then in your Blogger template paste following code –
.post-body,.post-footer,.date-header,.inline-ad{display:none;}
.hentry,h3.post-title{border-bottom:none;}
below closing tag.
it has very helpful for me………
you are great information sharing