Remove Space between Blogger Posts
I have just written a tutorial on how you can reduce space between Blogger gadgets. I guess I might as well write a tutorial on this one, since you have to address the elements in this one in a slightly different manner. How different one might ask. Most gadgets are unique, so normally they have their own IDs. However, it is difficult to find an ID for your post structures since post structures are identified using classes. Please refer to this post on a brief note about IDs and Classes.
Step 1:
Identify your class of course. Check out how you can identify your element's ID or class here. This is what I get using Firebug:
As you can see in the image above, my blog posts' class is known as date-outer. But it is not exclusive. You can also address your posts with date-posts, post-outer, post hentry and so on. See the image below. If you're using a different template, you might be seeing different classes altogether. I used Awesome Inc template for this tutorial.
The problem is, unless you're the designer of this template or really an expert when it comes to blog designing, you might not always know which is the right class to address. An element can have more than one classes associated to it, unlike IDs (where each elements can only have one unique ID). So you have to determine which class is the most accurate one using trials and errors. In this example, you can forget about date-posts, post-outer and post hentry classes because the right one to use is date-outer. Please feel free to play around with the other classes in the following step.
Identify your class of course. Check out how you can identify your element's ID or class here. This is what I get using Firebug:
As you can see in the image above, my blog posts' class is known as date-outer. But it is not exclusive. You can also address your posts with date-posts, post-outer, post hentry and so on. See the image below. If you're using a different template, you might be seeing different classes altogether. I used Awesome Inc template for this tutorial.
The problem is, unless you're the designer of this template or really an expert when it comes to blog designing, you might not always know which is the right class to address. An element can have more than one classes associated to it, unlike IDs (where each elements can only have one unique ID). So you have to determine which class is the most accurate one using trials and errors. In this example, you can forget about date-posts, post-outer and post hentry classes because the right one to use is date-outer. Please feel free to play around with the other classes in the following step.
Step 2:
If you're using the old Blogger interface: Go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.
If you're using the new Blogger interface: Go to Dashboard ('House' symbol) - Template - Customize - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.
Try using the other child classes (date-posts, post-outer, post.hentry) in the example above and see what happens. You will see changes, but not the one that you will like. Also, note how classes are addressed by adding a dot (.) as its prefix, unlike an ID's hash (#) prefix. That's about it. Have fun.
If you're using the old Blogger interface: Go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.
If you're using the new Blogger interface: Go to Dashboard ('House' symbol) - Template - Customize - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.
.date-outer{
margin-bottom: -50px;
}You can use margin-top attribute too:.date-outer{
margin-top: -15px;
}Try using the other child classes (date-posts, post-outer, post.hentry) in the example above and see what happens. You will see changes, but not the one that you will like. Also, note how classes are addressed by adding a dot (.) as its prefix, unlike an ID's hash (#) prefix. That's about it. Have fun.
Category Article Tutorial
