Friday, January 27, 2012

How To add Ads Banner For Blogger Template









1. Login to your blogger dashboard--> layout- -> Edit HTML

2. Scroll down to where you see ]]></b:skin> tag

3. Copy below code and paste it just before the ]]></b:skin> tag.





.bannerbox{
float:left;
width:280px;
padding:0px ;
margin:0px 0px 0px 3px;
position:relative;
overflow: hidden;
}
.bannerbox h2 {
color:#140000;
margin:0px ;
padding:0px 0px 0px 5px ;
font: 28px Crushed, sans-serif;
height:35px;
line-height:33px;
text-align: left;
font-weight: normal;
border-bottom:2px solid #ffb400;
text-shadow:1px 1px 0px #ffffff;
}
.banner{
margin: 0px ;
padding: 0px ;
float:left;
height:100%;
}
.banner ul {
margin: 0px 0px 0 10px;
padding: 0px 0px;
overflow: auto;
}
.banner li{
width:125px;
margin: 8px 4px 4px 6px ;
padding:1px;
list-style:none;
display : block;
overflow:hidden;
float:left;
background:#fff;
border:1px dashed #d1d1d3;
}
.banner li a:link, .banner li a:visited ,.banner li a:hover{
text-decoration: none;
}



4. Now save your template.

5. Go to Layout-->Page Elements and click on "Add a gadget".Select "html/java script" and add the code given below and click save.




<div class="banner">

<ul>

<li>
<a href="http://www.coolbthemes.com" rel="bookmark" title=""><img src="http://3.bp.blogspot.com/-DBFNl9ENMzg/TvHg_P5zj2I/AAAAAAAAG5w/VUIu7DIuXms/s1600/tutorials_125x125_v10.gif" alt="" style="vertical-align:bottom;" /></a>
</li>



<li>
<a href="http://www.coolbthemes.com" rel="bookmark" title=""><img src="http://2.bp.blogspot.com/-c6-b1qfhatA/TvHg_EnWUQI/AAAAAAAAG5c/PRJQ7nB49nY/s1600/tf_125x125_v1.gif" alt="" style="vertical-align:bottom;" /></a>
</li>

<li>
<a href="http://www.coolbthemes.com" rel="bookmark" title=""><img src="http://4.bp.blogspot.com/-AKnlFIFKIos/TvHg-wHtvOI/AAAAAAAAG5U/qhk0n_lYxeg/s1600/aj_125x125_v2.gif" alt="" style="vertical-align:bottom;" /></a>
</li>

<li>

<a href="http://www.coolbthemes.com" rel="bookmark" title=""><img src="http://1.bp.blogspot.com/-gl6BRkzCIos/TvHg_s-rrrI/AAAAAAAAG54/PCya9HhNbkw/s1600/vh_125x125_1.gif" alt="" style="vertical-align:bottom;" /></a>
</li>
</ul>
</div>


6.Now drag Sidebar to place to gadget

0 comments: