Comments

3-comments

FOLLOW ME

LATEST

3-latest-65px

About

This just a demo text widget, you can use it to create an about text, for example.

Testimonials

3-tag:Testimonials-250px-testimonial

Ads block

Banner 728x90px

Section Background

Section Background

Your Name


Your Message*

SEARCH

Cara Menambah 3 kolom di bawah header

angsung 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.

= = = = = = = => Selamat Mencoba, Semoga Sukses!!! <= = = = = = = =

No comments:

Post a Comment

Archive

Sections

Blog Archive

Latest video-course

1-tag:Videos-800px-video

Campus

4-tag:Campus-500px-mosaic
TUTORIAL BLOG

Buka Semua | Tutup Semua

Header Background

Header Background
Header Background Image. Ideal width 1600px with.

Logo

Logo
Logo Image. Ideal width 300px.

Section Background

Section Background
Background image. Ideal width 1600px with.

Section Background

Section Background
Background image. Ideal width 1600px with.

Courses

6-latest-350px-course

About Me

Followers

Popular

Silahkan anda cari artikel disini

Pages

Hello! We’re Fenix Creative Photo Studio

Silahkan anda cari makalah disini
3-tag:Courses-65px

Popular Posts

Cara Menambah 3 kolom di bawah header

angsung 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.

= = = = = = = => Selamat Mencoba, Semoga Sukses!!! <= = = = = = = =

Share

Post a Comment