Adding a section (with Add a gadget link) in Blogger layout

A  section is an area in Blogger layout that acts as a widget/gadget container. It is sometimes mistakenly addressed a page element. In Design > Page Elements tab, you can identify a section by the presence of an Add A Gadget link.

To add a widget, simply click the Add A Gadget link in your preferred location and proceed with selecting a widget. But what if your preferred location doesn’t have an Add A Gadget link? In other words there is no widget container there.

page elements add container

Well we can always make one, by adding a section tag in template HTML. Here is the code:

<!-- New widgets container Start -->
<b:section class='NewContainer' id='NewContainer'/>
<!-- New widgets container End -->

You are free to change the Id and class names.

In this tutorial we will add a section under the header. This is a perfect place to put horizontal navigation tabs. Here are the steps:

  1. Go to Dashboard > Design > Edit HTML.
  2. Back up your template.
  3. Since we are placing the new section under the header, we need to find the header code:
    <div id='header-wrapper'>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title=Your Blog Title(Header)' type='Header'/>
    </b:section>
    </div>
  4. Paste the section code right below the header code, like this:
    <div id='header-wrapper'>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title=Your Blog Title(Header)' type='Header'/>
    </b:section>
    </div>
    <!-- New widgets container Start -->
    <b:section class='NewContainer' id='NewContainer'/>
    <!-- New widgets container End -->
  5. Click Save Template.
  6. Go to Design > Page Elements to view the result. You should see a newly added section under the header.

    page elements added

  7. Now you can add all the widgets you want into the new container.
  8. To style the section, you simply add a styling rule in CSS, like this: 
    #NewContainer { 
    /* add styling declarations here */ 
    }

    And place it before ]]></b:skin> line in your template.

  9. That’s it, enjoy!

46 comments to "Adding a section (with Add a gadget link) in Blogger layout"

shahrinabd February 4, 2010 at 1:37 AM    

Very useful tips for me. Thank you very much

mike@michaelstorer.com,  February 10, 2010 at 8:44 AM    

I have a 2 column set-up. Left side is blog postings, called "main", right side is gadgets, called "sidebar." Both sides are equal widths.
Is it possible to add HTML Javascript widgets that are full-page width at various points down my page, in effect interrupting the two columns as a colspan="2" would in regular HTML?
I read your article about adding a new container, but can't figure out how to put it somewhere in the middle of everything.

Greenlava February 10, 2010 at 3:36 PM    

@mike
I'm afraid that is not possible. You can only place page-wide containers above and/or below the two columns.

Anonymous,  February 26, 2010 at 2:35 AM    

Thanks so much for providing all this great information. Love your site.

Anonymous,  May 1, 2010 at 12:17 AM    

Hello Admin,
Thanx a lot,I got what i want just now with ur useful tip!
Please let me know one more thing,,I want to add "ADD A GADGET ELEMENT" just below Blog Posts! Can u make me know?
Waiting! Very thankful if sum1 help me out in this issue...

Greenlava May 1, 2010 at 1:26 AM    

@Anonymous
Usually no Add A Gadget link is needed.
Add your new gadget in a sidebar, then drag it to above or below Blog Posts. Try it.

Around the World May 8, 2010 at 6:02 AM    

I'm having problems with the making the tabs link.

Greenlava May 8, 2010 at 11:28 PM    

@Continuing Transportation
Why don't you try this tutorial Creating navigation or menu tabs in Blogger

Unknown May 26, 2010 at 5:36 AM    

You have no idea how excited I am to find this tutorial! It helped me figure out how to do something that I've been going nuts over for months! Thank you thank you!! Doing my little happy dance!!! :)

Greenlava May 26, 2010 at 11:46 AM    

@The Girl Creative
I'm happy for you :)

WiseKid July 11, 2010 at 2:13 PM    

Hello buddy...I have a particular problem.
i have a template which doesnt have any links for adding a page element in the right sidebar.
and there's isn't any sidebar-wrapper where I can add this code.
< ! - - New w i d g e t s c o n t a i n e r S t a r t - - > < b : s e c t i on c l a s s = ' NewC o n t a i n e r ' i d = ' NewC o n t a i n e r ' / > < ! - - New w i d g e t s c o n t a i n e r E n d - - >

Greenlava July 11, 2010 at 5:45 PM    

@WiseKid
You don't have to put the code in sidebar-wrapper for it to work. Just make sure you add this CSS code in step 8:
#NewContainer {float:right; width:150px;}

replace the width with your own value.

Mary August 15, 2010 at 6:36 AM    

hwy that worked for me! Thanks ^^

RSoup November 5, 2010 at 1:15 AM    

How can add one under everything except the attribution? I have a three column template but the attribution is already Linked below as part of it - no gadget down there at all.

Thanks so much for doing this by the way, I can't believe blogger doesn't have actual articles that people actually want. ~R

Louise Viray November 5, 2010 at 12:10 PM    

Oh my God, I love you, thanks!!!^^~

Zaren December 23, 2010 at 5:53 PM    

helps alot! thankss!!

Greenlava December 24, 2010 at 3:28 PM    

