Skip to main content

Modern Search Boxes for Blogger

by
Modern Search Boxes for Blogger

Every blog should have a search box so that blog visitors can search any post in blog`s archive with less effort. If your blog contains thousands of posts, it'll be very difficult for a reader to find any specific article in your blog by going through the complete archive of your blog posts. But if you have search box installed in your blog then readers can directly search any article by using it. In this way search box helps blog readers to navigate easily throughout your blog. Blogger has its own search box widget but the design is dull and undesirable. This tutorial will show you how to add custom search box to your blog.


It's recommended to backup your template before any modification has been made in order to avoid template crush if anything goes wrong.
Lets go. Follow these steps carefully.
  1. Go to Blogger dashboard and select 'Layout' from the dropdown menu adjacent to 'Go to post list' icon. You can also select 'Layout' from left navigation menu.
  2. Click on Add a Gadget.
  3. Scroll down and Select HTML/Javascript
  4. Choose any of these search boxes, copy (Ctrl+C) the following code and paste (Ctrl+V) it inside HTML/JavaScript content area. Leave the title empty.

    5. Clean Search Box

    <style type="text/css">
#blr_clean_search_box {
  padding: 10px;
}
#blr_clean_search_input {
  border: 1px solid #dcdcdc;
  background: #fff;
  padding: 5px;
  font: 14px Verdana, Sans-serif;
  color: #555;
  outline: none;
  width: 200px;
}
#blr_clean_search_input:focus {
  border: 1px solid #ffa500;
}
#blr_clean_search_submit {
  border: 1px solid #ffa500;
  background: #ffa500;
  padding: 5px;
  font: 14px Verdana, Sans-serif;
  color: #fff;
}
</style>

<div id="blr_clean_search">
  <form expr:action="/search" method="get" id="blr_clean_search_box">
    <input type="text" name="q" placeholder="Search this site..." id="blr_clean_search_input" />
    <input type="submit" value="Search" id="blr_clean_search_submit" />
  </form>
</div>

    Dynamic Width Search Box

    Under normal condition:

    Under focused (with mouse) condition:
    <style type="text/css">
#blr_dynamic_width_search_box {
  padding: 10px;
}
#blr_dynamic_width_search_input {
  border: 1px solid #dcdcdc;
  background: #fff;
  padding: 5px;
  color: #666;
  font: 14px verdana;
  transition: width .6s;
  -webkit-transition: width .6s;
  -o-transition: width .6s;
  -moz-transition: width .6s;
  width: 60px;
  outline: none;
}
#blr_dynamic_width_search_input:focus {
  border: 1px solid #111;
  width: 200px;
}
#blr_dynamic_width_search_submit {
  border: 1px solid #111;
  background: #111;
  padding: 5px;
  color: #fff;
  font: 14px verdana;
}
</style>

<div id="blr_dynamic_width_search">
  <form expr:action="/search" method="get" id="blr_dynamic_width_search_box">
    <input type="text" name="q" placeholder="Search this site..." id="blr_dynamic_width_search_input" />
    <input type="submit" value="Search" id="blr_dynamic_width_search_submit" />
  </form>
</div>

    Black and White Search Box

    <style type="text/css">
#blr_black_white_search {
  background: rgba(0, 0, 0, 0) url('http://2.bp.blogspot.com/-b5ACK-4xCHs/Un9kVUr3yZI/AAAAAAAAC5E/IJBSChoYmgM/s1600/black_white_image.png') scroll 50% 50% no-repeat;
  width: 307px;
  height: 50px;
  display: block;
}
#blr_black_white_search_box {
  display: block;
  padding: 10px 12px;
  margin: 0;
}
#blr_black_white_search_input {
  padding: 6px;
  margin: 0;
  width: 233px;
  font-size: 14px;
  vertical-align: top;
  background: rgba(0, 0, 0, 0);
  border: none;
  outline: none;
}
#blr_black_white_search_submit {
  margin: 0;
  margin-left: 2px;
  padding: 0;
  height: 30px;
  width: 30px;
  border: none;
  background: rgba(0, 0, 0, 0);
  outline: none;
}
</style>

<div id="blr_black_white_search">
  <form expr:action="/search" method="get" id="blr_black_white_search_box">
    <input type="text" name="q" placeholder="Search this site..." id="blr_black_white_search_input" />
    <input type="image" id="blr_black_white_search_submit" src="http://3.bp.blogspot.com/-voC7glqqSVQ/Un9kVT6yQTI/AAAAAAAAC48/vG6cGwnI1WE/s1600/blank.gif" />
  </form>
</div>

    Red-Gainsboro Search Box

    <style type="text/css">
#blr_red_gainsboro_search {
  background: rgba(0, 0, 0, 0) url('http://4.bp.blogspot.com/-y6oYgJxzYfE/Un9luyNy9xI/AAAAAAAAC6M/VXWLZa0CJF8/s1600/white_image.png') scroll 50% 50% no-repeat;
  width: 307px;
  height: 50px;
  display: block;
}
#blr_red_gainsboro_search_box {
  display: block;
  padding: 12px;
  margin: 0;
}
#blr_red_gainsboro_search_input {
  padding: 6px 6px 6px 26px;
  margin: 0;
  width: 213px;
  font-size: 14px;
  vertical-align: top;
  border: none;
  outline: none;
  background: rgba(0, 0, 0, 0);
}
#blr_red_gainsboro_search_submit {
  margin: 0;
  margin-left: 2px;
  padding: 0;
  height: 30px;
  width: 30px;
  vertical-align: top;
  border: none;
  outline: none;
  background: rgba(0, 0, 0, 0);
}
</style>

<div id="blr_red_gainsboro_search">
  <form expr:action="/search" method="get" id="blr_red_gainsboro_search_box">
    <input type="text" name="q" placeholder="Search this site..." id="blr_red_gainsboro_search_input" />
    <input type="image" id="blr_red_gainsboro_search_submit" src="http://3.bp.blogspot.com/-voC7glqqSVQ/Un9kVT6yQTI/AAAAAAAAC48/vG6cGwnI1WE/s1600/blank.gif" />
  </form>
</div>

    Green-White Search Box

    <style type="text/css">
#blr_green_white_search {
  background: rgba(0, 0, 0, 0) url('http://4.bp.blogspot.com/-LqO4DVsg0wM/Un9kYjswx-I/AAAAAAAAC50/akwotwS6934/s1600/white_image_2.png') scroll 50% 50% no-repeat;
  width: 330px;
  height: 50px;
  display: block;
}
#blr_green_white_search_box {
  display: block;
  padding: 6px 5px;
  margin: 0;
}
#blr_green_white_search_input {
  padding: 11px;
  margin: 0;
  width: 238px;
  font-size: 14px;
  vertical-align: top;
  border: none;
  outline: none;
  background: rgba(0, 0, 0, 0);
}
#blr_green_white_search_submit {
  margin: 0;
  margin-left: 5px;
  padding: 0;
  height: 38px;
  width: 51px;
  vertical-align: top;
  border: none;
  outline: none;
  background: rgba(0, 0, 0, 0);
}
</style>

<div id="blr_green_white_search">
  <form expr:action="/search" method="get" id="blr_green_white_search_box">
    <input type="text" name="q" placeholder="Search this site..." id="blr_green_white_search_input" />
    <input type="image" id="blr_green_white_search_submit" src="http://3.bp.blogspot.com/-voC7glqqSVQ/Un9kVT6yQTI/AAAAAAAAC48/vG6cGwnI1WE/s1600/blank.gif" />
  </form>
</div>

    Blue-White Search Box

    <style type="text/css">
#blr_blue_white_search {
  background: rgb(255, 255, 255);
  width: 320px;
  height: 32px;
  display: block;
  border-radius: 16px;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.4);
}
#blr_blue_white_search_box {
  display: block;
  padding: 4px;
  margin: 0;
}
#blr_blue_white_search_input {
  padding: 4px 2px 4px 10px;
  margin: 0;
  width: 284px;
  font: italic normal 10pt Georgia;
  vertical-align: top;
  border: none;
  outline: none;
  background: rgba(0, 0, 0, 0);
}
#blr_blue_white_search_submit {
  margin: 0;
  padding: 0;
  height: 24px;
  width: 24px;
  vertical-align: top;
  border: none;
  outline: none;
  background: #009cff url('http://2.bp.blogspot.com/-qLAfz9vaSNA/Un9kWT4FtrI/AAAAAAAAC5Y/V5bs4zm6gME/s1600/search_small.png') scroll 50% 50% no-repeat;
  border-radius: 50%;
}
</style>

<div id="blr_blue_white_search">
  <form expr:action="/search" method="get" id="blr_blue_white_search_box">
    <input type="text" name="q" placeholder="Search this site..." id="blr_blue_white_search_input" />
    <input type="image" id="blr_blue_white_search_submit" src="http://3.bp.blogspot.com/-voC7glqqSVQ/Un9kVT6yQTI/AAAAAAAAC48/vG6cGwnI1WE/s1600/blank.gif" />
  </form>
</div>

    Gray Search Box

    <style type="text/css">
#blr_gray_search {
  background: rgba(0, 0, 0, 0) url('http://1.bp.blogspot.com/-vtV24P8bg1c/Un9kVsRjefI/AAAAAAAAC5A/HrAWOA2nT2A/s1600/grew_image.png') scroll 50% 50% no-repeat;
  width: 307px;
  height: 50px;
  display: block;
}
#blr_gray_search_box {
  display: block;
  padding: 12px;
  margin: 0;
}
#blr_gray_search_input {
  padding: 6px 6px 6px 26px;
  margin: 0;
  width: 213px;
  font-size: 14px;
  vertical-align: top;
  border: none;
  outline: none;
  background: rgba(0, 0, 0, 0);
}
#blr_gray_search_submit {
  margin: 0;
  margin-left: 2px;
  padding: 0;
  height: 30px;
  width: 30px;
  vertical-align: top;
  border: none;
  outline: none;
  background: rgba(0, 0, 0, 0);
}
</style>

<div id="blr_gray_search">
  <form expr:action="/search" method="get" id="blr_gray_search_box">
    <input type="text" name="q" placeholder="Search this site..." id="blr_gray_search_input" />
    <input type="image" id="blr_gray_search_submit" src="http://3.bp.blogspot.com/-voC7glqqSVQ/Un9kVT6yQTI/AAAAAAAAC48/vG6cGwnI1WE/s1600/blank.gif" />
  </form>
</div>

    Red-White Search Box

    <style type="text/css">
#blr_red_white_search {
  background: rgba(0, 0, 0, 0) url('http://2.bp.blogspot.com/-MsGmbEaYMls/Un9kWJmUUnI/AAAAAAAAC5Q/T41emO-zrL8/s1600/red_image.png') scroll 50% 50% no-repeat;
  width: 307px;
  height: 50px;
  display: block;
}
#blr_red_white_search_box {
  display: block;
  padding: 10px 12px;
  margin: 0;
}
#blr_red_white_search_input {
  padding: 6px;
  margin: 0;
  width: 233px;
  font-size: 14px;
  vertical-align: top;
  background: rgba(0, 0, 0, 0);
  border: none;
  outline: none;
}
#blr_red_white_search_submit {
  margin: 0;
  margin-left: 2px;
  padding: 0;
  height: 30px;
  width: 30px;
  border: none;
  background: rgba(0, 0, 0, 0);
  outline: none;
}
</style>

<div id="blr_red_white_search">
  <form expr:action="/search" method="get" id="blr_red_white_search_box">
    <input type="text" name="q" placeholder="Search this site..." id="blr_red_white_search_input" />
    <input type="image" id="blr_red_white_search_submit" src="http://3.bp.blogspot.com/-voC7glqqSVQ/Un9kVT6yQTI/AAAAAAAAC48/vG6cGwnI1WE/s1600/blank.gif" />
  </form>
</div>

    Torn Page Search Box

    <style type="text/css">
#blr_torn_page_search {
  background: rgba(0, 0, 0, 0) url('http://2.bp.blogspot.com/-WOtFhkqSuwM/Un9kXYdUhGI/AAAAAAAAC5k/P2F5OeupizU/s1600/torn_page_image.png') scroll 50% 50% no-repeat;
  width: 340px;
  height: 58px;
  display: block;
}
#blr_torn_page_search_box {
  display: block;
  padding: 14px;
  margin: 0;
}
#blr_torn_page_search_input {
  padding: 6px;
  margin: 0;
  width: 266px;
  font-size: 14px;
  vertical-align: top;
  border: none;
  outline: none;
  background: rgba(0, 0, 0, 0);
}
#blr_torn_page_search_submit {
  margin: 0;
  padding: 0;
  height: 25px;
  width: 25px;
  vertical-align: top;
  border: none;
  outline: none;
  background: rgba(0, 0, 0, 0);
}
</style>

<div id="blr_torn_page_search">
  <form expr:action="/search" method="get" id="blr_torn_page_search_box">
    <input type="text" name="q" placeholder="Search this site..." id="blr_torn_page_search_input" />
    <input type="image" id="blr_torn_page_search_submit" src="http://3.bp.blogspot.com/-voC7glqqSVQ/Un9kVT6yQTI/AAAAAAAAC48/vG6cGwnI1WE/s1600/blank.gif" />
  </form>
</div>

    Wooden Search Box

    <style type="text/css">
#blr_wooden_search {
  background: rgba(0, 0, 0, 0) url('http://4.bp.blogspot.com/-OS-PQU14y7A/Un9kY9oT1kI/AAAAAAAAC54/YfgcoQrmJig/s1600/wooden_image.png') scroll 50% 50% no-repeat;
  width: 326px;
  height: 45px;
  display: block;
}
#blr_wooden_search_box {
  display: block;
  padding: 4px;
  margin: 0;
}
#blr_wooden_search_input {
  padding: 11px;
  margin: 0;
  width: 248px;
  font-size: 14px;
  vertical-align: top;
  border: none;
  outline: none;
  background: rgba(0, 0, 0, 0);
}
#blr_wooden_search_submit {
  margin: 0;
  padding: 0;
  height: 38px;
  width: 44px;
  vertical-align: top;
  border: none;
  outline: none;
  background: rgba(0, 0, 0, 0);
}
</style>

<div id="blr_wooden_search">
  <form expr:action="/search" method="get" id="blr_wooden_search_box">
    <input type="text" name="q" placeholder="Search this site..." id="blr_wooden_search_input" />
    <input type="image" id="blr_wooden_search_submit" src="http://3.bp.blogspot.com/-voC7glqqSVQ/Un9kVT6yQTI/AAAAAAAAC48/vG6cGwnI1WE/s1600/blank.gif" />
  </form>
</div>
  5. Hit 'Save'
  6. Drag and place that widget where you want to display your search box.

I tried my best to keep things as simple as possible. Any type of question related to this will be welcomed.
Happy Blogging.

Comments

Blogger
Disqus

Post a Comment

Comments left on this site will be moderated. Note that all comments with abusive, disruptive or explicit content and comments with links will be deleted immediately.