Friday, October 10, 2008

Membuat Sidebar Dalam Kotak-Kotak yang Terpisah

sudarma

Satu lagi ni tutorial blog yang saya demen sobat ( semua tutorial saya seneng kok). Dengan menerapkan tutorial ini blog saya kelihatan lebih rapi sidebarnya. Selain diterapkan dalam sidebar, teknik ini juga bisa di terapkan di postingan/main bar( bener gak ya). Tutorial ini saya dapatkan setelah lama melakukan pencarian, baik dengan bertapa maupun dengan berpuasa ( becanda, mencarinya dengan ngetik di google kok). Tutorial ini ketemu di tempat kang rohman. Oke biar ga terlalu lama ngebacot saya lanjutkan ke gerakan berikutnnya, kaki di naikkan ke atas, tangan di lipat ke belakang, wek kok jadi senam???

Ini ni langkah yang sebenarnya :) biar blog bisa kayak blog sederhana ini. Oke pertama buka html ( tau caranya kan?) oke biar seragam saya contohkan kode yang ada di blog ini :
ini ni kode yang saya rubah biar dia ( sidebarnya) mau berpisah, dan berwarna.





#sidebar-wrapper .widget, .main .widget {

margin:0 0 1.5em;

padding:0 0 1.5em;

}


nah biar lebih gampang ngerubahnya kita bagi dua kode tersebut ( kode diatas itu berarti sidebar widget dan main widget akan didefiniskan selalu sama), setelah di rubah ke dua kode tersebut menjadi seperti di bawah





#sidebar-wrapper .widget{

margin:0 0 1.5em;

padding:0 0 1.5em;

}






#main .widget {

margin:0 0 1.5em;

padding:0 0 1.5em;

}




nah untuk sidebarnya kita utak-atik kode yang ini





#sidebar-wrapper .widget{

margin:0 0 1.5em;

padding:0 0 1.5em;

}




untuk memberika kesan terpisah sobat bisa memberikan variasi seperti ini





#sidebar-wrapper .widget{

background:#fff;

border:1px dotted #6c6b6b;

margin:0 0 1.5em;

padding:0.5em;

}

kode yang merah bisa sobat ganti sesua dengan kreatifitas masing2..Semoga penjelasan saya tidak susah dimengerti :) Selamat mencoba :)





Posting yang berhubungan



5 komentar:

therunk said...

blognya keren bro.. postingannya juga bermanfaat.. tetep sharing ya.. biar ilmu kita sama sama bertambah :)

Sudarma said...

@ theruk : terima kasih sobat, ini juga hasil dari blogwalking. Saya bukan penemunya. he3..

JoVie said...

oh gitu yah caranya....
ck ck...ck..hebat...

deddy said...

lama aku cari baru ketemu.thanks

zUq said...

makasih tentang "Membuat Sidebar Dalam Kotak-Kotak yang Terpisah" tp HTML yg aq pnya begini,
#main-wrapper {
float: left;
margin: 20px 0 0 80px;
_margin: 20px 0 0 40px;
width: 530px;
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 {
float: Left;
margin: 20px 0 0 24px;
width: 251px;
font-size: 9pt;
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 */
}

sudah aq uta atik tp blm jadi....

Post a Comment

Silahkan tinggalkan komentar anda untuk artikel ini :)