Membuat Kolom Widget Di Samping Header Blog

Membuat Kolom Widget Di Samping Header Blog - Seperti yang ditanyakan oleh salah satu pengunjung, saya akan memberikan cara untuk Membuat Kolom Widget Di Samping Header Blog. Mungkin cara ini bisa digunakan untuk menaruh iklan yang dipasang di blog.


Silahkan ikuti langkah ini untuk membuatnya :


1. login blogger.com
2. Tata Letak ---> Edit HTML
3. Lalu cari kode seperti ini :

----------------------------------------------------------------------------
/* Header
===================================
*/
#header-wrapper {
width:900px;
margin:0 auto 0px;
background:$bgheadercolor url(http://ahom24.googlepages.com/magazine_01.jpg) 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;
}





4. ganti kode tersebut dengan ini !





/* Header
===================================
*/

#header-wrapper {
width: 900px;
margin:0 auto 0px;
background:$bgheadercolor url(http://ahom24.googlepages.com/magazine_01.jpg) no-repeat top center;
height: 190px;
}

#head-inner {
width:600px;
background-position: left;
margin-left: auto;
margin-right: auto;
float:left;
}

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

#r_head{
width:300px;
float:left;
padding-top:10px;
}

Kode  900px adalah panjang header, kode yang berwarna hijau 190px adalah tinggi header.

5.Kemudian cari kode seperti di bawah ini !



<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>



6. Kalau sudah ketemu ganti kode tersebut dengan kode di bawah 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='r_head'>
<b:section class='header' id='header2' preferred='yes'/>
</div>
</div>



7.Klik tombol simpan template.
Kemudian pilih Elemen Halaman, lalu lihat perbedannya. Mungkin beberapa blog tidak berhasil untuk memasangnya, dan ambilan kode yang mirip dengan diatas.. selamat mencoba - Membuat Kolom Widget Di Samping Header Blog

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di NgBlog

Please Share it! :)