Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Trik dan Tutorial Blog

Cara Menciptakan Header Menjadi 2 Kolom


Membuat header menjadi 2 kolom tentu didasari dengan maksud-maksud tertentu dari seorang Blogger. Penempatan widget menyerupai gambar atau iklan dapat menjadi opsi pilihan jikalau di samping judul blog dapat disisipkan sesuatu yang dapat menciptakan header blog kita terlihat padat dan menarik.
Penempatan widget menyerupai gambar atau iklan dapat menjadi opsi pilihan jikalau di samping jud Cara Membuat Header Menjadi 2 Kolom
Tidak semua template mempunyai 2 kolom header, alasannya ialah itu saya akan mencoba menambahkan header gres untuk template yang cuma mempunyai satu header saja. Lihat screenshoot-nya di bawah, ini ialah teladan blog dengan 2 kolom header:
Penempatan widget menyerupai gambar atau iklan dapat menjadi opsi pilihan jikalau di samping jud Cara Membuat Header Menjadi 2 Kolom
Tertarik untuk membuatnya? Bagaimana caranya?

Cara Membuat Header Menjadi 2 Kolom
  1. Login ke akun Blogger
  2. Pilih Template >> Edit HTML
  3. Lalu cari instruksi header bawaan Template, kira-kira instruksi HTML nya menyerupai mirip di bawah ini:
    4. Ketik saja #header (gunakan ctrl F untuk mempermudah pencarian)
    /* Header */
    #header {
    background:#97C03E; float:left; width:250px; margin:0px; padding:10px; height:70px; overflow:hidden;
    #header-right img {
    width:auto; height:auto; display:block; margin:10px; padding:10px;
    }
    #header-right h1.title {
    font:40px Elephant; font-weight:normal; color:#fff; text-align:left; margin:0px; padding:0px;
    }
    #header-right h1.logo, #header-right p.logo {
    margin:0; padding:0;
    }
    #header-right .description {
    text-align:left; color:#fff; margin:0px; padding:0px; font:20px
    }
    Perhatikan angka yang berwarna Biru: pastikan lebar width-nya 250px

  4. Copy-paste script berikut di bawah elemen instruksi di atas:
    5. #header-baru {
    float:right; width:500px; height:30px; text-align:center; overflow:hidden; margin:10px; padding:10px;

    #header-baru img {
    width:auto; height:auto; margin:5px; padding:5px;
    }
  5. Kemudian cari instruksi yang menyerupai dengan instruksi berikut ini:
    6. <div id='header-inner'>
          <div class='titlewrapper'>
            <h1 class='title'>
              <b:include name='title'/>
            </h1>
          </div>
          <b:include name='description'/>
        </div>
      </b:if>
    </b:includable>
    <b:includable id='description'>---</b:includable>
    <b:includable id='title'>---</b:includable>
    </b:widget>
    </b:section>
  6. Lalu copy-paste script berikut ini di bawah instruksi </b:section> di atas:

    7. <!-- Header-Baru-Open -->
    <b:section class='ads' id='header-baru' maxwidgets='1' preferred='yes' showaddelement='yes'/>

    </div>
    <div class='clear'/>
    <!-- Header-Baru Closed -->
  7. Simpan Template. Lalu cek Tata Letak untuk memastikan muncul elemen gres di samping header.
Itulah sekilas pemahaman saya perihal Cara Membuat Header Menjadi 2 Kolom. Semoga bermanfaat. Baca juga: Cara Membagi Header Menjadi 2 Kolom (2). Jika mencari artikel serupa, silahkan cek di bawah ini:

Anda mungkin menyukai postingan ini :