BEST VIEW with FireFox 3.5x

27.1.09

Add 3 Widget on Footer

AS part of a 3 column template modifications, then we can add a 3 column widget at the bottom of the blog.
It also helps that all the scripts on the side moved to the bottom of the blog, so the blog could be loading lighter.
1). Login => Go to Layout => Edit HTML.
Leave the Expand Widget unchecked.
Backup your template.

2). Find this section :
]]></B:SKIN>


3). Right above the section, paste this code :
#footer-column-vista {
clear:both;
}

.footer-column {
padding: 10px;
}

4). Scroll down to end, find this section :
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

5). paste this code below into the highlighted red code
(change the code in Red with this new script)

<div id='footer-column-vista'>
<div id='footer2' style='width: 300px; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='vist1' preferred='yes' style='float:left;'>
<b:widget id='HTML2' locked='false' title='Widget 1' type='HTML'/>
</b:section>
</div>
<div id='footer3' style='width: 280px; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='vist2' preferred='yes' style='float:left;'>
<b:widget id='HTML3' locked='false' title='Widget 2' type='HTML'/>
</b:section>
</div>

<div id='footer4' style='width: 300px; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='vist3' preferred='yes' style='float:right;'>
<b:widget id='HTML4' locked='false' title='Widget 3' type='HTML'/>
</b:section>
</div>
<div style='clear:both;'/>
<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>
<b:section class='footer' id='vist-bottom' preferred='yes'>
<b:widget id='Text1' locked='false' title='This is footer place' type='Text'/>
</b:section>
</div>
<div style='clear:both;'/>
</div>
6). You can adjust a few code like :
Widget ID : HTML no, Text no according to your existing widget.
Width : in px or % (300px or 30%) not exceeding Outer wrapper width

Save your template and view the result.
I have parse all the script so it doesn't need a frame to show HTML on this blog.
And now you will get 3 column widget in footer.
I will tell you how to modified this script into 4 or 5 widget on footer later.
Post a comment and question if you have any trouble.
Thank you.

4 comments:

linkmoko said...

blogwalking. nice blog. please feel free to visit my blog. thanks.

Anas said...

wow cool txs it worked^^
im really new in blogger,if u want u canvisit my blog too^^

Joel P. said...

Looks like it should work to me, but when I try to add this to my blog template, I get an xml error saying a div tag has been left open. I can't find it-- I made very sure to only paste over the code you mentioned, I haven't deleted any /div tags...

Vista SG Admin said...

To Joel P.
Thanks for your comment. I have visited your jtrek blog. Which i seen you have 860 px width divided into : 580px for main wrapper and 226px for sidebar.
Try to modify my script above and change this section carefully =
1) adjust footer width into : 270 / 270 / 270px
2) change the HTML number 2,3,4 into HTML 7,8,9
3) change the widget number 1,2,3 into 7,8,9
4) change id Footer number 2,3,4 into 7,8,9
Thats all, and supposedly it will works well.
Let me know if you can do it.
Good luck friend.

:) ;) :D :X :P :* =(( :O X( B-) :-)) =)) O:-) :-B =; i-) 8-| :-$ :[-( =P~ :(|) @};- %%;- (~~) ~o) 8-X [-X :-@ :-J (*) :-C :-?? %-( :-Q :BZ

Post a Comment

DON'T SPAM - YOU CAN WRITE COMMENTS WITH ANY LANGUAGE
THANK YOU

 
VISTA SG © 2008-2009 All rights reserved. Powered By Vista SG - Top Informative Blog | Contact Us | WebMaster Account | Edit Acc | Go ToP