Jun 17, 2011

Cara Menambah 3 (tiga) Kolom di Bawah Header


Gambar 3 Kolom di Bawah Header
Langsung saja, jika Anda ingin menambah 3 (tiga) kolom di bawah header blog Anda, berikut ini Cara Membuat 3 (tiga) Kolom di Bawah Header:


  1. Login dulu ke Blogger, pilih Rancangan/Layout => Edit HTML, kasih tanda centang pada Expand Template Widget;
  2. Cari kode ]]></b:skin>;
  3. Sebelum atau di atas kode ]]></b:skin>, letakkan kode di bawah ini:
    /* Top Header
    ---------------------------- */
    #topheader {
    width:930px;
    clear:both;
    float:left;
    color:#333;
    background:#fff;
    margin:0 auto;
    padding:0 0 10px;
    }

    #topheader a:visited {
    color:gray;
    text-decoration:none;
    }

    #topheader h2 {
    font-size:11px;
    font-weight:700;
    line-height:1.4em;
    text-transform:uppercase;
    border-bottom:1px dotted silver;
    margin:0 0 10px;
    padding:20px 0 2px;
    }

    #topheader ul {
    color:#333;
    margin:0;
    padding:0;
    }

    #topheader ul li {
    list-style-type:none;
    background:fff;
    border-bottom:1px dotted #ccc;
    padding-left:17px;
    margin-top:2px;
    }

    #left-topheader {
    width:360px;
    float:left;
    padding-left:15px;
    }

    #center-topheader {
    width:230px;
    float:left;
    padding:0 20px;
    }

    #right-topheader {
    width:260px;
    float:right;
    padding-right:15px;
    }

    Keterangan:
    #topheader adalah kode untuk kolom secara keseluruhan;
    #left-topheader adalah kode untuk kolom sebelah kanan;
    #center-topheader adalah kode untuk kolom pada posisi tengah;
    #right-topheader adalah kode untuk kolom sebelah kiri;
    Width: px adalah kode untuk ukuran lebar kolom;
    Padding adalah jarak sela antara kolom satu dengan lainnya;

    Silahkan dimodifikasi, dengan catatan harus sama dengan jumlah lebar pada template Anda dan untuk mengetahui ukuran lebar template, cari kode: #outer-wrapper dan lihat nilai width-nya;
  4. Selanjutnya cari kode di bawah ini:
    <div id='header-wrapper'>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/>
    </b:section>

  5. Tepat di bawah kode di atas, tambahkan kode di bawah ini:
    <div id='topheader'>
    <b:section class='topheader' id='left-topheader' preferred='yes'/>
    <b:section class='topheader' id='center-topheader' preferred='yes'/>
    <b:section class='topheader' id='right-topheader' preferred='yes'/>
    </div>
  6. Simpan Tamplate, selesai.
Demikianlah tutorial cara menambah 3 (tiga) kolom di bawah header blog ini, semoga bermanfaat.

AKTUAL NEWS ONLINE

Author & Editor

Has laoreet percipitur ad. Vide interesset in mei, no his legimus verterem. Et nostrum imperdiet appellantur usu, mnesarchum referrentur id vim.

0 comments:

Post a Comment

Komen yang bijak sangat di nantikan...! Terimakasih..