This blog content is to help bloggers specially blogspot.com bloggers to have tips and tricks few hacks to make their blog look good to people and even to google bots



Create 4 coloum Footer in Blogger

How to Add 4 Coloum Footer in Blogger

This article about to create 4 coloum footer section in blogspot templates. In default blogspot has only one coloum in which you can put html code of any thing, but if you want to divide it, you can do easily.Follow this article step by step, if you have any difficulty you can ask, i will be happy to help.


Step-1 : Login your blogger Account.

Step-2 : Go to Layout and then edit HTML, click ctrl F from your keyboard findout code given in box below by copy paste in this popup search box.


<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div

Step-3 : Replace the whole code in red with code given below this step


<div id='footer-column-container'>
<div id='footer1' style='width: 225px; float: left; margin:0; '>
<b:section class='footer-column' id='footer-column-1' preferred='yes' style='float:left;'>
<b:widget id='Text1' locked='false' title='About B-G' type='Text'/>

</b:section>
</div>

<div id='footer2' style='width: 225px; float: left; margin:0; '>
<b:section class='footer-column' id='footer-column-2' preferred='yes' style='float:left;'>
<b:widget id='Text4' locked='false' title='About Author' type='Text'/>
</b:section>
</div>

<div id='footer3' style='width: 225px; float: right; margin:0; '>
<b:section class='footer-column' id='footer-column-3' preferred='yes' style='float:right;'>
<b:widget id='Text3' locked='false' title='Subscribe in Reader' type='Text'/>
</b:section>
</div>

<div id='footer4' style='width: 225px; float: right; margin:0; '>
<b:section class='footer-column' id='footer-column-4' preferred='yes' style='float:right;'>
<b:widget id='Text2' locked='false' title='Access B-G on Go' type='Text'/>
</b:section>
</div>


<div style='clear:both;'/>
</div>

Step-4 : Now last step findout this line in template ]]></b:skin> and copy paste whole code given below above of this line.


#footer-column-container { border: .3px dotted #cccccc;}

.footer-column { margin: 0 10px 0 10px; padding:5px;
color: #666666; line-height: 1.5em; font-size:12px;}

.footer-column h2 {
padding-bottom:.15em; text-align:center;
font:"normal normal 80% 'Comic Sans MS','Lucida Sans Unicode','Trebuchet MS',Sans-serif";
color:#333333;
line-height:1em; letter-spacing:.1em;
border-bottom: 1px solid #cccccc;}

.footer-column ul { list-style:none; margin:0 0 0; padding:0 0 0;}

.footer-column ul li {
background: url(http://i421.photobucket.com/albums/pp296/rnbutpur/bullet-1.gif) no-repeat;
margin:0 0 0; padding-left: 16px;
padding-bottom: 0.5em; line-height:1.2em;}

.footer-column .widget {margin:0 0 .5em; padding:0 0 1em;}
Share:

No comments:

Post a Comment

You are welcome to ask any questions and submit suggestions related to post

Ad Space

Responsive Advertisement

Blog Archive