Cara Menambah Elemen Kolom di Atas Footer

Kali ini kita akan menambah elemen kolom di atas footer, kolom footer yang terletak di bawah kolom postingan dapat anda mamfaatkan untuk meletakan berbagai widget dan akan menambak keindahan blog anda sehingga widget yang ada di sidebar atau di header jadi tidak ajak-ajakan dan anda bisa mengkreasinya sendiri untuk meletakkan widget tersebut. Untuk membuat Footer 3 kolom silakan saja mengikuti tahap-tahap di bawah ini:

1. Login ke blogger dengan id anda
2. Tuju menu Tata Letak
3. Pada tab menu, klik Edit HTML
4. Backup template anda, klik Download Template Lengkap
5. Sekarang cari kode ini :

   #footer {
   width:900px;
   clear:both;
   margin:0 auto;
   padding-top:15px;
   line-height: 1.6em;
   text-transform:uppercase;
   letter-spacing:.1em;
   text-align: center;
   }

6. Tambahkan atau copy lalu paste kode berikut di bawah kode tadi

   /* 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;
   }

7. Sekarang kita membuat id untuk elemen di atas footer tersebut. Cari kode ini :

   <div id='footer-wrapper'>
   <b:section class='footer' id='footer'/>
   </div>

8. Tambahkan kode berikut di atas kode tadi :

   <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 -->

9. Sekarang klik tombol SIMPAN TEMPLATE
10. Selesai

Posted in: ttg blog