Add A Scrolling Search Bar On Blogger With Google Adsense

I had been working on few widgets requested by our blog readers for the past few days. One such widget is the Scrolling Search Bar. This widget basically comprises of three components namely, a little stylish search bar, a Google Adsense ad unit and social bookmarking buttons/counters. So, I would say this widget is basically a "Three-In-One" package that should be enabled on most of the blogs. If you want to increase your Adsense revenue, then go for it!!!

Since the ads scroll as the web page is scrolled, the impressions will increase and there is a higher probability for the ads being clicked, that is, your click rates will increase. Apart from this feature, it provides flexibility for the reader to search any content on your blog. Moreover, it becomes very easy for the reader to tweet or re-tweet your posts and share your posts on Facebook. If you would like to see the final output for this widget, then have a look at the screen shot below.

You might have seen similar widgets provided by various sites like Wibiya but none of the sites, as far as I know, provide you the ability to display Adsense ads on their scroll bar. Anyway, let us proceed to the installation of this widget on our blog. Before you make any changes to your blog, make sure you back up your template. To do this, navigate to "Design->Edit HTML" and make a backup of your template clicking on the "Download full template" link at the top. Once the back up is over, follow these steps carefully.

1. Let us first add the CSS part for the bar. Search for the following code on your blog template. You may use "CTRL+F" to fasten your search results.

]]></b:skin>

2. Now, copy and paste the following piece of code just above the line mentioned in step 1.

#mta_bar {
background-color:#dddddd;
border-top: 1px solid #ffffff;
margin: 0;
padding: 7px 0;
z-index: 100;
bottom:0px;
right:0px;
width: 100%;
overflow: hidden;
position: fixed;
height:20px;
}
#mta_bar img{border:none;}
* html #mta_bar{
/*IE6 hack*/
position: absolute;
width: expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px" : body.clientWidth+"px");
}
#mta_bar .left { float: left;
text-align:left;
padding-left:10px;
font-family: Arial;
font-size: 13px;
font-weight: bold;
font-style: normal;
color: #0000FF;
width:630px;}
#mta_bar .right {font-family: Arial, Helvetica, sans-serif;
float: right;
text-align: center;
font-weight: normal;
font-size: 10px;
letter-spacing: 0;
white-space: nowrap;
padding-right:10px;}
#mta_bar .right a {font-size: 10px;
color: #0000FF;
text-decoration: underline;}
#mta_bar .right a:hover {
font-size: 10px;
color: #0000FF;
text-decoration: none;}
#left_bar a {background: url() no-repeat; text-decoration: none;
color: #000;
padding:0px 0px 5px 30px;}
#left_bar a:hover {
text-decoration: underline;
color: #000; }
#search{border:1px solid #d1cdcd; height:18px; width:150px; padding:0; background:#f6f4f4; }
#search input{border:0; background:none; color:#575757}
#s{font-size:12px; width:120px; padding-left:4px; margin:0; background:none}
#topsearch #search{
margin-top:0px;-moz-border-radius-bottomleft:3px;-moz-border-radius-bottomright:3px;-moz-border-radius-topleft:3px;-moz-border-radius-topright:3px;
background-color:#FFFFFF;border:1px solid #000000;}
#topsearch #s{width:125px}

3. You may temporarily save your template. Now, search for the following code in your template.

4. Download the following text document - Scrolling Search Bar. Open the text document and paste the code present in it just before the line you searched in step 3. Please, change the Adsense Id(the one present next to the text "pub" in the document) with your Adsense ID. Also, replace my site URL(www.newbloggingtipz.com) with your site URL.
(Note: You may completely replace the Adsense section with your Adsense Code too. If you are pretty good at handling HTML, then you can customize the code as you want. I just provided the basic coding. You can add many more bookmarking buttons at the right of the scroll-bar too.)
5. That's it!!! Save your template!!!

You have installed the scrolling search bar on your blog now. The widget can be seen only on the post pages and not on your home page. If you want them to appear on your homepage, then remove the first and the last line mentioned in the text document. If you want some help regarding this installation, then feel free to leave comments or contact me via email. I will try my best to solve your problem.

Enjoyed the article?

Click here to subscribe to FREE email updates from "Everything About Blogging", so that you do not miss out anything that can be valuable to you and your blog!

What's Next?

Other Recommended Posts

