How To Remove Post Footers From Home Page In Blogger

Mostly, we customize our blog template to get more attention from visitors, like trying out stylish widgets, using different font styles etc. But sometimes we think, how to change the way some components appear on homepage, such as default Post Footer.

Actually, its better to show it only at post pages. Did you land here with that thought in mind? If Yes, then you are in the right place.

Jump breaks (Read more) are great because they allow you to display snippets of blog posts on your home page. But if you are a blogspot user then Unfortunately, by default it displays the footer for each post, which really clutters up your home page.

The good news is, we have the solution for it, which includes just a few lines of code. After implementing it, footers will only display on actual posts and not on the home page.

How to Remove Powered By Blogger Attribution

How To Remove Powered By Blogger Attribution

How it Works:

• Log in to your blogger account.
• From the dashboard click on template.
• Backup your template.
• Click on Edit HTML button.
• Now click inside the scroll box and press Ctrl+F. A search field will be displayed at the top right of the scroll box.
• Enter the following code into the search field and press enter.

]]></b:skin>

• Now, paste the below code, just below the above code.

<b:if cond='data:blog.pageType != "item"'>

<style type='text/css'>

.post-footer {display:none;}

</style>

</b:if>

• click Save Template.

Now view your blog, the post footers will not be display on the home page but they will still be on each individual post. Another benefit of this code is, it will also hide the footer from pages, like, Contact Us Page, Privacy Policy Page etc. Which will definitely make your blog more professional.

Now, if you are using simple template then you can add a little bit of style to delineate between each post. It is not recommended, if you are using Awesome incorporation template.

How To Add A Gadget Inside Blogger Header

Place a Simple Divider Between Posts

• Click inside the scroll-box, press Ctrl+F on your keyboard again and in the search field enter: .post {
• You will see after .post there is an open curly bracket, some code and then a closed curly bracket.
• Paste the following code just before the closed curly bracket.

padding-bottom: 50px;

border-bottom: 2px dotted black;

Now, click on Save Template and view your blog, a dotted line will be displayed underneath each post.

How To Create Static "Home Page" In Blogger

Customization:

• If you want more space around the line then increase the padding-bottom value to e.g. 60px.
• If you want to make the border line thicker increase the border-bottom value to e.g. 3px.
• If you want to change the line style replace the value dotted with solid or dashed.
• If you want to change the colour of the line then replace black with any of the colours or if you know the hex number of the colour then replace black with e.g. #336699.

Once you're happy with the changes click on Save Template and you're all done. So, this was the tutorial for removing footers from blogger home page. I believe, it is very simple to implement. If you are still having problem with it then feel free to comment below. Thanks!

How To Remove "Read More" Link In Blogger