Cara Menambah Kolom Pada Sidebar

 

Kali ini masih dalam seputar design template tepatnya menambah satu kolom pada sidebar. Pada beberapa template yang kebanyakan bagus2 tapi hanya 2 kolom sehingga penggunanya jadi kurang bisa berekspresi dengan widget2 yang menarik atau dengan tambahan2 yang lain.

Untuk membuatnya sebagai berikut:
Sekedar sharing:

• Tentukan dulu lebar kolom atau elemen baru yang ingin Anda tambahkan, misalnya lebarnya 220px agar nantinya elemen yang kita tambahkan tidak melorot maka Anda perlu menambahkan pula lebar elemen header, outer dan footer dengan jumlah lebar sidebar baru yang ingin Anda tambahkan

 Untuk merubah angka masing-masing elemen halaman

• Login ke Blogger.com
• Kemudian Tata Letak
• Pilih Edit HTML
• Centang Expand Widget
• Cari kode berikut:

/* Header
------------------------------------------ */

#header-wrapper {

width:660px;

margin:0 auto 10px;
border:1px solid $bordercolor;
}

• Ganti lebar/ widht menjadi seperti berikut:

 

• Selanjutnya cari kode berikut:

/* Outer-Wrapper
------------------------------------------ */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
} 

• Ganti angka widht jadi seperti berikut:

 

• Untuk merubah lebar footer cari kode berikut:

#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
} 

• jadi seperti berikut:

 

• Sekarang Anda buat kode untuk sidebar baru seperti berikut:

#sidebarbaru-wrapper {
width: 220px;
float: right;
padding-left:10px;
word-wrap: break-word;
overflow: hidden;
}

• Cari kode berikut :  

/* 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 */
}

• Tambahkan kode elemen baru yang akan Anda tambahkan dibawah kode diatas, sehingga kodenya menjadi seperti berikut:

    /* Outer-Wrapper
    ------------------------------------------ */
    #outer-wrapper {
    width: 880px;
    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;
    padding-left:10px; /* yang ini adalah tambahan untuk 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 */
    }
    #sidebarbaru-wrapper {
    width: 220px;
    float: right;
    padding-left:10px;
    word-wrap: break-word;
    overflow: hidden;
    }

• Berikutnya adalah menambahkan kode id untuk elemen sidebar baru tersebut. Untuk kode id sidebar sebelum penambahan kolom adalah seperti ini:

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

• Untuk id sidebar baru seperti berikut:

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

• Selanjutnya adalah menyatukan kode sidebar baru tersebut pada kode id sidebar yang sebelumnya, 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='sidebarbaru' preferred='yes'/>

</div> 

• Selanjutnya Save Template

Sekarang untuk melihat hasilnya klik elemen halaman kalau sudah ada tambahan kolom baru pada sidebar seperti screenshot berikut berarti berhasil:

 

Selamat Mencoba...

Share on Google Plus

About Admin

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.