Rabu, 01 Desember 2010

Sungai Penuh Online : Membagi Header menjadi dua bagian

Untuk melengkapi lengkap tutorial design tamplate yang ada. kali ini SPN coba membahas cara membagi header menjadi dua bagian kolom. biasanya default header kan cuman satu, nah header itu bisa di bagi menjadi dua bagian. coba SOBAT lihat contoh di bawah ini.

silahkan klik gambar untuk memperbesar
Nantinya elemen baru itu tadi dapat digunakan untuk penempatan iklan, gambar atau widget lainnya. Nah untuk membuatnya SOBAT sedikit menambah kan kode css ke dalam tEmplate. yang ingin menerapkan article ini silahkan ikuti TIP DAN TRIK dibawah ini.
  • Log in dulu ke blogger
  • Tata letak
  • Edit HTML
  • Download tamplate SOBAT untuk mengatasi hal-hal yang tak diinginkan
  • Jangan lupa kasi tanda centang di kotak kecil kanan atas
  • Kemudian cari kode
    #header-wrapper {
    width:660px;
    margin:0 auto 10px;
    border:1px solid $bordercolor;
    }

    #header-inner {
    background-position: center;
    margin-left: auto;
    margin-right: auto;
    }

    #header {
    margin: 5px;
    border: 1px solid $bordercolor;
    text-align: center;
    color:$pagetitlecolor;
    }
  • Kemudian hapus dan ganti dengan kode di bawah ini
    #header-wrapper {
    width:930px;
    margin:0 auto 0px;
    background:#38610B;
    height:180px;
    }

    #head-inner {
    width:500px;
    background-position: left;
    margin-left: auto;
    margin-right: auto;
    float:left;
    }

    #header {
    margin: 0px;
    text-align: left;
    color:#ffcc66;
    }

    #r_head{
    width:430px;
    float:left;
    padding-top:10px;
    }
  • Kemudian cari kode
    <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>
    </div>
  • Hapus dan ganti dengan kode
    <div id='header-wrapper'>
    <div id='head-inner'>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/>
    </b:section>
    </div>
    <div id='r_head'>
    <b:section class='header' id='header2' preferred='yes'/>
    </div>
    </div>
  • kemudian save tamplate SOBAT dan lihat hasilnya.
Selamat berkreasi dan Salam Blogger...hmmmm

Artikel yang berkaitan




2 komentar:

Mujaddid mengatakan...

owww...gini toh...panjang nian caranya ommmm

TERIMA KASIH ATAS KOMENTAR DAN KUNJUNGAN ANDA
Sungai Penuh Online mengatakan...

@mujaddid : Dari sononya!!!kodenya gitu...hmmm

TERIMA KASIH ATAS KOMENTAR DAN KUNJUNGAN ANDA

Posting Komentar



Bagi yang ingin belajar PHP / HTML / MySQL Dan ingin membuat WEBSITE SENDIRI dengan sangat Mudah dan Murah sambil langsung praktek, Saya rekomendasikan anda belajar DI SINI atau DI SINI «« di klik biar situsnya keluar, 4 langkah Mudah dan 3 langkah JITU Murah dan Mudah Membuat WEBSITE. D12UL. D12UL


Twitter Delicious Facebook Digg Favorites More