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:
Ganti/Replace kode tersebut diatas dengan kode dibawah ini.
Keterangan kode diatas:
Kemudian cari kode yang paling mirip dengan dibawah ini (tekan ctrl+F untuk mempermudah pencarian):
Setelah ketemu, ganti/replace dengan kode dibawah ini :
Untuk melihat hasilnya klik Pratinjau dulu biar kalau ada error gak bingung.
jika sudah sesuai dengan keinginan sobat silahkan disimpan / Save hasil modif sobat.
Selamat mencoba dan semoga sukses.
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.
Selamat mencoba dan semoga sukses.
Artikel Cara Menambahkan Elemen Baru (Kolom Iklan) di Samping Header ini Anda baca di webeson.blogspot.com
Jika Anda merasa artikel ini bermanfaat, jangan lupa kasih komentar.
Terimakasih atas kunjungan Anda. Kritik dan saran dapat anda sampaikan melalui kotak komentar. Silahkan baca Posting Meranik Lainnya di bawah ini dan jangan lupa berkunjung kembali
Terimakasih atas kunjungan Anda. Kritik dan saran dapat anda sampaikan melalui kotak komentar. Silahkan baca Posting Meranik Lainnya di bawah ini dan jangan lupa berkunjung kembali
