Sidebar Dalam Kotak-Kotak Terpisah

Setelah berlibur selama dua hari ke kampung halaman, akhirnya hari ini terpaksa harus balik lagi ke tempat biasa kang Rohman mencari rezeki, sedih memang karena harus selalu terpisah dari keluarga. By the way, mungkin memang sudah suratan untuk jauh dari mereka, * ah kenapa harus mengeluh ya, mending syukuri saja apa yang telah tuhan berikan kepada saya *. Biar tidak mengeluh terus, lebih baik mijit-mijit papan keyboard saja barangkali akan keluar suatu tulisan yang di minati para sahabat semua.

Setelah membaca beberapa pertanyaan yang ada, rupanya banyak sekali yang tertarik 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. Jadi, dalam tutorial kali ini sepertinya kang Rohman tujukan bagi mereka yang sedikiit familiar dengan kode CSS.

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? hehehehehe……. kacian dech loe, minum obat bingung dulu gih biar bingungnya hilang.

Dimanakan kode wiget itu berada? setiap template tentunya berbeda satu sama lain, sehingga kang Rohman pun tidak bisa mematok kode itu harus bagaimana, namun sebagai contoh kang Rohman 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.

sumber:http://kolom-tutorial.blogspot.com/2008/09/membuat-sidebar-dalam-kotak-kotak.html