Cara Membuat Header Menjadi Dua Kolom

Written By Tahyu diance on Thursday, 17 April 2014 | 09:58

Membagi Template Blog Menjadi Dua Kolom. Bagi blogger yang sudah makan asam garam didunia blogging sudah tidak asing atau sulit untuk menjadikan header blog menjadi terbelah dua kolom, namun bagi sebagian blogger yang masih baru mungkin masih kesusahan untuk hal ini bahkan sampai mencari atau mendownload template yang sudah tersedia 2 kolom header, kenapa hal itu diperlukan? Hal tersebut diperuntukan supaya blog tampil lebih menarik dengan cara menambahkan photo, image, atau untuk memonetise blog supaya menghasilkan uang atau dollar dengan cara memasang banner iklan pada header yang nantinya akan muncul sejajar dengan judul blog kita. Membagi header menjadi dua kolom ini dilakukan biasanya pada template default bawaan blogger yang headernya masih satu kolom, sedangkan untuk template-template yang beredar dan bisa didownload banyak yang sudah menyediakan header 2 kolom, sehingga kita tidak perlu repot lagi untuk membaginya. 

Ok, kita langsung pada tahap cara melakukan step by step untuk membagi kolom header.

Cara Membuat Header Menjadi 2 Kolom
  • Buka www.blogger.com dan pilih blog yang ingin di ubah headernya menjadi dua.
  • Pada menu Blogger klik Template.
  • Hal pertama yang paling penting adalah membackup template dulu untuk menjaga dari kesalahan pengeditan dengan cara klik pada pojok kanan atas Cadangkan / Pulihkan, Unduh Template Lengkap.

    Cara Membuat Header Blog Menjadi Dua Kolom

  •  Selanjutnya klik Edit HTML, dan akan terbuka kolom Editor HTML Blog anda.

    Cara Membagi Header Blog Menjadi 2 Kolom
  • Cari kode .header-outer dengan cara tekan Ctrl F. Kemudian blok kode yang mirip dengan kode berikut:

      .header-outer {
       background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;}


  • atau kode seperti ini :

      .header-outer {   background: $(header.background.color) $(header.background.gradient) repeat-x scroll top left;
  • Hapus kode diatas dan ganti dengan kode dibawah
      .header-outer {
      background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
       _background-image: none;min-height: 160px; }
      #header {
      width: 45%;
      margin-right: 10px;float: left;
      }
      #tsa-headerbaru {
      float: right;
      width: 47%;
      margin: 20px 10px 5px 10px;
      padding: 2px;}
      #tsa-headerbaru {margin: 3px;
      }

  • Selanjutnya cari kode
      <div class="region-inner header-inner">
  • Setelah menemukan kode  <div class="region-inner header-inner"> diatas, tempatkan kode berikut tepat diatasnya:

      <b:section class="tsa-headerbaru" id="tsa-headerbaru" maxwidgets="1" showaddelement="yes"></b:section>
  •  Setelah selesai Simpan Template dan lihat hasilnya pada menu Tata Letak.
Setelah semua proses diatas selesai coba lihat pada menu Tata Letak, Sekarang Header sudah menjadi dua kolom, bila belum nampak maka browser harus di Reload atau Refresh dulu.. 

Keterangan:
min-height: 160px; = Tinggi Header adalah 160px, ganti sesuai selera anda 
width: 47% = Lebar Header kanan atau Header yang baru ditambahkan dan ada 8% jarak antar header. 
width: 45%;. = Lebar Header kiri

Sekian Posting kali ini semoga bermanfaat. 

Ditulis Oleh : Tahyu diance ~inPOSTING

Tahyu Anda sedang membaca artikel berjudul Cara Membuat Header Menjadi Dua Kolom yang ditulis oleh inPOSTING yang berisi tentang :Cara Membuat Header Menjadi Dua Kolom, Bagaimana Cara Membagi Header Menjadi 2 Kolom, Cara Menempatkan Iklan di Header Blog Dan Maaf, Anda tidak diperbolehkan mengcopy paste artikel ini tanpa menyertakan link blog ini.

Blog, Updated at: 09:58

6 Komentar:

  1. sipdah tipsnya saya suka

    ReplyDelete
  2. Mantaaap sob artikelnya, kereeen :)
    Ijin share http://apotekherbalkita.com/obat-tradisional-asma/
    http://apotekherbalkita.com/
    http://grosiracemaxstasik.com/
    http://pengobatanalamimustajab.com/

    ReplyDelete
  3. Terimakasih gan sangat bermanfaat
    http://jellygamatgoldg31.com/obat-herbal-penyakit-kulit/

    ReplyDelete
  4. Mantaap gan infonya
    http://obatalami21.com/obat-alami-penyakit-tipes/

    ReplyDelete