________________________________________________________________________________________________________________________________

Sabtu, 02 April 2011

Tambah sidebar menjadi 3 kolom

kali ini saya memasang posting tentang sidebar..caranya cukup mudah,tinngal liat cara dibawah ini...



* Sign ke Blogger.
* Pilih Rancangan.
* Pilih Edit HTML.
* Back up dulu template anda.
* Tombol pada Expand Tempate Widgetnya tidak perlu dikasih tanda contreng.
* Cari kode #sidebar
* Copy kode dibawah in dan paste diatas kode tadi.

#sidebaratas-wrapper {
border: 1px solid #FFFFFF;
background:#FFFFFF;
width:470px;
float:right;
padding:5px;
margin-top:10px;
}

ubahlah kode tersebut sesuai dengan lebar dari kedua sidebar yang sudah ada dengan menjumlahkan width dari kedua sidebar ditambah padding dan margin.
Contoh sidebar yang digunakan pada EPG Studio (kode ini hanya untuk contoh saja)

#sidebaratas-wrapper { /*Sidebar yang ditambahkan*/
border: 1px none #FFFFFF;
background:#0000b3;
width:470px;
float:right;
padding:5px 5px .25em;
margin-bottom:10px;
}
#sidebar-wrapper { /*sidebar lama*/
width: 260px;
float: $endSide;background:#0000b3; border:0px solid $bordercolor;white; padding:5px 5px .25em;
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 {/*sidemar lama*/
width: 200px;
float: right;background:#0000b3; border:0px solid $bordercolor;white; padding:5px 5px .25em;
psdding-left:5px;
word-wrap: break-word;
overflow: hidden;
}

* Setelah selesai mengubah lebar sidebar baru, cari kode seperti ini :




* Copy kode dibawah ini kemudian paste tepat dibawah kode tadi :




* Klik tombol Simpan Template.
* Selesai...Lihat Blog baru anda sekarang



Jika sidebar atas ingin ditampilkan dalam bentuk kotak-kotak ikuti langkah berikut ini :


* Masih di edit HTML.
* Cari kode ini :


/* Sidebar Content
----------------------------------------------- */

* Copy seluruh kode dibawah unu kemudian paste tepat dibawah kode tadi
.sidebaratas {
color: $sidebartextcolor;
line-height: 1.5em;
}

.sidebaratas ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebaratas li {
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:15px;
text-indent:-15px;
line-height:1.5em;
}
.sidebaratas .widget{
background:#3D81EE;
border:2px solid #66B5FF;
margin:0 0 0.25em;
padding:0.5em;
}

Ubahlah kode yang berwarna merah sesuai dengan keinginan anda
* Setelah selesai pengeditan, klik Tombol Simpan Template.
* Lihat perubahan pada blog anda.

0 komentar:

Posting Komentar

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Dcreators