RSS2.0

Membuat Sidebar terpisah dan Berkotak-kotak

Sabtu, 20 September 2008

wah udah lama nih.. ga' mengisi dan mengotak-atik siblog.. soalnya saya beberapa hari ini lagi sibuk.. jadi baru bisa nge-Blog lagi seperti biasayanya.. beberapa waktu lalu saya mengunjungi blognya kang-rohman disana kang- rohman menulis artikel tentang cara membuat sidebar agar terlihat terpisah-pisah, persis kayak blog milik kang rohman, Nah dari situ saya menulis artikel ini ya itung-itung penyebar ilmu yang baek biar yang baca dapat berguna dan bisa dipaktekin.Nah nih gambar blog kang rohman... Sidebarnya terlihat terpisah-pisah kan..

sidebar-kotak

Dari gambar diatas.. bisa di lihat sidebarnya terpisah dan seperti kotak-kotak lagi, jadi terkesan rapi blognya mo tau cara buatnya biar bisa jadi kayak gitu?? ha.. baca terus ya biar ngerti...

Nah cari kode Sidebar Widgetnya seperti:

.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

Pisah ketiga kode ini.. biar ga' bingung jadinya.. (kode ini terdapat pada template minima) tapi bila sidebar widget dengan main widgetnya udah terpisah.. dibiarrin aja, nah setelah dipisah maka jadinya seperti ini:

.sidebar .widget{
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

.main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}



Jadi untuk terlihat terpisah maka ada yang harus dimodifikasi yaitu:
kode pada Sidebar . Widger dimodifikasi jadi

.sidebar .widget{
background:#fff;
border:1px dotted #6c6b6b;
margin:0 0 1.5em;
padding:0.5em;
}



1. Background merupakan latar belakang blog bisa diganti dengan warna yang sesuai
2. Border 1 px dotted #6c6b6b; merupakan garis yang mengelilingi wiget sebesar 1pixel
3. Margin merupakan jarak kebawah antara widget yang 1 dengan yang lainnya sebesar 1,5em
4. Padding memberikan sela 0,5em

Nah, keempat hal inilah yang dapat membuat sidebar seakan-akan terpisah dan berkotak-kotak..

Nah silahkan mecoba ya...

Baca yang Lainnya



19 komentar:

Gelandangan mengatakan...

wahhh informasi yang sangat bermanfaat nih kang

gratisan mengatakan...

Kang tutorialnya bermanfaat bangets ... pemula pasti paham kalo baca tutor ini ... ^-^

Tips Blogspot mengatakan...

Gelandangan dan Gratisan : Makasih bbuat komennya semoga blog saja dan isinya dapat bermanfaat bagi.. semua blogger

yudhi_blog mengatakan...
Komentar ini telah dihapus oleh administrator blog.
albri mengatakan...

Salam dari Newbie. Ini ada hidangan idul fitri untuk para Blogger. Bukan bermaksud nyepam, tapi ingin berbagi. Maaf kalau tidak berkenan.

Blogger Templates Designs mengatakan...

Thank you.

for Share. and we have : Blogger Templates Designs too.

bliyan mengatakan...

thx mas buat infonya. mohon ijin buat praktek langsung?

Rumi mengatakan...

Terima kasih atas infonya. Saya dah coba and berhasil

Arez_Reza mengatakan...

benar2 membantu........makasih mas.......kunjung balik!

kangmahfudz mengatakan...

kode ini saya cari di themaq kok gak ada ya....

LPPTKA-BKPRMI mengatakan...

Mantapppp..thanks..gan

Awandragon mengatakan...

ow terima kasih caranya

puluthriau mengatakan...

Simple tips from tipsblogspot

Uang Online mengatakan...

Uang Online
http://www.dibonusonline.blogspot.com
Thanks Atas infonya, berguna banget terus udah aq coba.... Maksih yah...... Kunjungi website aq juga dong/////

jalal mengatakan...

trimah kasih kang ilmunya

Blogger Tutorial mengatakan...

makasih atas infonya bang.. visit back ya..
marilah kita menjalin komunikasi yang baik antara sesama Blogger..

Mr.Cobek mengatakan...

bermanfaat banget postingannya...tukeran link boleh kan?hehe

www.filmajib.blogspot.com

Obat Herbal Kanker Darah mengatakan...

wow,.. keren juga tuh,.. saya coba nih,... makasih infonya,..

Vimax Original Pembesar Mr.P Herbal mengatakan...


artikelnya sangat membantu gan thanks for sharing
kunjungi web kami gan => www.vimaxkapsuloriginal.com

Posting Komentar

Setiap Kali anda berkomentar maka anda akan mendapatkan link balik dari saya...

Terima kasih atas KOMENTAR-nya

Terjemahkan