So do you want to make this? Ok this tip will help you to make 3 column footer , I will guide you how to make 4 column in the next post.
Look at this pic below , you will see the 3-columns:
Go to Layout>Edit HTML in your Blogger dashboard, and do not check the "expand widget templates" box (this simplifies the process, and don't forget to back up your template by clicking on Download full template except you are good at HTML design.)
Next try your best to find each line or press Ctrl F for search box to find this code:
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>Please note that this particular section may be called something slightly different in your template, eg: "footer-wrap" or "footer". In the case of Rounders templates, you may notice that there are in fact two DIV sections around the footer section. In any case, all we need to change is the line highlighted in red.
Now replace the red code by the whole code below:
<div id='footer-column-container'>
<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>
</div>
<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
</div>
<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>
</div>
<div style='clear:both;'/>
<p>
<hr align='center' color='#5d5d54' width='90%'/></p>
<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>
<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text2' locked='false' title='' type='Text'/>
</b:section>
</div>
<div style='clear:both;'/>
</div>Now you should Save you template , if you have an error at this stage, check your template and try to put the code correctly.The green code is the color code for horizontal line that I have added for this footer , if you want to change it by another color , you can view here to get much more color code.
One more step left : add CSS code ( this is the code for the footer to appear on your blog).
This time, you need to find the closing </b:skin> tag ( it is always set before the <head> tag) then add this code before it :
#footer-column-container {
clear:both;
}
.footer-column {
padding: 10px;
}All done , now you have created 3-column footer on your blog , place any widgets you like here.
If you have any problem please leave me a comment , I will help you.
Zen
16 comments:
thanks for the tips really interesting
I think this is really neat
i like ur website. thanks for this comment posting...
more templates http://www.itemplatez.com
it's not working for me , why ?
@Amaresh Ch Das
It is just like the 4 column , with the same steps.There was no problem and I have tested again ,maybe you have put the code in the wrong place.
i am using Revolution lifestyle theme and cant find the code 00 01 02 anywhere in my template
@Paritosh What are u talking about ? I dont understand,please tell me clearly ? What is 00 01 02 ? If you can not find the code that i have told you,you can find the similar code,
For example,I told you to find the
<div class =comment:body>
you can find the similar one like this :
<div class = comment:block>
Thanks
it still not working
i dont expand the HTML code
and i got 3 that have wrapper/fotter
can ue help me on this
http://www.blogger.com/html?blogID=5852364832911980037
@atiey_92
Please get the last line has wrapper footer.I think your current template is very diversity and complex.1st, you should back up your template by clicking "download full template", then try one by one the wrapper footer, but try the last 1st.
And remember, paste the code exactly instead of the red code ok ?
i have try one by one but
its still dont work,
do ue have any other ideas?
@iEychiEy
Ok, maybe you have to click on "Revert template to default" then try again.Because some templates are not similar.The 3 column footer which I am using on Zenplate is this.I can't see what is the problem.
Can you find the
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
i tried the same .. still giving error like missed end tag div and body
after that i made change but still facing same!!!
have a look
It's hard for me to check huh ? I use it and I found no problem, but all of you have a trouble.Maybe I have to find out where the error is.
thanks, better do that and let me know,,,
Will you link to my blog then i ll link to ypu blogs so that our traffic will increase
thanks,
amaresh
what do u think that one should change his template again and again?
can you tell me how is my blogger template
www.tips-allover.blogspot.com
@nomita
What do you mean ? I dont understand? What changes?
What do you want me to say about your blog without the word "too simple"?
not good ...
Post a Comment
Thanks for reading , if you have any problem please leave me a comment here I will help you by my best.Please note that you put the friendly words tohelp each other to improving and developing these tips to be better,or the best way for you to track my blog is subscribing my Feed.You are always welcome on Zenplate.
Best regard
Zen