Modern Search Boxes for Blogger

6/21/2015
0 comments
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
    Source
    <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:
    Source
    <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
    Source
    <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
    Source
    <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
    Source
    <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
    Source
    <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
    Source
    <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
    Source
    <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
    Source
    <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
    Source
    <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>
  6. Hit 'Save'
  7. 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.
Start the Conversation

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.

Comments so far on 'Modern Search Boxes for Blogger'

  • No comments on Blogger
  • on Disqus

© 2016 Bloganalyzer. All rights Reserved. Designed By meNight Fury. DMCA.com Protection Status