20 Jun 2009

How to Change Sidebar Title Font, Size & Color

Blogger sidebar title fonts are very easily customizable like any other section. You just need to find the default CSS definitions of these titles and then we can easily implement our own styles in it.

Let's first check the default style definitions for these titles:



To find this code, go to Layout | Edit HTML and search.

h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;
}

1- Change family i.e. Arial, Times New Roman etc.


Currently, sidebar title font is defined by font:$headerfont;. It means that your header font and sidebar title font is same but we can have them according to our wish by adding a font-family property.

h2 {
margin:1.5em 0 .75em;
font-family:"Times New Roman",Georgia,Serif;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;
}

Info: As you can see that I've added 3 fonts (Times New Roman, Georgia, Serif) because a visitor might not have the 'Times New Roman' font installed on his/her computer, so the browser can chose the other two fonts of first-come first-serve basis.

2- Change size.


Simply add font-size property in the default code.

h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;
font-size:40px;
}

Note: I've added font-size:40px; in which 40px is the size. You can change it according to your wish because 40px is fairly large number.

3- Change color i.e. red, green etc.


Currently, color:$sidebarcolor; property is defining the color. It means that title color is dependent on the sidebar color i.e. sidebar color and title color is same. We can add our own color in it by removing color:$sidebarcolor; and adding color property.

h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:#0000FF;
}

Remember: #0000FF is the hex code of blue color.

Tip: You can capture any color on screen and get it's hex code to use it any where, download ColorPic which is a free utility to do that. Description: How to Change Sidebar Title Font, Size & Color Rating: 4.5 Reviewer: Unknown - ItemReviewed: How to Change Sidebar Title Font, Size & Color Hot News!!! "Sepeda Motor Injeksi Irit Harga Terbaik Cuma Honda"
Share on :

0 komentar :

Posting Komentar

Mau tukeran link? silakan buka Link sahabat dan apabila ada pertanyaan silakan tulis di Kotak Pertanyaan. Terima Kasih...

Kami akan menghapus komentar yang: Tak sopan, memakai HURUF BESAR, berupa caci maki, mengandung kata-kata kebun binatang, debat kusir, provokasi, di luar konteks, berupa undangan/ reklame. Komentar yang terlalu panjang, tanpa paragraf dan sulit dipahami. Komentar copy-paste, silakan di-link saja.

Isi komentar adalah tanggung jawab penulis komentar, bukan tanggung jawab pengelola blog/situs ini. Harap maklum.

 
© Copyright Dunia GUE 2011 - Some rights reserved | Powered by Blogger.com .
Template Design by Herdiansyah Hamzah | Jejaringkan Kami di Jejaring Sosial (duniague.net)