EO Community : Komunitas Event Organizer Indonesia | Meet, Share & Discuss |



Post Reply 
 
Thread Rating:
  • 2 Votes - 4.5 Average
  • 1
  • 2
  • 3
  • 4
  • 5
 
Cara Membuat Footer 3 Kolom
 
Share to: Facebook Twitter StumbleUpon Send
 to Google Buzz Send to LinkedIn
Author Message
damarsaloka Offline
๑۩۩»»ÉÖcer's««۩۩๑
EOcer's

Posts: 870
Joined: Nov 2010
Reputation: 68
  

 
Post: #1
Cara Membuat Footer 3 Kolom

Ini contoh blog sebelum dan sesudah diberi footer 3 kolom

[Image: sebelum.jpg]

[Image: sesudah.jpg]

Ke Tutorial, Cara membuat footer 3 kolom

* Masuk ke akun blogger
* Buka Design/Rancangan
* Pilih Edit HTML
* Centang "Expand Eidget Template"
* Cari kode </b:skin> (gunakan Ctrfl +F untuk mencari)
* Lalu masukkan kode berikut ini tepat di atasnya


Code:
#footer-column-container {
    clear:both;
    }
    .footer-column {
    padding: 10px;
    }

* Cari kode id='footer' ,contohnya

[Image: idf.jpg]

Lalu, masukkan kode berikut ini tepat di bawah kode id='footer' tadi , contohnya seperti gambar di atas

Code:
<div id='footer-column-container'>

    <div id='footer2' 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='footer3' 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='footer4' 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;'/>

    <p>

    <hr align='center' color='#ffae00' 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>

Simpan kedip


12-11-2010 09:27 AM
Visit this user's website Find all posts by this user Quote this message in a reply

fajar97 Offline
๑۩۩»»ÉÖcer's««۩۩๑
EOcer's

Posts: 144
Joined: Apr 2011
Reputation: 63
  

 
Post: #2
RE: Cara Membuat Footer 3 Kolom
(12-11-2010 09:27 AM)damarsaloka Wrote:  Ini contoh blog sebelum dan sesudah diberi footer 3 kolom

[Image: sebelum.jpg]

[Image: sesudah.jpg]

Ke Tutorial, Cara membuat footer 3 kolom

* Masuk ke akun blogger
* Buka Design/Rancangan
* Pilih Edit HTML
* Centang "Expand Eidget Template"
* Cari kode </b:skin> (gunakan Ctrfl +F untuk mencari)
* Lalu masukkan kode berikut ini tepat di atasnya


Code:
#footer-column-container {
    clear:both;
    }
    .footer-column {
    padding: 10px;
    }

* Cari kode id='footer' ,contohnya

[Image: idf.jpg]

Lalu, masukkan kode berikut ini tepat di bawah kode id='footer' tadi , contohnya seperti gambar di atas

Code:
<div id='footer-column-container'>

    <div id='footer2' 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='footer3' 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='footer4' 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;'/>

    <p>

    <hr align='center' color='#ffae00' 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>

Simpan kedip


nice info gan
ane lagi nyari nih


04-21-2011 08:10 PM
Visit this user's website Find all posts by this user Quote this message in a reply

Post Reply 


Possibly Related Threads...
Thread: Author Replies: Views: Last Post
  Cara Membuat Paspor Secara Online romeo88 1 2,990 04-02-2014 09:00 AM
Last Post: air0
  Inilah Cara Membuat Toko Online Gratis di Facebook embanun 26 19,187 02-19-2014 09:13 AM
Last Post: icam_fitri
  Cara Membuat Blog Tumblr Menjadi Seo Friendly shofighter 5 3,173 10-25-2013 09:19 AM
Last Post: nazz_sang_pemimpi
  Cara Menambah dua kolom dibawah header blog cyberjagatmaya 5 2,942 06-20-2013 07:52 PM
Last Post: Xologist