Anonymous

Hi using this i am not getting the scrolling bar in my blog .. it shows the following code instead ..
www.stockplus.blogspot.com, kindly

Mukund said on October 28, 2010 at 6:31 PM :

@Anonymous: I checked your blog and I could view the bar but it has not been installed correctly. Meaning to say, you tried to put the bigger version of tweet me code rather than the compact and it has become a mess with the clicksor ad banners too!! So, make sure you remove the clicksor ad banner and then, work on the coding. Else, send me your template via email!!!

Pris Team said on October 29, 2010 at 10:47 AM :

Thanks mukund for timely feedback, i would send you the template in mail, additionally in order to monitize the blog i have used cliksor ads and which i intend to use it would be great if you can suggest any best way where in i can use clicksor with your scrollbar too .. i am very new to blogging hence still now not that much equipped in design side .

Thanks again

Mukund said on October 29, 2010 at 7:07 PM :

@Pris Team: Yeah!! I received your template through mail. We need to chat and fix the problem because, the coding part will be a trial and error method. So, tell me the time when you will be available. Mean while, I will sort out the issue!!

Pris Team said on November 12, 2010 at 4:00 PM :

Nati World said on November 22, 2010 at 1:19 AM :

@Mukund hey i couldnt find the code for step 3 and i already saved my template with the 1st code. help! the search bar i already have is not showing the right results even though i tag nearly everything check me out http://www.natiworld.com

Mukund said on November 22, 2010 at 4:40 PM :

@Nati World: No need to panic!! The code will work if you place between the body tags. If you are not able to solve the problem, then contact me via email!!!

Falcon said on November 24, 2010 at 2:50 AM :

Just wanted to thank you for this great piece of code. I've been looking for a good, creative way to display extra ads with suttlety on my site and I'll be using this.

Mukund said on November 24, 2010 at 8:42 AM :

@Falcon: Thanks for the comment Falcon!! I hope you enjoy other unique widgets on my blog as well!!!

Michael Schwartz said on November 29, 2010 at 3:32 PM :

@Mukund

I have some issues:

First of all, the ads overlay on top of the search bar.
I fixed this by:
color: #0000FF;
width:800px;} <--------------
#mta_bar .right {font-family: Arial, Helvetica, sans-serif;

Then, the Search button is below the search text field.
Need to mention I used google custom search:

<*nput type="hidden" name="cx" value="partner-pub-1646145680169134:9it64arn0vw" />
<*nput type="hidden" name="ie" value="ISO-8859-1" />
<*nput type="text" name="q" size="30" />
<*nput type="submit" name="sa" value="Search" />

<scr*pt type="text/javascript"><!--
google_ad_client = "pub-1646

Then there's the issue of smaller resolutions. The twitter and facebook ad-ins get positioned on top of each other instead of being left outside the right part of the screen when there's not enough room left. Only when there's n more room for both do they disappear.

Any coding ideas on how I could fix these issues?
Especially the search button.
I tried making the bar wider but it just won't align. It keeps staying below the search field :|
*some tags I've edited so I can post*

Mukund said on November 30, 2010 at 6:55 PM :

@Michael Schwartz: Assuming that you fixed the first problem with respect to the search engine and you know better coding, to fix the issue of overlapping twitter and Facebook widgets, you can reduce the width you mentioned on left side and use a table to align them exactly in the position as you want.

José Eliseu said on May 16, 2011 at 4:29 AM :

Sorry, couldnt find the line on step 2.

Where can I put the code?

I tried to put it above /* Header on body part.

It didn't work, actually, I don't know if it was this part that didn't work, or the first, because when i get in my blog, all the html code was there before the "blogger bar"

What do I do?

Here's the link to the blog I use to test those scripts... http://blogtestjose.blogspot.com/

Thank you

Mukund said on May 17, 2011 at 11:36 AM :

@José Eliseu: Just contact me via email and I will help you with your problem because we can post html contents on comments section.

Adam said on September 23, 2011 at 4:58 PM :

I can't fin
div id='main-wrapper' in my blogger template
http://blogger-astuce.blogspot.com/

Mukund said on September 24, 2011 at 1:51 AM :

@Adam: It is not necessary that you add the codes below main-wrapper, you may add them anywhere on the template!

Use the tab below to comment. No spam please!!!

POST YOUR COMMENT