Home » » Cara Membuat 3 Kolom di Bawah Header

Cara Membuat 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.
Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Creating Website

0 komentar:

Posting Komentar

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. Oke Google - All Rights Reserved
Template Modify by Creating Website
Proudly powered by Blogger