How to Add scrolling search bar with adsense unit to blogger. 0

| | ,

Add best scrolling search bar with adsense unit in blogger blospot. this widget give you more impression in your adsense code and you will be earn by more by google adsense so add this cool widget in your blogspot now.

Follow simple easy step to add this widget in your blogger blog now--->>>>

* First go to your blogger dashboard.

* Now click in design tab and edit your blogger html.

* Now click in small box to expand your blogger template.

* Now find this code  <div id='main-wrapper'> with CTRL+F key.

* Now copy below code and paste before <div id='main-wrapper'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>   
<div id='mta_bar'>
<div id='left_bar'>
<span class='left'>
<table cellpadding='0' cellspacing='0' width='100%'><tr>
<td style='width:160px;'><div id='search'>
<form action='http://www.blogger9.com/search' id='searchform' method='get' name='searchform'>
<input class='keyword' id='s' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;search here..&quot;;}' onfocus='if (this.value == &quot;search here..&quot;) {this.value = &quot;&quot;}' type='text' value='search here..'/>
<input src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhafkEIUocE4cut_uPotv4GT_A_ojwD8tUDzc5bK3FnDmHQIw4uMMcOJQn21QMEewam3Rz4yU-3raFgTc5xDQl5DxegeUpsYCrpSoLajy-uFwfTIGjTqgC9F6StfCl5QKmOMk4QN65ppFQ/' style='border: 0pt none ; vertical-align: top; padding-top:3px' type='image'/>
</form>
</div></td>
<td align='center'>
&lt;script type=&quot;text/javascript&quot;&gt;&lt;!--
google_ad_client = &quot;pub-1169679658259735&quot;;
google_ad_host = &quot;pub-1556223355139109&quot;;
/* 468x15, created 12/03/11 */
google_ad_slot = &quot;0907748093&quot;;
google_ad_width = 468;
google_ad_height = 15;
//--&gt;
&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;
src=&quot;http://pagead2.googlesyndication.com/pagead/show_ads.js&quot;&gt;
&lt;/script&gt;</td>
</tr></table>
</span>
</div>
<span class='right'>
<a href='http://www.facebook.com/sharer.php' name='fb_share' type='button_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/></span>
<span class='right'>
<script type='text/javascript'>
tweetmeme_style = &#39;compact&#39;;
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
</span>
</div>
</b:if>

Note:- Replace www.blogger9.com with your blog URL and replace adsense code which is in red color with your adsense unit code . before adding adsense code encode your adsense code.

* Now again find this code  ]]></b:skin> with CTRL+F key.

* And copy below code and paste before  ]]></b:skin>

#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}

* Now save your blogger template now you are done my friends.

StumpleUpon DiggIt! Del.icio.us Blinklist Yahoo Furl Technorati Simpy Spurl Reddit Google I'm reading: How to Add scrolling search bar with adsense unit to blogger. ~ Twitter FaceBook

0 Responses So Far:

Categories

Select Your Categories