Few days ago, i posted about Glossy CSS
menu bar Tutorial, This is also same, with
different color, you can check it form
below link. If you want you can check my
earlier menu bar post by clicking here
Demo
1. Log in to blogger account and Click drop down.
2. Now select "Template" Like Below.
3. Now you can see Live on blog, Click EDIT HTML Button"
4. Now click Proceed button.
5. Find this tag by using Ctrl+F ]]></b:skin>
6. Paste below code Before ]]></b:skin> tag
7. Go to blogger and click Layout
8. Click Add Gadget and select 'HTML/Javascript
9. Paste below code.
10. Now save your HTML/Javascript'.
menu bar Tutorial, This is also same, with
different color, you can check it form
below link. If you want you can check my
earlier menu bar post by clicking here
3. Now you can see Live on blog, Click EDIT HTML Button"
4. Now click Proceed button.
5. Find this tag by using Ctrl+F ]]></b:skin>
6. Paste below code Before ]]></b:skin> tag
/* The CSS Code for the menu starts here */
.rhm1{
width:780px;
height:64px;
margin:0 auto;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv1cZxyWu2MyrSId8I9bCCzjfQBeywS9_t0GvML94MDFlIpuK-ZUO2HUM72-wGxgMZk6uoLz1g-Hq_8cHLJpV0rq-IureVWEYpi7-ICNN2zhFlS_sfN51a5Q6JUwe5G95gU-gLrn8NX30/s1600/rhm1_bg.gif) repeat-x;
}
.rhm1-left{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimaYAoLQlatHofCSzC6RJZL8S4EcJx5_H_drQbi3IXzp05qCvxWhosGpuRdwOJv2QUtaZj3Uk-xckSLxRorNf0aRXlXUJ029bCMSOa_jFethncb-Avm-HGN8ts1oM17xKABQXxBU2PU2Y/s1600/rhm1_l.gif) no-repeat;
width:15px;
height:64px;
float:left;
}
.rhm1-right{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2b0jZWqhcxpbpqP6iJErWR5HE05RyE26eE-Q9K9w4sa0IYX_-FXyLDwJ4TVxc1ZP_28cmqps0DAyM8ku-7x8EZF7_jw2ChLeFq3PpCS0aSrf-gppUzxG5BXVWTrTAHrAfJ2dzsv2xjmk/s1600/rhm1_r.gif) no-repeat;
width:15px;
height:64px;
float:right;
}
.rhm1-bg{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv1cZxyWu2MyrSId8I9bCCzjfQBeywS9_t0GvML94MDFlIpuK-ZUO2HUM72-wGxgMZk6uoLz1g-Hq_8cHLJpV0rq-IureVWEYpi7-ICNN2zhFlS_sfN51a5Q6JUwe5G95gU-gLrn8NX30/s1600/rhm1_bg.gif) repeat-x;
height:64px;
}
.rhm1-bg ul{
list-style:none;
margin:0 auto;
}
.rhm1-bg li{
float:left;
list-style:none;
}
.rhm1-bg li a{
float:left;
display:block;
color:#ffe8cc;
text-decoration:none;
font:12px 'Lucida Sans', sans-serif;
font-weight:bold;
padding:0 0 0 18px;
height:64px;
line-height:40px;
text-align:center;
cursor:pointer;
}
.rhm1-bg li a span{
float:left;
display:block;
padding:0 32px 0 18px;
}
.rhm1-bg li.current a{
color:#fff;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheVXEwhQUeoUyaOCkmNwdId4dTyQmBGRlPh3lUPkbRcR7viffkQmYcwe8hbVqjCqpOhUQyhfSVoN3jUC1huANIgNRtntdRlBo9et67SN7FTH05WfdSVkcHeRelz51ehlJ8Hqd-5G2g1kM/s1600/rhm1_hover_l.gif) no-repeat left 5px;
}
.rhm1-bg li.current a span{
color:#fff;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwFuj2uvOk5OrFVrUqmF0WuwRiWczef6ZTkX_pafmh1z-WetO_f8_l4bmEIRkDCn5PWcO78jFZ0lQER74rF2FG7YwYqdj3_8wZRx23BYgJstk_Hnq97Ahucbuwo-hUvw03-TNbeqDGHlE/s1600/rhm1_hover_r.gif) no-repeat right 5px;
}
.rhm1-bg li a:hover{
color:#fff;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheVXEwhQUeoUyaOCkmNwdId4dTyQmBGRlPh3lUPkbRcR7viffkQmYcwe8hbVqjCqpOhUQyhfSVoN3jUC1huANIgNRtntdRlBo9et67SN7FTH05WfdSVkcHeRelz51ehlJ8Hqd-5G2g1kM/s1600/rhm1_hover_l.gif) no-repeat left 5px;
}
.rhm1-bg li a:hover span{
color:#ffffff;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwFuj2uvOk5OrFVrUqmF0WuwRiWczef6ZTkX_pafmh1z-WetO_f8_l4bmEIRkDCn5PWcO78jFZ0lQER74rF2FG7YwYqdj3_8wZRx23BYgJstk_Hnq97Ahucbuwo-hUvw03-TNbeqDGHlE/s1600/rhm1_hover_r.gif) no-repeat right 5px;
}
7. Go to blogger and click Layout
8. Click Add Gadget and select 'HTML/Javascript
9. Paste below code.
<!--bloggertrix.comMenuBar Starts--> <div class="rhm1"> <div class="rhm1-right"></div> <div class="rhm1-left"></div> <div class="rhm1-bg"> <ul> <li class="current"><a href="#"><span>Home</span></a></li> <li><a href="#"><span>About Us</span></a></li> <li><a href="#"><span>Services</span></a></li> <li><a href="#"><span>Products</span></a></li> <li><a href="http://www.bloggertrix.com/"><span>Add This</span></a></li> </ul> </div> </div>
10. Now save your HTML/Javascript'.
This post also about CSS menu bar, Its
Include with nice lite blue hover color.
Im using CSS and HTML for this menu.
You can add this easily.Check below for
demo.you can get similar menu bar from
here
Demo
1. Log in to blogger account and Click drop down.
2. Now select "Template" Like Below.
3. Now you can see Live on blog, Click EDIT HTML Button"
4. Now click Proceed button.
5.Find this code by using Ctrl+F ]]></b:skin>
6. Paste below code Before ]]></b:skin> code
7. Go to blogger and click drop-down like 1st step and select Layout
8. Click Add Gadget and select 'HTML/Javascript"
9. Paste below code.
10. Now save "HTML/Javascript". You are done.
Include with nice lite blue hover color.
Im using CSS and HTML for this menu.
You can add this easily.Check below for
demo.you can get similar menu bar from
here
3. Now you can see Live on blog, Click EDIT HTML Button"
4. Now click Proceed button.
5.Find this code by using Ctrl+F ]]></b:skin>
6. Paste below code Before ]]></b:skin> code
/* Bloggertrix */
#menu2{
width:90%;
margin:25px auto;
}
#menu2 ul{
list-style:none;
}
#menu2 li{
display:block;
float:left;
}
#menu2 li a{
background:#e4e8eb url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFFm3OZWcTiIQCnXttfSSAFDXyoOlAV8LPf1MD0FXGqkAuaO2-IExdxHTFpHoCNTbleuK_9zKCUl67cV_M2SGtNhBT4jsjqWOanfGHxBMB6ENswcefI4Tc-1XGMl-z5T9RH48hHJ3eboc/s1600/menu_bg.gif) repeat-x;
border:2px solid #bdc5cd;
margin:0 1px;
padding:15px 15px 15px 15px;
display:block;
float:left;
color:#2b61a1;
text-transform:uppercase;
text-decoration:none;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:13px;
font-weight:bold;
height: 30px;
}
#menu2 li a span{
color:#636363;
font-size:10px;
text-transform:lowercase;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-weight:normal;
}
#menu2 li a:hover{
background:#e46825 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwp4CpDgMNAHhDGuqqYMyBZkIt3ifxG9G3Hl-t2rc_6aTrLkTyC-JfhcM2HcuXlcqNhgt13EdjsEyb7JLiys4moYeB0Tfw9bVH3HXTBbI6nz6MfkiX7bJgLHhQ1y4Jk_EHLdtR6hPDEUA/s1600/menu_hover.gif) repeat-x;
border:2px solid #4a88ce;
text-decoration:none;
}
#menu2 li a:hover span{
color:#636363;
}
.current{
background:#74befd url(images/menu_hover.gif) repeat-x;
border:2px solid #4a88ce;
margin:0 1px;
padding:15px 15px 15px 15px;
display:block;
float:left;
color:#2b61a1;
text-transform:uppercase;
text-decoration:none;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:13px;
cursor:pointer;
font-weight:bold;
height: 30px;
}
.current span{
color:#636363;
font-size:10px;
text-transform:lowercase;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-weight:normal;
}
7. Go to blogger and click drop-down like 1st step and select Layout
8. Click Add Gadget and select 'HTML/Javascript"
9. Paste below code.
<div id="menu2">
<ul>
<li class="current">Home<br />home page</li>
<li><a href="#">About Us<br />about us page</a></li>
<li><a href="#">Products<br />products page</a></li>
<li><a href="#">Partners<br />partners page</a></li>
<li><a href="http://www.bloggertrix.com/">Contact Us<br />contact page</a></li>
</ul>
</div>
*ReplaceURLs as your like.10. Now save "HTML/Javascript". You are done.
In this post, im going to explain,how to
add simple css/html menubar with nice
style.You can add it to your blog easily.
I posted more menubar for bloggers, you
can check it from below link.Try it...
Menubar collection
DEMO
1. Log in to blogger account and Go to Design >> Edit HTML
(make sure backup your template first)
2. Put checked marked in Expand Widget Templates
3. Find this tag by using Ctrl+F ]]></b:skin>
4. Paste below code Before ]]></b:skin> tag
5. Now Find this code by using Ctrl+F <div id='content-wrapper'>
6. Paste below code Before <div id='content-wrapper'> code
*Replace # With your URL
*Replace Name with as your like.
7. Now save your template
you are done.
add simple css/html menubar with nice
style.You can add it to your blog easily.
I posted more menubar for bloggers, you
can check it from below link.Try it...
Menubar collection
DEMO
1. Log in to blogger account and Go to Design >> Edit HTML
(make sure backup your template first)
2. Put checked marked in Expand Widget Templates
3. Find this tag by using Ctrl+F ]]></b:skin>
4. Paste below code Before ]]></b:skin> tag
ul#saturday{margin:0;padding:0;list-style-type:none;width:auto;position:relative;display:block;height:36px;text-transform:uppercase;font-size:12px;font-weight:bold;background:transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKeh_PCI_kObyno9CcNTxYeHrHXWiJe7iHPNtJRNLeRlhWcDWLW1PeKZQF40h4i6a3hW5JNy7COmFT1pv6e3NrUSntb_HAJbc_fRvcsJ7sc0Tb0v-CQufcS4VzWB-OYPxRucKOcmUOkM6g/s1600/bgOFF.gif") repeat-x top left;font-family:Helvetica,Arial,Verdana,sans-serif;border-bottom:4px solid #336666;border-top:1px solid #C0E2D4;}
ul#saturday li{display:block;float:left;margin:0;pading:0;}
ul#saturday li a{display:block;float:left;color:#874B46;text-decoration:none;padding:12px 20px 0 20px;height:24px;background:transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVRc_MmSfXU_JTQ75OuqWRZxu8Ow9qoq_NRiX_BJMCAOtNw_a8LutKuE9EHUB6iy4PspKDxoMSAs-IJPTC13YefF_B8k8Szhu02gIgZupm2AwmHqsXzbkd9AfrV5q4a-HW3ZnOXUBxB0e1/s1600/bgDIVIDER.gif") no-repeat top right;}
ul#saturday li a:hover{background:transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizgZ_AHHdXcT3w7VWZxAYSANm8RzrfcWG9Yeby9kti8wVtx1UUgHY5J0TsxOvOdXtwgQaSho6gHqBXnDQfh_1QFIrMVvwMEkrKAo1z27TmuAe4qOds2QS75Tp3UNSf_m9WUF1VhzkPa-sG/s1600/bgHOVER.gif") no-repeat top right;}
ul#saturday li a.current,ul#saturday li a.current:hover{color:#fff;background:transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS5hcMnPfJL8fB_-8GX3T2anz1tBKe0uMjAsQQDsuCVS2S4wBGiD6a_Ngb-MNsrQzwz93I8LYFQ3ZEK8zu2geBP25csxYvjfxLDaH1Ih5e0QYapVmFXn4cTkJWlKEfdHd9XAcm4aIGE6i3/s1600/bgON.gif") no-repeat top right;}
5. Now Find this code by using Ctrl+F <div id='content-wrapper'>
6. Paste below code Before <div id='content-wrapper'> code
<ul id="saturday">
<li><a href="" title="">Home</a></li>
<li><a href="" title="">About Us</a></li>
<li><a href="" title="" class="current">Services</a></li>
<li><a href="" title="">Our Work</a></li>
<li><a href="" title="">Contact Us</a></li>
<li><a href="http://www.bloggertrix.com/">Addthis</a></li>
</ul>
*Replace # With your URL
*Replace Name with as your like.
7. Now save your template
you are done.
This is a nice menubar for your blog.
But, it include with sear box. Its also
nice look and match for the menubar.
you can try it. its easy. check my earlier
search box and menubar below.
Menu bar collection
Search box collection
DEMO
1. Log in to blogger account and Go to Design >> Edit HTML
2. Find this tag by using Ctrl+F ]]></b:skin>
3. Paste below code Before ]]></b:skin> tag
4. Go to blogger Design > Page Element.
5. Click Add Gadget and select 'HTML/Javascript
6.Paste below code.
Replace with your links.
7. Now save your HTML/Javascript'.
You are done...
But, it include with sear box. Its also
nice look and match for the menubar.
you can try it. its easy. check my earlier
search box and menubar below.
Menu bar collection
Search box collection
1. Log in to blogger account and Go to Design >> Edit HTML
2. Find this tag by using Ctrl+F ]]></b:skin>
3. Paste below code Before ]]></b:skin> tag
#MenuBar{background:#333;display:block;font:18px;font-weight:400;height:32px;border-bottom:1px solid #ccc;min-width:960px;padding:5px 0}
#Menu a{color:#fff;display:block;font-weight:400;padding:5px 10px}
#Menu a:hover{background:#f4f4f4;color:#333;display:block;text-decoration:none}
#Menu ul{height:30px;list-style:none;margin:0;padding:0}
#Menu li{height:30px;float:left;margin:0;padding:0}
#MSA{width:960px;margin:0 auto;}
#MSD{width:960px;}
#Menu{height:30px;width:700px;float:left;}
#SearchBox {height:35px;float:right;width:220px;}
#SearchBox input[type="text"]{background-color:#2A2A2A;border:1px solid #484848;border-radius:5px;color:#7E7E7E;height:25px;outline:0;position:relative;-webkit-appearance:none;padding:3px 0 3px 8px}
#SearchBox input[type="submit"]{background-color:#248334;border-radius:5px;color:#fff;height:28px;width:35px;border:1px solid #7a7a7a;background-image:url(http://lh4.googleusercontent.com/--9RbYGLhmI8/UAp2hm47JEI/AAAAAAAAAxI/t_neer3k3IM/s36/Subscribe.png);padding:3px}
4. Go to blogger Design > Page Element.
5. Click Add Gadget and select 'HTML/Javascript
6.Paste below code.
<!--MenuBar Starts-->
<div id='MenuBar'>
<div id='MSA'>
<div id='MSD'>
<div id='Menu'>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#' rel='author'>About</a></li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>Advertise</a></li>
<li><a href='#'>Write For Us</a></li>
<li><a href='#'>Privacy Policy</a></li>
<li><a href='http://www.bloggertrix.com/'>Add This</a></li>
</ul>
</div>
<div id='SearchBox'>
<form action='/search' method='get'>
<input name='q' onblur='if (this.value == "") {this.value = "Search Here...";}' onfocus='if (this.value == "Search Here...") {this.value = "";}' type='text' value='Search Here...'/>
<input type='submit' value='Go'/>
</form>
</div>
</div>
</div>
</div>
<!--MenuBar Ends--
Replace with your links.
7. Now save your HTML/Javascript'.
You are done...
This is simple CSS menu bar for your blog.
You can add it easily.From this post I will
explain tutorial for new blogger interface.
because now we cant get back old interface.
Hope you can understand it well.Other menu
bars here.
Demo
1. Log in to blogger account and Click drop down.
2. Now select "Template" Like Below.
3. Now you can see Live on blog, Click EDIT HTML Button"
4. Now click Proceed button.
2. Find this tag by using Ctrl+F ]]></b:skin>
3. Paste below code Before ]]></b:skin> tag
4. Go to blogger Design > Page Element.
5. Click Add Gadget and select 'HTML/Javascript
6. Paste below code.
Replace with your links.
7. Now save your HTML/Javascript'.
You are done...
You can add it easily.From this post I will
explain tutorial for new blogger interface.
because now we cant get back old interface.
Hope you can understand it well.Other menu
bars here.
Demo
1. Log in to blogger account and Click drop down.
3. Now you can see Live on blog, Click EDIT HTML Button"
4. Now click Proceed button.
2. Find this tag by using Ctrl+F ]]></b:skin>
3. Paste below code Before ]]></b:skin> tag
#demo-container{padding:25px 15px 0 15px;background:#67A897;}
ul#simple-menu{list-style-type:none;width:100%;position:relative;height:27px;font-family:"Trebuchet MS",Arial,sans-serif;font-size:13px;font-weight:bold;margin:0;padding:11px 0 0 0;}
ul#simple-menu li{display:block;float:left;margin:0 0 0 4px;height:27px;}
ul#simple-menu li.left{margin:0;}
ul#simple-menu li a{display:block;float:left;color:#fff;background:#4A6867;line-height:27px;text-decoration:none;padding:0 17px 0 18px;height:27px;}
ul#simple-menu li a.right{padding-right:19px;}
ul#simple-menu li a:hover{background:#2E4560;}
ul#simple-menu li a.current{color:#2E4560;background:#fff;}
ul#simple-menu li a.current:hover{color:#2E4560;background:#fff;}
4. Go to blogger Design > Page Element.
5. Click Add Gadget and select 'HTML/Javascript
6. Paste below code.
<!--MenuBar Starts--> <div id="demo-container"> <ul id="simple-menu"> <li><a class="current" href="http://www.bloggertrix.com/" title="Home">Home</a></li> <li><a href="http://www.bloggertrix.com/" title="Home">Resources</a></li> <li><a href="http://www.bloggertrix.com/" title="Home">Inspiration</a></li> <li><a href="http://www.bloggertrix.com/" title="Home">Community Forums</a></li> <li><a href="http://www.bloggertrix.com/" title="Home">About Us</a></li> <li><a href="http://www.bloggertrix.com/" title="Home">Contact Us</a></li> </ul> </div> <!--MenuBar Ends--
Replace with your links.
7. Now save your HTML/Javascript'.
You are done...
menu bar,So, this post also about menu
bar.Actually this menu bar include with
water color background.I think this will
important to blogger template designers.
Its easy to add it to your blog.It just include.
CSS and HTML.Other menu bars here.
1. Log in to blogger account and Click drop down.
3. Now you can see Live on blog, Click EDIT HTML Button"
4. Now click Proceed button.
2. Find this tag by using Ctrl+F ]]></b:skin>
3. Paste below code Before ]]></b:skin> tag
#menu2 {
list-style: none;
padding: 0;
margin: 0;
width: 774px;
height: 210px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeL9p3npKXS2QmQwexjl4zQYYuoGUoujBft4HI7n2gVq29adHPKCoy9asDo1ckFCiYU2hBDvt9tCwsgSa_MRoFgjDPH5fANVoDP4p0WX8NJHGKMHrUJ7sqAQc0O4ebf7mJtRf3daRXoFE/s1600/menu-bg.jpg) no-repeat;
position: relative;}
#menu2 span {
display: none;
position: absolute;}
#menu2 a {
display: block;
text-indent: -900%;
position: absolute;
outline: none;}
#menu2 a:hover {
background-position: left bottom;}
#menu a:hover span{
display: block;}
#menu2 .home {
width: 144px;
height: 58px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-7BIbnGGmUXJZyZRZM5gdYTpIrxmE3_7EYe0MPJ8N1BRlkgSTSzuAsNSVuBRWi4jdNgh638gNlMBTczAIOrtIQcseC_307aH4477j-nh800FPaxvfjy30r79sYIezL1SXlwgk89Mmiz0/s1600/home.gif) no-repeat;
left: 96px;
top: 73px;}
#menu2 .home span {
width: 86px;
height: 14px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhADLeIY-lK0iIm4fAR0T-2sqBs7tmCeBYLYR0-Lfo1zXEm3FIxwJdxSUtPvJgyzTE6OZk3BrtfxAYbrLBJAihbJQROQm9TQyQzgc-vNHNxYi5OV1KlxnCczva2GcjYYtXIC0OridGm86o/s1600/home-over.gif) no-repeat;
left: 28px;
top: -20px;}
#menu2 .about {
width: 131px;
height: 51px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinjJFYWyifhOqiIWegBwU0LUTb_5K0i0Em57cXQ2a_Pq4E7cCtStySxrlBYW9_C_bR4C1oUCOL60mINKr5JCYsVxGgJA6FvU6z4yiSJQN7YpjYSxvyDcspc5Xbhzlls-TclTg_9irh85M/s1600/about.gif) no-repeat;
left: 338px;
top: 97px;}
#menu2 .about span {
width: 40px;
height: 12px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVGVk3dbKBc8DUAOmWKFAdWcv2x7TapdBVrab2j6P6VMouRpXuiOKd3-vTyzXF1NAHL0qsRS2IToxjFf6LvTKNlrTRx_9gBAcYdxvj1TN7I-Jtk5uLkGX5kRsgJFJYGzOz1vvdYcCrA58/s1600/about-over.gif) no-repeat;
left: 44px;
top: 54px;}
#menu2 .rss {
width: 112px;
height: 47px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR29e9T_HZ2B8V8BXevNHaxoynKfKLS1TqVVMdw3c57EBwjrijEdCp1Q_7_zQzHpM7Z1suqMJBREMTV3a6nHtEmxTOf2OT2UXyrB8sFgDW8rszolGUNNGENlb97CNLW2K76qD1yNSkPIY/s1600/rss.gif) no-repeat;
left: 588px;
top: 94px;}
#menu2 .rss span {
width: 92px;
height: 20px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWBBvHSHo_ikKtdfeYfl8pawnV9aigpJpgM_djlPoLEJHTv9ISuTxe3KmO5lDurIygLeDiXXX1I2S6FS0Jm401BUrUmT9GOC6qY4qAVT0rkuGBbMOBsGCF8m-ui18BP0R4vzapypoR598/s1600/rss-over.gif) no-repeat;
left: 26px;
top: -20px;
}
4. Go to blogger Design > Page Element.
5. Click Add Gadget and select 'HTML/Javascript
6. Paste below code.
<!--MenuBar Starts--> <ul id="menu2"> <li><a class="home" href="http://www.bloggertrix.com/">Home</a></li> <li><a class="about" href="http://www.bloggertrix.com/">About</a></li> <li><a class="rss" href="http://www.bloggertrix.com/">RSS</a></li> </ul> <!--MenuBar Ends--
Replace with your links.
7. Now save your HTML/Javascript'.
You are done...
Adsense tips are very important for bloggers.If you are new to Adsense, may be you are trying to know how to get more clicks. If you have some more traffic, Its easy to make money from Google ads.More income mean need to get more click for your ads.So some are wondering how to get more clicks.So,i thought to share some excellent tips for how to make more money with Google Adsense. Hope this will helps you to increase Google ad revenue.
Adsense Tip 1 : Finding proper keywords to your content.
You have to check keyword destiny. you can use some keyword analyzer and find the proper keywords to your content.(www.webmaster-toolkit.com, tools.seobook.com)
Adsense Tip 2 : Improve your keywords.
You can improve ads relevant from getting keywords.Get suggestion from AdWords key tools.If you want to know about AdWords click here
Adsense Tip 3 :Use Correct ads format
* 336x280 large rectangle
* 300x250 medium rectangle
* 160x600 wide skyscraper
* Don't use Non-stranded ads.
You can use 468x15 below your post title or header.read this Click here .when you creating adsense ads, make sure ads background color match with your blog background color.Choose same color for fonts.So this will helps you to show your ads without separating from your blog post.
Adsense Tip 4 : Choose proper place to keep your ads
Im suggests keep adsense top of your post.because there have good CTR.however you want to keep adsense bottom of page, First you can keep few ads on page and check from where you will get more click and choose the best place and keep the ads. Do not use more than 3 ads in your post.Other things is, you can keep link list under your post title. (468x15). Put image ads inside your post. click here to How to Put Adsense code In Middle blog Post
Adsense Tip 5 : You are not allow to
Don't try to change ads manually.
Don't try to click your ads and don't ask your friends to click your ads.
Don't use adsense for popup ads.
Adsense Tip 6 : You can follow
* Follow Google Adsense policies, it will help you to earn more
* You can block low paying ads from filters.you can use www.adsblacklist.com
* Make rich content to your blog.
* Write new post everyday, it help you to get more visitors.
These are main tips of Adsense. There have much more simple tips. i hope to share it with my experience.
Keep visiting. good luck. Have a Fun !!!
Freind Sites
Recent Posts
Labels
Blog Statistic
