Home > Blogger, Blogging > How to Customize Blogger Sidebar Titles

How to Customize Blogger Sidebar Titles

Today i will share you another tips how to customize your blog that using Blogger as CMS. In this article, i will explain how to customize sidebar titles that usually appear at your Widget in Blogger. By default, this sidebar titles is “naked” (no format). Actually, you can change this sidebar titles become more interesting by change its font, size, background color, or maybe add some pictures beside it.

blogger sidebar title

Before you modify Blogger Sidebar Titles, make sure you back up your template. First thing you have to do is enter your Blogger Dashboard. Click Template and click Edit HTML and Proceed. Make sure you checked Expand Widget Templates. Some of the code may be different in your template. But the important thing is find “.sidebar {“. My Blogger Template looks like below

 .sidebar .widget h2 {

Some templates don’t have separate style for Sidebar Titles, so you have to add the code manually above the


Change Blogger Sidebar Title

To change blogger sidebar title, all you will do is modify the sidebar code i mentioned above. If you familiar with CSS, it will be easy to modify this template. Just place a line of code to sidebar code like below (blue color).

.sidebar .widget h2 {



border:1px solid #000000;

  • 1px (thickness)
  • solid (style)
  • #000000 (border color)

Other styles for Borders :

  • none: no border at all
  • dotted: series of dots.
  • dashed: series of short line segments.
  • solid: single line segment.
  • Double: two solid lines.
  • Groove: ‘carved’ into the canvas.
  • ridge: like it is coming out of the canvas.
  • inset: like it is embedded in the canvas.
  • outset: like it is coming out of the canvas.border style

you can also set different style in each side of the border

border-bottom:1px solid #00000;
border-top:1px dotted #A43232;
border-right:1px double #223421;
border-left:1px ridge #F23551;

Background Color


background: #E81720;
  • #E81720 (background color)

Background Picture

background picture

background:url(URL OF THE PICTURE)no-repeat;

Replace Sidebar Title With Your Own Image

sidebar title image

You can also change your Sidebar Title with your own image. It’s very easy. Just follow the step below

  1. Upload the picture (you can upload it at Blogger or free web host like Photobucket, Tinypic, etc) and get the URL address.
  2. Enter Blogger Dashboard
  3. Click Layout and Add a Gadget
  4. Choose HTML/Javascript
  5. Leave the title empty and place the following code inside the box
    <img src="URL OF YOUR PIC"/>
    blogger sidebar customize
  6. It’s done

Note : In some templates, the Date Title has the same style like Sidebar title. So when you make changes in sidebar titles, it also applies on Date title.

Related Posts Plugin for WordPress, Blogger...
Be Sociable, Share!
  1. Akhil
    February 24th, 2013 at 01:18 | #1

    Thanks for the info…but I want to add underline of dashes below the title of About me left sidebar by using following code…
    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;

    But when I add this code into blogger’s add css and click apply, all gadget titles on the right side are changed successfully but the left sidebar gadget title which I intended to change left unchanged. Please help.

    One more think I want to ask is, I saw uppercase, lowercase and capitalize options for text-transform but suppose I have gadget with name “Follow on facebook” and if I use capitalize option, it will appear as “Follow On Facebook” but I want it as “Follow on Facebook”…is it possible?

  2. asem priyojit sing
    May 22nd, 2013 at 14:09 | #2

    nice post …. thank you.

  3. September 30th, 2013 at 05:16 | #3

    I have my blog set up with images as sidebar titles and always have. It seems in the last few weeks Blogger require a title for widgets and if I add anything new or edit existing widgets, I have to add a title. You can imagine how terrible this looks?! I planned to edit the color of the sidebar titles to white to make them “disappear” as a work-around, but that means my post date header also disappears. Thoughts?

  1. No trackbacks yet.