Home » Blogger Tutorials, Tricks and Hacks » Blogger Graphics / Effects Tricks » Add A Classic Google-style Search Bar To Your Blogger

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

Add A Classic Google-style Search Bar To Your Blogger

Add A Classic Google-style Search Bar To Your Blogger

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error

886 views

If you have a thing for classic user interface designs then you might like this one. It’s a tutorial on making your Blogger site’s search bar look like the one that Google used to have for their search page. It’s the one with the minimalist look where the box has got rounded corners and the search button is that of a magnifying glass icon with a nice hover effect.

This tutorial comes courtesy of Queness via pro blogger Ishtiaq Ahmad and all it takes to capture the classic appearance is a little bit of CSS and JavaScript.

Follow the instructions below to try it out on your site:

  • Starting from your Blogger dashboard, go to the Design section.
  • Under Template, click on Edit HTML.
  • In your template’s code, search for ]]></b:skin> by pressing Ctrl+F.
  • Copy/paste the following code below just right above it.
/*Start Css For Google Style Search Box*/

/* div container containing the form */

#searchContainer {

margin:0px;

}
/* Style the search input field. */

#field {

float:left;

width:180px;

height:27px;

line-height:27px;

text-indent:10px;

font-family: Source Sans Pro, sans-serif;

font-size:1em;

color:#333;

background: #fff;

border:solid 1px #d9d9d9;

border-top:solid 1px #c0c0c0;

border-right:none;

}
/* Style the "X" text button next to the search input field */

#delete {

float:left;

width:16px;

height:29px;

line-height:27px;

margin-right:15px;

padding:0 10px 0 10px;

font-family: "Lucida Sans", "Lucida Sans Unicode",sans-serif;

font-size:22px;

background: #fff;

border:solid 1px #d9d9d9;

border-top:solid 1px #c0c0c0;

border-left:none;

}

/* Set default state of "X" and hide it */

#delete #x {

color:#A1B9ED;

cursor:pointer;

display:none;

}

/* Set the hover state of "X" */

#delete #x:hover {

color:#36c;

}

/* Style the search button. Settings of line-height, font-size, text-indent used to hide submit value in IE */

#submit {

cursor:pointer;

width:60px;

height: 31px;

line-height:0;

font-size:0;

text-indent:-999px;

color: transparent;

background: url(http://1.bp.blogspot.com/-bGxyIDfZuHg/UNSrQ4bRerI/AAAAAAAAApk/QYrrGVAYR9o/s1600/iconsearch.png) no-repeat #088a4b center;

border: 1px solid green;

-moz-border-radius: 2px;

-webkit-border-radius: 2px;

}

/* Style the search button hover state */

#submit:hover {

background: url(http://1.bp.blogspot.com/-bGxyIDfZuHg/UNSrQ4bRerI/AAAAAAAAApk/QYrrGVAYR9o/s1600/iconsearch.png) no-repeat center #088a4b;

border: 1px solid green;

}

/* Clear floats */

.fclear {clear:both}


TIP: You can change the appearance of your search bar, such as color, width, border style etc. to better match the color or theme of your Blogger blog. Just edit the values of the highlighted attributes or portions of the code.

  • Now find the </head> tag in your template’s code and copy/paste the following code right above it.

 

<script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/>

<script type='text/javascript'>

$().ready(function() {

// if text input field value is not empty show the &quot;X&quot; button

$(&quot;#field&quot;).keyup(function() {

$(&quot;#x&quot;).fadeIn();

if ($.trim($(&quot;#field&quot;).val()) == &quot;&quot;) {

$(&quot;#x&quot;).fadeOut();

}

});

// on click of &quot;X&quot;, delete input field value and hide &quot;X&quot;

$(&quot;#x&quot;).click(function() {

$(&quot;#field&quot;).val(&quot;&quot;);

$(this).hide();

});

});

</script>


  • Click on Preview to check if everything looks OK so far on your blog. If it does, all that’s left for you to do is add the gadget on your sidebar.
  • Under the Design section of your dashboard, go to Layout and click on Add a Gadget.
  • Scroll down the list of gadgets and choose HTML/JavaScript.
  • Copy/paste this code into it.

 

<div id="searchContainer">

<form name="SUYB" action="/search" method="get">

<input type="text" id="field" name="q">

<div id="delete"><span id="x">x</span></div>

<input type="submit" name="submit" id="submit" value="Search">

</form>

</div>

 

  • Click ‘Save’ and that’s it, you’re done!

Liked It ? Please Share

Comments

2 Responses | Post A Comment | Subscribe To Comments RSS Feed

  1. WebSeyyahi says:

    Thank you.
    Very useful article

  2. GOOD POST IT VERY HELPFUL TO ME.THANK YOU

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here