Ashwini Khare
- 
Monday, April 2, 2007 -
bloggerMany of my visitors were asking me that how did I split my template into 3 columns or in short added a second sidebar. It can be done by two methods
1.Download an existing 3 column template from Webtalks Templates{Simple}
or
2. Edit your Template HTML
2.
Understanding structure and 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 Blogger puts the widgets, these are the page-elements that you can select from the Template-tab.
Now, let's take a look at the structure of a standard Blog. If you create a fresh, new Blog, the Page Elements Tab looks like this:
This Layout has 4 sections: Header, Main (with the Blog Posts), Sidebar and 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 your code has to be between these two tags.
Lines 020 and 310 are the div-tags for two wrappers, the wrapper called "outer-wrapper" and the wrapper called "wrap2". In CSS you can define fonts, colors, and other styling for these wrappers. We'll look into CSS later in this tutorial.
Lines 080 to 120 contain the header. As you see, there is a div-wrapper (080 and 120), section-tags (090 and 110) and the widget that contains the header itself (100).
Lines 130 to 270 contain the content. Content means here: blog posts and sidebar. There is a div-wrapper called "content-wrapper" (130 and 270), and inside this wrapper there are 2 more wrappers: the "main-wrapper" (140-180) and the "sidebar-wrapper" (190-240).
Inside the main-wrapper we find the main-section (150 and 170) with the Blog-widget (160). This widget contains your posts.
Inside the sidebar-wrapper we find the sidebar-section (200 and 230) with an Archive-widget (210) and a Profile-widget (220).
And finally we have a Footer (280-300).
Now that we understand the structure, let's take a look at the formatting of this template. In the stylesheet you will fund 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 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 sidebar, we have to do something to create space. As it is now, it won't fit in.
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.
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 now and view your blog, it should look okay.
Step 3: Add a left sidebar by adding new lines of code:
131: <div id="'left-sidebar-wrapper'">
132: <b:section class="'sidebar'" id="'left-sidebar'" 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 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;
}
Your Page Layout tab will show something like this:
The sidebar-section is now to the left, but your right-sidebar is suddenly below your posts. That is because 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 and header-wrapper width.
In your CSS-stylesheet 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, add a page element to your left sidebar.
Your Blog Layout will look like this now:
Sincere thanks to BeautifulBeta
Future post:: Three column templates, free for download
Newer Post
Home
Posts
38 comments:
Hello!
In my blog I've written a post to how to add new section in the sidebar.
If you like, here is the post.
thanks a lot buddy
i found lot of ready to paste templates
but urs is a good explanation it
seems well have not updated my site but really it is very use ful
thanks
i like ur google ads alignements also :D :D
wow really this help section really.. good explanation.. I has search yahoo.. this page were found.. tnk u webtalk 4 helpin me..
visit my blog//
http://gigapixelz.blogspot.com
thnks again
Hi,
I didnt understand the step 4 because I dont know where to put the code you have mentioned in step 4. Can you help?
it's all german to me.can some one help? my email is cheks900@yahoo.com
really iam a newbie...
Hey thanks! Been looking for this for months! You explained everything PERFECTLY !!!! Your The Man !!!!!
I've tried this same code from another site, but it doesn't work. Maybe it's because I use Rounders 3? Not sure. Does anyone know of another formula that might work? Thanks in advance.
Mikael
Hey There,
I wanted to know, how you added Google advs & Google search tool in your header section, I tried it says, no html allowed
Please help
hii
very good explanation,
but i still have a question, when in step 3, i have to add those lines, where do i have to put them??
cuz i pasted them in different places of the code, but didnt work.
thanks for the help!!
cyaaa
gispe!
Fantastic, great work, one of the very useful blogging hacks.
Thanks a lot for the help. :)
Veeeery simpel with your tutorial!
thx =)
here is the result:
turkish news in german
huz,
germany
Hihi...
I am a real GOON when it comes to HTML..any way you can help me to add a left side bar to the current template I am using?? Really love this template but just do not know how to go about adding a left side bar..www.sweetangelswardrobe.com
Hey, I was wondering after i installed the sidebar, y does the sidebar push my post footer down. My site is www.doubleastudios.com
so, this looked so promising but step 4 does not create the picture mentioned. I end up with the left section and the main section stacking on top of each other with the left section's box being smaller.
Of course, that means the rest of the steps do not create as intended, unfortunately.
Thank you SO MUCH!! my friend. I did exactly what you have described in that post and it worked perfectly.
________________________________
Loss Weight To Have Healthy Life
http://weightlossequalshealthylife.blogspot.com/
I downloaded yours (scribe/blogger)- and it works perfectly EXCEPT for on thing - I no longer have the quick edit icon (toolbar/wrench tool) on my posts. It is in the sidebars, but not on the posts -
PLEASE PLEASE PLEASE tell me how to go in and add it to the code so that I can use it. I'm happy to do it - I just don't know what to add and where. I have tried looking at source code for original scribe templates but cannot figure out where to add it in....
I am asking for instructions. Please! This is not a criticism.
can u help me? how to insert adsense code in the blog content? between text and text or posting title and content? email me please
thanks lot for this post... its easy to follow... thank you
Hey i found it easy but i have a problem in the step 4 please if you like tell me where i have to put that
i put it in the /* Outer-Wrapper but nothing happens
I *think* I did every step properly but somehow both of my columns are on the right side. HELP!
http://mrchgrl.blogspot.com
mrchgrl@gmail.com
Your instructions were great... By following them I managed to add the sidebar.
The only omission seems to be the position of the new sidebar HTML code in the template. I managed mine (it was a new right side bar in addition to the existing left sidebar) to display in the correct position only when I moved it before the main-wrapper.
ok i manage to add a second bar, check my blogspot, thunderball-x.blogspot.com
i m not gettin any kind of wrapper stuff
plz help me out...
~Neer~
neers4u@gmail.com
theneers.blogspot.com
Very Very Nice explanation and of course you acknowledged your source that's like a great man!
Great work!
I follow the intructions ,but I got stuck at step4. where do i paste those css codes:#left-sidebar-wrapper {
width: 220px;
float: left;
word-wrap: break-word;
overflow: hidden; ?
Good information but is very complicative. Instead a good 3 column template is a better option. But let my friends may view this article which I am bookmarking @ http://desidigg.slinkset.com
http://southspace.co.cc
I have search this article. And I found in here. Thank's a lot.
Great Tips!
extremely complicated process...very annoying....im lost at step 3...HELP!!!!!!!
welcome to the wow power leveling cheap Wow gold service site, buy cheap wow gold,wow gold,world of warcraft power leveling buy wow gold
Hi, so I tried uploading the .xml file to the 'html' section, and I get an error. I searched around a bit and I found a lot of people with the same problem, because lately blogger isn't working with uploading your own templates. Any help?
Congratulations!.. ashwini. Very nice job. Thanks for sharing.
fantastic...easy to follow...implemeted it in no time all...thanks matey..
^^
徵信, 徵信社, 徵信, 徵信社, 徵信, 徵信社,徵信, 徵信社, 徵信, 徵信社, 徵信, 徵信社,徵信, 徵信社,徵信, 徵信社,徵信, 徵信社,徵信, 徵信社,徵信, 徵信社,徵信, 徵信社,徵信, 徵信社,徵信, 徵信社,徵信, 徵信社,徵信, 徵信社,徵信, 徵信社,徵信, 徵信社,徵信, 徵信社,徵信, 徵信社,徵信, 徵信社,徵信, 徵信社,徵信, 徵信社,徵信, 徵信社,徵信, 徵信社,徵信, 徵信社,徵信, 徵信社,徵信, 徵信社,徵信, 徵信社,徵信, 徵信社,徵信, 徵信社,
徵信, 徵信社,徵信, 徵信社,徵信, 徵信社,徵信, 徵信社,徵信, 徵信社,徵信, 徵信社,徵信, 徵信社,徵信, 徵信社,徵信, 徵信社,徵信, 徵信社,徵信, 徵信社,徵信, 徵信社,徵信, 徵信社,徵信, 徵信社,徵信, 徵信社,徵信, 徵信社,徵信, 徵信社,徵信, 徵信社,徵信, 徵信社,徵信, 徵信社,徵信, 徵信社,徵信, 徵信社,徵信, 徵信社,徵信, 徵信社,徵信, 徵信社,徵信, 徵信社,
Hi good explanation actually i was looking for this since 6 months and now found answer. but in my template its startside and endside so i dont know how to do pls help me
#sidebar-wrapper {
display: inline; /* fixes a strange ie margin bug */
float: $endSide;
margin-top: 0;
margin-$endSide: 3px;
margin-bottom: 0;
margin-$startSide: 0;
width: 269px;
color: $textColor;
line-height: 1.4em;
font-size: 90%;
background: url(http://www.blogblog.com/thisaway_green/bg_sidebar.gif) repeat-x $startSide top;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar {
padding-top: 7px;
padding-$endSide: 11px;
padding-bottom: 0;
padding-$startSide: 14px;
background: url(http://www.blogblog.com/thisaway_green/bg_sidebar_arrow.gif) repeat-y 179px 0;
}
#sidebar .widget {
margin-bottom: 20px;
}
thanks in advance
Weaknesses of World Of Warcraft Gold the client-server model used by World of Warcraft have been wow power levelingexploited in order to crash the cluster of servers that aoc goldmake up a realm. Exploits also include characters being able to instantly Cheapest Wow Goldchange location or teleport. The situationbecame worse cheap wow goldwhen trying to coordinate activities across a number of playersor guilds on the same realm.World of Warcraft Lead Producer, stated that new realms would be introduced to warhammer goldrelieve the burden on existing ones. Existing realms would be upgraded.
Although the game wow gold follows a similar model to others in the genreand was noted for having wow gold cheapmany familiar concepts from roleplaying games, the new approaches gold4powerto reduce pauses between game encounters was well liked. At various times, World of Warcraft players have experienced problems with connecting to and logging in to wow gold for sale the game. Sudden server crashes that would force realms offline also occurred.
i used the template but it also stacks if you remove the profile part of your blog...great stuff though, I always wanted 3 columns and now I do! :)
Post a Comment
Please avoid hyper links in Comments. Any offensive comment will be deleted