You can see how i have underlined my gadget's title to make it look different from rest of the widget content and it is a good way to keep your blog user interface easy.
After so many days i am posting a blogger tutorial, in meantime i wrote some posts on blogging and SEO tips. As being a web designer i just can't keep myself from design tutorials so here i am again.
Coming to the topic, in our blog you can see how we have underlined the gadget title on the sidebar to make it look apart from the content in the gadget, notice how a underline can differ the look of an area in your blog.
As we found that underlining gadgets title can keep user engaged with the sidebar too, it's because when they know what's actually what, then they are supposed to use it often and same for the gadget. Underlining the gadget title will make it easy to understand and it will also look well designed.
Coming to the topic, in our blog you can see how we have underlined the gadget title on the sidebar to make it look apart from the content in the gadget, notice how a underline can differ the look of an area in your blog.
As we found that underlining gadgets title can keep user engaged with the sidebar too, it's because when they know what's actually what, then they are supposed to use it often and same for the gadget. Underlining the gadget title will make it easy to understand and it will also look well designed.
CSS to design it
This can be done using CSS, the CSS don't just underline the title of gadget in sidebar but also formats it to look better, just like mine. So use this CSS if you want the overall customization of your gadget's title like mine.How to apply this CSS ?
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 have to make some changes to fit your needs, such as changing the underline (border) color and all.
- Line 2 : You can change the 13px to a higher or lower value, it controls the gadget title font size
- Line 3 : It's defines the font weight and you have three values for it normal | bold | bolder
- Line 4 : The font face of the gadget title, check this for the list of available web safe fonts.
- Line 5 : Change whether you want the text to be uppercase | lowercase | normal
- Line 6 : This border property makes the effect of underlining the title of gadget, you can change it's width by adjusting the 1px value. Change the dashed value to solid | groove | ridge | double | inset | outset | dotted and at end change it's color, use this color name reference to change the color of the underline.
- Line 7 : The defines the space between the underline and the title. You can adjust pixel value to your needs.
Little Updated CSS
Some of my readers complained that the CSS I provided in the tut. doesn't work for all their gadgets it because some inbuilt gadgets have a little different HTML in for the gadget title and the default CSS I provided doesn't make any effect on it.If you want all your gadgets to have the underline style then you may use this CSS instead
aside .sidebar h2.title, .sidebar h2 {
font-size: 13px;
font-weight: bold;
font-family: 'georgia' !important;
text-transform: uppercase !important;
border-bottom: 1px dashed grey;
padding-bottom: 5px;
}
Just added one more selector in the 1st line. Now it should work on all your gadgets but this might probably cause problems if you have h2 elements in your gadget content but in it works fine in most blogger templates.