Tutorial Skill SEO - Cara Membuat Header menjadi 2 kolom, Kali ini kita akan membahas gimana cara menambahkan kolom di atas header dengan 2 kolom kecil, kiri dan kanan. Cara ini Cuma bisa digunakan untuk template baru jika template sobat memakai template jadinya tidak berfungsi seutuhnya.
Lansung saja kita mengikuti tahap berikut ini :
Tahap 1
- Seperti biasa, login ke akun blogger sobat.
- Pilih Template > Edit HTML > Lanjutkan > Centang ( Expand Template Widget ).
- Cari kode dibawah ini ( untuk mempermudah pencarian, tekan Ctrl+F atau F3 ).
.header-outer { background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0-400px;}
- Setelah anda dapat cari kode diatas silakan di ganti dengan kode dibawah ini :
.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
_background-image: none;min-height: 154px; /* untuk mengatur tinggi header (height) */}
#header {
width: 45%; /* untuk mengatur lebar header kiri - title, description, image */
margin-right: 10px;float: left; }
#bgsGR_headerkanan {
float: right;
width: 49%; /* mengatur lebar header kanan */
margin: 20px 10px 5px 10px;
padding: 2px;}
#bgsGR_headerkanan .widget {margin: 3px
Tahap 2
- Cari kode dibawah ini :
- Setelah dapat kode diatas tambahan kode dibawah ini :
- Hingga hasilnya seperti dibawah ini :
>
Keterangan :
Warna Tebal marupakan kode dari hasil tambahan
Warna Merah ‘1’ bisa diganti dengan angka 2,3,4 atau yang lainnya sesuai dengan selera sobat. Maksudnya untuk susunan berapa kolom ke bawah.
Setelah ke dua tahap diatas sudah sobat masukin dalam HTML nya, sekarang sudah boleh klik simpan template. Dan mengecek di tata letak untuk melihat perubahan tersebut…
Semoga artikel diatas bermanfaat untuk para sobat semua.
0 comments: