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.. :)
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 :
Setelah kode di atas ketemu berikutnya sobat ganti dengan kode berikut ini :
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 :
Kemudian ganti menjadi kode berikut :
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. Semoga ilmu ini bermanfaat buat sobat blogger semua dan mohon dukungannya dalam kontes SEO negeriads.com solusi berpromosi.
Tidak ada komentar:
Posting Komentar