In about Blogger themes, in that place is a big gap betwixt the bottom of the header in addition to the start of the starting fourth dimension post, which agency that the posts in addition to the sidebar are non aligned. This article explains how to accommodate the gap, in addition to therefore take away the problem.
themes that Blogger provides, equally good equally all third-party themes, the sum of infinite betwixt elements on the enshroud is non accidental: designers set a lot of endeavor into working out what spacing volition await good, in addition to therefore finding ways to set CSS code into the template therefore that the spacing they desire is shown inwards whatever browser software that Blogger supports.
But in that place are times when you lot may desire to alter this spacing, in addition to this is slow to do, provided you lot are willing to convey the disadvantages of editing your theme, in addition to if you tin order notice function out precisely which component division of the template code to change.
two Find this code
3 Change the first margin value to larn the resultant you lot want
How much to alter it past times depends on your template, but inwards about cases I've used 0 successfully.
What the numbers mean
In CSS, when a margin tilt has 3 numbers beside it, they refer to the
iv Click Preview to encounter what the spider web log volition await similar - proceed doing this until you lot larn the correct setting.
five When you lot are happy amongst the spacing, click Save Theme to apply the changes to your blog. (Or Clear Edits if you lot cannot larn it correct in addition to take to halt trying).
Note: If you lot brand a big alter to your theme, it's a proficient thought to cheque out out inwards at to the lowest degree 1 version of the other browsers that your readers purpose - unremarkably agency electrical current versions of Internet Explorer, Firefox in addition to Chrome. But it may depend on your niche - a tool similar Google Analytics volition order you lot about statistics well-nigh what browsers, in addition to enshroud sizes, your visitors have.
Also, it is possible to brand this alter past times merely installing a novel CSS rule for h3.post-title into your spider web log - because the latest 1 flora is ever the 1 used, in addition to because the template designer's Add CSS business office puts the rules you lot add together afterward the othr rules. I don't recommend it here, though, because working amongst the master dominion makes it easier to encounter the outcome of making changes to whatever of the values inwards the area.
If you lot display comments inwards your blog, you lot also take to cheque the impact on comments, because the master ascendance applied to h4 items inwards comments equally well.
If you lot are making a lot of changes, you lot may desire to make a bear witness blog, in addition to plan your changes inwards private earlier applying them to your primary blog.
Adding a novel CSS dominion to your blog's theme
Advantages in addition to disadvantages of editing your theme
How to edit your blogger theme
Who did your blogger subject come upward from - the quick way of finding out
Making a test-blog for template changes
Planning changes to your spider web log inwards private
But in that place are times when you lot may desire to alter this spacing, in addition to this is slow to do, provided you lot are willing to convey the disadvantages of editing your theme, in addition to if you tin order notice function out precisely which component division of the template code to change.
The pre-Header gap
A pet-hate of mine is the blank infinite higher upward the starting fourth dimension postal service inwards many Designer themes, which looks foreign unless you lot set something else inwards to the space. In the illustration below, in that place is an AdSense link-unit inwards the expanse highlighted inwards red, merely to fill upward inwards the empty space:How to alter the gap higher upward the postal service header inwards Designer themes
1 Edit your theme inwards the park way.two Find this code
h3.post-title, .comments h4 {The exact numbers used inwards your template may endure different: the primal affair is to notice the CSS ascendance that is putting a margin higher upward the postal service header. In the template that I took this illustration from (Simple), it's the "0.75em" - which puts 75% of the infinite of a the post-header characters equally a blank infinite higher upward the header.
font: $(post.title.font);
margin: .75em 0 0;
}
3 Change the first margin value to larn the resultant you lot want
How much to alter it past times depends on your template, but inwards about cases I've used 0 successfully.
What the numbers mean
In CSS, when a margin tilt has 3 numbers beside it, they refer to the
- top,
- left-and-right,
- bottom
iv Click Preview to encounter what the spider web log volition await similar - proceed doing this until you lot larn the correct setting.
five When you lot are happy amongst the spacing, click Save Theme to apply the changes to your blog. (Or Clear Edits if you lot cannot larn it correct in addition to take to halt trying).
Note: If you lot brand a big alter to your theme, it's a proficient thought to cheque out out inwards at to the lowest degree 1 version of the other browsers that your readers purpose - unremarkably agency electrical current versions of Internet Explorer, Firefox in addition to Chrome. But it may depend on your niche - a tool similar Google Analytics volition order you lot about statistics well-nigh what browsers, in addition to enshroud sizes, your visitors have.
Also, it is possible to brand this alter past times merely installing a novel CSS rule for h3.post-title into your spider web log - because the latest 1 flora is ever the 1 used, in addition to because the template designer's Add CSS business office puts the rules you lot add together afterward the othr rules. I don't recommend it here, though, because working amongst the master dominion makes it easier to encounter the outcome of making changes to whatever of the values inwards the area.
Other affected spacing
If you lot receive got to a greater extent than than 1 postal service per page, therefore this alter volition also bring down the sum of infinite betwixt the bottom of 1 postal service in addition to the header of the side past times side one. Depending on your theme, you lot desire wishing to add together a trivial to a greater extent than infinite into the margin tilt inwards the bottom of the post-footer, eg.post-footer {
margin: 20px -2px 20;
padding: 5px 10px;
}
If you lot display comments inwards your blog, you lot also take to cheque the impact on comments, because the master ascendance applied to h4 items inwards comments equally well.
If you lot are making a lot of changes, you lot may desire to make a bear witness blog, in addition to plan your changes inwards private earlier applying them to your primary blog.
Related Articles
Setting upward Google Analytics to larn statistics well-nigh for your visitorsAdding a novel CSS dominion to your blog's theme
Advantages in addition to disadvantages of editing your theme
How to edit your blogger theme
Who did your blogger subject come upward from - the quick way of finding out
Making a test-blog for template changes
Planning changes to your spider web log inwards private