How to Create a New 3 Column Layout on Blogger?

Hi bloggy readers,
3 Column Layout has been widely used by many bloggers across the blogosphere as a great layout on placing many useful gadgets in blog layout. They usually place this 3 column layout on the footer area of their blogs in order to make it easier for us, blogger, to finding the better position for our remaining widgets, such as Blogroll, Friend Blog Links, Popular Articles, and so on. Okay, are you interested on adding this 3 column layout to your blog? Well, let's get started then..


Here are the steps you need to follow if you want to make a 3 column layout on your blog.

1. Login to Blogger
To begin this tutorial, now go to Blogger.com and Log in to your Blogger account using your own username and password you've already registered before. By putting the correct username and password, Blogger will automatically process to your Blogger account and land to the Dashboard page.

2. Go to Edit HTML
In the Dashboard page, pick one of your blog and go to the Layout/Design page. In the Layout/Design page, now click at the sub-tab Edit HTML to begin editing the whole code of your blog template.

3. Finding the code
By pressing Ctrl + F button on the keyboard, now find the code below:

4. Copying and Pasting the code
After that, copy the CSS styling below and paste it over the ]]></b:skin>

5. Find the code
By pressing again Ctrl + F at the same time, find this code below:

6. Pasting the code
Now block and copy the code below and then paste it over the code on number 4.

7. Save the change
By pressing the Save Template button, now you can finally save the change you've just made and see the result.

The Configuration of 3 Column Layout

Anyway, regarding the 3 column layout code i gave you earlier in this tutorial, there are something you need to know. Now see the code at number 3 of this tutorial.
As you can see at the CSS styling of 3 column layout above, there are some configurations you can set here. For example, now take a look at the value i've already marked with the red color above. By changing the value from black to any other colors, you can set the whole background color of the column. For example, edit the code black with white or yellow.

Now, see the CSS of 3 column layout below:
In the CSS above, i've already marked the important segmen with red color. The value white indicates the font color of the whole column. So if you want to change the color of the font or letter, you can simply edit the code white with any other colors, for example: red or blue.

Okay, that's it for now about adding new 3 column layout to Blogger. Hopefully, i can explore more about this kind of topic, so we'll see you around.

Good Day Bloggers!!