Maaf Sobat Semua kayaknya posting ini kurang menarik , ya siapa tau aja sobat-sobat ada yang suka sih he..he..he...
Saya pengen berbagi bagaimana cara membuat Sidebar dalam kotak - kotak terpisah sekaligus bagaimana memberi background dengan warna/animasi /gambar.
Langsung aja Sobat kita menuju TKP , Silahkan klik Open dibawah ini
Langkah-langkahnya sebagai berikut Sobat ;
- Login dulu ke Akun Blog anda
- Klik Rancangan lalu pilih Edit HTML
- Kemudian Cari kode ]]></b:skin>Lalu Copy kode dibawah ini dan letakkan tepat diatas kode ]]></b:skin>
.sidebar .widget{
background:#000 url(http://i1206.photobucket.com/albums/bb455/binkbenk/Copyofxp_34.jpg)no-repeat center;
border:1px double #E80101;
height;auto;
width;auto;
background:#000 url(http://i1206.photobucket.com/albums/bb455/binkbenk/Copyofxp_34.jpg)no-repeat center;
border:1px double #E80101;
height;auto;
width;auto;
-moz-border-radius:20px 0px 20px 0px;
-webkit-border-radius:20px 0px 20px 0px;
border-radius:20px 0px 20px 0px;
}-webkit-border-radius:20px 0px 20px 0px;
border-radius:20px 0px 20px 0px;
- Tunggu dulu sobat jangan buru -buru disimpan
- Edit dulu biar nanti pas dan cocok dengan keinginan Sobat
- Kode Url dibawah ini adalah backgroundnya,, sobat bisa menganti dengan Url gambar kesukaan sobat.. Untuk gambar yang ukurannya besar lebih baik sobat kecilkan dulu ukurannya biar sesuai dengan tinggi dan lebar sidebarnya. Misalnya sobat ganti dengan animasi yang bergerak,sobat juga bisa merubah kode no-repeat center dengan repeat center
http://i1206.photobucket.com/albums/bb455/binkbenk/Copyofxp_34.jpg
- Bila sobat pengen Background Sidebar hanya warna tanpa gambar atau animasi ,Silahkan hapus kode yang tertulis seperti dibawah ini dan ganti kode #000 dengan kode warna yang Sobat sukai , Nah untuk kode Warna sobat bisa lihat disini , karena #000 menunjukkan warna hitam
url(http://i1206.photobucket.com/albums/bb455/binkbenk/Copyofxp_34.jpg)no-repeat center
- Nah kalau kode yang ini ; border:1px double #E80101 bisa Juga sobat rubah misalnya saja menjadi border:4px double #E80101 , dan hasilnya nanti seperti gambar dibawah , batas garis kotaknya(batas sidebar) menjadi dobel alias dua, he..he..he.. lumayan cantik bukan
- Warna garis kotaknya(batas sidebar) pun juga bisa sobat ganti , kode warnanya disini
- Nah ini langkah yang terakhir Sobat ,Perhatikan kode -moz-border-radius:20px 0px 20px 0px; untuk mendapatkan bentuk yang berbeda , sobat silahkan rubah ukurannya , misalnya ; -moz-border-radius:10px 10px 10px 10px; Karena semakin besar ukurannya maka sudutnya akan semakin tumpul,,
- Sebelum Sobat simpan , Klik prantinjau dulu untuk melihat previewnya
Posted On : 8 September 2011 Time : 17.52
