Menambah Gadget atau kolom Blog

Written By Unknown on Wednesday, April 27, 2011 | 5:08 AM

Sobat blog, apakah sobat termasuk orang yang tidak puas dengan kondisi template blog sobat yang cuma 3 kolom atau 2 kolom saja ?
tidak usah pusing-pusing untuk mancari template baru untuk blog sobat, karena kali ini tips yang akan saya posting adalah bagaimana caranya menambah kolom sidebar pada blog sobat.
langsung saja ya,,

1. sobat masuk ke rancangan + edit HTML
2. cari script seperti di bawah ini :
/* Outer-Wrapper
------------------------------------------ */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

#main-wrapper {
width: 410px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
3. cari kode #outer-wrapper{
    kemudian ganti kode yang berwarna merah hingga menjadi seperti ini :
#outer-wrapper {
width: 960px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
4. cari kode #sidebar-wrapper{
    tambahkan kode yang berwarna merah hingga menjadi seperti ini :
#sidebar-wrapper {
width: 220px;
float: right;
padding-left:10px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
5. tambahkan kode dibawah ini tepat di bawah #sidebar-wrapper{
    sehingga kodenya menjadi seperti ini :
#sidebar-wrapper {
width: 220px;
float: right;
padding-left:10px; /* yg ini tambahan biar tampak ada jarak sela */
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebarnew-wrapper {
width: 300px;
float: right;
padding-left:10px;
word-wrap: break-word;
overflow: hidden;
}
6. cari kode seperti ini :
<div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='Mengenai Saya' type='Profile'/>
<b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'/>
</b:section>
      </div>
7. tambahkan kode berwarna merah ini tepat di bawah langkah no.6
<div id='sidebarbaru-wrapper'>
<b:section class='sidebar' id='sidebarbaru' preferred='yes'/>
</div>
    sehingga kodenya menjadi seperti ini :

<div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='Mengenai Saya' type='Profile'/>
<b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'/>
</b:section>
      </div>


<div id='sidebarbaru-wrapper'>
<b:section class='sidebar' id='sidebarnew' preferred='yes'/>
</div>

Sekarang sobat misa melihat hasilnya pada  elemen laman,, sidebar sobat sudah bertambah satu, untuk menambah sidebar baru lagi caranya sama seperti diatas, yang perlu diperhatikan adalah pada code berwarna merah di bawah ini sama :
#sidebarnew-wrapper {
width: 300px;
float: right;
padding-left:10px;
word-wrap: break-word;
overflow: hidden;
}

<div id='sidebarbaru-wrapper'>
<b:section class='sidebar' id='sidebarnew' preferred='yes'/>
</div>

0 comments:

Post a Comment