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)
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.
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.
.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