Cari Artikel Blog Ini

Total Tayangan Laman

HEADER TAMPIL DUA KOLOM


C oba anda perhatikan bagian header EPG Studio. Bagian tersebut terdiri dari header dan widget lainnya atau dalam istilah lainnya " Header terdiri dari dua bagian "Tambahan baru pada bagian header ini dapat anda isi dengan berbagai widget yang disesuaikan dengan keinginan anda.
Berikut langkah-langkahnya :
  • LANGKAH PERTAMA

    1. Masuk ke Blogger dengan ID anda.
    2. Klik Rancangan kemudian pilih Edit HTML.
    3. Simpan dulu template anda dengan dengan cara klik Download Template Lengkap jika takut gagal
    4. Cari kode css bagian header seperti dibawah ini :

      /* Header =================================== */
      #header-wrapper {
      width:900px;
      margin:0 auto 0px;
      background:$bgheadercolor
      height:190px;
      }
      #header-inner {
      width:900px;
      background-position: center;
      margin-$startSide: auto;
      margin-$endSide: auto;
      }
      #header {
      margin: 0px;
      text-align: left;
      color:$pagetitlecolor;
      }

    5. Hapus kode css diatas kemudian ganti dengan kode css dibawah ini :

      /* Header =================================== */
      #header-wrapper {
      width:1000px;
      margin:0 auto 0px;
      background:$bgheadercolor
      height:190px;
      }
      #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:500px;
      float:left;
      padding-top:10px;
      }

      • Perhatikan kode-kode yang berwarna, terutama pada ukurannya, ganti ukuran tersebut sesuai dengan keinginan anda.
      • width:1000px; : merupakan ukuran header secara kesuluruhan
      • #header-inner {
        width:500px; : merupakan ukuran header yang baru tempat menampilkan gambar pada header
      • #r_head{
        width:500px; : merupakan ukuran bagian header sebelah kanan (yang baru anda tambahkan). Bagian inilah nantinya dapat anda tambahkan widget-widget pilihan anda.

  • LANGKAH KEDUA

    1. Cari kode seperti dibawah ini :

      <div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
      <b:widget id='Header1' locked='true' title='
      Title blog anda (Header)' type='Header'/>
      </b:section>
      </div>

    2. Hapus kode tersebut kemudian ganti dengan kode dibawah ini :

      <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='Title blog anda (Header)' type='Header'/>
      </b:section>
      </div>
      <div id='r_head'>
      <b:section class='header' id='header2' preferred='yes'/>
      </div>
      </div>

    3. Klik tombol Simpan Template
    4. Sekarang coba anda lihat Rancangan pada bagian Elemen Halaman jika berhasil anda akan melihat tampilan baru pada bagian header blog anda. Silahkan anda isi sesuatu pada header bagian kanan tersebut.
    5. Tampilan Elemen Halaman akan terlihat seperti gambar dibawah ini :


    6. Selamat mencoba semoga bermanfaat.


    Jika artikel ini bermanfaat..? Bagikan lewat :


    BACA JUGA ARTIKEL DIBAWAH INI



    Comments
    9 Comments

    9 komentar :

    sandy mengatakan...

    mampir mas n sekalian mu coment nich. ajib mas info, pi punya saya dah da tuh

    Anonim mengatakan...

    http://img52.imageshack.us/img52/3937/36811t.gifhttp://img52.imageshack.us/img52/3937/36811t.gifhttp://img535.imageshack.us/img535/1143/3614.gifhttp://img535.imageshack.us/img535/1017/36130.gifhttp://img52.imageshack.us/img52/3915/36261.gif

    Ades mengatakan...

    :k:

    rental mobil murah mengatakan...

    thanks buat infonya

    Anonim mengatakan...

    ok:b:

    BERBAGI DENGAN IKHLAS mengatakan...

    Mohon maaf, kalau menurut saya tampilan Blog Anda cukup bagus.. Tapi mungkin lebarnya kalau bisa agak dikurangi.. biar lebih cantik dan elegan..
    Thanks...

    Ades mengatakan...

    @BERBAGI DENGAN IKHLAS : Terimaksih atas saran anda, hanya kalau lebarnya dikurangi, akan memerlukan waktu untuk menyeting ulang agar seluruh tampilan menjadi pas dengan kolom-kolom yang tersedia.

    kadry mengatakan...

    Bro knapa template.ku g bisa di simpan??.
    muncul pesan gini....
    "[Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.Pesan error XML: The element type "div" must be terminated by the matching end-tag "]"
    mohon bantuannya

    Anonim mengatakan...

    Im new to your blog and i actually appreciate that the nice posts and great
    layout.,
    my web site > phone number lookup by address for free

    Posting Komentar

    Ceritakan keberhasilan/kegagalan anda setelah mencoba Tutorial Blogger pada kotak komentar. Kritik dan Saran juga boleh asal sifatnya membangun...!!!