Custom Advanced Search Box for Blogger blogs

4

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.

Advance Search Box for Blogger

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 == &quot;Type keyword here&quot;) {this.value = &quot;&quot;}" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Type keyword here&quot;;}" 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.

4 COMMENTS

  1. 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.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.