When you are maintaining a blogger blog and want to add the second or another sidebar or looking for doing any changes to your blogger blog layout, First of all, you have to understand your Blog Layout consists of several sections and it is very important to know about blogger blog template basic layout.
The standard Blogger template has a header section, a sidebar section, the 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.
The standard Blogger template has a header section, a sidebar section, the 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.
Before adding a second sidebar or doing any changes to your blogger blog layout, first of all, you have to understand about how looks like the Blog layout? Basically, the Blog Layout consists of several sections. The standard Blogger template has a header section, a sidebar section, the 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 Blogger layout. If you create a fresh and new Blog site, the Page Elements Tab looks like this:
 |
| the common structure of a standard Blogger layout |
This Layout has 4 sections:
· Header
· Main (with the Blog Posts),
· Sidebar
· Footer
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 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 "Main 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 style-sheet 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 pixels so that everything that is inside the Outer wrapper stays 10 pixels from the border. So that leaves 660 - 20 = 640 pixels for the 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 of410 + 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 sidebar, we have to do something to create some space. As it is now, it won't fit in.
How to Adding a second sidebar?
For adding a second sidebar to blogger blog, 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 sidebar into the blogger template as we prefer.
So let’s see how to add 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.
You can see there is a new section, just below the header and above the posts. But the problem is that it is not on 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: Click here to view.
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-wrapperand #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 below,
If you want to add another section or more sections to add more elements, then you can add another section to existing sections. Click here to view
Just Copy & paste below code.
<b:section class='sidebar' id='sidebar2' preferred='yes'>
</b:section>
OK, my friends. Now I think you have a better idea about adding the second sidebar to blogger blog.
Then you can add more sections to add more elements.
I Hope the above details help you to Know about your blogger blog template basic layout and to add a second sidebar into your blogger blog? And if you have any problem or know more on this adding a second sidebar into your blogger blog, Please share with us in the comments section below. Enjoy your blogging.
%E2%80%93%20Get%20Paid%20%20To%20Search($0.05%20per%20task)%20-%20Payment%20proof.png)
Esta informacion me fue de mucha utilidad. Mil gracias!!!
ReplyDelete