10 Jun 2011

Create Triple column Footer with CSS

Assalamualaikum wr.wb.
Hello Sharelikers,today I will share tutorial how to make our footer template be three column .we have two option,It can be add or change your footer.That you know,in the last I had written about how to add the footer element to your blog.thats meaning your footer column only one.And also two column Footer. Now I want to share tutor how it  can change  to be three column or  add three column on the above of your recents footer.
Footer


Ok, lets go we start how to make it real:
  • Log in to your acount in blogger
  • then click Design on dashboard
  • then click Edit Html
  • next click Expand widget Templates
  • then Search this code in your template ]]></b:skin>
  • Then put this code above ]]></b:skin&gt
    #footer-column-divide
    clear:both;
    }
    .footer-column {
    padding: 10px;
    }

  •  then search the code that similar with this code (maybe in each templates is differents)
    <div id='footer'>
    <b:section class='footer' id='footer' showaddelement='yes'/>
    </div>

    or

    <div id='footer-wrapper'>
    <b:section class='footer' id='footer' showaddelement='yes'/>
    </div>
  • then change <b:section class='footer' id='footer' showaddelement='yes'/>  with this below code :

    <div id='footer-column-divide'>

    <div id='footer1' style='width: 30%; float:left;
    margin:0; text-align:left;'>
    <b:section class='footer-column' id='col1'
    preferred='yes' style='float:left;'/>
    </div>

    <div id='footer2' style='width: 40%; float: left;
    margin:0; text-align: left;'>
    <b:section class='footer-column' id='col2'
    preferred='yes' style='float:left;'/>
    </div>

    <div id='footer3' style='width: 30%; float: right;
    margin:0; text-align: left;'>
    <b:section class='footer-column' id='col3'
    preferred='yes' style='float:right;'/>
    </div>

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


  • then save your template.
  • next you can add gadget in your new column
If you wanna add the column  above your footer be Three column,you must follow this steps

  • In Edit html (design tab) you search the similar code like this :
    #footer(-wrapper*) {/--note *several templates using only footer or Footer-wrapper name--/
    width:900px;
    clear:both;
    margin:0 auto;padding-top:15px;
    line-height: 1.6em;
    text-transform:uppercase;
    letter-spacing:.1em;
    text-align: center;
    }
  • then put this below CSS after it :
    /* bottom
    ----------------------------------------------- */
    #bottom {
    width:900px;
    clear:both;
    margin:0 auto;
    float:left;
    padding:10px 0;
    color:#333;
    background:#ffffff;
    border-top:1px solid #333;
    }
    #bottom a:link {
    color:#006699;
    text-decoration:none;
    }
    #bottom a:hover {
    color:#c06000;
    text-decoration:underline;
    }
    #bottom a:visited {
    color:#045FB4;
    text-decoration:none;
    }
    #bottom h2 {
    padding:20px 0 2px 0;
    margin:0 0 10px 0;
    border-bottom:1px dotted #cccccc;
    font-size:11px;
    font-weight:bold;
    line-height:1.4em;
    text-transform:uppercase;
    }
    #bottom ul {
    padding:0;
    margin:0;
    color:#333;
    }
    #bottom ul li {
    list-style-type:none;
    border-bottom:1px dotted #333;
    background:url("http://i35.tinypic.com/2n03mgz.jpg") no-repeat 0px .17em;
    padding-left:17px;margin-top:2px;
    }
    #left-bottom {
    width:200px;
    float:left;
    padding-left:15px;
    }
    #center-bottom {
    width:200px;
    float:left;
    padding:0 20px 0 20px;
    }
    #right-bottom {
    width:420px;
    float:right;
    padding-right:15px;
    }
  • Then search the similar code like this :
    <div id='footer'>
    <b:section class='footer' id='footer' showaddelement='yes'/>
    </div>
  • Put this below code above it
    <div id='bottom'>
    <b:section class='bottom' id='left-bottom' preferred='yes'/><b:section class='bottom' id='center-bottom' preferred='yes'/>
    <b:section class='bottom' id='right-bottom' preferred='yes'/>
    </div> <!-- end bottom -->
    SO The code be like this :

    <div id='bottom'>
    <b:section class='bottom' id='left-bottom' preferred='yes'/>
    b:section class='bottom' id='center-bottom' preferred='yes'/>

    <b:section class='bottom' id='right-bottom' preferred='yes'/>
    </div> <!-- end bottom -->


    <div id='footer'>
    <b:section class='footer' id='footer' showaddelement='yes'/>
    </div>
Oke all I hope this Tutorial will help you.See you in the next tutorial^^

source :
  • Ronyox Blog (url co.cc kena banned jadi tidak dicantumkan)
  • http://www.gentayangantriks.co.cc/2011/02/menambah-kolom-elemen-di-atas-footer.html

Tampilan terbaik menggunakan Google chrome dan Mozilla +5 layar 1280x854

10 comments:

  1. Haha.. mantap :D aku dah pasang :D

    ReplyDelete
  2. aku coba nanti gan kalo ada waktu lebih

    ReplyDelete
  3. oke, mas randy. saya akan coba nanti. izin bookmark dulu ya. makasih.

    ReplyDelete
  4. Menarik dicoba nih, thanks for sharing :)

    ReplyDelete
  5. ntar gue coba klo dah bisa bahas inggris....

    ReplyDelete
  6. All yang tidak bisa disebutkan satu persatu@thanks gan,silahkan dibookmark,dicoba,atau dieksperimenkan di blog,by the way maaf karena kemaren2 offline

    ReplyDelete
  7. cssx mantap jg neh..footerx d'tmbah background bakal jd lbih mantap...

    ReplyDelete
  8. @Endy ya kalo make bg lebih manteps

    ReplyDelete
  9. tutorial yg menarik mas....klo untuk membuatx lbih b'wrna bs g mas...sperti pd situs berikut http://www.lookatdan.com/index.html

    ReplyDelete