Cara Membuat 3 Kolom Dibawah Footer

Oleh Unknown 9/06/2011 2 komentar

Cara Membuat 3 Kolom Dibawah Footer - Menambahkan 3 kolom dibagian paling bawah blog atau footer ini sebenarnya trik lama untuk menambahkan elemen halaman dibawah footer. Dan setiap blogger sepertinya memiliki cara membuat dan desain footer masing-masing untuk blognya. Selain bisa untuk menempatkan beberapa widget, dengan adanya 3 kolom dibawah footer ini juga bisa memperindah tampilan blog. Makanya footer ini saya beri nama “Stylish Footer”. Sobat bisa mengisinya dengan widget Recent Post, Statistik Blog, Recent Comment, Popular Post dan lainnya.

Cara Membuat 3 Kolom Dibawah footer :

1. Login ke dashboard blogger anda.

2. Pilih Rancangan > Edit HTML , centang Expand widget template.

3. Jangan lupa backup dulu template sobat dengan mengklik Download full template untuk antisipasi jika terjadi kesalahan atau sobat ingin mengembalikan templatenya ke kondisi semula.

4. Cari kode ]]></b:skin> pada template dengan bantuan Ctrl+F.

5. Copy CSS dibawah ini dan paste tepat diatas kode ]]></b:skin>.

/* -----   LOWER SECTION   ----- */
#lower {
       margin:auto;
       padding: 0px 0px 5px 8px;
       width: 100%;
       background:#333434;
} 
#lower-wrapper {
       margin:auto;
       padding: 20px 0px 00px 0px;
       width: 942px;
}
#lowerbar-wrapper {
     border:1px solid #DEDEDE;
       background:#fff;
       float: left;
       margin: 0px 8px auto;
       padding-bottom: 3px;
       width: 31%;
       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:#0084ce;
        text-transform:uppercase;
      font: bold 14px Arial, Tahoma, Verdana;
       border-bottom:3px solid #0084ce;
}

.lowerbar ul {
      margin: 0px 0px 0px 0px;
      padding: 0px 0px 0px 0px;
      list-style-type: none;
}

.lowerbar li {
      margin: 0px 0px 2px 0px;
      padding: 0px 0px 1px 0px;
      border-bottom: 1px dotted #ccc;
}

/* Footer
----------------------------------------------- */
#footer {clear: both;text-align: center;color: $textColor;}
.footer h2 {padding:0 0 0;margin:0 0 0;font:normal bold 86% Arial, sans-serif;line-height: 1.5em;text-transform:uppercase;letter-spacing:.1em;color:#ffffff;font-size:14px;text-align:left;}
#footer .widget {margin:.5em;padding-top: 20px;font-size: 85%;line-height: 1.5em;text-align: $startSide;}
#footer .widget h2 {text-align:left;}
#footer-wrapper {background: #373737;border-top:1px solid #EDEDED;font-size:11px;margin:0px auto 0px;padding:0px 0 0;text-align:center;width:100%;}
#footer-wrapper .widget h2 {text-align:left;font-size:16px;font-family:Arial,Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif;}
#footer-wrapper .widget {background: #373737;color:#ffffff;margin:.5em;padding-top: 20px;font-size: 100%;line-height: 1.5em;text-align: $startSide;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;}
#footer-wrapper p {color:#999999;font-size:1em;line-height:1.4em;margin:5px 0 0;}
#footer-wrapper a {font-weight:normal;color:#888888;font-size:1em;}
#footer-wrapper a:hover {color:#cccccc;font-weight:normal;}
#footer-wrapper h2 {background:#373737 url() repeat-x;border:0px outset #ffffff;padding:0 0 0;margin:0 0 2px;font-family:"Courier New", Courier, "Lucida Console", Monaco, "DejaVu Sans Mono", "Nimbus Mono L", "Bitstream Vera Sans Mono";text-transform:none;letter-spacing:.15em;color:#ffffff;font-size:18px;}
#footer-wrapper ul,#footer-wrapper ul li{list-style-type:none;background-color:#373737;}
#footer-wrapper ul li:hover{list-style-type:none;background-color:#1f1f1f;}

6. Lanjutkan dengan mencari kode </body> pada template.

7. Copy script dibawah ini dan paste tepat diatas kode </body>.

8. Simpan / Save template anda.

9. Coba lihat hasilnya dengan masuk ke menu Page Element atau elemen laman, jika berhasil maka pada elemen laman sobat akan terlihat seperti gambar dibawah ini.

Nah itu tadi tips singkat cara membuat 3 kolom dibawah footer di blogspot sobat. Semoga bermanfaat.

Rayhanzhampiet Blogs

Cara Membuat 3 Kolom Dibawah Footer

2 komentar untuk "Cara Membuat 3 Kolom Dibawah Footer"