Ways To Customize Sidebar Header In Blogger

    Many people want to make their sidebar header more stylish. They want to customize it in such a way that it will look unique. Are you one of them?Are you uninterested with your soiled sensing Sidebar? If your answer is yes then this article can help you. Sidebar is one of the most Important elements of your blogger template, it holds all those widgets which totally fundamental substances among a website. Let us assumes that a somebody arrived on your blog patch navigating finished your articles he saw a junky hunt Sidebar Gallery. Therefore, it is intrinsic to alter your Sidebar Headings with Proper decorate group and font styles. So, those who are anxiously sensing for a method of modifying their Blogger Blog's Sidebar Headings see How to Alteration Sidebar Fonts, Appearance and Filler in Blogger Construction.
It is very easy to customize Sidebar Header.There is no rocket discipline behind Sidebar header. Nearly all Blogger Enabled websites uses H2 (and very few blogs uses H3) Line tags for the Sidebar headings. Hence, it is extremely direct to fix or change Sidebar headings.

  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.

Ways 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/AVvXsEh6xY-hBxauRnakI6NhLqEZTQnRQ0CpdVQ5AH5gkXaSOK2q_juOfwpzUv_z6xRLElus-MGdLek61Rk6t4GvJ2tNejfnoLa_V9bJ901Jcx1njM6NdGQ2vL5QSW2s2W1yfhpOkBBOwuQyajs/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 Customization:

• 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.

Wish You Success.