The Ad supported Ajax search Code is available at Google Web Elements .You can see 3 options there.

1. Automatically Search My Site
2. Search my Site and use Adsense for Search
3. Use an existing Custom Search Engine

For showing adsense ads you have to opt for option 2 or 3 .If you choose to use the second option,then you will have to provide you Adsense publisher id(which looks like pub-xxxxxxxx).If you opt for the option 3, you will have to provide the Custom search ID, which will be present in your Google Custom search Code.[Code is generated inline when you enter any of these ids.]

After grabbing this code, just go to your Blogger > Layout page and add a new HTML/JavaScript Gadget and paste the Google Web Element Custom Search code there and save the gadget. The Gadget will look better if you drag it to above the Blog Posts Widget and save it.[that area has got enough space to display the ads ]

Here is a preview of what you should see.

If you want to change the colours and styling of the search results, you will have to add additional CSS Classes.

Update: – Now Google CSE has added all these things. and much more(themes and other customization stuff) So it would be easier for you guys..

Popular Posts Gadget

Blogger has always lacked such a gadget. There used to be some Yahoo Pipe based widgets, which list out the most commented posts. But these were pretty slow and inefficient. Now Blogger has got this Official Popular Posts Gadget.As the name indicates, the Gadget displays a list of popular posts on your blog.  Here is a Screen Shot of the Gadget Options

Blog’s Stats Gadget

The Blog’s Stats Gadget displays your Blog’s stats in one of the different graphical(or textual) formats. The Gadget Options will give you a better idea

How to add these Gadgets to your blog?

