10 Jun 2011

Make Two column Footer is Easy

Assalamualaikum wr.wb.
Hello Sharelikers,today I will share tutorial how to make our footer template be two 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.You can change it to be two column or you can add two column on the above of your recents footer.

divide footer2 column

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='footer1' style='width: 50%; 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: 50%; float: left;
    margin:0; text-align: left;'>
    <b:section class='footer-column' id='col2'
    preferred='yes' style='float:left;'/>
    </div>

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

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

divide footer2 column
  • 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;/--!match with your header width!--/
    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:50%;
    float:left;
    padding-left:15px
    }
    #right-bottom {
    width:50%;
    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='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='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^^

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

5 comments:

  1. wew.. makin mamtap aja neh ilmunya kawan aq satu ini...:D
    kereen bro.. +1 meluncuurr! ekekekekk

    ReplyDelete
  2. sorry telat sobat, rasanya sudah saya jawab di komentar blog.. membuat 2 kolom atas itu kan? sy juga baru dapat itu template. kalau diliat2 template 2 kolom atas itu adalah gadget seperti yg sobat bikin ini. namun designernya membuatnya langsung dan memasukkan kode menampilkan label tertentu langsung di HTML. Saya belum oprek demo di blog demo sy, jadi sybelum bs berbagi.. heheh.. annti kalau sudah waktunya mungkin sy akan posting.. heheh :D

    ReplyDelete
  3. btw, kalau sampean mau bikin yg seperti yg ditanya sobat kemaren? silakan berkunjung ke blog sahabat kita yg satu ini: di dalamnya ada kode yg diperlukan untuk membuat yg seperti punya saya itu. http://full-tricks.blogspot.com/2011/06/show-random-posts-with-thumbnail.html

    mungkin sampean bisa otak-atik dr kode yg dishare itu.. :)

    ReplyDelete
  4. @Catatan si Boy ohh gitu ya kang?? oke kang ntar dicoba bila lagi senggang,thanks udah sudi mampir

    ReplyDelete