How to find Blogger widget 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:

  • 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 {} ).
  • 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.
    widget id page elements
  2. Click the Edit link and widget configuration window will pop up.
    widget id configure window
  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).
    widget id configure window max 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!

28 comments to "How to find Blogger widget and section Id"

Ralph Buttigieg January 23, 2010 at 8:54 AM    

Ok, once you found it how do you change the widgets color? Especially background color? And can you add a border around a widget?

ta

Ralph

Greenlava January 23, 2010 at 9:38 PM    

@Ralph Buttigieg
For background color use background-color:colorcode, and for border use border:1px solid colorcode.
Example:
#YourWidgetId {background-color:#FFFACD; border:1px solid #BDB76B;}

for more info refer to Styling Backgrounds and CSS Border.

Joan E. Santos February 1, 2010 at 6:38 PM    

great post! can't wait to read more of it. i am your latest follower. please follow me also. thanks!

Eu,  February 7, 2010 at 6:13 PM    

Hi, me again. Tried changing the font on the new Pages Widget but with no luck. Found the ID: Pagelist1 but it doesn't respond to the code. Where should I be adding the code. I was doing it after the #sidebar. Thanks heaps. Eu

Greenlava February 8, 2010 at 12:05 AM    

@Eu
The id should be PageList1. So the code should be something like this:
#PageList1 {font-family:Georgia,"Times New Roman", Verdana; font-size:12px;}

the id is case sensitive, make sure you get it right.

Christy February 8, 2010 at 1:18 AM    

Hi. Thanks so much! Slowly going through it all. Thanks so much for sharing your knowledge.

Mary February 20, 2010 at 10:14 PM    

Excellent spotting, that will be very useful!

Sandy June 17, 2010 at 10:08 PM    

This was very helpful thank-you ^_^.

Greenlava June 18, 2010 at 11:40 PM    

@Christy
@Mary
@Sandy
I'm glad to be of help.

Surya Kasturi July 19, 2010 at 12:18 PM    

beautiful... finally i got to do on my own.
your tutorials are beautiful

Admin September 17, 2010 at 9:34 PM    

Your blog is great. All the tricks are working 100%

Greenlava September 18, 2010 at 7:07 AM    

@spk
@Bibin
I'm glad you like them. Thanks for commenting.

MANMOHAN MEHTA October 7, 2010 at 11:17 PM    

Awesome---- very helpfull keep it comming :-)

Greenlava October 8, 2010 at 8:29 AM    

@MANMOHAN MEHTA
Thanks for dropping by and leaving a comment :)

Sonia May 31, 2011 at 6:49 PM    

i luv this tips. thanx a lot for this valuable tips.

Carey August 6, 2011 at 12:57 PM    

ABSOLUTELY one of the best blogs about blogs out there. This hint was far superior to any others I found. Thanks for the great work!

Nimal (Desertfrog) November 23, 2011 at 4:34 AM    

valuable tips.Thanks for the great work!I am your new follower

Unknown July 18, 2012 at 11:28 PM    

Hey there Ok i must change my widget heading because it show me like h2 how can i change to nothing i do not want to appear like that also the pages are listed like h2
Cheer

Greenlava July 25, 2012 at 5:09 PM    

@Nikolov
Go to Template > Edit HTML, check the Expand Widget Templayes checkbox, and find the code for widget heading:
<h2 class='title'><data:title/></h2>

remove the h2 tag, like so:
<data:title/>

Pavitra Venkat July 31, 2012 at 9:35 PM    

great articles :) loved all of them and found them extremely useful in changing my blogs look. Keep them coming :)
btw just to add to the above article on finding the widgetID; its enough to just hover on "edit" link in the layout to find the widget ID from its tooltip :)

Unknown September 25, 2012 at 11:47 PM    

Million!!!!thanks!!!!!

Eddy Ogbunambala October 25, 2012 at 6:03 AM    

Very useful, thanks for posting.

masyachocolate November 20, 2012 at 7:28 PM    

Hi I have screwed up my blog with unwanted element ontop of it?
Ho do I remove it?Please

Thanks

masyachocolate November 20, 2012 at 7:29 PM    

Hi its me again, heres my blog

http://www.masyachocolate.com.

Thanks

Greenlava November 20, 2012 at 8:21 PM    

@Missus Syari
You've put the code for the mbt RSS/Twitter/Facebook buttons directly inside your template HTML, and on top of that you've placed it at the wrong place.
What you should've done is putting the code inside a HTML/Javascript gadget.
Now what you need to do is go back to Template > Edit HTML > Proceed, find the code and remove it.

Anonymous,  November 27, 2012 at 9:34 PM    

I have many weeks to add color and the box in the category labels on blogspot but still can not, what I want:

1. - Category 1 (specific color)
1.1-Sub Category Articles 1 (Added Signs >>, plus boxes and different colors)
1.2-Sub Category Articles 2 (Added Signs >>, plus boxes and color)
1.3-Sub Category Articles 3 (Added Signs >>, plus boxes and color)
1.4-Sub Category Articles 4 (Added Signs >>, plus boxes and color)
2. - Category 2 (a specific color)
2.1-Sub Category Articles 1 (Added Signs >>, plus boxes and color)
2.2-Sub Category Articles 2 (Added Signs >>, plus boxes and color)
2.3-Sub Category Articles 3 (Added Signs >>, plus boxes and color)
2.4-Sub Category Articles 4 (Added Signs >>, plus boxes and color)

The question is how to change in the template? ..
Thank you very much

Greenlava November 28, 2012 at 2:57 PM    

@Anonymous
Please do a search for "multilevel dropdown menu" using the search box in the menu bar.

www.dasathanews.com April 24, 2013 at 8:16 PM    

Really helpful article.
Thank you very much for sharing.

Post a Comment

We love to hear from you! Leave us a comment.

To ensure proper display, HTML/XML/Javascript need to be escaped first using this escape tool.