Category : Labels: Blog Tutorial, Desain, Template, Tips Trik
Sidebar pada blog biasanya adalah tempat mangkalnya berbagai macam widget-widget yang ikut meramaikan tampilan dan menambahkan fleksibilitas dan fungsionalitas suatu blog. Title pada sidebar merupakan hal yang cukup penting untuk menunjukkan dan menekankan deskripsi dari suatu widget. Sederhananya judul pada sidebar berperan dalam menjelaskan widget yang terkandung (terinstal) di dalamnya. Dan tentu, juga berfungsi untuk memperindah tampilan suatu blog.
Tapi, biasanya title (judul) sidebar tampak polos sehingga terkesan judul sidebar tersebut merupakan bagian dari konten yang ada di sidebar. Apalagi ukuran dan bentuknya sama.
Nah, bagaimana caranya agar tidak tampak begitu polos dan kosong dan standar dan banyak lagi..hehe :D. Sebenarnya bila anda berniat merubah dan membuat gaya tampilan judul sidebar anda anda cukup dengan memperhatikan kode CSS blog anda dan pusatkan pada kode seperti dibawah ini.
h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;
}
Untuk menambahkan warna background pada judul sidebar, tambahkan kode background:#ccc;
Akan menjadi seperti begini
h2 {
background:#ccc;
.........
.........
}
Untuk menambahkan background gambar pada judul sidebar, anda tinggal mengganti atau langsung saja tambahkan kode backround:url(URL GAMBAR ANDA) seperti ini contohnya
h2 {
background:url(http://www.blogpulp.com/imagehost/images/381245101.jpg);
...........
...........
}
Pastinya, ukuran gambar harus disesuaikan dulu. Dan perlu diketahui, tips ini berdasarkan kode css template minima. Tapi saya rasa tidak akan banyak ada perbedaan untuk template lain. Karena berdasarkan template minima dan juga bila anda menggunakan template minima biasanya background pada tanggal postingan akan sama dengan bakground pada title (judul) sidebar. Jadi anda harus mengganti backgroundnya dengan bentuk dan warna background yang lain. Temukan kode dibawah ini dan ganti sesuai dengan cara sebelumnya.
h2.date-header {
background:#ffffff;
Atau bila malas dan tidak suka dengan adanya tanggal, anda bisa membuangnya dengan memberi kode visibility:hidden; dibawah kode h2.date-header {
Update :
Tentunya Kode- kode tersebut dapat ditemukan dalam lingkup Sidebar. Kode utama bisa berupa dan berbentuk sidebar-wrapper atau sidebar. Sebenarnya tergantung template yang anda gunakan masing-masing.
mantep mantep... semangat terus kang buat tutorialnya.... sepzz