@♫ mary ♪
@RaindropSoup
@Louise
@asrar@zaren
You're welcome!

: January 27, 2011 at 10:49 PM    

Works like a charm, I tough it would be more difficult than that. Big thanks from Belgium

Sherida February 3, 2011 at 1:34 PM    

Hi , thank you so much for the tutorial but i have a problem with the position of the widgets: they are placed vertically instead of horizontally

Can you help met with this>?

Greenlava February 4, 2011 at 7:57 AM    

@Sherida
Apply float:left; or display:inline-block; to each widget, like this:

#NewContainer #WidgetID1, #NewContainer #WidgetID2{float:left;}

Don't know how to find a widget ID? Read How to find Blogger widget and section ID.

Anonymous,  April 28, 2011 at 2:30 PM    

thanks from atoztechstuff.blogspot.com

Greenlava April 29, 2011 at 7:35 AM    

@Luvmysibes
The easy way to display your latest comments is by adding your comment feed URL into a Feed gadget.
This is feed URL:
http://YourBlogName.blogspot.com/feeds/comments/default

dotfb June 22, 2011 at 2:10 AM    

Hi I have a question, I want to make a 2 column section
right above the blog portion, is this possible?

I've included an image on how i want it below.

http://i.imgur.com/q60bh.png

Greenlava June 22, 2011 at 4:35 PM    

@dotfb
Try this:

Find this code in your template:
[div class='column-center-inner']

and then paste this code under it:
[b:section class='NewContainer' id='NewContainer1'/]
[b:section class='NewContainer' id='NewContainer2'/]

As for the CSS part, add this snippet:
.NewContainer {
width: 45%;
float:left;
}

chis September 23, 2011 at 11:19 AM    

This is great trick. I have custom template so how do i added new gadget container in footer?
Thanks

Greenlava September 23, 2011 at 11:40 PM    

@chis
Adding a new gadget container to designer template is very easy. Go to Design > Template Designer > Layout and select one of the three available footer layouts.

Group WM September 28, 2011 at 4:37 PM    

Previously you said that no Add A Gadget link is needed for below Blog Posts, I tried this but the title image background is not the same with the sidebar title, how to make them the same???

Greenlava September 29, 2011 at 10:28 AM    

@Anna
That's because your template only applies the background to the sidebar.
To include the main column, try this:
Go to Design > Edit HTML and look for this code:

#sides-top h2 {
margin: 0px;
padding: 0px;
color: #765023;
background: url('http://4.bp.blogspot.com/_XByc9SCisZM/ScfyzyRrpLI/AAAAAAAABs8/IR-hZjcZ0fg/s1600/sidetop_h2.jpg') no-repeat;
font-size: 15px;
letter-spacing: 0px;
height: 35px;
padding: 10px 20px;
line-height: 35px;
font-family: Comic Sans MS, Georgia, Times, serif;
}

replace #sides-top h2 with #sides-top h2, .main h2

Group WM September 29, 2011 at 5:35 PM    

@Greenlava
This is confusing @__@ I can't find any #sides-top h2 {

But in my template, it has only #sidebar-wrapper2 h2 { , is it the same?

Greenlava September 30, 2011 at 12:51 AM    

@Anna
Use the search function (Ctrl+f), you'll find it.

Group WM September 30, 2011 at 2:00 PM    

@Greenlava
I did it!! XD Thx u very much :D

Anonymous,  October 18, 2011 at 10:49 PM    

It work on me. Wonderful. thanks

Anonymous,  November 6, 2011 at 2:25 AM    

OMG, it took me forever trying to figure this out and searching online but no help....and then i came to your blog and got it in 3 minutes. THANKS!

Anonymous,  November 11, 2011 at 3:47 AM    

thanks .... i really need this tutorial

Mygeeksite April 29, 2012 at 6:31 PM    

Thanks man nice tutorial for new bloggers.

rahul thakur May 24, 2012 at 12:08 PM    

Thank you so mach sir ! its what , i was searching for ...

Mahmud Hasan June 29, 2012 at 2:25 AM    

Unlimited thanks to you. I am gonna create a horizontal widget area to add a scrolling news area in one of my blogger site. Thanx to pave me the right way.

Sanket Patil August 9, 2012 at 4:59 PM    

Thank you for your tutorial. it is working for me.

Unknown September 24, 2012 at 10:00 AM    

That's what i was looking for to add search box in header.Its working perfectly. Thanks ..

Anonymous,  October 11, 2012 at 11:09 AM    

Thank you sir, works like charm on my blog.

Regards

Unknown October 15, 2012 at 10:46 AM    

Thanks a ton :)

Suraj October 31, 2012 at 2:07 AM    

I meant life saver lol...sorry for double posting

Edward March 23, 2013 at 8:49 AM    

thank you ... thank you ... this solve my problem ... nice post

Mirza Asif April 1, 2013 at 6:43 PM    

good very good

Dr Kuan April 11, 2013 at 12:56 AM    

THanks really!!

Unknown September 4, 2013 at 7:54 PM    

thanks

Post a Comment

We love to hear from you! Leave us a comment.

To ensure proper display, HTML/XML/Javascript need to be escaped first using this escape tool.