Pengaturan dan Kustomasi Judul Sidebar

Pengaturan dan Kustomasi Judul Sidebar : Sepertinya banyak blog yang telah membahas tentang tema ini namun tidak ada salahnya jika Tips dan Trik Blog mempostingnya juga, siapa tahu ada di antara para blogger atau pengunjung yang belum mengetahuinya. Jika tertarik, silakan ikuti tipsnya bersama Tips dan Trik Blog berikut ini.

Kini, memperoleh template gratis yang bagus-bagus di internet adalah hal yang tidak sulit. Bahkan banyak pembuat template membolehkan template buatan-nya digunakan oleh pengguna lain dengan sukarela tanpa menarik bayaran satu sen pun. Dengan demikian para pengguna atau blogger pemula mempunyai banyak pilihan untuk menggunakan template yang “pas” buat dirinya.

Namun demikian, pasti ada bagian-bagian tertentu dari template yang kita gunakan tersebut kurang pas dengan kita. Bisa saja secara keseluruhan, kita sudah merasa cocok dengan suatu template namun mungkin ada bagian tertentu yang masih “mengganjal”, misalkan pada bagian judul sidebar.

Bagi yang mengalami hal demikian, tidak perlu terburu-buru untuk mengganti template yang ada dengan template yang lain (karena bagaimana pun juga untuk mengganti template dibutuhkan energi ekstra), kita dapat melakukan pengaturan dan kustomasi judul sidebar sedemikian rupa sehingga menjadi “pas” dengan selera atau kebutuhan kita.

Untuk melakukan pengaturan dan kustomasi judul sidebar tersebut, kita harus melakukan modifikasi (mengganti/menghapus) terhadap kode css untuk judul sidebar tersebut. Untuk template default blogger, kita dapat menemukan kode css tersebut dengan format seperti di bawah ini.

.sidebar h2 {
………………….
………………….
………………….
}

Titik-titik tersebut merupakan deklarasi untuk tampilan judul sidebar. Kita dapat memodifikasi deklarasi tersebut sedemikian rupa sehingga tampilan judul sidebar sesuai dengan kemauan kita, antara lain :

Warna Font

Jika menginginkan, kita dapat mengkustomasi warna teks untuk judul sidebar sesuai dengan selera kita masing-masing. Deklarasinya seperti di bawah ini.

font-color: #XXXXXX;

Kita dapat mengganti kode warna #XXXXXX dengan kode warna yang lain sesuai selera masing-masing. Untuk melihat kode warna, silakan kunjungi di sini.

Ukuran Font

Kita dapat mengkustomasi ukuran font sesuai keinginan kita. Deklarasinya seperti di bawah ini.

Font-size:100%;

100% pada font-size berarti ukuran font sebesar default font, jika menginginkan kita dapat menggantinya dengan prosentase lain, 75% atau bahkan 120%.
Selain secara prosentase, ukuran font dapat didefinisikan dengan satuan pixel (px), misalnya 12px, 15px, dan seterusnya.

Opsi selengkapnya dapat dipilih di antara di bawah ini.

font-size: 75%;
font-size: 15px;
font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;
font-size: smaller;
font-size: larger;

Jenis Font

Kita juga dapat mengkustomasi jenis font agar sesuai dengan keinginan kita, deklarasinya dapat dipilih di antara contoh di bawah ini.

Font-family: verdana;
Font-family: arial;
Font-family: monospace;
Font-family: roman;

Atau dengan menggunakan jenis font yang lainnya.


Ketebalan Font

Kita juga dapat mengatur ketebalan font dengan deklarasi yang dapat dipilih di antara di bawah ini.

font-weight: normal;
font-weight: bold;
font-weight: bolder;
font-weight: lighter;

Font Style

Kita juga dapat mengkustomasi style font dengan deklarasi yang dapat dipilih di antara di bawah ini.

font-style: normal;
font-style: italic;

Perataan Teks

Kita dapat mengkustomasi perataan teks untuk judul sidebar dengan deklarasi yang dapat dipilih di antara di bawah ini.

text-align:left;
text-align:center;
text-align:right;
text-align:justify;

Warna Background

Untuk menambahkan warna background, deklarasinya seperti di bawah ini.

background: #XXXXXX;

Kita dapat mengganti kode warna #XXXXXX dengan kode warna yang lain sesuai selera masing-masing. Untuk melihat kode warna, silakan lihat di sini.

Padding

Padding ini bertujuan untuk memberikan jarak teks dari tepi sehingga teksnya tidak akan bertabrakan dengan bagian luar dari warna background yang kita atur sebelumnya. Deklarasinya seperti di bawah ini.

padding:5px;

Jika dirasa kurang cocok, kita dapat menggantinya dengan angka yang lebih kecil atau bahkan lebih besar lagi.

Text Decoration

Dengan text-decoration ini, kita dapat membuat teks menjadi bergaris bawah, bergaris atas, bergaris tengah, atau bahkan menjadi berkedip. Deklarasi selengkapnya seperti di bawah ini.

text-decoration: none;
text-decoration: underline;
text-decoration: overline;
text-decoration: line-through;
text-decoration: blink;

Text Transform

Dengan text-transform ini, kita dapat membuat teks menjadi huruf capital, huruf kecil, atau huruf besar pada awal kata. Deklarasinya dapat dipilih di antara di bawah ini.

text-transform: uppercase;
text-transform: lowercase;
text-transform: capitalize;

Border Style

Kita pun dapat menambahkan efek border dengan berbagai bentuk, deklarasinya dapat dipilih di antara di bawah ini.

border-style: none;
border-style: hidden;
border-style: dotted;
border-style: dashed;
border-style: solid;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset;

Border Color

Selain bentuk border, kita pun dapat mengkustomasi warna untuk border. Deklarasinya seperti di bawah ini.

border-color: #XXXXXX;

Kita dapat mengganti kode warna #XXXXXX dengan kode warna lain sesuai selera masing-masing. Untuk mengetahui kode warna, silakan kunjungi di sini.

Nah, dari uraian di atas, kita dapat melakukan modifikasi atau mencoba-coba sendiri untuk mendapatkan tampilan judul sidebar yang sesuai dengan selera masing-masing.

Berikut contoh deklarasi untuk tampilan judul sidebar.

.sidebar h2 {
font-color: #071910;
font-size:120%;
font-family:verdana;
font-weight:bold;
text-align:center;
background:#ACFA58;
padding:5px;
text-decoration:blink;
text-transform:capitalize;
border-style:double;
border-color:#243B0B;
}

Atau kita dapat meringkasnya seperti di bawah ini.

.sidebar h2 {
font:#071910 120% verdana bold;
text-align:center;
text-decoration:blink;
text-transform:capitalize;
background:#ACFA58;
padding:5px;
border : double #243B0B;
}

Contoh hasilnya seperti screenshot di bawah ini.



Selamat Bereksperimen!!