-->

Cara Membuat Header Blog Menjadi 2 Kolom

Cara Membuat Header Blog Menjadi 2 Kolom


Setelah selesai Membuat Elemen Dasar Header Blog, sekarang anda juga bisa membagi space header tersebut menjadi 2 kolom seperti gambar diatas.

Prinsip dasar pembuatannya sangat sederhana. Anda hanya perlu menyisipkan kode HTML seperti dibawah ini ke kelompok kode HTML header sebelumnya:



<div id='header-kanan'>
<b:section class='headerbanner' id='headerbanner' showaddelement='yes'/>
</div>



Kemudian sisipkan semua script diatas di bawah kode ini:


<b:widget id='Header1' locked='true' title='blogernas (Header)' type='Header' visible='true'>...</b:widget>
</b:section>


Tanda titik tiga pada kode diatas menandakan ada seperangkat kode yang disembunyikan oleh sistem Blogger. Jika saat anda melakukannya yang tampil pada kode template anda bukan seperti itu, berarti kode yang disembunyikan jadi terbuka tanpa anda sadari. Agar tidak ribet karena banyaknya kode yang muncul, maka anda bisa menciutkannya dengan cara mengklik angka penomoran baris yang terdapat di sebelah kiri form Edit HTML Template anda, sehingga semua kode yang memusingkan tersebut, kembali diciutkan. Contohnya seperti ini:


Cara Membuat Header Blog Menjadi 2 Kolom


Pada contoh ini saya mengklik angka 77 karena angka itulah yang tepat pada garis kode yang dimaksud pada template saya. Bagi anda belum tentu sama, karena nomot itu diurutkan sesuai posisi dan jumlah script template kita masing-masing.


Cara Membuat Header Blog Menjadi 2 Kolom


Pada gambar ini tampak di samping angka 77 muncul sebuah segitiga kecil berwarna hitam. Itu juga sebuah tanda bahwa ada kode yang disembunyikan.

Nah selanjutnya tepat sesudah kode </b:section> sisipkanlah kode HTML untuk penambahan kolom headernya, yang pada gambar diatas adalah semua kode yang terseleksi dengan warna kuning. Lebih jelasnya akan tampak seperti ini:




<b:widget id='Header1' locked='true' title='blogernas (Header)' type='Header' visible='true'>...</b:widget></b:section>
<div id='header-kanan'> 
<b:section class='headerbanner' id='headerbanner' showaddelement='yes'/>
</div>

</div>



Selanjutnya untuk mengatur tampilannya, maka hapus semua kode CSS header pada blog anda, yang diawali dengan tanda seperti ini:

#header atau .header


Lalu ganti dengan kode CSS berikut, dan letakkan di bawah kode: <style type='text/css'>


#header-wrapper{
background:#333;
height:120px;
width:1000px;
}
#header-inner{
float:left;
padding-left:30px;
}
#header,.title2{
text-align:left
}
#header h1,.title2{
font-size:50px;
font-weight:500;
color:#fff;
margin:0;
padding:20px 10px 0 0;
}
#header a,.title2 a{
color:#f60;
text-decoration:none}
#header a:hover,.title2 a:hover{
color:#fff
}
#headerlogo{
float:right;
display:inline;
overflow:hidden;
}
#header .description{
color:#999;
font-size:10px;
letter-spacing:10px;
margin-top:-5px;
padding-bottom:50px
}
#header-kanan{
float:right;
background:#f60;
height:120px;
width:500px;
}



Jika sudah, jangan lupa klik tombol Simpan tema seperti dibawah ini.


Cara Membuat Header Blog Menjadi 2 Kolom


Kemudian setelahnya, jangan lupa lihat dulu pada Tata Letak, apakah penambahan elemen header yang kedua ini sudah berhasil atau belum.


Cara Membuat Header Blog Menjadi 2 Kolom


Jika pada halaman Tata Letak sudah seperti gambar diatas, maka itu berarti proses penambahan elemen header menjadi 2 kolom sudah berhasil. Karena sudah muncul satu bagan header lagi selain bagan header utama. Untuk mengisi header sebelah kanan tersebut (pada bagan ini yang terletak pada urutan kedua dengan nama "header-banner", anda tinggal klik link Tambahkan Gadget yang terdapat pada element tersebut.
7 komentar
avatar
Anonim 11 November 2017 pukul 11.52

kon gk bisa di copas gan?

Balas
avatar
Forbisnis.com 26 Januari 2018 pukul 00.19

maaf mas bro, kalo tidak bisa di copy tuh repot juga ya ngikuti tutorialnya, harus pindah2 tab menulis css dan lainya,

Balas
avatar
Erianto Anas Admin 26 Januari 2018 pukul 03.14

Iya Bro, bagaimana lagi. Habis banyak maling soalnya

Balas
avatar
Erianto Anas Admin 26 Januari 2018 pukul 03.15

Memang sengaja diprotek Gan

Balas
avatar
Kafitriya 27 Januari 2018 pukul 17.18

makasih mas tutorialnya , cuma bisa diliatin aja tanpa bisa dipraktekin.

Balas
avatar
Erianto Anas Admin 27 Januari 2018 pukul 21.04

hahaha ... sama-sama Tika

Balas
avatar
Carolina Ratri 17 Agustus 2018 pukul 18.01
Komentar ini telah dihapus oleh pengarang.
Komentar yang tidak relevan, jorok, spamming dan promosi link akan dihapus

Desember 2015 - Erianto Anas - blogernas