Related posts:

1. Monetizing your site with Google Adsense
2. How to apply for Google Adsense
3. How to make money with Adsense for search

A blog that shares ideas how to build online business, blogging tips and tricks, google adsense tips, how to find profitable small business and niche strategy.

How they do these…

A blog that shares ideas how to build online business, blogging tips and tricks, google adsense tips, how to find profitable small business and niche strategy.

A blog that shares ideas how to build online business, blogging tips and tricks, google adsense tips, how to find profitable small business and niche strategy.

It is said that content is king and marketing is its queen. But sometimes, content and marketing is not enough to make your readers stick…

A blog that shares ideas how to build online business, blogging tips and tricks, google adsense tips, how to find profitable small business and niche strategy.

A blog that shares ideas how to build online business, blogging tips and tricks, google adsense tips, how to find profitable small business and niche strategy.

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