June 1, 2011

Hide Post Footer from Homepage in Blogger




How much do you care about your blog design? It matters, yeah. Your blog design matters as it represent your personality and no... no... don't ever think about copying someone else's design. Yeah, it's alright if it's available for you or you build similar with your own efforts. Else you just don't show off yourself. It's true that design doesn't matters mostly but some people identify when they see you are using someone else's design strategy. However try to be unique with designing and customize it as you need. When it comes to customization, you may have seen that Blogger show post footer end of each post. You may feel it's perfectly alright to show at post pages, but you may not like the fact that it's visible on your homepage. It depends on your choice. Wanna get rid of post footer from your blog homepage?


Blogger Default Post Footer

Mostly you may customize your blog template to get more attention from your visitors and to make it an attractive place. Trying out stylish gadgets or widgets, using different font styles are couple of things you might try when you blogging. But sometimes you may wonder how to change the way some components appear on your homepage, such as default Post Footer.

I hope you are familiar with post footer, else it's shown above. First off, you would like to show it off on your homepage and it's perfectly alright. It's your choice. But in another time, you may feel, its better to show it only at post pages but not on homepage. Did you land here with that thought in your mind? Then you can learn it from here. There is no option provided by Blogger to remove your Post Footer but customize. So to remove or hide Post Footer from you blog homepage, you have to dig into your template. Shall we?


Before You Go:

If you just wanna customize your post footer, read Customize Post Footer in Blogger.


Steps:


2. Click on your Blog Title.

3. Jump to Template tab from left pane.


Note: Before editing your template, you may want to save a copy of it. Read How to Back Up Your Template.

4. Now click on Edit HTML button.


5. Find below line of code in your template,

]]></b:skin>

6. Now paste following code snippet just after ]]></b:skin> line.

<style type='text/css'>
<b:if cond='data:blog.pageType == "index"'>
.post-footer {display:none !important;}
</b:if>
</style>

7. Preview your blog to confirm changes and Save template.


Enjoy :-)




Awesome! Thanks for coming by and taking your time to read this post :) I hope you have learnt something today. Now you can share it with your friends and I'd love to hear from you too.






Related Posts and Categories


Category, , , , ,





Comments

* Make sure your comment is genuine and comply with our commenting guidelines.

* Review your email and reply notification settings to receive replies via email.


Unknown said...

Thank you :-)

Mayura De Silva said...

You are welcome Sherry :)

Have a wonderful day...

Cheers...

jusdelima said...

Thank you, very helpful.:D

Mayura De Silva said...

You're welcome mate :)

Cheers...

Amelia said...

hey mayura, how can i get rid of all the post footer stuff except for the comments link? i want to keep the link to comments and also the list of labels.

thanks so much!

Mayura De Silva said...

Hi Amelia,

Navigate to Customize Post Footer in Blogger and remove all footer options but leave only comment link feature there :)


Cheers...

Amelia said...

this is what it says after post footer, which part should i remove? thanks!

.post-footer {
  margin: 20px -2px 0;
  padding: 5px 10px;

  color: $(post.footer.text.color);
  background-color: $(post.footer.background.color);
  border-bottom: 1px solid $(post.footer.border.color);

  line-height: 1.6;
  font-size: 90%;
}

#comments .comment-author {
  padding-top: 1.5em;

  border-top: 1px solid $(body.rule.color);
  background-position: 0 1.5em;
}

#comments .comment-author:first-child {
  padding-top: 0;

  border-top: none;
}

.avatar-image-container {
  margin: .2em 0 0;
}

#comments .avatar-image-container img {

  border: 1px solid $(image.border.color);
}

Mayura De Silva said...

Oops... Nope dear :) I must have given you the exact title there. On the above mentioned post, refer "Add/Remove Basic Post Footer Options" dear. Remove options except for # of Comments option. Got it? :)

If you have questions related to Customization, I appreciate posting your questions on that post dear :)

Cheers...

j-clinton said...

thank you so much for sharing this knowledge. it was explained quite efficiently and very easy to implement.

you are a good teacher...

Mayura De Silva said...

Hi Clinton,

Glad to hear that you've made it on your blog without any difficulty :)

Thanks for your nice comment and well, for your compliments too :)

Cheers...

OurDeerDeparted said...

Just what I needed. Thanks for the brief explanation and the code :D

Mayura De Silva said...

You're welcome mate :) Glad it helped out.


Cheers...

Taimoor Sultan said...

thank you so much bro. It helps me in my new blogger blog.

http://www.bloggerjin.com

Diones said...

Thank you so much

Mayura De Silva said...

You're welcome Diones :) Glad to know it's been helpful.

Cheers...

Matthew Wimer said...

This is fantastic! It may be too far down the road to ask you this, but is it possible to hide the post footer on all but the first post on the homepage? You can take a look at my blog, www.lostlittlelutheran.com, and realize my error. Since I'm using the "read more", having the share widget I've got seems strange where it is.


Thanks!

Mayura De Silva said...

Hi Matthew,

Thanks mate :)

Unfortunately, the changes being applied for every post on the homepage and Blogger doesn't support specifying changes only for a specific post on homepage Matthew.

How about getting rid of post footers altogether and adding comment links manually? You can refer to these posts if you would like to ~ How to Display Post Author, Date / Time and Labels Below Post Title in Blogger and How to Display a Comment Link with Post Title in Blogger.

Hope it will be helpful :)


Cheers...

Matthew Wimer said...

Oh… that's a good idea! I'll look into that. Thank you! I appreciate the how to's. =D

Mayura De Silva said...

You're welcome Matthew :) Always glad to help as I can! Appreciate your compliment too mate.


Cheers...

Akat Suki said...

Thanks :D

Mayura De Silva said...

You're welcome Akat :)