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.
Thanks! Just what I was looking for right this moment!
ReplyDeleteI keep having a hard time with opening and using Firebug =)
Can you add an "HR Line" this way, too?
ReplyDeleteRaindopSoup: Identifying an ID will be very useful when it comes to tweaking your blog. I'm sure it'll be very helpful.
ReplyDeleteGlenn: HR Line is an element of HTML. We can't add HTML using CSS (the reverse is possible). CSS can only be used to style an element, not add one. However, you can add an HTML easily once you've known the place where you wanna add it. My advice: Use Firebug in your blog to see what's the ID of the element (or nearest element) where you want to add your HR Line, then go to Edit HTML - Expand Widget Templates - Find for this ID - add HR line to the HTML accordingly.
YoboY, you're brilliant!
ReplyDeleteGlad you got it figured. Cheers.
ReplyDeleteThank you for pointing out FireBug!
ReplyDeleteHave fun with it. It's awesome and powerful.
DeleteHi, i am from brazil, them sorry my english. help me. i'm need show 2 gadget labels, but the blog show only 1, the first. because i am using labels how menu, cus the blog no load my menu that i try load. how maker for show more that 1 labels, tks.
DeleteHi there, this should help --> http://www.southernspeakers.net/2010/10/adding-already-added-gadget.html
Deletehello again! I used the CSS code provided on this tutorial to edit the margins of my page list. but what is the css code to adjust the width in between my page list and blog description? Thank you so much!
ReplyDelete-www.youareair.blogspot.com
Hi there, try this:
Delete.descriptionwrapper{
margin-bottom: -20px !important;
}
Cheers.
Great site. I am using this trick in my one blog page. Thanks f sharing this great post.
ReplyDeleteWow! Love the look of your Homepage & styling...Any chance you can do a tutorial on how to achieve a similar look?
ReplyDeleteTheo
Hi Theo,
DeleteI use a typical 3-columned Minima template, and changed the colors of the borders is all.
Cheers :)
Thanks for the tutorial :)
ReplyDeleteOMG where has Firebug been all my life! Thanks for the tip. I've been using it to increase the top and bottom padding for my sidebars/gadgets. Works like a charm to id those elements.
ReplyDelete