GOT A TWO COLUMN BLOG?CHANGE YOUR 2 COLUMN MINIMA BLOG
TO 3 COLUMNS EASILY - BY YOURSELF
Blogging can really give one tremendous satisfaction. There's so much one can share with the world. I work using Blogger to set up my blogs and find it easy to work with. You'll get a variety of opinions as to which is the better blogging service to use, and many will be based upon the type of templates that come with that particular service.
When you blog, you have to decide what type of market you're blogging for. You might just one to share general information. If so, you may find that a two-column blog more than adequately covers your needs. You'll have one small column allowing you to set up a basic menu system. You might include previous posts, labels, and perhaps even an Adsense skyscraper or the like.
You might also want your blog to be fun. You must consider the purpose of your blog, because having a template – all pink with frilly flowers and the like surrounding your site won't do you any good if you're a "big man" wanting to share the latest technology news. Of course, if you're a young teenage girl, such a design will go down very well. You can also find templates with floating fairies surrounding the pages.
But what about those who are more serious? They want the formality of the general blog, BUT they want something more. When you join Blogger, you'll find a decent variety of two column templates available. But if you're like me, wanting to expand your bog out ever so slightly to include at least two main side bars and a middle section for the content, you'll want that third column – which you can't find anywhere on Blogger's choice of Templates.
Now, a warning is in order! You may start looking around at the various free template sites and notice 3-column templates which look terrific, and you'll want one of these. This is great, so long as you don't already have a blog running. Once your blog has been running for months and more – you must understand that everything – including all your fancy widgets (clocks, counters, lists and the like) have already been set up beautifully. You can certainly change your template at any time – using one of the free templates – but be warned, you may end up losing a lot of information you've already set up – most notably your linked-lists which may have taken you hours to set up! You simply don't want to lose those!
There are tutorials to help you through the process of restoring all the widgets – though this is not the subject of today's posting. The reason I'm not getting into it at this point, is because they can be quite time consuming and even then – if you should make one accidental mistake, you may find yourself having lost your hard work and having to re-set things up again. It won't be fun, and since blogging is about FUN – you don't want to find yourself in this snare.
So, having said that, let's turn our attention to the blog you're currently looking at. Actually, I love the Minima design. It's neat, simple and seems to do everything I want. It's got a business type look – professional and well-laid out. Only thing is – as mentioned before, you'll find that Blogger only gives you two columns.
When I began blogging I used to always use this design, but found myself in the situation of having now blogged for so long – unable to spend the necessary time and patience fiddling with things that have the potential of being lost. So I did some serious research into learning more about that 'fancy' HTML Template and CSS, so that I could understand how better to set things up myself *without* losing my old template and information.
I'd like to share with you just how easy it is to change various settings to turn your 2-column template into a 3-column template. As before, I'm going to be using the 2 column Minima Right-Side Template to work with. If you have the Left Side Minima (Minima-left) ie with the main body post on the right side of the thinner column, then simply change it to the right-side template (Minima) and follow me. You won't lose any of your gadgets and widgets by doing that – just that your blog will look the opposite way around.
Let's work through the necessary steps now:
1. Log in to your blog
2. Go to the "Layout"
3. Choose the "Edit HTML" tab
4. Expand the widgets by inserting a tick in the box
5. Do a search – Ctrl-F (Control Find) for #header-wrapper
6. You'll see something like this:
What this means is that your main heading element has a width of x pixels. In my case I have expanded my header width to be 980, though your number might still be something like 660 or the like. I have found 980 to expand things to be just right!
Also at the bottom of the header section, change the max-width to 980 as below:
Back to the tutorial:
7. Change the width to a width that suits you best. As I mentioned 980 works quite well.
8. Do a search for #Outer-Wrapper
9. You'll see something like this:
This tells you that the entire blog width from side to side is x pixels. Again, I have chosen 980 in order to make it equal to the header size. You can make it what you will, but start with this and then fiddle around afterwards
10. Your width may once again be something like 660. Change it to 980
11. Immediately after this block of code, insert the following:
What this does is to now add a column of 220 pixels on the left hand side of the main blog post area. You can make it any size you want of course – but keep it this way to start so that you'll get to see your blog in balance.
NOTE: If you are working with the Minima template which already has the smaller column on the left, you'll find yourself in trouble as this code inserts the column on the left side. For this reason – as mentioned above – make sure you are using the Minima with the smaller column on the right side before making these changes.
12. You've come a long way now. You're blog has now been increased in width size and you've added the additional column!
13. Just below the left-sidebar-wrapper, you'll see another piece of code which looks like this:
Again – pay attention to the width. In your case, your code may indicate something like 410. I have chosen to increase the amount to 500. What this does is to increase the size of my main blog post article area. You can keep it at 410, but then you'll have a large empty space on both sides. The point is to maximize screen space. So by increasing it to 500 pixels, you'll be getting the most for your "money".
14. Make sure your width is 500 instead of the usually set 410. If you wish to fiddle with this amount, by all means, find something you're comfortable with.
15. You're DONE for now!
What you've now done is to increase the size of the entire blog space area to allow for the new column. You've then inserted the new 3rd column, and you've increased the size of the blog post area. You've now got a 3 column blog without having lost anything!
16. If you wish to make things symmetrical, you may wish to increase the size of your footer area to be the same as the header area. This can easily be done by searching for #footer and finding the following piece of text appearing at the bottom:
You'll probably find that the width is set at the usual 660 pixels or similar. I have changed mine to be 880 pixels. 970, 980 or 990 does a great job too. Experiment!
17. Make sure your width is now set at 880px
18. In the same section of the footer scroll to find this:
19. Locate the "main wrapper" id which looks like this:
20. Now paste the following code immediately above the main wrapper id:
18. Happy with your new template? SAVE YOUR TEMPLATE
19. DONE DONE and DONE!
When you view your blog for the first time it will still not look 100% correct. What you will now need to do is to rearrange all your page elements as you wish them ie. so that some of your widgets will appear on the left of the main blog post area, and some will appear on the right.
To rearrange:
1. Click on the Layout option
2. On the Page Elements page you will see how your blog will look after publishing. Here you must delete the newly created temporary widgets and move the remainder elements around so that your page will take on it's new appearance.
When you blog, you have to decide what type of market you're blogging for. You might just one to share general information. If so, you may find that a two-column blog more than adequately covers your needs. You'll have one small column allowing you to set up a basic menu system. You might include previous posts, labels, and perhaps even an Adsense skyscraper or the like.
You might also want your blog to be fun. You must consider the purpose of your blog, because having a template – all pink with frilly flowers and the like surrounding your site won't do you any good if you're a "big man" wanting to share the latest technology news. Of course, if you're a young teenage girl, such a design will go down very well. You can also find templates with floating fairies surrounding the pages.
But what about those who are more serious? They want the formality of the general blog, BUT they want something more. When you join Blogger, you'll find a decent variety of two column templates available. But if you're like me, wanting to expand your bog out ever so slightly to include at least two main side bars and a middle section for the content, you'll want that third column – which you can't find anywhere on Blogger's choice of Templates.
Now, a warning is in order! You may start looking around at the various free template sites and notice 3-column templates which look terrific, and you'll want one of these. This is great, so long as you don't already have a blog running. Once your blog has been running for months and more – you must understand that everything – including all your fancy widgets (clocks, counters, lists and the like) have already been set up beautifully. You can certainly change your template at any time – using one of the free templates – but be warned, you may end up losing a lot of information you've already set up – most notably your linked-lists which may have taken you hours to set up! You simply don't want to lose those!
There are tutorials to help you through the process of restoring all the widgets – though this is not the subject of today's posting. The reason I'm not getting into it at this point, is because they can be quite time consuming and even then – if you should make one accidental mistake, you may find yourself having lost your hard work and having to re-set things up again. It won't be fun, and since blogging is about FUN – you don't want to find yourself in this snare.
So, having said that, let's turn our attention to the blog you're currently looking at. Actually, I love the Minima design. It's neat, simple and seems to do everything I want. It's got a business type look – professional and well-laid out. Only thing is – as mentioned before, you'll find that Blogger only gives you two columns.
When I began blogging I used to always use this design, but found myself in the situation of having now blogged for so long – unable to spend the necessary time and patience fiddling with things that have the potential of being lost. So I did some serious research into learning more about that 'fancy' HTML Template and CSS, so that I could understand how better to set things up myself *without* losing my old template and information.
I'd like to share with you just how easy it is to change various settings to turn your 2-column template into a 3-column template. As before, I'm going to be using the 2 column Minima Right-Side Template to work with. If you have the Left Side Minima (Minima-left) ie with the main body post on the right side of the thinner column, then simply change it to the right-side template (Minima) and follow me. You won't lose any of your gadgets and widgets by doing that – just that your blog will look the opposite way around.
Let's work through the necessary steps now:
1. Log in to your blog
2. Go to the "Layout"
3. Choose the "Edit HTML" tab
4. Expand the widgets by inserting a tick in the box
5. Do a search – Ctrl-F (Control Find) for #header-wrapper
6. You'll see something like this:
#header-wrapper {
width:980px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
What this means is that your main heading element has a width of x pixels. In my case I have expanded my header width to be 980, though your number might still be something like 660 or the like. I have found 980 to expand things to be just right!
Also at the bottom of the header section, change the max-width to 980 as below:
#description {
margin:0 5px 5px;
padding:0 20px 20px;
border:1px solid #eee;
border-width:0 1px 1px;
max-width:980px;
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#999;
}
Back to the tutorial:
7. Change the width to a width that suits you best. As I mentioned 980 works quite well.
8. Do a search for #Outer-Wrapper
9. You'll see something like this:
#outer-wrapper {
width: 980px;
margin:0 auto;
padding:5px;
text-align:$startSide;
font: $bodyfont;
}
This tells you that the entire blog width from side to side is x pixels. Again, I have chosen 980 in order to make it equal to the header size. You can make it what you will, but start with this and then fiddle around afterwards
10. Your width may once again be something like 660. Change it to 980
11. Immediately after this block of code, insert the following:
#left-sidebar-wrapper {
width: 220px;
float: $startSide;
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 */
}
What this does is to now add a column of 220 pixels on the left hand side of the main blog post area. You can make it any size you want of course – but keep it this way to start so that you'll get to see your blog in balance.
NOTE: If you are working with the Minima template which already has the smaller column on the left, you'll find yourself in trouble as this code inserts the column on the left side. For this reason – as mentioned above – make sure you are using the Minima with the smaller column on the right side before making these changes.
12. You've come a long way now. You're blog has now been increased in width size and you've added the additional column!
13. Just below the left-sidebar-wrapper, you'll see another piece of code which looks like this:
#main-wrapper {
width: 500px;
float: $startSide;
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 */
}
Again – pay attention to the width. In your case, your code may indicate something like 410. I have chosen to increase the amount to 500. What this does is to increase the size of my main blog post article area. You can keep it at 410, but then you'll have a large empty space on both sides. The point is to maximize screen space. So by increasing it to 500 pixels, you'll be getting the most for your "money".
14. Make sure your width is 500 instead of the usually set 410. If you wish to fiddle with this amount, by all means, find something you're comfortable with.
15. You're DONE for now!
What you've now done is to increase the size of the entire blog space area to allow for the new column. You've then inserted the new 3rd column, and you've increased the size of the blog post area. You've now got a 3 column blog without having lost anything!
16. If you wish to make things symmetrical, you may wish to increase the size of your footer area to be the same as the header area. This can easily be done by searching for #footer and finding the following piece of text appearing at the bottom:
#footer {
width:880px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
You'll probably find that the width is set at the usual 660 pixels or similar. I have changed mine to be 880 pixels. 970, 980 or 990 does a great job too. Experiment!
17. Make sure your width is now set at 880px
18. In the same section of the footer scroll to find this:
<div id='content-wrapper'>
19. Locate the "main wrapper" id which looks like this:
<div id='main-wrapper'>
20. Now paste the following code immediately above the main wrapper id:
<div id='left-sidebar-wrapper'>
<b:section class='sidebar' id='left-sidebar' preferred='yes'>
<b:widget id='BloggerButton1' locked='false' title='' type='BloggerButton'/>
</b:section>
</div>
18. Happy with your new template? SAVE YOUR TEMPLATE
19. DONE DONE and DONE!
When you view your blog for the first time it will still not look 100% correct. What you will now need to do is to rearrange all your page elements as you wish them ie. so that some of your widgets will appear on the left of the main blog post area, and some will appear on the right.
To rearrange:
1. Click on the Layout option
2. On the Page Elements page you will see how your blog will look after publishing. Here you must delete the newly created temporary widgets and move the remainder elements around so that your page will take on it's new appearance.
No comments:
Post a Comment