Advanced Search Module

Close Search

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 125×125 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’>

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(““) 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( 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=”” “/></a></div>

<div class=”sidebar-banner”><a style=”text-decoration: none;” href=”#”><img border=”0″ src=””" /></a></div>

<div class=”sidebar-banner”><a style=”text-decoration: none;” href=”#“><img border=”0″ src=””" /></a></div>

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

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( 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 . See you soon with new Blogger hacks.

Related posts:

  1. Add yahoo Smileys on Blogger Posts – Blogger hack
  2. Show Date before each Post in Blogger
  3. Related Posts Widget For Blogger – Bugs fixed
  4. Page Navigation Hack for Blogger
  5. Related Posts Widget For Blogger with CSS

18 Responses to “Add 125 x 125 ad section to Blogger”

  • serg October 6, 20088:46 am

    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 …

  • Danny October 6, 200811: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)?

  • Mohamed Rias October 7, 20081:05 am

    @Danny ,

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

    Blogger Accessories

  • p@r@Noid October 8, 20083:53 am

    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…!!!
    plz fix it up..!!!

    Love your blog

  • Deinesh October 9, 20084:07 pm

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

  • Leakat Ali Leku October 10, 20088: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.

  • Himanshu October 10, 200812:20 pm

    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

  • Mohamed Rias October 10, 20081:17 pm

    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”

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

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

    Blogger Accessories

  • Jigsawman October 11, 20086:59 am

    Very nice hack,its working nicely.Thanks

  • test-zik November 8, 200812:14 pm

    Salut Kho !!

    Visite Mon j’ai un nuage de tag bien int√©ressant qui risque de te fasciner ^^


  • guncelbildiriler December 15, 20081:23 pm

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

  • Xual December 26, 20089:08 pm

    Hi nice
    i would like to link exchange with you for
    i’m waiting for your reply at

  • Fuadi Daud January 6, 20098:43 pm

    nice hack

  • Marlene & Ross January 12, 20091:19 pm

    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.

  • CarloBlogg January 23, 20096:14 am

    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. ^_^

  • flosters March 7, 20098:11 pm

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

  • cuit April 12, 200911:36 am

    Thanks for this tutorial it is really helpfull…

  • New Project June 5, 20096:06 am

    thanks very much sir,
    but i would ask you if i want to add b:section below the sidebar if than is the layout ";


18 Responses to "Add 125 x 125 ad section to Blogger"