Home » » Sidebar Tampil Dalam Bentuk Kotak

Sidebar Tampil Dalam Bentuk Kotak

     
Caranya adalah sebagai berikut :

1. Login ke Akun Blogger anda masing-masing.
2. Klik Design or Rancangan, kemudian pilih Edit HTML
3. Centang (Expand Widget Template)
4. Untuk keamanan lebih baik kita (Download Template Lengkap)
5. Gunakan (Ctrl+F) or (Alt+E+F) untuk memudahkan pencarian
6. Cari kode seperti di bawah ini :

.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}
7. Dari kode widget diatas menunjukan bahwa sidebar widget (halaman sidebar) dan main widget (halaman postingan) memiliki penampilan yang sama.
Jadi agar terlihat dalam bentuk kotak kotak, anda harus memisahkan kedua kode widget tersebut menjadi seperti di bawah ini : (anda dapat mengcopy kode dibawah 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;
}
8. Sekarang anda fokuskan pada kode sidebar.
Agar penampilannya terpisah dalam bentuk kotak-kotak, anda harus memvariasikan kode-kodenya seperti contoh dibawah ini :

.sidebar .widget{
background:#0000b3;
border:1px dotted #C3D9FF;
margin:0 0 1.5em;
padding:0.5em;
}

Kode diatas mengandung arti :latar belakang sidebar berwarna biru tua, border berupa garis putus-putus dengan lebar 1 px dengan warna biru muda (lebar border inilah yang membuat sidebar terlihat dalam bentuk kotak-kotak), jarak antara widget sebesar 1.5em dan padding 0.5em.
Kode tersebut dapat anda ubah sesuai dengan keinginan dan kreatifitas anda.

9. Lakukan hal yang sama untuk mengubah penampilan main widget. Pilih variasi warna yang cocok agar penampilan semakin cantik.

10. Save

♂ Good Luck ♀


Semua ini adalah apa yang pernah aku cobain sendiri . . dan aku dapat/mengerti dari teman2 blogger lainnya karena aku hanya seorang blogger pemula yang ingin mengetahui lebih banyak hal lagi . . . . Thank's
Share
Related Post

0 comments:

Archives

Label


ShoutMix chat widget
Guest Book
 

Subscribe Via Email

Enter your email address:

Delivered by FeedBurner

My Blog

Show

Exploration


Show

[Valid Atom 1.0]
Google PageRank Checker Powered by  MyPagerank.Net

Powered by FeedBurner

SEO Stats powered by MyPagerank.Net

Show

Show

Exploration

Welcome To My Blog

I hope you find what you're looking for here . . Thank you for visit to my simple blog . .

Rizky Maulana

This life is a sacrifice and struggle . . and I am just a man who wants to be better than ever . .