How to Customize Sidebar Header in Blogger

One of the things that a blogger should not forget is to customize his/her sidebar header according to his/her likeness. In this tutorial, I will show on how to add background image or color to your blogger sidebar header.

How to Customize Sidebar Header in Blogger

Step 1. Identify first the ID of your widgets/gadgets that you have put in your sidebar section,

       Steps in identifying your individual widget Id in your blogger template.
           1.1 In the other window, Log- in to your Blogger Account go to Blogger Dashboard, click Template, hit Edit HTML button,

           1.2 Click Jump to Widget then click the name of your widget or if you can't find your widget's name in the Jump Widget Menu,  you can Press Control F and Type the name of your widget inside the search box then click Enter in your keyboard,

           1.3 After finding the name of your widget, for example you are looking for the  Popular Post Widget, you can find this set of code below,

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>

The bolded text in red above is the ID of your Popular Post Widget. Repeat step no. 1.3 to find the ID of your other widgets.

There is also another way of locating or knowing the ID of your widget. Here are the steps.

• Go to your Blogger Lay-out page
• Find the symbol below or the text edit ( in blue color)
  






• Click it and you will see the codes that you have inserted before,click the link at the top portion

The last code being underline with the red arrow above (HTML12) is the ID of the widget

Step 2. After getting your Individual Widget ID, save that for you will use that in the next step,
Step 3. In the other window, go to Blogger Dashboard, click Template and hit Edit HTML button,

Step 4. Search for the code  ]]></b:skin> and just above it, paste the code below,

#PopularPosts1 h2 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWWVeUagGB8oTT3qgwmKu3bxPANo8HT51EGgiUmsvoCpP3E6bB0JIRczfsd_mtfkuFj-zTx2Satf_MzWAAJMyfhEU-G1QHu8Salsf9Mk1LjDd7l4t37kJtc3Wfi7PuM2oOogtS2Ty5uWA/s1600/photo++for+sidebar.jpg);
height:30px;
width: 248px;
margin-left: 0px;
padding-top:0px;
font-family: Sans-serif, Arial, Helvetica;
font-size: 25px;
text-align: center;
}

Short Customizations:

• Replace the text in red with your own sidebar widget ID that you have save in Step 2.
• To change the image background,Replace  URL image in (orange color) with your own image  (image size is width=248 px by height= 41px) or depending upon the width lay-out of your sidebar.
• Adjust the height and width of your image by replacing the numerical value in yellow highlighted text
• Adjust the margin and  depending upon the placement of the image background in your side bar
•  Adjust placement of the title of the widget inside the image background. You can also place that in left or in the right corner of the background image.

Step 5. Save your template and Enjoy.

About the Author:

Hello folks! This is GOLDEN WORKS TV, the admin of this blog. No words could described my grateful appreciations to all newbie and professional bloggers around the world and most especially to Almighty God who gave me the wisdom...Read More

Follow him @ Twitter |Facebook