How to find Blogger Widget ID and Section ID

Let’s say you want to change the text color in one of your widgets, in the sidebar. You know this is done in the stylesheet and you can even find the code for the sidebar. But changing the code for the sidebar will affect the whole sidebar. Then how do you address only that particular widget?

You need something unique -an Id, a widget Id that is. With a widget Id, you can:

1. Use it as a selector in stylesheet when styling the widget. ( To use an Id as a selector, you need to add the pound sign “#” as a prefix, as in #YourWidgetId {} ).
2. Use it with Javascript getElementById method to access the widget content.

If you add a widget via Add A Gadget link in Page Elements, Blogger will automatically generate an Id for the widget, without telling you what the Id is. To find the Id, you’d normally have to search inside the template HTML code.

Well I have found a simpler and more straightforward way, without the need to go into your template HTML.

As an example I’m going to check my Recent Posts widget Id and the corresponding section Id.

Follow me through the steps:

1.  Go to Layout (old interface: Design > Page Elements) and locate the widget. 

2.  Click the Edit link and widget configuration window will pop up. 

3. Notice there is an URL of the widget on top of the window. What we are looking for is somewhere within that URL.

4. Click maximize (the square icon) on top right corner of the window to view the window in full screen.

5. Now we can see the URL in full (click for larger picture). 

This is the URL: 

http://www.blogger.com/rearrange? blogID=4979338887936179759&action=editWidget&sectionId=sidebar4&widgetType=null&widgetId=HTML4

There they are, sectionId=sidebar4  and widgetId=HTML4. So  the section Id is sidebar4 and my Recent Posts widget Id is HTML4.

Notice you can also find your blog Id (blogID) in the URL.

Mission accomplished! Enjoy!