Cara Mudah Ubah Style Judul (Title) Pada Sidebar

Setiap blog di Blogger yang menggunakan template yang disediakan Blogger akan memiliki tampilan standar. Tampilan standar itu akan selalu sama untuk setiap blog yang menggunakan template yang sama. Walaupun begitu, Blogger memang menyediakan cara untuk merancang tampilan blog lebih lanjut lewat "Template Designer" yang disediakan Blogger sendiri.

"Template Designer" ini memungkinkan kita untuk merubah style, baik tipe huruf (font) maupun warna, untuk berbagai objek dalam blog kita. Kalau kita masih ingin melakukan perubahan lebih lanjut, kita dapat menambahkan CSS (Cascading Style Sheet) yang baru -melalui fungsi "Add CSS"- ke dalam blog kita.

Kita sama-sama tahu bahwa perubahan yang dilakukan selain lewat fitur "Add CSS" itu akan berlaku global. Kalau kita merubah warna pada judul widget di sidebar kita -melalui pilihan "Gadget Title"- maka semua judul pada widget kita akan berubah. Fungsi "Add CSS" itu yang kita perlukan bila kita ingin melakukan perubahan yang lebih spesifik.

Tulisan ini akan memaparkan bagaimana cara melakukan perubahan yang lebih spesifik itu tanpa menggunakan fungsi "Add CSS", melainkan dengan menggunakan gadget "HTML/JavaScript" yang juga disediakan oleh Blogger.

Saya akan langsung saja. Saya bermaksud membuat sebuah widget di sidebar blog ini. Tampilan widget tersebut tidak perlu mewah. Hanya saja saya menginginkan agar judul pada widget tersebut berwarna merah untuk membuatnya terlihat berbeda dengan widget-widget yang lain.

Widget tersebut saya buat dengan "HTML/JavaScript" dengan tujuan agar isinya bisa saya atur sebebas mungkin. Saya bisa merubah warna, mengatur jenis list, dan melakukan berbagai perubahan pada isinya. Sayangnya Blogger tidak memperbolehkan perubahan style pada bagian judul widget tersebut. Padahal justru bagian itu yang benar-benar perlu saya ubah.

Ternyata untuk melakukannya tidak sulit. Saya cukup memindahkan kata-kata pada judul ke bagian isi widget tersebut, memberinya tag html dan CSS class yang sesuai, dan memberinya style CSS yang saya butuhkan. Perubahan yang saya lakukan dapat dilihat pada gambar di bawah ini.

Isi bagian judul ("Cara Menggunakan Blog Ini") saya pindahkan ke bagian isi. h2 class="title" adalah tag dan CSS class default untuk judul. style="color:red" adalah style yang saya tambahkan untuk merubah warna judul menjadi merah. Hasilnya adalah seperti gambar di bawah.

Dengan cara seperti yang saya paparkan di atas, judul widget yang saya kehendaki dapat saya ubah warnanya menjadi merah tanpa perlu menggunakan "Template Designer" atau "Add CSS". Cara ini pun memungkinkan melakukan perubahan tanpa perlu melakukan "Edit HTML".

Semoga bermanfaat!

--
Amir Syafrudin