Cara membuat footer menjadi banyak kolom



Sebenarnya membuat footer blogspot menjadi 3 kolom dapat kita lakukan dengan mudah pada Template Designer yang sudah tersedia pada Blogger, namun ada bebarapa template yang tidak mendukung atau support dengan template designer tersebut.

Membuat 3 kolom blogger
 Berikut ini adalah cara membuat sendiri untuk menambahkan kolom pada Footer pada blog menjadi 3 atau 4 kolom, dengan menambahkan sedikit CSS sebagai penyusun rangka layout template anda:
  • Masuk ke akun Blogger.
  • Klik pada Tab Template > Edit Html
  • Copy Css berikut dan letakan tepat diatas kode ]]></b:skin>
  • #lower {
    border-top: #737373 6px solid;
    margin:auto;
    font-family: Georgia;
    width: 968px;
    padding: 0px 0px 10px 0px;
    background:#1f1f1f;
    }
    #lower a {
    color: #DBDBDB;
    font-family: Georgia;
    }
    #lower-wrapper {
    margin:auto;
    font-family: Georgia;
    padding: 20px 0px 20px 0px;
    width: 960px;
    }
    #lowerbar-wrapper {
    background:#1f1f1f;
    float: left;
    color: #ebedee;
    font-family: Georgia;
    margin: 0px 5px auto;
    padding-bottom: 20px;
    width: 32%;
    text-align: justify;
    font-size:100%;
    line-height: 1.6em;
    word-wrap: break-word;
    overflow: hidden;
    }
    .lowerbar {margin: 0; padding: 0;}
    .lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}
    .lowerbar h2 {
    margin: 0px 0px 10px 0px;
    padding: 3px 0px 3px 0px;
    text-align: left;
    color:#fff;
    text-transform:uppercase;
    font: bold 16px Georgia;
    border-bottom:3px double #666666;
    }
    .lowerbar ul {
    list-style:none;
    margin: 0;
    padding: 0;
    }
    .lowerbar li a {
    width: 265px;
    font-family: Georgia;
    background: #3f3f3f;
    border: 1px solid #111;
    line-height: 1.4em;
    -moz-border-radius: 5px;
    padding: 0.5em;
    margin-bottom: 11px;
    margin-right: 3px;
    -webkit-border-radius: 5px;
    overflow: hidden;
    color:#000000;
    }
    .lowerbar li a:visited {
    width: 265px;
    font-family: Georgia;
    background: #3f3f3f;
    border: 1px solid #111;
    line-height: 1.4em;
    -moz-border-radius: 5px;
    padding: 0.5em;
    margin-bottom: 11px;
    margin-right: 3px;
    -webkit-border-radius: 5px;
    overflow: hidden;
    color:#000000;
    }
    .lowerbar li a:hover {
    background: #4f4f4f;
    border: 1px solid #7a7a7a;
    line-height: 1.4em;
    -moz-border-radius: 5px;
    padding: 0.5em; -webkit-border-radius: 5px;
    overflow: hidden;
    color:#000000;
    }
    .lowerbar a {
    font-family: Georgia;
    background: #3f3f3f;
    border: 1px solid #111;
    line-height: 1.4em;
    float:left;
    -moz-border-radius: 5px;
    padding: 0.5em;
    margin-right: 3px;
    margin-bottom: 11px;
    -webkit-border-radius: 5px;
    overflow: hidden;
    color:#000000;
    }
    .lowerbar a:hover {
    background: #4f4f4f;
    border: 1px solid #7a7a7a;
    line-height: 1.4em;
    -moz-border-radius: 5px;
    padding: 0.5em; -webkit-border-radius: 5px;
    overflow: hidden;
    color:#000000;
    }
    
  • Kemudian Cari kode berikut
  • <div id='page-footer'>

  • Ganti/Replace dengan kode dibawah
  • <div id='lower'> 
    <div id='lower-wrapper'> 
    <div id='lowerbar-wrapper'> 
    <b:section class='lowerbar' id='lowerbar1' preferred='yes'>
    <b:widget id='HTML2' locked='false' title='Langganan Artikel' type='HTML'/>
    </b:section> 
    </div> 
    <div id='lowerbar-wrapper'> 
    <b:section class='lowerbar' id='lowerbar2' preferred='yes'>
    <b:widget id='Followers1' locked='false' title='Anggota Blog' type='Followers'/>
    </b:section> 
    </div> 
    <div id='lowerbar-wrapper'> 
    <b:section class='lowerbar' id='lowerbar3' preferred='yes'>
    <b:widget id='HTML9' locked='false' title='FB Like' type='HTML'/>
    </b:section> 
    </div> 
    
  • Simpan template anda.
Semoga berhasil.




Share your views...

0 Respones to "Cara membuat footer menjadi banyak kolom"

Posting Komentar

Sebelum memberikan komentar, silahkan menjadi anggota sitelearning terlebih dahulu, Terimakasih

 

Langganan Artikel

Berlangganan posting Via Email:

Anggota Blog

FB Like