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 !

Berlangganan artikel terbaru via Email
Artikel Lainnya :

10 comments

2 Juli 2009 19.16

Kalo cara ngatur lebar sidebar gimana ya pak?

http://suntikputih.blogspot.com

24 Februari 2010 13.44

tengkyu

29 Maret 2010 19.38

boleh ga saya pasang artikel anda di blog saya?

30 Maret 2010 06.40

@ mindkamil : silahkan, tp jgn lupa credit link penulis dibawah postingan ya

26 September 2010 07.23

maaf saya ingin bertanya, kenapa saat saya men"copas" kode tersebut di blog saya kenap muncul pesan:"Deklarasi variable tidak valid pada skin halaman: Variable digunakan tapi tidak ditentukan. Input: sidebartextcolor" ya? bisa dibantu? he..he

26 September 2010 11.40

@ZunZelf : sebenarnya kode css diatas tdk bs dicopas mentah-mentah, sobat hrs lihat terlebih dahulu kode css template sobat, dan sekedar informasi : padding adalah jarak antara isi dengan garis pinggir, dan margin adalah jarak antara satu widget dgn widget yg lain

15 November 2011 15.49

ijin nyimak gan..

24 November 2011 14.53

pake template bawaan blogspot ga bisa ya? ga ada kode yg dicari.
buat percobaan saya pake template simple di http://menc084.blogspot.com

8 Desember 2011 19.15

minta izin artikel agan saya pasang di blog saya/copast ya?....dan tak lupa akan saya tampilkan sumber dan linknya......terimakasih....

http://dampoawang-news.blogspot.com/

20 November 2012 22.01

mksh gan buat tutorialnya, langsung praktek. :)

Poskan Komentar

Reader Community

Recent Comments