Menambah Tiga kolom elemen di bawah header - Kusnadi Komputer
Hi quest ,  welcome  |  sign in  |  registered now  |  need help ?
  • Tujuan dari Yayasan Sasmita Jaya adalah mewujudkan suatu sarana pendidikan yang murah dan terjangkau oleh seluruh lapisan masyarakat tanpa melupakan kualitas dari pendidikan itu sendiri
  • SMK yang memiliki kesetaraan dalam Ilmu dan Teknologi, Mampu bekerja, Ber-akhlak mulia, dan selalu Ikhlas dalam Pengabdian.
  • Layanan Hosting serta desain website, sehingga akan menjadi sebuah solusi lengkap untuk kebutuhan website bisnis anda.
  • Sajikan saat hangat dengan secangkir teh, saya percaya, Anda akan mendapat pujian dari keluarga tercinta. Selamat Mencoba.
  •  Wujudkan impian anda untuk segera HAMIL.
  •  Hanya dengan satu akses untuk pencarian dari 47.732.098 pekerjaan yang dipublikasikan oleh 70.845 situs di dunia

Minggu, 19 Juni 2011

Menambah Tiga kolom elemen di bawah header


Hai semua... salam blogger. sebelum nya kita pernah membahas bagaimana menambah tiga kolom elemen di atas footer. sekarang bagaimana pula menambah tiga kolom elemen dibawah header. nah cara kerjanya hampir sama dengan menambah elemen di atas footer. untuk membuatnya ikuti langkah-langkah di bawah ini.
  • Log in dulu ke blogger
  • Tata Letak
  • Edit HTML
  • Beri tanda centang pada kotak kecil kanan atas
  • Kemudian cari kode ]]></b:skin> dan
  • Letakkan kode di bawah ini datas nya

    /* 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;
    }

    silah anda modifikasi susai dengan lebar kolom tamplate anda.
  • Kemudian kita akan membuat id untuk properti elemen yang baru saja ditambahkan. cari kode 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>
  • Kemudian tambahkan kode di bawah ini persis dibawah nya
    <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>
  • Simpan tamplate anda dan lihat hasilnya.
Selamat mencoba.........

Tidak ada komentar:

Posting Komentar