Fix Blogger Notable Template Layout Issues
The previous modification allowed the homepage to display popular posts (PopularPosts)
However, under Blogger's Notable template, the homepage layout looks very strange.
After analysis, it is caused by the floating layout of "More Posts".
Edit the template file
Before modification:
.blog-pager{
float:$endSide;
margin-$endSide:468px;
margin-top:48px
}
.blog-pager .blog-pager-older-link{
color:$(feed.button.color);
float:right;
font:$(feed.button.font);
text-transform:uppercase
}
After modification:
.blog-pager{
text-align: center;
margin: 2em 0;
}
.blog-pager .blog-pager-older-link{
color:$(feed.button.color);
font:$(feed.button.font);
text-transform:uppercase
}
Result:
===========
Recording other modifications together:
Too much spacing before and after ads
Before modification:
.shown-ad {
margin-bottom: 85px;
margin-top: 85px;
}
After modification:
.shown-ad {
margin-bottom: 45px;
margin-top: 45px;
}
Ad width between posts
Before modification:
.shown-ad .inline-ad{
display:block;
max-width:$(feed.width - 604px)
}
After modification:
.shown-ad .inline-ad{
display:block;
max-width:$(feed.width - 204px)
}
Posts
