How to Change Widget or Gadget Title attributes in Blogger or Blogspot like Colour, Background Color, Font Style, Background Image.

 
Updated on April 19 2013 according to new blogger template Editing style and menu.

In this tutorial you will learn how to modify and change attributes of your blogger Widget and Gadget titles. We can change their color, background color, insert image in the background and also modify font style to give your blog a charming look. In general we can change their font-color, size, Weight and font family in blogger template designer in blogger. These changes will also apply to the post title and date title which doesn’t look well. So we will learn how to apply these attributes to widget titles only.

  • Sign In to your Blogger Account.
  • *You are going to change html code of your template so must ensure to backup your template.

  • Open your Blog you want to customize > Go to Template > Click Edit Html.
  • Now Find <b:skin>–</b:skin> and click arrow on this line. It will open code inside <b:skin>–</b:skin> which is css code for our blog template and all css editing or modification is performed only after <b:skin> and before </b:skin>.
  • Some templates have separate style for sidebar so you have to find “.sidebar h2” but some templates do not have separate style so you need to add it manually below “ /*Widgets—————————————– */

  • Align title text in the center


    To align title text in the center add this code.

    .sidebar h2 {
    text-align:center;
    }


    Change / Modify background color of widget title


    Change color according to your blog

    .sidebar h2 {
    text-align:center;
    background-color: #21474E;
    }
    


    Change / Modify title text color, font family, font weight

    .sidebar h2 {
    text-align:center;
    background-color: #21474E;
    color: #ffffff;
    font-family:Verdana, Geneva, sans-serif;
    font-style:italic;
    font-weight:bold;
     }


    Change padding

    you can change padding values according to your blog design:

     .sidebar h2 {
    color: #ffffff;
     background-color: #21474E;
    text-align:center;
    font-family:Verdana, Geneva, sans-serif;
    font-style:italic;
    font-weight:bold;
    padding: 2px 2px 5px 2px;
     }


    Insert background picture of widget title, behind sidebar title


    Select picture to insert behind your sidebar title. Set size accordingly to fit your sidebar else it will get cropped automatically. Now upload picture to free web hosts like picasa, photobucket etc to get url.

    .sidebar h2 {
    background:url(url of your image) no-repeat;
    }

    Related Posts Plugin for WordPress, Blogger...

6 thoughts on “How to Change Widget or Gadget Title attributes in Blogger or Blogspot like Colour, Background Color, Font Style, Background Image.

  1. Hi. Good tutorial for widget title. I just wonder how to change the attribute of widget content (colour,font,font style).
    Example:
    Widget Title : Popular Post—->covered in this tutorial
    Widget Contents : Best Foods in The World—>how to change this attributes
    Best Cars in The World—>how to change this attributes
    Best TVs in The World—>how to change this attributes

  2. I’ve been looking for this all over, however I can’t find o find “.sidebar h2” OR “/*Widgets—————————————– */ ” in my html. I strongly dislike the new template html editor.. can you tell me where to find it? Or where to add it?
    Thank you so much!

    • Hello Mercia,
      New html template editor is same except codes are wrapped.
      First find <b:skin>…</b:skin> with arrow mark before it.
      Click it to expand.
      Now find this
      /* Widgets
      ———————————————– */

      and add .sidebar ….(with code given above) below this.
      Else you can add this code above “]]></b:skin>”.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>