How to Create Two Column CSS on Blogger Layout?

Filed Under : , ,

two column CSS
Blogger two column CSS added to your Blog Layout
Hi bloggy readers,
In the article series of creating columns in Blogger layout that i wrote in my older posts, i already revealed about how to create 3 columns and also 4 column elements in Blogger layout. But i think it would be nice if i can complete those series with this last one, the tutorial in creating blogger two column CSS on Blogger layout.

As i mentioned in my previous post, i already told you that placing lots of widgets on your blog can really burden Google when reading the whole content of your post, that’s why i strongly suggest you to reduce the use of unimportant elements from your blog.

In my opinion, the important widgets that should be placed on your blog are:
  1. The widgets that can help you increase traffic and pageview performance (such as recent posts and related posts widget), 
  2. The widgets that can help you build subscribers and followers (such as FeedBurner and Google Followers), and also,
  3. The widgets that can spread out your posts around the social medias (such as TweetMeme and Digg it button, not to mention the Add This button). 
So if you are interested in creating an extra space with this two column CSS, just read the whole post.

Actually, the steps to make this two column CSS is similar with the steps in creating 3 columns and 4 columns layout. So if you've already read that first and also the second post, i bet you can just skip the beginning part those articles and focus on the step where you need to paste the two column CSS inside your blog template. But if you are still new with this topic, you can follow all the process in the orderly fashion.

1. Login to Blogger
Sign in to your Blogger account.

2. Go to the Layout/Design
In the Dashboard page, go to the Layout/Design tab.

3. Go to Edit HTML
In the Layout/Design tab, go to the Edit HTML tab to configure the layout of your blog.

Edit HTML in blogger

Before any attempt to edit your blog template, i think it's a wise decision to firstly create a back up template of your blog. Now click at the link Download Full Template.

save blogs templates

4. Find the code
After adjusting the Outer and Header layout, now press Ctrl + F from your keyboard and find the code ]]></b:skin>.

5. Copy the two column CSS
To install the two column CSS, copy the code below, and then paste it before the code section ]]></b:skin>
/* Two column CSS
---------------------------- */
#2column {
width: 100%;
position: relative;
clear:both;
margin: 0 auto;
color:black;
float: left;
background:white;
padding: 15px 0 15px 0;
}

#2column h2 {
padding: 5px 0 2px 0;
margin: 0 0 10px 0;
color:#000000;
font-size: 24px;
letter-spacing: -1px;
border-bottom: 1px solid #fff;
}

#2column ul {
padding: 0;
margin: 0;
}

#2column ul li {
line-height: 26px;
list-style-type: none;
border-bottom: 1px dashed #031c5d;
}

#2column ul li a {
display: block;
padding: 0 10px;
color:#000000;
text-decoration: none;
}

#2column ul li a:hover {
background:black;
}

#left-2column { /* this is the left column */
width: 50%;
float: left;
padding-left:10px;
}

#right-2column { /* the middle column */
width: 50%;
float: left;
padding-left:10px;
}

blogger 2 columns CSS in Edit HTML

6. Copy the div tag codes of the two column CSS
To make the two column CSS above appears, now copy the code below.
<div id='2column'>
<b:section class='2column' id='left-2column' preferred='yes'/>
<b:section class='2column' id='right-2column' preferred='yes'/>
</div>

7. Paste the code
Now if you want to make this two column CSS to appear on your footer position or below the header position, paste the code sections on number 6 above in one of these positions (You must pick on of these positions, either the footer position or below the header).

The Footer Position

If you want to put the two column CSS before the footer position, paste the code before the code below.
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

Blogger 2 columns CSS on the footer HTML

Below the header position

If you want to put the two column CSS after the header, just paste the code after the code below:
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1'>
<b:widget id='Header1' locked='true' title='Pictures (Header)' type='Header'/>
</b:section>
</div>

Blogger 2 columns CSS on below the header in HTML

8. Save Templates
Now save the template by pushing the Save Templates button.

9. See the result
To see the result, you must firstly go to the Page Element and then if the two column CSS has been successfully added to your layout, you will see the new layout contains 2 new element you've just added. Now go to the Page Element tab.

go to Page Element in blogger
If it works, in the Page Element tab, you will see that 2 new elements have been added to your blog layout.

Well, what do you think? Is it working on your blog, or not? Just leave a comment or question here on the comment box below if you have any problem in implementing this article. 

Filed Under : , ,
You might also like to read :
Share This Article to Other People Across the World !
Thanks!
Get the fresh updates from Whatmakesblog.com!
To get updates from this blog, just enter your email address in the below subscription form and then click Subscribe.
Your email address will not be shared to any third party
Delivered by FeedBurner
edit post

3 comments:

Anish Sharma said...

thanks for the tutorial..it will help me redesign my blog in a new way

Official AndreasCY said...

for me it didnt worked unfortunately..i think ive done it correctly cz i have a little experience so any help would be good :)

here is my blog :

http://officialandreascy.blogspot.com

html5 music player said...

Thanks for sharing your info. I really appreciate your efforts and I will be waiting for your further write ups thanks once again.
html5 media player

Post a Comment

Copyright © 2013 Whatmakesblog.com All Rights Reserved. Reproduction in whole or in part or in any form or medium without written permission is prohibited.
Web Theme Designed by Daniel Likin
Disclaimer | Privacy Policy | Contact Us Google Analytics Alternative