Update Terbaru
Loading...
Home » » Cara Menambahkan Elemen Halaman Diatas Footer
Published On : Jumat, 31 Agustus 2012
03.03.00 | Admin | No Comments

Cara Menambahkan Elemen Halaman Diatas Footer


Masih tentang desain template setelah sebelumnya saya posting cara menambah dua kolom elemen halaman dibawah sidebar utama dan menambah sebuah elemen halaman dibawah dua sidebar yg telah dibuat itu, agar lengkap kali ini akan saya paparkan lagi langkah-langkah menambah elemen halaman diatas footer seperti terlihat pada gambar berikut:

image
Yang saya jadikan tempat eksperimen kecil ini blog saya lainnya (lihat disini) yang menggunakan template default blogger, minima

Baiklah langsung aja berikut cara 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 kode HTML 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
Note: sesuaikan ukuran lebar (widht) footer dengan template anda dan lebar elemen yang akan ditambahkan sesuaikan selera anda dengan memperhatikan jarak marginnya.
Untuk melihat hasilnya masuk ke elemen halaman, semoga berhasil! Bisa lihat hasil eksperimen saya disini

Sumber


Related Post

0 komentar:

Posting Komentar

Referensi : DTE | MDF Blog | MKR Site
Copyright © 2013. Gembulz Blog's - All Rights Reserved
Template Created by Creating Website Modify by Gembulz Blog's
Powered by Blogger Top