Kustomisasi Title (Judul) Sidebar Blogger

Category : Labels: , , ,


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;
.........
.........
}

Kustomisasi Title (Judul) Sidebar Blogger

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.

7 Komentar:

mantep mantep... semangat terus kang buat tutorialnya.... sepzz

mantab nih sob artikelnya... heheh....

>> franco.web.id <<

tutorial yang sangat bagus sob ... keep share n sukses slalu ..

utk pencarian bagian sidebar asaya tidak setuju mas carinya dgn kode itu
bisa saja sidebarny gak pake h2 walau standartnya begitu :D

saya aja udah bukan, h2 saya pake hanya utk judul post

nah mungkin bisa diperjelas dengan mangatakan css title itu berada pada lingkup sidebar-wrapper :D

soalnya jika saya ngikutin tutor ini, cobalah konsentrasikan utk mencari kode seperti itu
aka tidk ditemukan di blog saya :D

satu contoh kasus

Wah keren mas tutornya...!! n'tar coba ahh..

@ Firex : Thanks supportnya yach
@ Franco : ehehe terima kasih :D
@ Erge : Terima kasih :D
@ Mas doyok : Saran yang bagus mas.. diperbaiki
@ Akhatam : terima kasih :D

belum bisa ne gan... hahaha.
mampir balik yaaa..

Post a Comment