Kode Iklan Anda Disini
Kode Iklan Anda Disini
Cara Menambahkan Elemen Baru (Kolom Iklan) di Samping Header
Sepengetahuan saya template standar dari blogger tidak bisa dibuat seperti ini, yang harus dilakukan adalah mengubah sedikit CSS kode dan menambah kode HTML di bagian tag <body> </body> dari template blog sobat.Bagi sobat yang ingin mempraktekannya, sebaiknya backup dulu template sobat, supaya kalau ada error bisa dikembalikan lagi templatenya.
Oke langsung aja, langkah-langkahnya sebagai berikut
Cari kode yang paling mirip dibawah ini:
/* Header
---------------------------------
*/
#header-wrapper {
width:960px;
margin:0 auto 10px;
border:1px solid #000;
}
#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}
#header {
margin: 5px;
border: 1px solid #000;
text-align: center;
color:$pagetitlecolor;
}
#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
}
#header a {
color:#ffffff;
text-decoration:none;
}
#header a:hover {
color:#999999;
}
#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
}
#header img {
margin: 0px;
margin: 0px;
}
---------------------------------
*/
#header-wrapper {
width:960px;
margin:0 auto 10px;
border:1px solid #000;
}
#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}
#header {
margin: 5px;
border: 1px solid #000;
text-align: center;
color:$pagetitlecolor;
}
#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
}
#header a {
color:#ffffff;
text-decoration:none;
}
#header a:hover {
color:#999999;
}
#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
}
#header img {
margin: 0px;
margin: 0px;
}
Ganti/Replace kode tersebut diatas dengan kode dibawah ini.
#header-wrapper {
width:960px;
margin:0 auto 0px;
background:#ffffff;
height:140px;
}
#head-inner {
width:450px;
background-position: left;
text-align: justify;
margin-left: auto;
margin-right: auto;
float:left;
border-right:2px dashed #000;
}
#header {
margin: 0px;
border: 0px solid #000;
text-align: left;
color:#000;
}
#header-kanan{
width:450px;
text-align: justify;
float:left;
padding-top:10px;
}
width:960px;
margin:0 auto 0px;
background:#ffffff;
height:140px;
}
#head-inner {
width:450px;
background-position: left;
text-align: justify;
margin-left: auto;
margin-right: auto;
float:left;
border-right:2px dashed #000;
}
#header {
margin: 0px;
border: 0px solid #000;
text-align: left;
color:#000;
}
#header-kanan{
width:450px;
text-align: justify;
float:left;
padding-top:10px;
}
Keterangan kode diatas:
- Kode warna Biru adalah lebar dan tinggi header. disesuaikan dengan lebar template sobat ya.
- Background #ffffff; sesuaikan dengan background header sobat ya. kalau ingin menambahkan background gambar maka seperti ini : -->> background:#ffffff url(Url Image Header Sobat) no-repeat top center;
- #header kanan pada kode diatas adalah kode CSS untuk elemen tambahan disamping header.
Kemudian cari kode yang paling mirip dengan dibawah ini (tekan ctrl+F untuk mempermudah pencarian):
<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>
<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 ketemu, ganti/replace dengan kode dibawah ini :
<div id='header-wrapper'>
<div id='head-inner'>
<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='header-kanan'>
<b:section class='header' id='header2' preferred='yes'/>
</div>
</div>
<div id='head-inner'>
<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='header-kanan'>
<b:section class='header' id='header2' preferred='yes'/>
</div>
</div>
Untuk melihat hasilnya klik Pratinjau dulu biar kalau ada error gak bingung.
jika sudah sesuai dengan keinginan sobat silahkan disimpan / Save hasil modif sobat.
Tidak ada komentar:
Posting Komentar