How To Underline Blogger Blog Gadgets

How To Underline Blogger Blog Gadgets

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?

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.
how to underline blogger blog gadgets

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.


  1. thanks for sharing.

  2. Thanks a lot to share with us a fantastic blog to increase our knowledge and to share nice tips.


  3. Exactly what I was looking for, thanks! :D


All comments are moderated, so please don't spam. Do not add URL links inside comments, they won't be published.

About Me

A computer science graduate with over 7 years experience in Web/Game development, A passionate Blogger and Photographer.
Copyright © | Sitemap |. Powered by Blogger.