Friday, December 31, 2010

Membuat background efek 3 dimensi disidebar

Jika anda kurag puas dengan tampilan sidebar blogspot,ada beberapa cara untuk mempercantik menu sidebar,seperti pada tutorial ini kita akan mencoba membuat backgrund efek 3 dimensi pada sidebar.
Yang dimaksud disini adalah kita akan membuat tampilan menu judul sidebar efek 3 dimensi sehingga akan kelihatan seperti tombol.
Untuk membuat judul widget seperti gambar diatas ikuti langkah berikut:
1.Masuk dashboard >> Rancangan
2.Kemudian klik Edit HTML
3.Untuk berjaga jaga terhadap hal yang tidak diinginkan alangkah baiknya jika template kita backup dulu,dengan cara klik Download full template
4.Cari kode  .sidebar li
    Tampilannya kurang lebih seperti dibawah ini:
.sidebar h2{ font-size:14px;
margin:1px 0 4px;
font-weight:bold;
text-transform:none;
text-align:justify;
}
Selanjutya tambahkan kode berikut dibawahnya:

background:$bordercolor;
padding: 2px;
border-top: 2px solid #FFCC99;
border-right: 2px solid #333300;
border-bottom: 2px solid #333300;
border-left: 2px solid #CC9933;
Sehingga akan seperti dibawah ini:

.sidebar h2{ font-size:14px;
margin:1px 0 4px;
font-weight:bold;
text-transform:none;
text-align:justify;
background:$bordercolor;
padding: 2px;
border-top: 2px solid #FFCC99;
border-right: 2px solid #333300;
border-bottom: 2px solid #333300;
border-left: 2px solid #CC9933;
}
Ket:
Untuk warna border bisa disesuaikan dengan warna blog anda
Dan untuk melihat hasilnya sementara bisa klik preview,oke kalau dah beres jangan lupa simpan template

No comments:

Post a Comment