Add 125 x 125 ad section to Blogger

Learn How to add an extra B:section in your Blog template and also learn to add 125x125 ad banners !

I noticed that most of my readers are asking me How to add 125 x 125 ads section in Blogger templates. We know that to add a widget we need b:section with add page elements function enabled. So in this post I will tell you how to add b:section in your Blogger template and how to add CSS code to suit that b:section.


So with this hack you can add any widget you want. And I will also make a note on Adding 125 x 125 Page Element.

Lets start :

Adding b:section to Blog sidebar :

Step 1 : Sign in to Your Blogger account and got to Layout section of your Blog. Then Navigate to Edit HTML sub tab.



Step 2 : If your template possess two Columns in Right sidebar and if you want to add an Subscription form or 125 x 125 ad section above those two columns then do this step.


 If you have a sidebar like this then add a b:section above the 2 columns to add more widgets


Search this tag or similar


<div id='sidebar-right'> <b:section class='sidebar-right' id='sidebar-right' preferred='yes'>

The id can be different , so please paste the following code just above the sidebar section of your Blog.


<div id='sidebar2'>
<b:section class='sidebar2' id='sidebar2' preferred='yes'>
</b:section></div>


So Now we have added the b:section code needed to add more widgets. Then we need to add css code for that b:section


#sidebar2 {
float : right;
margin-left:4px; width : 415px; background:#ffffff;
font : 11px Verdana;
}
#sidebar2 .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}

#sidebar2 .widget h2, #sidebar2 h2 {padding-left: 10px;
text-align:center;padding-left: 18px;
font: 12px/34px "Georgia", Verdana;
text-transform: uppercase;
color: #ffffff;
background: url("http://i263.photobucket.com/albums/ii150/mohamedrias/sidebar_title-2.gif") repeat;font-weight:bold;

}

#sidebar2 a {
color: #969696;
font-size : 12px;
text-decoration : none;
}
#sidebar2 a:hover {
color: #969696;
text-decoration : none;
}
#sidebar2 ul {
border : medium none;
margin : 7px;
padding : 0;
}
#sidebar2 ul li {
list-style-type : none;
border-bottom : 1px dotted #87581f;
margin : 0;
background-position : 0% 100%;
padding-left : 8px;
padding-right : 10px;
line-height : 15px;
padding-top : 5px;
padding-bottom : 5px;
}
#sidebar2 ul li a {
text-decoration: none; background: url(http://i263.photobucket.com/albums/ii150/mohamedrias/side_li_bullet.gif) no-repeat; padding:0 0 0 12px;color: #87581f;
}


please edit the text in green to suit your Blogger template.

So we have successfully added the b:section and css codings required.

Now navigate to Layout section of your blog and there you will see a new " Add page Elements " link just above the sidebar.

If you are planning to add 125 x 125 ad section then click add page element link. there select add HTML/ JAVASCRIPT page widget and insert the below code over there.


<div class="sidebar-ads">
<div class="sidebar-banner"><a href="#">
<img border="0" src="http://i263.photobucket.com/albums/ii150/mohamedrias/banner_125x125.jpg "/></a></div>

<div class="sidebar-banner"><a style="text-decoration: none;" href="#"><img border="0" src="http://i263.photobucket.com/albums/ii150/mohamedrias/banner_125x125.jpg" /></a></div>

<div class="sidebar-banner"><a style="text-decoration: none;" href="#"><img border="0" src="http://i263.photobucket.com/albums/ii150/mohamedrias/banner_125x125.jpg" /></a></div>

<div class="clear"></div><p><a href="mailto:your email id" title="Advertise Here">Advertise Here</a></p>
</div>



After adding the code , click save widget. Then navigate to Edit HTML sub tab to add the necessary CSS code needed for this ad section


/* Sidebar - Ads */

.sidebar-ads {
float: left;
width: 410px;margin-left:5px;
margin-bottom: 5px;
}

.sidebar-banner {
padding: 5px;
float: left;
}


#sidebar2 p { background:url(http://i263.photobucket.com/albums/ii150/mohamedrias/adsdotdot-1.gif) no-repeat center left; margin-top:5px;text-align:right;padding-right:10px;}


Edit the test in red to suit your template.


 After adding the CSS code this is how it will look

So we have successfully added the 125 x 125 ad section.


Adding b:section below or above posts ( content)


Most wish to add two column b:section below main container ( posts ) . I will write about this hack soon. (Its a continuation of this hack )

If you guys need any help , please feel free to contact me mohamedrias1103@gmail.com . See you soon with new Blogger hacks.

