Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
You have this HTML already
<div id="cnt" class="wrapper">
<div class="top">
<ul id="crumbs"><li class="first"><a href="http://techiedreams.com" id="home-img"></a></li><li>Home</li></ul> <div class="clear"></div>
</div> <!-- END top -->
Add a div with an id of ads
<div id="cnt" class="wrapper">
<div class="top">
<div id="ads">
<!-- ADS go here -->
</div>
<ul id="crumbs"><li class="first"><a href="http://techiedreams.com" id="home-img"></a></li><li>Home</li></ul> <div class="clear"></div>
</div> <!-- END top -->
In the bottom of your style.css file (assuming you’re using a child-theme), add
#ads{
//This is the height of the adverts on 9lessons Programming
height: 118px;
}
for instance, add the code before this line:
<div id="cnt" class="wrapper">
(that might be in header.php – I am not going to download the theme to check)
example:
<div class="header-ads">ADCODE</div>
this or something similar goes into style.css:
.header-ads {width:100%;height:90px;background:#f4f4f4;border-bottom:2px solid #eee;text-align:center;}
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
I wouldn’t add the code before this line:
<div id="cnt" class="wrapper">
Because it won’t follow the same width as your blog, or breadcrumb
Because it won’t follow the same width as your blog, or breadcrumb
debatable, if you look at the ad alignment in the sample site;
but this is not for me to judge – I leave this to @getchanu …
Super guys thanq for your valuable replies. I achieved this doing some R & D. Anyways thanks again. The Process was just like the Andrew Nevins
said. Where i have a separate div with id = ‘adbar’ and another div inside it with class = ‘ad’.
My css is as follows:
#adbar {
background-color: #CCCCCC;
margin: 5px 0px 0px 0px;
width: 980px;
height: 30px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
#adbar .ad {
padding:6px;
margin-left:10px;
width: 980px;
}
