Edit The Widget Title Text In Blogger

An important consideration in making your blog is how much coordination you want it to have. If you want individual designs for each widget in your blog then individual coding is required, if however you want to add a global effect to a series of similar attributes, then read on to find out how to edit the widget title text in Blogger.

  Old and New  

If you look at the columns on the right of this blog, you will notice that the titles to the widgets have little chevron images before each of them. Here is a guide on how to do the same to your widgets. This works especially well if you couple it with related images for your post titles.


1. In Blogger go to the Design View and click on Edit HTML. As always, download the full template to keep a backup before you make any changes. Do a search and find the following code:

/* Headings
----------------------------------------------- */
h2 {
font: $(widget.title.font);
color: $(widget.title.text.color);
}

This is the part which controls the sidebar widget headers. This is where you can add or change the CSS code to change the look of this section. It is important to note that some change you make here can have effects on other parts of the blog. I haven’t been through them all so use the preview function to check nothing additional was affected by your code.

2. To get the effect I have on this blog I added lines and ended up with the following code:

/* Headings
----------------------------------------------- */
h2 {
font: $(widget.title.font);
color: $(widget.title.text.color);
font-variant: small-caps;
background:url(/gadget_title.png) no-repeat;
padding:0 0 0px 16px;
}

I added a font-variant to give the titles small-caps to keep the design consistent with the rest of the blog and I added an image.

The image was added as a background and given padding to line up the image how I wanted. Here you must be careful, I found that some padding changes had an effect on the date header too, so be sure to preview first!

3. The next part is adjusting the text color, this can probably be done in the design view, but if you want to do it in Edit HTML then find the following code:

<Group description="Gadget Title Color" selector="h2">
<Variable name="widget.title.font" description="Font" type="font"
default="normal bold 14px 'Trebuchet MS',Trebuchet,sans-serif" value="normal bold 16px Verdana, Geneva, sans-serif"/>
<Variable name="widget.title.text.color" description="Title Color" type="color" default="#ffffff" value="#ff9900"/>
</Group>

It is the last part (highlighted in orange) that you want to change to a hexadecimal color code to change the Gadget title color.