Google Translator

English French German Spain Italian Dutch Russian Brazil Japanese Korean Arabic Chinese Simplified

Membuat Sidebar Blog Menjadi 2 Kolom

Caranya adalah :
1. Login ke Blogger
2. Masuk ke TATA LETAK --> EDIT HTML
3. Backup template dulu untuk cadangan.
4. Copy paste kode CSS dibawah ini diatas kode ]]></b:skin>.


#Ichal-Sidebar {
float: right;
word-wrap: break-word;
overflow: hidden;
}

#sidebar {
width: 300px;/* SESUAIKAN */
float: left;
overflow: hidden;
margin:0px 0px 10px 0px;
}

#sidebar h2 {
color: #FFFFFF;
background: #000000;
font-family: Arial;
font-size:16px;
display:block;
text-align: center;
padding:5px 0px 5px0px;
margin:0 0 5px 0;
border: 1px solid #cccccc;
}

#sidebarL{
width:140 px;/* SESUAIKAN */
float:left;
background:#FFFFFF;
margin-bottom: 4px;
padding: 10px 0px 10px 0px;
border: 1px solid #cccccc;
}

#sidebarR{
width:130 px;/* SESUAIKAN */
float:right;
background:#FFFFFF;
margin-bottom: 4px;
padding: 10px 0px 10px 0px;
border: 1px solid #cccccc;
}

#sidebarL .widget-content {margin:0px 5px;5px 5px;}
#sidebarR .widget-content {margin:0px 5px;5px 5px;}


5. Cari kode ini : <div id='sidebar-wrapper'> dan Copy paste kode dibawah ini dan letakkan diatas <div id='sidebar-wrapper'>.

<div id='Ichal-Sidebar'>
<div id='sidebar'>

<b:section class='sidebar' id='sidebarL' preferred='yes'>
</b:section>

<b:section class='sidebar' id='sidebarR' preferred='yes'>
</b:section>

</div>
</div> <!-- end Ichal-Sidebar -->


6. Klik Pratinjau untuk melihat perubahanya, tentu saja dengan menyesuaikan ukuranya terlebih dahulu ( Keterangan yang saya kasih warna merah yaitu width, background, margin, padding ).
7. Jika sudah sesuai harapan Klik Simpan Template.

Jika sobat ingin 2 kolom sidebar yang anda buat berada di bawah sidebar utama, simpan kode di atas sesudah kode di bawah ini :

<div id='sidebar-wrapper'>
.............
.............
.............
</b:section>
</div><div style='clear:both;'/>


Selamat mencoba ...

6 komentar:

Digital Think mengatakan...

thx atas infonya

kdrama mengatakan...

infonya bagus.minta tips cara buat kolom di bawah header itu gmn?
makasih.

WonK SenK mengatakan...

makasih tipsnya gan. langsung di coba2 nih

Echa mengatakan...

tipz oke nih..

Edo Pandiangan mengatakan...

keren cuy... :)

Amy Sularmi Al-Azhar Lampung mengatakan...

Makasih ya... tp koq di bloggerku gk ada kode yg di no 5 itu. Terus gimana caranya...?

Posting Komentar

Mau komentar??? Silahkan, asal jangan komentar SPAM.

Maaf!!! Komentar yang bernada SPAM akan saya hapusssss.

nO sPam, nO pOrn, Please!!!

 

.+'''''''''''''''''''''''''''''''''''''+.