How to Find A Gadget's ID

12:00 PM

Have you ever wanted to apply a CSS code to something, but you didn't have the identification of the gadget you wanted to style? This tutorial has been created to help you find the ID of the gadget you'd like to style.

Note: gadgets, widgets and page elements are essentially the same thing. I like to collectively call them gadgets, so please take heed this works for pretty much everything you apply to your blog's layout. :)


1. Add the gadget you'd like to style to your blog. Save your layout changes.
2. Click "Edit" of the gadget you just applied, but don't make any changes.
3. Maximize the window that pops up, so you can see the tale end of the address bar in the window, at the top of the screen. Notice how it has a word and a number at the end. That's the gadget ID.

(I don't know why PicMonkey keeps doing this to my photos. -.-)

4. Copy and use for your CSS code!

Comment below if you have any questions or concerns. I'd love to hear from you. :)

xx Nicole Rose

You Might Also Like

3 Sweet Notes

  1. Great advice. I sometimes go onto my blog and then right click on the gadget and select "inspect element" which tells me the gadget id, but my way seems rather long-winded!

    Sarah xo | PolkaDotLemon

  2. *Gapes.* This is wonderful. :)
    PicMonkey does what? Turns them grey? I've heard that's a Google-related thing that no one's tried to fix . . . Photobucket doesn't do that, btw.

  3. Hi Nicole, I've never heard of this method before, and I've always had trouble finding the gadget ID. I always had to expand the HTML in the template to figure out which gadget is which. This is such a great way to keep track of the gadgets, thank you so much for sharing it. :)

    The Happy Candle


All comments I receive are cherished for many hours after reading them. Thank you for taking the time to type something to me.

xx Nicole Rose