How to add another sidebar into blogger blog? - The WonderSpot

Home Top Ad

Post Top Ad

Latest Posts

Saturday, March 10, 2018

How to add another sidebar into blogger blog?

Blogger template basic layout

Today we discuss about Blogger template basic layout.

First of all, you have to understand that your 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?



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:


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 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 of410 + 220 = 630 pixels. In the middle there is a space of 640 - 630 = 10 pixels.

Ok. then with that above details i think you have a better idea about Blogger template basic layout.
Enjoy your blogging.

No comments:

Post a Comment

Thank you for visit us.
Give your feedback. Don't worry. Your email is safe with us.
Subscribe us to get latest news letters for your inbox.

Post Top Ad

Your Ad Spot