How to Make a Three-Column Blogger Template
In the recent comments, many people are curious in how to make a three-column blogger. I admit that three-columns blog is more blogger friendly that two-columns blog, since it is much more spacious and you can put more materials you want into it. There are many free and ready-to-use three columns blog available in the internet, and you can easily find the one that best suit you. However, what about if you want to turn your existing blog into a three-column one? Is it possible?
No worry, it is not too difficult. Switching the default two-column layout to three requires a few modifications to your template. Here's how to proceed:
1. As with other modifications, you should first back up your current template into somewhere else , just in case anything goes wrong. I usually just copy it to a MS Word document on my desktop. (Open the Template tab, click inside the template area, press Control+A to select the entire document, and Control+C to copy; then switch to Notepad, press Control+V to paste the document, and Save.)
2. Go back to your Blogger template and scroll to the embedded stylesheet at the top. Add a new style to format the left-hand column. The template should look like this:
#SidebarLeft {
position:relative;
width: 20%;
padding-right:.5%;
float:left;
margin-left:.5%;
clear: none;
text-align: left;
}
3. Locate the HTML part of the document. To create a left-hand column, as in this blog, open the SidebarLeft div (type ) immediately after the tag. Put a closing before the Main div. This partitions off the left 20% of the screen for a sidebar — now you can put any content you like between this pair of divs. In this blog, I have placed the Archives on the left, along with categories, popular posts, and RSS feed icons. (Note: If you are using another template, the style names may differ, but the same principles apply.)
4. Return to the top of the template and tweak the other main content styles to accommodate the new design element. This time, you'll need to make the central text area narrower and set its left and right margins to auto. You may also need to reduce the width of the existing right-hand column. Experiment with width, padding, and borders of the styles until you have a design that works. Here are the settings recommended:
No worry, it is not too difficult. Switching the default two-column layout to three requires a few modifications to your template. Here's how to proceed:
1. As with other modifications, you should first back up your current template into somewhere else , just in case anything goes wrong. I usually just copy it to a MS Word document on my desktop. (Open the Template tab, click inside the template area, press Control+A to select the entire document, and Control+C to copy; then switch to Notepad, press Control+V to paste the document, and Save.)
2. Go back to your Blogger template and scroll to the embedded stylesheet at the top. Add a new style to format the left-hand column. The template should look like this:
#SidebarLeft {
position:relative;
width: 20%;
padding-right:.5%;
float:left;
margin-left:.5%;
clear: none;
text-align: left;
}
3. Locate the HTML part of the document. To create a left-hand column, as in this blog, open the SidebarLeft div (type ) immediately after the tag. Put a closing before the Main div. This partitions off the left 20% of the screen for a sidebar — now you can put any content you like between this pair of divs. In this blog, I have placed the Archives on the left, along with categories, popular posts, and RSS feed icons. (Note: If you are using another template, the style names may differ, but the same principles apply.)
4. Return to the top of the template and tweak the other main content styles to accommodate the new design element. This time, you'll need to make the central text area narrower and set its left and right margins to auto. You may also need to reduce the width of the existing right-hand column. Experiment with width, padding, and borders of the styles until you have a design that works. Here are the settings recommended:
#content {
width:78%;
margin-top:15px;
margin-left: auto !important;
margin-right: auto !important;
padding:0;
text-align:left;
}
#main {
width:53.5%;
float:left;
padding-left:1.5%;
padding-right:1%;
border-left:1px dashed #ccc;
border-right:1px dashed #ccc;
}
#sidebar {
width:19.5%;
float:right;
margin-right:.5%;
padding-left:.5%;
}
5. Optional: There may be other styles based on the original Sidebar style that format elements within a column. In Doug Bowman's Minima template, for example, the #Sidebar style is specified with three contextual selectors (ul, li, and p). These control the formatting of bullets and paragraphs in the sidebars. If you want similar formatting for the other side of the screen, locate and clone these styles under the #SidebarLeft designation, as follows:
#SidebarLeft ul {
margin:0 0 1.5em;
padding:0 0 1.5em;
border-bottom:1px dashed #ccc;
list-style:none;
}
#SidebarLeft li {
margin:0;
padding:0 0 .25em 15px;
text-indent:-15px;
line-height:1.5em;
}
#SidebarLeft p {
color:#666;
line-height:1.5em;
}
6. Save your template changes and preview your blog. If you're satisfied, re-publish and share your handiwork with the world!
This is the procedures you need to make your three column blogger template. However, to me, I always think it would be better if you choose a ready-to-use template in the web. They should be in good quality and easier to use.
To get more Adsense secrets, you can subscribe my blog for FREE!
posted by Joe Li @ 12:19 PM
28 comments
links to this post
28 Comments:
hi...i m a blogger and i have iTheme for my blog. So, can u please send me the 3 column iTheme for my blog as i dont know much about editing templates?
Hi suril,
Try to search in the internet, and see whether there are any templates with iTheme. Hope you success.
Hi,
I have been thinking lately of making my blogspot a 3 column, and now after seeng this article I have decided that I'm changing it.
Thanks for the tip.
Mary
Hi HopeforAfrica,
You are welcome. I hope you can enjoy with the rest of my posts too. Please put a backlink to my site to help more Adsense newbies.
Hello from New York..and DAYTONA Beach Florida...:-D
Love your info...
My Dear friend is from your area..but a bit older..love your site...
I am new to adsense and got your info from their forum..
just wanted to compliment your site and share mine...
http://www.jez-sez.com/notes.html
Hope all is well in your side of the Globe :-D
JEZ
Hi Jez,
Thank you for your comment. I am glad you find this information useful to you.
Please put a back link to my site too.
This comment has been removed because it linked to malicious content. Learn more.
Hi,
Why don't you give a try to Adsense, and earn money from it? You are right, there are so many websites out there which are violating the TOS. I will report soon.
By the way, I have been looking up on the Internet and I have found some tools which are really cools to monitor the positioning of the competition, as well as seeing their tips and tricks. If you are interested, I advised to you have a look. It seems they are free: http://www.lineared.com/es/recuperar/en-datos-posiciones-google-msn-yahoo.htm
Hi Anne,
Thanks for your comment as well as your link.
Hi Decoder,
What a blog! Hats off to you..Complementing you could be a shame to English language coz u may not find enough words there,to shower praise on you..
Well, I have a technical question..
I have an ADSL modem with a dynamic IP and my connection is shared by 2 computers..I am afraid if I host my website from my connection and install Adsense on it.. I may be warned for any accidental self-clicking and my account could be permanently disabled.
what are your thoughts on this?
Do you advise me to have a separate internet connection dedicated to Adsense related activities alone.(like account checking, content expansion, website review and so on)??
The physical and Mac addresses of my computer would still be same.. So, even if I operate on a separate I/C, will these things be an issue?
How can I safely operate my Adsense account without violating any of the Google's guidelines?
I am desperate for solutions..Kindly help me..I will show my appreciation by keeping a backlink on my site and anything else that I can to return the favor, for you seem to be ultimate in Adsense..
Thanks buddy,
Mike
Hi mike,
Thanks for your comment and question.
Well, your situation is pretty much like mine. I am not too concerned on that, since another computer sharing the same IP is used by my brother, and I have asked him not to click any ads in my sites. It really depends on who are going to use another computer of yours. If it is shared to the public or to a big group of people, then I suggest you to get a separate IP connection.
The physical and Mac addresses are not a problem in this situation, since we are dealing wih the self-clicking from the same IP address.
Hope that helps, and look forward to your to your reply as well as your backlink.
Hi decoder, it is mike again..
Thanks 4 ur prompt response.. I can now go ahead with confidence..
I plan to host my site in 15 to 20 days time.. I wud give my site addres and add a backlink to mine..
I respect knowledgeable guys like u.. I hope u do not mistake my complement as flattery..
you ROCK mann.. All the best..
Mike
Hi Mike,
No, I treasure your comment a lot. I sincerely hope you can be one of my regular readers. I know you will, won't you?
Will this work for classic blogger templates? Because I am getting a custom blog template that's really cool, but she only make them 2-column for blogger classic.
Also, is it possible to turn a template that is coded for blogger classic into a new blogger template?
Hi Andrew,
Yes, that definitely works for class template as well. Well, for your second question, most of the template can upgrade to the new blogger, and you need to try.
Thanks a lot for this info.
Arg, I wish I could understand HTML! If I gave you my address and password, could you just add that in for me? I'd be happy to link back to your page! I'm so haphazard when it comes to these things. If you would let me know, I'd greatly appreciate it!
<3 Jebbica
hi, i already have a three-column template but when i transferred to ftp publishing, it reverted to the dreary classic one. please help me how to use my old three column template back again. Thnx...
Hi bee,
Thanks for your comment.
Hi Jebbica,
Sure, no problem. I will contact you shortly.
Hi mimay,
It shouldn't be the ftp problem. I guess it is most likely related to the saving error.
hello there
i'm having some trouble with this, no idea why
i think it's just confusion over your third statement, i'm having trouble knowing exactly where i have to put the div =/
when i try to put that code in anywhere it doesn't work (the template stays the same as before)
maybe posting an example will help?
Hi veedo,
It is hard to give you an example. This HTML solution is for those who are really professional in HTML. If you are not too familiar with that, I suggest you to search the existing templates from the web.
Thanks for reading my articles, and should be grateful if you can provide me a backlink to my site.
hi
i am having a blog
jazzup-blog.com
i want to make it
03 column
could you pls help me in this regard
Hi Jazzup,
You can follow the steps mentioned above. It is easy to do and follow. Or please list down your specific problem you encountered.
Hey, thanks for your help! I finally just broke down and got my own Wordpress blog, gravyandbiscuits.com, and basically abandoned my puny little blogger blogs! I really appreciate your offer to help me, though. I think I'm getting at least a little better with HTML. :-)
J
Hi Jessica,
Nice to see you come back again. Please subscribe my blog and put a back link to my blog as well.
Thanks.
Post a Comment
Links to this post:
Create a Link
<< Home