.
English French German Spain Italian Dutch
Russian Portuguese Japanese Korean Arabic Chinese Simplified
Home » » Cara Menambah 3 (tiga) Kolom Tepat di Bawah Header

Cara Menambah 3 (tiga) Kolom Tepat di Bawah Header

Written By AAN PRAWIRA on Rabu, 16 Maret 2011 | 16.3.11

Langsung saja Nih, jika Sobat ingin menambah 3 (tiga) kolom di bawah header blog Sobat, berikut ini  Adalah Bagaimana Cara Membuat 3 (tiga) Kolom di Bawah Header tersebut:

  1. Login dulu ke Blogger Sobat ya, Lalu pilih Rancangan/Layout => Edit HTML, Berikan tanda centang pada Expand Template Widget Sobat
  2. Cari kode Ini ]]></b:skin>;
  3. Sebelum atau di atas kode ]]></b:skin>, Sobat letakkan kode yang ada 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 :
    ViewSonic VX2250WM-LED 22-Inch (21.5-Inch Vis) Widescreen Full HD 1080p LED Monitor with Integrated Stereo Speakers
    #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 Sobat dan juga untuk mengetahui ukuran lebar template, cari kode:
     #outer-wrapper dan lihat nilai width-nya.


    4.Selanjutnya Sobat 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 template Dan selesai.
    Black and White Zebra Animal Skin Design Snap-On Cover Hard Case Cell Phone Protector for LG Rumor 2 LX265 / Cosmos VN250 [Beyond Cell Packaging]
Share this article :

Tidak ada komentar:

Posting Komentar

Berikan Tanggapanmu Di Sini

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