Its difficult to differentiate blogger gadgets from their title if they are not organized properly. Underlining the gadgets is one way to do that. It gives a tidy look to your blog's entire design and at the same time helps readers to easily locate different elements of your blog.
Blogger does not have this option by default, which leaves you with only one choice - CSS tweak. So how do you underline gadgets on your blog using CSS?
Note: Make it an habit to backup your template before making any changes.
1. Login to your Blogger Dashboard.
2. Go to Template -> Edit HTML -> Proceed.
3. Using CTRL+F find ]]<b:skin> and paste the following code just above it:
You can change the values and adjust them to suit your needs.
font-size: size of the gadgets title text.
font-weight: you can set three values normal, bold, bolder.
font-family: select the font that's in conjunction with your blog text.
text-transform: uppercase, lowercase or normal.
border-bottom: underlining the title of the gadget. You can adjust the thickness of the border, change the type of line - solid, groove, ridge, double, inset, outset, dotted.
padding-bottom: defines the space between the title and the underline.
Blogger does not have this option by default, which leaves you with only one choice - CSS tweak. So how do you underline gadgets on your blog using CSS?
Follow these steps to underline blog gadgets on Blogger:
Note: Make it an habit to backup your template before making any changes.
1. Login to your Blogger Dashboard.
2. Go to Template -> Edit HTML -> Proceed.
3. Using CTRL+F find ]]<b:skin> and paste the following code just above it:
aside .sidebar h2.title {
font-size: 13px;
font-weight: bold;
font-family: 'georgia' !important;
text-transform: uppercase !important;
border-bottom: 1px dashed grey;
padding-bottom: 5px;
}
You can change the values and adjust them to suit your needs.
font-size: size of the gadgets title text.
font-weight: you can set three values normal, bold, bolder.
font-family: select the font that's in conjunction with your blog text.
text-transform: uppercase, lowercase or normal.
border-bottom: underlining the title of the gadget. You can adjust the thickness of the border, change the type of line - solid, groove, ridge, double, inset, outset, dotted.
padding-bottom: defines the space between the title and the underline.