These Gadgets are not available in your regular Dashboard. So login to Blogger in Draft at http://draft.blogger.com . Now Go to Design > Page Elements and Click on the “Add a Gadget Link” and you will see the 2 new Gadgets

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/><script type='text/javascript'>$(document).ready(function(){

$(&quot;ul.subnav&quot;).parent().append(&quot;<span/>&quot;); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav

$(&quot;ul.topnav li span&quot;).click(function() { //When trigger is clicked...

//Following events are applied to the subnav itself (moving subnav up and down)$(this).parent().find(&quot;ul.subnav&quot;).slideDown('fast').show(); //Drop down the subnav on click

$(this).parent().hover(function() {}, function(){$(this).parent().find(&quot;ul.subnav&quot;).slideUp('slow'); //When the mouse hovers out of the subnav, move it back up});

//Following events are applied to the trigger (Hover events for the trigger)}).hover(function() {$(this).addClass(&quot;subhover&quot;); //On hover over, add class &quot;subhover&quot;}, function(){ //On Hover Out$(this).removeClass(&quot;subhover&quot;); //On hover out, remove class &quot;subhover&quot;});

});</script><style type='text/css'>ul.topnav {list-style: none;padding: 0 20px;margin: 0;float: left;width: 100%;background: #222;font-size: 1.2em;background: url(http://1.bp.blogspot.com/_4HKUHirY_2U/SuvG9uqdygI/AAAAAAAAAGg/RGkds76x-Ks/topnav_bg.gif) repeat-x;}ul.topnav li {float: left;margin: 0;padding: 0 15px 0 0;position: relative; /*--Declare X and Y axis base--*/}ul.topnav li a{padding: 10px 5px;color: #fff;display: block;text-decoration: none;float: left;}ul.topnav li a:hover{background: url(http://2.bp.blogspot.com/_4HKUHirY_2U/SuvHEn2GZ9I/AAAAAAAAAGo/s4ncczdnOd0/topnav_ho ver.gif) no-repeat center top;}ul.topnav li span { /*--Drop down trigger styles--*/width: 17px;height: 35px;float: left;background: url(http://2.bp.blogspot.com/_4HKUHirY_2U/SuvHKqBeOXI/AAAAAAAAAGw/qGYlY4ckLWc/subnav_btn.gif) no-repeat center top;}ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/ul.topnav li ul.subnav {list-style: none;position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/left: 0; top: 35px;background: #333;margin: 0; padding: 0;display: none;float: left;width: 170px;-moz-border-radius-bottomleft: 5px;-moz-border-radius-bottomright: 5px;-webkit-border-bottom-left-radius: 5px;-webkit-border-bottom-right-radius: 5px;border: 1px solid #111;}ul.topnav li ul.subnav li{margin: 0; padding: 0;border-top: 1px solid #252525; /*--Create bevel effect--*/border-bottom: 1px solid #444; /*--Create bevel effect--*/clear: both;width: 170px;}html ul.topnav li ul.subnav li a {float: left;width: 145px;background: #333 url(http://3.bp.blogspot.com/_4HKUHirY_2U/SuvHPYoc82I/AAAAAAAAAG4/3DDzBwklYpw/dropdown_linkbg.gif) no-repeat 10px center;padding-left: 20px;}html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/background: #222 url(http://3.bp.blogspot.com/_4HKUHirY_2U/SuvHPYoc82I/AAAAAAAAAG4/3DDzBwklYpw/dropdown_linkbg.gif) no-repeat 10px center;}#header img {margin: 20px 0 10px;}</style>

Please host image here for free.

You can change width,height,color,… as your choice.

4.Now go to Layout–>Page Element and click on "Add a gadget".

5.Select "html/java script" and add the code given below and click save.

<ul class="topnav">

<li><a href="#">Home</a></li><li><a href="#">Tutorials</a><ul class="subnav">  <li><a href="#">HTML Tutorials</a></li>  <li><a href="#">CSS Tutorials</a></li>  <li><a href="#">PHP Tutorials</a></li>  <li><a href="#">SQL Tutorials</a></li>  <li><a href="#">jQuery Tutorials</a></li> </ul></li><li><a href="#">Templates</a> <ul class="subnav">   <li><a href="#">1 Column</a></li>   <li><a href="#">2 Column</a></li>   <li><a href="#">3 Column</a></li>   <li><a href="#">4 Column</a></li>   <li><a href="#">Premium</a></li>   <li><a href="#">Buy Now</a></li>  </ul></li><li><a href="#">About Us</a></li><li><a href="#">Advertise</a></li><li><a href="#">Subscribe</a></li><li><a href="#">Contact Us</a></li>

</ul>

I hope you like this. Happy blogging……

<script type='text/javascript'>window.onload = function() { var paras = document.getElementById('content').getElementsByTagName('p'); if(paras.length) {  paras[0].className = paras[0].className + ' intro'; }};</script> <style type='text/css'> #hover-me  { padding:50px 100px; border:2px solid #fc0; background:#d3ea74; }</style><script src='http://ajax.googleapis.com/ajax/libs/mootools/1.2.3/mootools.js' type='text/javascript'/><script type='text/javascript'>

 /* usage */ window.addEvent('domready',function() {

  /* hover! */  Element.implement({   'hover': function(fn1,fn2) {    this.addEvents({     'mouseenter': function(e) {      fn1.attempt(e,this);     },     'mouseleave': function(e) {      fn2.attempt(e,this);     }    })   }  });

  $('hover-me').hover(function(e) {   this.fade('out');  }, function(e) {   this.fade('in');  }); });

</script>

4.Whenever you have to write some codes or text,write it between the following tags :

<div id="hover-me">

Your Text/Code

</div>

<style type='text/css'>

ul#topnav {margin: 0; padding: 0;float: left;width: 100%;list-style: none;position: relative;font-size: 1.2em;background: #383838;}ul#topnav li {float: left;margin: 0; padding: 0;border-right: 1px solid #fff;}ul#topnav li a {padding: 10px 15px;display: block;color: #f0f0f0;text-decoration: none;}ul#topnav li:hover { background: #1376c9 url() repeat-x; }ul#topnav li span {float: left;padding: 15px 0;position: absolute;left: 0; top:35px;display: none;width: 100%;background: #1376c9;color: #fff;-moz-border-radius-bottomright: 5px;-khtml-border-radius-bottomright: 5px;-webkit-border-bottom-right-radius: 5px;-moz-border-radius-bottomleft: 5px;-khtml-border-radius-bottomleft: 5px;-webkit-border-bottom-left-radius: 5px;}ul#topnav li:hover span { display: block; }ul#topnav li span a { display: inline; }ul#topnav li span a:hover {text-decoration: underline;}</style><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/><script type='text/javascript'>$(document).ready(function() {

$(&quot;ul#topnav li&quot;).hover(function() { //Hover over event on list item$(this).css({ 'background' : '#1376c9 url() repeat-x'}); //Add background color + image on hovered list item$(this).find(&quot;span&quot;).show(); //Show the subnav} , function() { //on hover out...$(this).css({ 'background' : 'none'}); //Ditch the background$(this).find(&quot;span&quot;).hide(); //Hide the subnav});

});</script>

You can change width,height,color,… as your choice.

4.Now go to Layout–>Page Element and click on "Add a gadget".

5.Select "html/java script" and add one of code below and click save.

<ul id="topnav">

<li><a href="#">Home</a></li><li><a href="#">Blogger</a><span><a href="#">Widgets</a> |<a href="#">Tip And Tricks</a> |<a href="#">Basic</a></span></li><li><a href="#">Tutorials</a><span><a href="#">HTML</a> |<a href="#">Java Script</a> |<a href="#">CSS</a><a href="#">jQuery</a><a href="#">MooTools</a></span></li><li><a href="#">Templates</a><span><a href="#">1 Column</a> |<a href="#">2 Column</a> |<a href="#">3 Column</a> |<a href="#">4 Column</a> |<a href="#">Premium</a></span></li><li><a href="#">Subscribe</a></li><li><a href="#">Advertise</a></li><li><a href="#">Contact</a></li>

</ul>

<style type='text/css'>ul#topnav {margin: 10px 0 20px;padding: 0;list-style: none;font-size: 1.1em;clear: both;float: left;width: 99%;}ul#topnav li{margin: 0;padding: 0;overflow: hidden;float: left;height:40px;}ul#topnav a, ul#topnav span {padding: 10px 20px;float: left;text-decoration: none;color: #fff;text-transform: uppercase;clear: both;height: 20px;line-height: 20px;background: #1d1d1d;}ul#topnav a { color: #7bc441; }ul#topnav span {display: none;}

ul#topnav.v2 span{background: url(http://4.bp.blogspot.com/_ar9PeTUrwMY/SurvAv9Rh3I/AAAAAAAAAzg/6yumbEnfpmA/a_bg.gif) repeat-x left top;}ul#topnav.v2 a{color: #555;background: url(http://4.bp.blogspot.com/_ar9PeTUrwMY/SurvAv9Rh3I/AAAAAAAAAzg/6yumbEnfpmA/a_bg.gif) repeat-x left bottom;}</style><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/><script type='text/javascript'>

$(document).ready(function() {

$(&quot;#topnav li&quot;).prepend(&quot;<span/>&quot;); //Throws an empty span tag right before the a tag

$(&quot;#topnav li&quot;).each(function() { //For each list item...var linkText = $(this).find(&quot;a&quot;).html(); //Find the text inside of the a tag$(this).find(&quot;span&quot;).show().html(linkText); //Add the text in the span tag});

$(&quot;#topnav li&quot;).hover(function() { //On hover...$(this).find(&quot;span&quot;).stop().animate({marginTop: &quot;-40&quot; //Find the span tag and move it up 40 pixels}, 250);} , function() { //On hover out...$(this).find(&quot;span&quot;).stop().animate({marginTop: &quot;0&quot; //Move the span back to its original state (0px)}, 250);});

});</script>

Please host image yourself.

You can change width,height,color,… as your choice.

4.Now go to Layout–>Page Element and click on "Add a gadget".

5.Select "html/java script" and add one of code below and click save.

Code 1:

<div class="container">

<ul id="topnav" class="v2">

<li><a href="http://bloggertipandtrick.blogspot.com">Home</a></li><li><a href="http://bloggertipandtrick.blogspot.com/search?max-results=999">TOC</a></li><li><a href="http://www.bloggertipandtrick.blogspot.com/search/label/widget?max-results=1000">Widgets</a></li><li><a href="http://bloggertipandtrick.blogspot.com/search/label/Templates?max-results=1000">Templates</a></li><li><a href="http://bloggertipandtrick.blogspot.com/search/label/jQuery?max-results=1000">jQuery</a></li><li><a href="http://bloggertipandtrick.blogspot.com/2009/01/blogger-tips-and-tricks-ads-details.html">Advertise</a></li><li><a href="http://bloggertipandtrick.blogspot.com/2009/01/contact-me.html">Contact</a></li>

</ul>

</div>

Result:

Code 2:

<div class="container">

<ul id="topnav">

<li><a href="http://bloggertipandtrick.blogspot.com">Home</a></li><li><a href="http://bloggertipandtrick.blogspot.com/search?max-results=999">TOC</a></li><li><a href="http://www.bloggertipandtrick.blogspot.com/search/label/widget?max-results=1000">Widgets</a></li><li><a href="http://bloggertipandtrick.blogspot.com/search/label/Templates?max-results=1000">Templates</a></li><li><a href="http://bloggertipandtrick.blogspot.com/search/label/jQuery?max-results=1000">jQuery</a></li><li><a href="http://bloggertipandtrick.blogspot.com/2009/01/blogger-tips-and-tricks-ads-details.html">Advertise</a></li><li><a href="http://bloggertipandtrick.blogspot.com/2009/01/contact-me.html">Contact</a></li>

</ul>

</div>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>

//<![CDATA[

/*Author: mg12Update: 2008/05/05Author URI: http://www.neoease.com/*/(function() {

function $(id) {return document.getElementById(id);}

function setStyleDisplay(id, status) {$(id).style.display = status;}

function goTop(a, t) {a = a || 0.1;t = t || 16;

var x1 = 0;var y1 = 0;var x2 = 0;var y2 = 0;var x3 = 0;var y3 = 0;

if (document.documentElement) { x1 = document.documentElement.scrollLeft || 0; y1 = document.documentElement.scrollTop || 0;}if (document.body) { x2 = document.body.scrollLeft || 0; y2 = document.body.scrollTop || 0;}var x3 = window.scrollX || 0;var y3 = window.scrollY || 0;

var x = Math.max(x1, Math.max(x2, x3));var y = Math.max(y1, Math.max(y2, y3));

var speed = 1 + a;window.scrollTo(Math.floor(x / speed), Math.floor(y / speed));if(x > 0 || y > 0) { var f = "MGJS.goTop(" + a + ", " + t + ")"; window.setTimeout(f, t);}}

function switchTab(showPanels, hidePanels, activeTab, activeClass, fadeTab, fadeClass) {$(activeTab).className = activeClass;$(fadeTab).className = fadeClass;

var panel, panelList;panelList = showPanels.split(',');for (var i = 0; i < panelList.length; i++) { var panel = panelList[i]; if ($(panel)) {  setStyleDisplay(panel, 'block'); }}panelList = hidePanels.split(',');for (var i = 0; i < panelList.length; i++) { panel = panelList[i]; if ($(panel)) {  setStyleDisplay(panel, 'none'); }}}

function loadCommentShortcut() {$('comment').onkeydown = function (moz_ev) { var ev = null; if (window.event){  ev = window.event; } else {  ev = moz_ev; } if (ev != null && ev.ctrlKey && ev.keyCode == 13) {  $('submit').click(); }}$('submit').value += ' (Ctrl+Enter)';}

function getElementsByClassName(className, tag, parent) {parent = parent || document;

var allTags = (tag == '*' && parent.all) ? parent.all : parent.getElementsByTagName(tag);var matchingElements = new Array();

className = className.replace(/\-/g, '\\-');var regex = new RegExp('(^|\\s)' + className + '(\\s|$)');

var element;for (var i = 0; i < allTags.length; i++) { element = allTags[i]; if (regex.test(element.className)) {  matchingElements.push(element); }}

return matchingElements;}

window['MGJS'] = {};window['MGJS']['$'] = $;window['MGJS']['setStyleDisplay'] = setStyleDisplay;window['MGJS']['goTop'] = goTop;window['MGJS']['switchTab'] = switchTab;window['MGJS']['loadCommentShortcut'] = loadCommentShortcut;window['MGJS']['getElementsByClassName'] = getElementsByClassName;

})();

//]]>

</script>

4.Now scroll down where you see </body> tag.

5.Copy below code and paste it just before the </body> tag.

<a href='#' onclick='MGJS.goTop();return false;'><b>Go To Top</b></a>

6.Click on save template and you are done. I hope you have enjoyed it.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>//<![CDATA[

$(function(){

$('a[href*=#top]').click(function() {

if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')&& location.hostname == this.hostname) {

var $target = $(this.hash);

$target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');

if ($target.length) {

var targetOffset = $target.offset().top;

$('html,body').animate({scrollTop: targetOffset}, 1000);

return false;

}

}

});

});//]]></script><!-- end scrolltop -->

4.Now scroll down where you see <body> tag .

5.Replace <body> tag with <body id=’top’> .

6.Now again scroll down where you see </body> tag .

7.Copy below code and paste it just before </body> tag:

<div id='goingtop'><a href='#top' title='Go Top'><img src='http://1.bp.blogspot.com/_4HKUHirY_2U/Sujr21YfikI/AAAAAAAAAGM/mPXYFXAepV4/top.png' style='right:20px; bottom:20px; position: fixed;'/></a></div>

Now you can change your background image replacing above red colored code with your image URL. For getting image URL you can host free image here

8.Click on save template and you are done.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2' type='text/javascript'/>

<script type='text/javascript'>//<![CDATA[$(function(){

// ***// Scrolling background// ***

// height of background image in pixelsvar backgroundheight = 4000;

// get the current minute/hour of the dayvar now = new Date();var hour = now.getHours();var minute = now.getMinutes();

// work out how far through the day we are as a percentage - e.g. 6pm = 75%var hourpercent = hour / 24 * 100;var minutepercent = minute / 30 / 24 * 100;var percentofday = Math.round(hourpercent + minutepercent);

// calculate which pixel row to start graphic from based on how far through the day we arevar offset = backgroundheight / 100 * percentofday;

// graphic starts at approx 6am, so adjust offset by 1/4var offset = offset - (backgroundheight / 1);

function scrollbackground() {// decrease the offset by 1, or if its less than 1 increase it by the background height minus 1offset = (offset < 1) ? offset + (backgroundheight - 1) : offset - 1;// apply the background position$('body').css("background-position", "50% " + offset + "px");// call self to continue animationsetTimeout(function() {scrollbackground();}, 70);}

// Start the animationscrollbackground();});//]]></script>

4.Now scroll down to where you see like this code:

body {background:$bgcolor;margin:0;color:$textcolor;font:x-small Georgia Serif;font-size/* */:/**/small;font-size: /**/small;text-align: center;}

5.Replace above code with below code:

body {background:url(http://1.bp.blogspot.com/_4HKUHirY_2U/Suj7uR3ZKfI/AAAAAAAAAGU/R8pnF8urjTk/bgscroll.jpg);color:$textcolor;font:x-small Georgia Serif;font-size/* */:/**/small;font-size: /**/small;text-align: center;}

Now you can change your background image replacing above red colored code with your image URL. For getting image URL you can host free image here.Have a nice blogging……