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 !

Posting Komentar