How to add another sidebar into blogger blog? - The WonderSpot - Know all in one spot
Breaking News:

How to add another sidebar into blogger blog?

How to Add sidebar into your blogger blog

Today let discuss, How to add another sidebar to blogger.
Before adding second side bar to blogger blog first of all, you have to understand about the how looks like the Blog layout?? Basically, Blog Layout consists of several sections. The standard Blogger template has a header section, a sidebar section, a main section and a footer section. Inside these section Bloggers puts the widgets, these are the Page elements that you can select from the template tab

Then, let's take a look at the common structure of a standard Blog. If you create a fresh and new Blog site, the Page Elements Tab looks like this:
How to add another sidebar into blogger blog?

This Layout has 4 sections:
  •      Header
  •      Main (with the Blog Posts),
  •      Sidebar
  •      Footer
see the image example from here

The HTML-template looks like this (the line-numbers are added for reference only):

010: <body>
020: <div id='outer-wrapper'>l<div id='wrap2'>
030: <!-- skip links for text browsers -->
040: <span id='skiplinks' style='display:none;'>
050: <a href='#main'>skip to main </a>
060: <a href='#sidebar'>skip to sidebar</a>
070: </span>
080: <div id='header-wrapper'>
090: <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
100: <b:widget id='Header1' locked='true' title='Second Sidebar (Header)' type='Header'/>
110: </b:section>
120: </div>
130: <div id='content-wrapper'>
140: <div id='main-wrapper'>
150: <b:section class='main' id='main' showaddelement='no'>
160: <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
170: </b:section>
180: </div>
190: <div id='sidebar-wrapper'>
200: <b:section class='sidebar' id='sidebar' preferred='yes'>
210: <b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
220: <b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
230: </b:section>
240: </div>
250: <!-- spacer for skins that want sidebar and main to be the same height-->
260: <div class='clear'> </div>
270: </div> <!-- end content-wrapper -->
280: <div id='footer-wrapper'>
290: <b:section class='footer' id='footer'/>
300: </div>
310: </div></div> <!-- end outer-wrapper -->
320: </body>

Lines 010 and 320 are the body-tags. All code has to be between these two tags.

Lines 020 and 310 are the div-tags for two wrappers, that wrapper called "outer-wrapper" and the wrapper called "wrap2". In CSS you can define fonts, colors and other styling for these wrappers. We can look about CSS code after that.

Lines 080 - 120 contain the header. There is a div-wrapper (080 and 120) as you can see, section tags (090 and 110) and the widget that contains the header itself (100).

Lines 130 - 270 contain the content. That content means by blog posts and sidebars. There is a div wrapper called "Content wrapper"
(130 and 270) and inside this wrapper there are 2 more wrappers, they are the "Maun wrapper" (140-180) and the "Side wrapper" (190-240).

Inside the Main wrapper we find the Main section (150 and 170) with the Blog widget (160). This widget contains our posts.

Inside the Sidebar wrapper we find the Sidebar section (200 and 230) with an Archive widget (210) and a Profile widget (220).

 Finally, we have a Footer (280-300).

Now that we understand the common structure of standard blog site layout, then let's take a look at How about the formatting of this template. In the stylesheet you will find the following code:

#outer-wrapper {
width: 660px;
padding: 10px;
....... }

#main-wrapper {
width: 410px;
float: left;
....... }

#sidebar-wrapper {
width: 220px;
float: right;
........ }

The outer wrapper has a width of 660 pixels. The padding is set to 10 pxl, so that everything that is inside the Outer wrapper stays
10 pxl from the border. So that leaves 660 - 20 = 640 pixels for main wrapper and sidebar wrapper.

The main-wrapper has a width of 410 pixels, and floats to the left.

The Sidebar wrapper had a width of 220 pixels and floats to the right. Together, Main wrapper and Sidebar wrapper have a width of
410 + 220 = 630 pixels. In the middle there is a space of 640 - 630 = 10 pixels.

So, if we want to squeeze in a second or more sidebars, we have to do something to create some space. As it is now, it won't fit in.

How to Adding a second sidebar?

First, we will add the sidebar to the structure of the template, then we will add it to the CSS and make it fit into the page. Then finally we can place the second side bar into blogger template as we prefer.
So let’s see how to adding a second sidebar to our blog.

Step 1: Backup the template.

Step 2: Make your right sidebar unique.

Change lines 190 and 200:
190: <div id='right-sidebar-wrapper'>
200: <b:section class='sidebar' id='right-sidebar' preferred='yes'>

In your CSS style sheet, change "#sidebar-wrapper" to "#right-sidebar-wrapper".
If you save your template then view your blog, it should look okay.

Step 3: Add a left sidebar by adding new lines of code, (After content wrapper & before main-wrapper).

         <div id='content-wrapper'>
131. <div id='left-sidebar-wrapper'>
132. <b:section class='sidebar' id='sidebar-wapper' preferred='yes'/>
133. </b:section></div>

Now save your template, and take a look at the Page Elements tab.

How to add sidebar to your blogger blog?

You can see there is a new section, just below the header and above the posts. But the problem is that, it is not at the left side of the screen jet. Therefore, we have to add some CSS.

Step 4: Add CSS for the left sidebar.

In your CSS style sheet, add the following code:

#left-sidebar-wrapper {
width: 220px;
float: left;
word-wrap: break-word;
overflow: hidden;

Now your page layout tab will show something just like this:

The sidebar section is now to the left side, but your right sidebar is suddenly below to your posts. That is because of the width of 2 sidebars and a Main section counts up to 840 pixels and that is more than the width of the Outer wrapper (660 pixels).

Step 5: Change Outer wrapper & Header wrapper width.

In your CSS style sheet look for the #header-wrapper and #outer-wrapper definitions and change the width from 660 to 860.

Step 6: Add a page element.

Now finally, you can add a page element to your left sidebar.

Your Blog Layout will look like this now: click here to view image

If you want to add an another section or more sections for add more elements, then you can add an another section to existing sections.

Just Copy & paste below code.
                        <b:section class='sidebar' id='sidebar2' preferred='yes'>

Ok my friends. Now i think you have a better idea about add second sidebar to blogger blog.
Then you can add more sections for add more elements.

For more reading THEWONDERSPOT

Post a Comment