Here comes another question, what is an ID and what is a Class? This question tangential to what is being discussed in this tutorial, but for the sake of simplicity, you'd only have to know that an ID is a unique identifier used to address ONE specific element in a page, whereas a class is an identifier that can be used to address few elements as whole. All 'built-in' gadgets in Blogger can be addressed using IDs. So knowing an element's ID will allow you to apply CSS styling on it. Common tweaks that are applied to these gadgets are margin-reduction, repositioning, resizing and even hiding an element completely from a given page.
In this tutorial, I will share with you two methods on how you can identify your Blogger's elements' IDs. The first one is a straight-forward method, recommended for beginners. The second method is also straight-forward, but you'd have to install an add-on for it. Opt for the second one if you're gonna be finding out your element's IDs or classes frequently.
Method 1:
To find out your gadget's ID, go to Page Elements/Layout. Click Edit on the gadget that you want to find its ID. A new window will pop-up. Click on the address bar, and navigate until the end of the line. See below for example:
In the example above, my ID is PageList1. I can address this gadget using this ID now. A quick example, say I want to adjust this gadget's width, all I have to do is go to Template Designer - Advanced - Add CSS - and address the gadget as such:
To find out your gadget's ID, go to Page Elements/Layout. Click Edit on the gadget that you want to find its ID. A new window will pop-up. Click on the address bar, and navigate until the end of the line. See below for example:
In the example above, my ID is PageList1. I can address this gadget using this ID now. A quick example, say I want to adjust this gadget's width, all I have to do is go to Template Designer - Advanced - Add CSS - and address the gadget as such:
#PageList1{
width: 50%;
}
Method 2:
Use FireBug of course!~ It's so easy to use, and it's a must have if you're a heavy blog tweaker. Get your own here. Once you've got it installed, you will see a small bug icon on the bottom right side of your browser. Click on it. Refer to the image below.
This will bring out a mini-window on your current page. At the top-left side of this window, click on the 'Inspect' button. Refer to the image below.
Being equipped with your new nerd-toy, it's just a matter of pointing and inspecting the elements. See the image below. It shows the same ID as Method 1.
The advantage of this method is that you can find an element's ID or class easily, and this element doesn't even have to be a gadget. Imagine this. You want to increase the width of your blog. Which element will you address? You can't use the first method to find an accurate solution (although it will give you the section ID).
Have fun.
Use FireBug of course!~ It's so easy to use, and it's a must have if you're a heavy blog tweaker. Get your own here. Once you've got it installed, you will see a small bug icon on the bottom right side of your browser. Click on it. Refer to the image below.
This will bring out a mini-window on your current page. At the top-left side of this window, click on the 'Inspect' button. Refer to the image below.
Being equipped with your new nerd-toy, it's just a matter of pointing and inspecting the elements. See the image below. It shows the same ID as Method 1.
The advantage of this method is that you can find an element's ID or class easily, and this element doesn't even have to be a gadget. Imagine this. You want to increase the width of your blog. Which element will you address? You can't use the first method to find an accurate solution (although it will give you the section ID).
Have fun.
