Blogger has introduced its Search Widget so that we can search for terms that are not included in Labels but could be present in the posts. Just like any other widget, you may drag and drop this at any position at the Template – page elements section. Here I shall giving you some self-help instructions so that you can customize the appearance of the widget and the result to suit your blog’s color schema. Before I get into the widget-code and details of style sheet… let see which part related to which section of the code. Its possible to customize everything that appears here… however… I am going to emphasis mainly on the Tabs & Results pane
- THE SEARCH FORM
Once you add a search widget to the blog form the page elemets.. and see the HTML of the widget you will notice that
<div class=’widget-content’ style=’width:95%’>
<div expr:id=’data:widget.instanceId + “_form”‘>
<span class=’cse-status’><data:loadingMsg/></span>
</div>
<div class=’widget-content’ style=’width:95%’> Width =95 % determines that the search box occupied the 95% space of the area where you are placing this widget. Lets say you are keeping this widget in the sidebar .. then the search box & the search button together will occupy the 95% of the sidebar. Play around with this number .. you will see the search box decrease and increase in length accordingly
<div expr:id=’data:widget.instanceId + “_form”‘> Here you will notice “form” which means that the search box and the search button are put togather in a form when this widget was created… and the developer has deiced to make them appear in the same line. So If you feel like putting the search button below the search box.. then I am afraid.. it doesn’t seem to be possible now. However.. we can always play with the width and decide on the optimum width that suits your blog
<data:loadingMsg/>This is something that shows the “LOADING…..” message when the page is being downloaded in the browser… you can delete this tag and add you own custom message as …” Wait..” or something else
- TABS ( OPTIONS YOU CHOOSE WHILE CONFIGURING THIS WIDGET)
If you remember… while configuring the search widget in the Page Elements Section.. you have the options to allow search to be performed amongst the posts / texts in Your Blog – Links that you have given in your blog – The Entire Web. Now the results for these options appear as Tabs ( see pic). Blogger has provided us with the default style sheets for the search widget so that we can modify the appearance of the Tabs & Results ( after all this is what the reader sees after hitting the search button)
The Edit-HTML of your template ( Check the Expand widgets box) will have the following. You can give the color codes of your choice and see the difference it makes in the appearance of the tabs
| For ..ACTIVE Title -TAB | For…INACTIVE Title-TABS |
#uds-searchControl .gsc-tabhActive { border-color:<data:borderColor/>; border-top-color:<data:activeBorderColor/>; background-color:transparent; color:<data:textColor/>; } |
#uds-searchControl .gsc-tabhInactive { border-color:<data:borderColor/>; background-color:transparent; color:<data:linkColor/>; } |
- DISPLAY RESULTS
The Results pane is always displayed above all of your blog posts. You will see the following in your template which is responsible for the appearance of the Results in your blog . You may see that I have changed the background color to the value of the pale turquoise color
#uds-searchControl .gsc-results
{
border-color:#cccccc;
background-color:#D7FDFC;
color:black;
}
With a little customization.. the dull looking ( but very effective) search box can be given a total makeover so that it begins to look like a part of your blog.If this post has been helpful you… pass the word and dont forget to link back
Your appreciation is my motivation
