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




If you like this article , then please help us by bookmarking

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

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

  2. 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)?

  3. @Danny ,

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

    regards,
    Blogger Accessories

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

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

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

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

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

  9. Very nice hack,its working nicely.Thanks

  10. Salut Kho !!

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

    ++

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

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

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

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

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

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

  17. 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&quot;

  18. Therefore, these notices serve as a precaution to the public. ,

  19. Just like CarloBlogg right sidebar is shown at the end of the last post :(. Doesn’t work for me.

  20. Salam,thanks for this awsome share,i will try it soon.Thanks:http://webizland.blogspot.com/

  21. […] email id” title=”Advertise Here”>Advertise Here 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. 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. http://www.techieblogger.com/2008/10/add-125-x-125-ad-section-to-blogger.html […]

Leave a Reply

You must be logged in to post a comment.