credit to http://hubpages.com/hub/Add-columns-to-Blogger-Footer-How-to-Add-Three-Columns-to-Blogger-Footer-Section
-----------------------------------------------------
The default Blogger template has only one column footer. If you surfing Internet frequently, you will see that many websites and blogs has three column footer. This three column footer is becoming very popular and spreading rapidly in Web 2.0. It's quite easy to implement this type of three column footer in your Blogger template. Moreover, if you do so then you will see some of the good advantages like:
-----------------------------------------------------
The default Blogger template has only one column footer. If you surfing Internet frequently, you will see that many websites and blogs has three column footer. This three column footer is becoming very popular and spreading rapidly in Web 2.0. It's quite easy to implement this type of three column footer in your Blogger template. Moreover, if you do so then you will see some of the good advantages like:
- You will get enough valuable space for your widgets.
- You can add/replace more gadgets/widgets.
- You can rearrange all the gadgets/widgets.
- If you place all the biggest gadgets at the footer section, the main content will be loaded faster.
- It will also contribute your blog design as the modern Web 2.0.
Steps to add three columns to Blogger footer section
Follow the following steps to add three column to Blogger footer section:
Step 1: Back-up your existing blog
Before any type of modification of your blog template code, it's very essential to back-up your existing blog template. You may take backup only the template or the widgets (gadgets) only or you may take the complete back-up of your blogger blog. I already discussed the process of back-up in other pages. To know the process of back-up, you may follow the following pages:
Step 2: Remove all widgets (gadgets) from the footer section
Before doing any change of your Blogger template code, go to your blog's layout and just see whether there is any widget to the footer section. If there is any widget (gadget) then please remove them from the footer section. Alternately, you can drag-and-drop all the widgets form the footer section to anywhere (sidebars or below the main blog post etc.) to the template. After removing all the widgets from the footer, follow the following steps.
Step 3: Adding CSS code for the footer section
This section of code will be the definition of your blog's footer column. All these are used for all the columns design. In this page, I just mentioned the code of the footer columns. You may customize according to your wish by using several colors, lines etc. All these will be discussed in the next tutorial.
Now, go to your template code section. For details, How to find and edit blogspot template code?
Before adding CSS code to your blog footer, first find the following two lines of code:
Now, go to your template code section. For details, How to find and edit blogspot template code?
Before adding CSS code to your blog footer, first find the following two lines of code:
You may use Ctrl + F key to find those texts in Firefox. Please, copy the following code and paste the code before the searched texts i.e. the code ]]> .
- ]]>b:skin>
- head>
- /*
- Code is developed by:
- http://hubpages.com/_rt3/profile/blog
- Blogspot Tutorial Index:
- http://hubpages.com/_rt3/hub/blog-index
- Code Description:
- Codes for adding columns (3 columns) in the blogger footer section
- */
- #footer-columns{
- border-top:1px dotted #999999;
- clear:both;
- margin:0 auto;
- }
- .column1{
- padding: 0px 5px 3px 5px;
- width: 30%;
- float: left;
- margin:3px;
- text-align: left;
- }
- .column2{
- padding: 0px 5px 3px 5px;
- width: 30%;
- float: left;
- margin:3px 3px 3px 5px;
- text-align: left;
- }
- .column3{
- padding: 0px 5px 3px 5px;
- width: 30%;
- float: right;
- margin:3px;
- text-align: left;
- }
- .addwidget {
- padding: 0 0 0 0;
- }
- #footer-columns ul {
- list-style:none;
- margin:0 0 0;
- padding:0 0 0;
- }
- #footer-columns li {
- margin:0;
- padding-top:0;
- padding-left:0;
- padding-bottom:.25em;
- padding-right:15px;
- text-indent:-15px;
- line-height:1.5em;
- }
- body#layout #footer-columns {
- width: 100%;
- margin-left: auto;
- margin-right: auto;
- }
- body#layout .column1 {
- width: 32%;
- float: left;
- }
- body#layout .column2 {
- width: 32%;
- float: left;
- }
- body#layout .column3 {
- width: 32%;
- float: right;
- }
Step 4: Add containers to hold all the footer columns
After adding CSS code, it's time to add the containers for the footer. To add container, first search the following code:
- <b:section class='footer' id='footer'/>
Select the above line of code from your blog template and delete the entire line from the template code and paste the following lines of code there:
- <div id='footer-columns'>
- <div class='column1'>
- <b:section class='addwidget' id='col1' preferred='yes' style='float:left;'>
- b:section>
- div>
- <div class='column2'>
- <b:section class='addwidget' id='col2' preferred='yes' style='float:left;'>
- b:section>
- div>
- <div class='column3'>
- <b:section class='addwidget' id='col3' preferred='yes' style='float:right;'>
- b:section>
- div>
- <div style='clear:both;'/>
- div>
- <b:section class='footer' id='footer'/>
Step 5: Save the modified template's work
After successfully finishing the above tasks, save the modified code by clicking Save Template button to save the whole modified code. Now, your blog has three columns in the footer section.
I think, you are successful and finished adding three columns in your blog footer section. If you face any difficulties then send your feedback in the comment section. I will try to solve your problem.
Live View
I already have implemented the above tutorial into a blog. The codes are exactly same and there is not medication inside the code. You may see the effect of three columns footer section, by following the following link:
Click here to see the live effect of this page tutorial.
Click here to see the live effect of this page tutorial.
No comments:
Post a Comment