Menambah Elemen Di Atas Footer

Template default blogger rasanya terlalu sederhana dan kurang dinamis kalau tidak di utak-atik. Bagi anda yang masih ingin punya template kreasi sendiri, dapat menambahkan elemen-elemen ini di mana saja. Nah, posting ini adalah bagaimana kita bisa menambah elemen di atas footer. Gambar di bawah ini bisa menjelaskan maksudnya.


Dulu saya buat posting tentang menambah sidebar blog atau membagi dua sidebar dan bagaimana menambah elemen di atas bawah posting. Rasanya kurang lengkap jika kita tidak menambahkan elemen di atas elemen footer.

Langsung saja kita aplikasikan. Sebagai catatan, saya adalah pencinta template default blogger Minima White. Semua tutorial blog yang ada di sini sudah teruji dan saya praktekkan pada blog ini. Kemungkinan akan terjadi sedikit perbedaan pada CSS template, namun pada dasarnya hampir sama. Jadi teman-teman bisa menyesuaikan saja.

Menambah elemen di atas footer

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

Sekarang silahkan masuk ke Tata Letak lalu klik Elemen Halaman. Maka di sana sudah ditambahkan tiga elemen baru yang berada tepat di atas footer. Jika terjadi masalah pada padding dan margin, silahkan baca postingan saya tentang belajar padding dan margin. Kode-kode tersebut masih bisa anda ganti-ganti. Tapi secara umum garis besar untuk menambah elemen di atas footer seperti itu. Mudah-mudahan bisa, selamat mencoba.

Related Post:

Template Design

• Membagi Header Menjadi Dua Kolom
• Menambah Tiga Kolom Elemen Di Bawah Header
• Menambah Elemen Di Bawah Dua Sidebar
• Menambah Elemen Di Bawah Sidebar
• Menambah Elemen Di Bawah Posting Update
• Menambah Elemen di Atas Bawah Posting Blog
• Menambah Elemen Sidebar Blogspot

or or