How To Change Sidebar title Customization In Blogger

Last post we already learn how to make a box separately on each gadget, but sometimes having just box is not good enough without background color on the title of gadget especially for sidebar position. Today, let me show you the way of changing sidebar titles customization. In this section, you will be able to add background color as well as picture next to the title. Moreover, we divide into three tutorial such as adding background color, adding background picture behind sidebar title, adding background picture instead of title.  To do this tutorial we need to modify a html code but do not worry, all are easy as long as you follow my guidelines.

Let’s begin, Adding Background Color tutorial

• Firstly, Log in to your Blogger account
• Choose design > edit HTML
• Before you change or add anything, please backup your template first (very important)
• Find out the code ]]></b:skin> , if you feel difficult to find it try CTRL+F
• After you find it, place the following code below ABOVE ]]></b:skin> something like below

              .sidebar h2 {
              background:#E17820;

              margin:0;
              padding:0 0.2em;

              line-height:1.5em;

              }
              ]]></b:skin>

• Then save it, the green color means you can definitely change the color what you like, you can find the color code here. Furthermore, suit your sidebar by adjusting margin and padding (I recommend to often try it until match with your gadget).

Adding Background Picture tutorial behind sidebar title

• Create the picture usually using Photoshop and the picture i used is 220px wide, and has 53px height.

• When the pic is ready, you have to upload it to a free web host like Photobucket, Picasa, TinyPic to get the URL. Now, insert the following code below the same like above and change the green color with your picture URL.

             .sidebar h2 {
             background:url(URL OF THE PICTURE)no-repeat;
             margin:0px;
             padding:0px 0.9em;
             line-height:53px;

             }

             ]]></b:skin>

• Then save it, adjust alignment both margin and padding until you get it right.

Adding background Picture instead of title

• Now, this is a cool one. The idea is to remove (hide) the default header of sidebar title, and to place a picture (image) instead of it.
• You need to make the picture or find one that you like. make sure that your pic will fit in the sidebar without being cropped. size it properly. try a few times, and you'll get it.
• Next, upload it to a free web host like Photobucket, Tinypic to get the URL address.
• Go to template Layout > Page element, and click on Add a Gadget in the sidebar. Choose HTML / JavaScript from the list. Place the following code inside the box (leave the title empty) just change the green part with the URL address of your hosted picture, Save Settings.

           <img src="URL OF YOUR PIC"/>

• Now, there it is. only thing left to do is to arrange it ("drag" it), so the Gadget with a picture will be above the "Blog Archive" Gadget. Like so:
  that's it. Do the same for "Labels", "About me" and everything else you want

Finally, you can create three different way of your sidebar title and the best thing is you also can combine three of them or use your creation to make it beautiful. Good Luck