Kotak Sidebar Terpisah

Sebenarnya saya sudah pernah membahas tentang Kotak Postingan Terpisah yang pada dasarnya agak - agak mirip dengan cara membuat sidebar terpisah - pisah ini. Tadi barusan juga ada pertanyaan dari sobat dalam kotak shoutmix dengan pertanyaan yang hampir sama, yaitu bagaimana cara membuat sidebar terpisah. Karena setiap template mempunyai karakter yang berbeda - beda, makanya saya tulis postingan ini untuk template yang umum digunakan atau template dasar.

1. Buka blogger dengan ID sobat.
   
2. Klik Tata Letak --> Edit HTML.
   
3. Contreng Expand Template Widget.
   
4. Lalu cari kode yang seperti ini :
   
   
   .sidebar .widget, .main .widget {
   margin:0 0 1.5em;
   padding:0 0 1.5em;
   }
5. Pisahkan saja sehingga menjadi seperti ini :
   
   
   .sidebar .widget {
   margin:0 0 1.5em;
   padding:0 0 1.5em;
   }
   
   
   
   .main .widget {
   margin:0 0 1.5em;
   padding:0 0 1.5em;
   }
6. Untuk sidebar terpisah sobat rubah menjadi seperti berikut :
   
   
   .sidebar .widget {
   background:#FFFFFF;
   border:1px solid #CCCCCC;
   margin:0 0 1.5em;
   padding:0.5em;
   }

Buat bagian main. widget atau kolom postingan tinggal sobat kreasikan sendiri, untuk background #FFFFFF adalah warna background putih dan border:1px solid #CCCCCC untuk border warna abu - abu. Kode warna bisa sobat lihat disini. Sedangkan untuk padding adalah jarak antara postingan dengan border, bisa juga sobat merubahnya menjadi padding:15px; agar lebih terlihat rapi antara postingan dengan border tidak terlalu rapat. Untuk kotak sidebar agar membentuk garis melengkung pada sudutnya sobat bisa tambahkan kode sehingga menjadi seperti berikut ini :

.sidebar .widget {
background:#FFFFFF;
border:1px solid #CCCCCC;
margin:0 0 1.5em;
padding:15px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
}

Sipp, buat sobat sebelum mengedit template nya sebaiknya cuci tangan dulu ya biar mousenya ga kotor.. Oke deh selamat mencoba !