DAFTAR ISI
Nonton Televisi Online

HTML Scroll Boks Warna

Jumat, 29 Januari 2010

MEMBUAT SIDEBAR DALAM KOTAK-KOTAK TERPISAH

Untuk membuat sidebar atau pun kotak posting terlihat dalam bentuk kotak-kotak terpisah seperti yang tampak pada screenshot di bawah ini :Dari gambar di atas terlihat bahwa setiap widget yang di masukan baik itu sidebar ataupun posting akan terlihat dalam kotak sendiri-sendiri yang katanya lebih menarik dan terlihat lebih rapih. Bagaimanakah cara membuat layout seperti itu? ini sangatlah mudah, terutama bagi anda yang sudah familiar dengan yang namanya kode CSS namun tentu saja sangat sulit bagi meraka yang belum mengenalnya.Tekniknya simpel, yaitu anda tinggal memberi warna yang berbeda antara background widget dengan background di mana widget itu berada, kemudian beri jarak antara widget yang satu dengan yang lain dengan menggunakan perintah “margin” dalam hal ini margin-bottom (margin bawah), dan agar lebih terkesan kotak, maka widget tersebut di beri perintah border. Bingung? iya bingung aku Dimanakan kode wiget itu berada? setiap template tentunya berbeda satu sama lain, sehingga aku pun tidak bisa mematok kode itu harus bagaimana, namun sebagai contoh aku ambil Template minima. Di dalam template minima, kode widgetnya adalah seperti ini :.

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

Jadi untuk mengetahui di manakah kode widget itu? jawabnya yang ada kata-kata widget nya (bener ngga? hehehe..). Namun dalam kasus di atas, ada dua kode widget yang di definisikan sama yaitu sidebar widget (halaman sidebar) dengan main widget (halaman posting) sehingga kedua widget tersebut akan selalu sama. Agar lebih flexibel dalam proses pengaturan widget, sebaiknya kode tersebut kita buat terpisah, sehingga kodenya jadi 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;
}

Dengan kode di atas, maka anda bisa lebih berexplorasi. Ok para sedulur semua, kita fokus satu satu dulu yaitu ke widget sidebar. Untuk memberikan kesan sidebar widget mempunyai kotak yang terpisah-pisah anda bisa membuat variasi kode seperti ini (contoh saja) :

.sidebar .widget{
background:#fff;
border:1px dotted #6c6b6b;
margin:0 0 1.5em;
padding:0.5em;
}
Arti kode di atas kurang lebih seperti ini : warna background akan putih, garis mengelilingi widget sebesar 1 pixel (sehingga terkesan terlihat kotak), jarak ke bawah antara widget yang satu dengan yang lain sebsar 1.5em, dengan nilai padding (pemberi sela) sebesar 0.5em.Dengan memodifikasi seperti kode di atas saja, anda sudah punya sidebar dengan bentuk kotak-kotak terpisah. Apakah kode-kode tersebut mutlak? oh tentu saja tidak, berbagai variasi bisa anda ciptakan, misal memberi widget tersebut dengan background gambar, grid atau lain sebagainya, ini tidak lepas dari kreatifitas anda masing-masing.Bagaimana dengan nasib main widget? main widget itu untuk mengatur widget posting, jadi tinggal kreasikan saja seperti halnya sidebar widget, simpel kan? hihihi…. ah cape nih ngetiknya, mudah-mudahan saja mengerti, soalnya saya juga bingung nih cara penyampaian yang mudah di mengerti seperti apa, mudah-mudahan bisa di mengerti dech. maklumlah aku bukan guru bukan totor ya dimemerngertikanlah Selamat mencoba semoga berhasil

Komentar :

ada 5 komentar ke “MEMBUAT SIDEBAR DALAM KOTAK-KOTAK TERPISAH”
keborawa mengatakan...
pada hari 

Gan, mo tanya klo buat halaman postingan yg fleksibel gimana yah? Misal kita memposting gambar dengan ukuran besar, kan gambarnya pasti melwati batas halaman postingan. Giman biar halaman postingan fleksibel, selalu mengikuti berapapun besar gambar di postingan, trims gan.... Mohon bantuannya....

Yohandi mengatakan...
pada hari 

blognya bagus pingin ngikut.......

ino putro mengatakan...
pada hari 

thanks infonya gan,,,
nyoba jawab yg d atas,, kalo mau buat gambar ato widget yg pas ubah aja lebarnya,,,cari kata width,, bisa ubah ukuran,, ato gak ganti auto,,

Amy Sularmi Al-Azhar Lampung mengatakan...
pada hari 

koq kode sidebar.widget punyaku gk ada ya. trs gmn? tolong donk bantu aku...

Amy Sularmi Al-Azhar Lampung mengatakan...
pada hari 

Thanks ya. tp dimana tepatnya letak kode tersebut.

Posting Komentar


weather counter

BUKU TAMU


Anda berminat buat Buku Tamu seperti ini?
Klik disini
Read more: Membuat Buku Tamu Melayang di http://paksi-dirgantara.blogspot.com

Pengikut

 
This Blog is proudly powered by Blogger.com | Template by Angga Leo Putra