Template atau Thema blog bawaan blogger (default) biasanya hanya punya satu kolom di header, sehingga hanya bisa menyimpan nama atau logo blog di sana.
Membuat 2 kolom header biasanya dipergunakan untuk menyimpan iklan, menu blog, share social media, dan lainnya sehingga tampilan blog menjadi lebih gagah, jika ingin membuat dan menambahkan 2 kolom header silahkan ikuti cara dibawah ini:
1. Masuklah ke akun blogger sahabat.
2. Klik Opsi lainnya.
3. Klik Thema.
4. klik Edit HTML.
5. Centang tulisan Expand Widget Templates.
6. Cari Kode CSS .header-outer (gunakan tombol CTRL + F untuk mempermudahkan pencarian kode)
Membuat 2 kolom header biasanya dipergunakan untuk menyimpan iklan, menu blog, share social media, dan lainnya sehingga tampilan blog menjadi lebih gagah, jika ingin membuat dan menambahkan 2 kolom header silahkan ikuti cara dibawah ini:
1. Masuklah ke akun blogger sahabat.
2. Klik Opsi lainnya.
3. Klik Thema.
4. klik Edit HTML.
5. Centang tulisan Expand Widget Templates.
6. Cari Kode CSS .header-outer (gunakan tombol CTRL + F untuk mempermudahkan pencarian kode)
.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;}
7. Setelah menemukan kode seperti di atas, block kode tersebut kemudian hapus dan ganti dengan kode dibawah ini.
8. Setelah mengatur kode CSS diatas selanjutnya cari kode dibawah ini:
9. Setelah anda temukan kode <div class="region-inner header-inner"> tempatkan kode dibawah ini diatas kode tersebut
11. Sekarang coba cek di tata letak, tentu blog sahabat sudah memiliki header dengan desain 2 kolom.
.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;
}
#header-baru {
float: right;
width: 47%;
margin: 20px 10px 5px 10px;
padding: 2px;}
#header-baru {margin: 3px;
}
8. Setelah mengatur kode CSS diatas selanjutnya cari kode dibawah ini:
<div class="region-inner header-inner">
9. Setelah anda temukan kode <div class="region-inner header-inner"> tempatkan kode dibawah ini diatas kode tersebut
<b:section class="header-baru" id="header-baru" maxwidgets="1" showaddelement="yes"></b:section>
10. Setelah selesai, simpan dan tutup thema
11. Sekarang coba cek di tata letak, tentu blog sahabat sudah memiliki header dengan desain 2 kolom.
Belum ada tanggapan untuk "Membuat Header Blog Menjadi Dua Kolom Keren dan Elegan"
Post a Comment