Merubah Header

Asalamualaikum sobat bloger semua, mau posting age nie semoga bermanfaat. Pembahasan kali ini saya mau sedikit share tentang bagai mana cara membagi header menjadi 1 kolom atau 2 kolom. Pembagian haeder menjadi 2 ataupun 1 kolom cukup simpel gag terlalu rumit menu html-nya hanya perlu penggantian pada template blogger sobat saja, yah langsung saja kita praktekin yukz.. :)

Contoh header 1 kolom

 
Contoh hesder 2 kolom

Yang pertama merubah header 1 kolom menjadi 2 kolom

• Sobat login ke akun blogger sobat sendiri bukan akun saya.. he :)
• pilih tata letak --> edit HTML
• Agar lebih amannya sobat download template lengkap terlebih dahulu template sobat untuk menghindari hal-hal yang tidak di inginkan.
• Selanjutnya sobat cari kode header-wrapper seperti ini :

#header-wrapper {
width:900px;
margin:0 auto 0px;
background:$bgheadercolor
no-repeat top center;
height:190px;
}

#header-inner {
width:900px;
background-position: center;
margin-$startSide: auto;
margin-$endSide: auto;
}

#header {
margin: 0px;
text-align: left;
color:$pagetitlecolor;
}

• Selanjutnya kode yang sudah sobat temukan di atas ganti dengan kode berikut :

#header-wrapper {
width:980px;
margin:0 auto 10px;
}

#headerkiri {
width:200px;
background-position: left;
margin-left: auto;
margin-right: auto;
float:left;
}

#header {
margin: 5px;
text-align: left;
color:$pagetitlecolor;
}

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

#header a {
color:$pagetitlecolor;
text-decoration:none;
}

#header a:hover {
color:$pagetitlecolor;
}

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:150px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}

#header img {
margin-$startSide: auto;
margin-$endSide: auto;
}

#headerkanan{
width:750px;
float:right;
padding-top:26px;
}

• Berikutnya sobat cari kode berikut ini, agar pencarian sobat lebih mudah pencet ja ctrl+F :

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/>
</b:section>
</div>

•  Setelah kode di atas ketemu berikutnya sobat ganti dengan kode berikut ini :

<div id='header-wrapper'>
<div id='headerkiri'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/>
</b:section>
</div>

<div id='headerkanan'>
<b:section class='header' id='header2' preferred='yes'/>
</div>
</div>

•  Yang terakgir simpan template.

Berikutnya cara merubah header 2 kolom menjadi 1 kolom. Ini sama halnya dengan yang telah di uraikan di tas hanya tinggal di balik saja. Kalo masih bingung mari kita ulas sekali lagi bersama sama.

• Sama juga sobat harus login ke akun blogger sobat.
• Selanjutnya pilih Tata letak --> Edit HTML
• Sobat cari kode berikut ini :

#header-wrapper {
width:980px;
margin:0 auto 10px;
}

#headerkiri {
width:200px;
background-position: left;
margin-left: auto;
margin-right: auto;
float:left;
}

#header {
margin: 5px;
text-align: left;
color:$pagetitlecolor;
}

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

#header a {
color:$pagetitlecolor;
text-decoration:none;
}

#header a:hover {
color:$pagetitlecolor;
}

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:150px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}

#header img {
margin-$startSide: auto;
margin-$endSide: auto;
}

#headerkanan{
width:750px;
float:right;
padding-top:26px;
}

• Kemudian sobat ganti menjadi kode berikut :

#header-wrapper {
width:900px;
margin:0 auto 0px;
background:$bgheadercolor
no-repeat top center;
height:190px;
}

#header-inner {
width:900px;
background-position: center;
margin-$startSide: auto;
margin-$endSide: auto;
}

#header {
margin: 0px;
text-align: left;
color:$pagetitlecolor;
}

•  Setelah berhasil dengan kode di atas sobat cari lagi kode berikut ini :

<div id='header-wrapper'>
<div id='headerkiri'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/>
</b:section>
</div>

<div id='headerkanan'>
<b:section class='header' id='header2' preferred='yes'/>
</div>
</div>

• Kemudian ganti menjadi kode berikut :

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/>
</b:section>
</div>

• Nah yang teakhir jangan lupa di save template. 

NB : Pada huruf yang berwarna biru bisa sobat sesuaikan dengan lebar template sobat.

Pada intinya semua sama hanya tinggal di balik saja kode htmlnya yang semula 1 kolom menjadi 2 kolom begitu juga merubah  yang 2 kolom mwnjadi 1 kolom. 

Artikel Terkait:

Posted in: INTERNET