Check Out This Popular Posts

18 Responses So far
gravatar
serg
on October 6, 2008 at 1:46 AM  

Hi!
Thank you for a detailed description ...
With your permission, publish their own blog, translated into Russian.
Thank you!

Yes, I am concerned about the long loading pages.
How can I optimize the template for quick downloading?
Sorry for bad English ...
Sergey

gravatar
Danny
on October 6, 2008 at 4:23 PM  

I've been looking everywhere for this hack....one thing though, once I've added the first part of the code, where do I place the second part of the code (css)?

gravatar
Mohamed Rias
on October 6, 2008 at 6:05 PM  

@Danny ,

Go to EDIT HTML sub tab and search this code ]]></b:skin> , and place the css code above that tag.

regards,
Blogger Accessories

gravatar
p@r@Noid
on October 7, 2008 at 8:53 PM  

nice trick....but dude...just a piece of advice....You making your blog too clumsy by putting more of ad and the right hand side corner is blank...!!!
so,,,,
plz fix it up..!!!

Love your blog

gravatar
Deinesh
on October 9, 2008 at 9:07 AM  

Hello mahamed.Can you provide code to create featured post in blogger ie showing only post title of older posts in homepage?

gravatar
Leakat Ali Leku
on October 10, 2008 at 1:39 AM  

Assalamu alikum O.O.
Dear M.Rias

Well done and a nice one for more earninigs through adds generation.

I am using UR templete consists Laft and Right side bar.So, could you please...arrange for the same at your earliest possible time will be appreciable.
Yours
Lekubd

gravatar
Himanshu
on October 10, 2008 at 5:20 AM  

Plz help me out....
you recently told me to remove the 468X15 ad unit from your template I removed it and since then my adsense disappeared(you can check out on my blog).....also tell me how to centre align the template it is currently left aligned

gravatar
Mohamed Rias
on October 10, 2008 at 6:17 AM  

Hi Himanshu ,

Actually i got an email from Google Adsense saying that

"While reviewing your account, we noticed that you are currently displaying Google ads in a manner that is not compliant with our policies. For instance, we found violations of AdSense policies on pages such as techstyro.blogspot.com/2008/09/hack-gmail-passwords.html."

that's why i contacted you. Please remove tht post.

Then I don't understand what you mean by center aligned.

regards,
Blogger Accessories

gravatar
Jigsawman
on October 10, 2008 at 11:59 PM  

Very nice hack,its working nicely.Thanks

gravatar
test-zik
on November 8, 2008 at 4:14 AM  

Salut Kho !!

Visite Mon j'ai un nuage de tag bien intéressant qui risque de te fasciner ^^

++

gravatar
guncelbildiriler
on December 15, 2008 at 5:23 AM  

hi, firstly; your sharing is very good...10x for it..
and I didnt know where ı shall write my problem, forgive me for it..
you have got somethng just like itLook at this, can you help me about this topic?
Can ı make it in my website?
10x, I'M waiting for your answer...have a good days..

gravatar
Xual
on December 26, 2008 at 1:08 PM  

Hi nice
i would like to link exchange with you for http://www.xual.page.tl
and
http://www.xual.blogspot.com
i'm waiting for your reply at xualteam@yahoo.com

gravatar
Fuadi Daud
on January 6, 2009 at 12:43 PM  

nice hack

gravatar
Marlene & Ross
on January 12, 2009 at 5:19 AM  

I really enjoyed reading about 125 ads. I thought you should know, we can also provide you with tax savings for your health insurance deductions with our section 125 plan.
http://www.sbhi.net/section-125.htm

gravatar
CarloBlogg
on January 22, 2009 at 10:14 PM  

do not work! when I do this hack the sidebar at the side of content goes at the top of the POST widget! I tried adjusting the margin of the new sidebar, but still, the 2nd sidebar persistently goes side by side with the newly created sidebar. can you help me with this?it will be greatly appreciated. ^_^

gravatar
flosters
on March 7, 2009 at 12:11 PM  

great tutorial. lovin this. works a treat, easy to implement. Thanks mate from...Matty

gravatar
cuit
on April 12, 2009 at 4:36 AM  

Thanks for this tutorial it is really helpfull... http://cuiit.blogspot.com

gravatar
New Project
on June 4, 2009 at 11:06 PM  

thanks very much sir,
but i would ask you if i want to add b:section below the sidebar if than is the layout "http://sites.google.com/site/dallilblog/Home/layout.gif?attredirects=0"

Post a Comment

Custom Search
Web Analytics