Mommy Hacks #12 - Remove Post Footers from Home Page

As discussed in last week's post, jump breaks are great because they allow you to display snippets of lots of blog posts on your home page.

Unfortunately, by default they display the footer for each post which really clutters up your home page.

The good news is, with just a few lines of code you can configure your blog so footers only display on actual posts and not on the home page and you can put something pretty in their place ...

Remove Post Footers from Home page

We are now going to edit your blog template, so if you haven't already please back up!

1. Copy the code below ...

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

Now the bit where you MUST be careful.

2. Click on the Template link and then on the Edit HTML button highlighted below.

3. Now click carefully inside the scroll box displayed and press Ctrl-F on your keyboard. 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>

The code you searched for will be highlighted as shown below.

4. Paste the code you copied just below the highlighted code as shown below and then click Save Template.

5. Now view your blog - the post footers should not be displayed on the home page but they will still be on each individual post.

6. Now you are ready to add a little bit of style to delineate between each post.

Style a Simple Divider Between Posts

1. Click inside the scroll-box, press Ctrl-F on your keyboard again and in the search field enter: .post {

2. You will see after .post there is an open curly bracket, some code and then a closed curly bracket.

3. Paste the following code just before the closed curly bracket

padding-bottom: 50px;

border-bottom: 2px dotted black; 

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

5. If you want to make the line thicker increase the number next to px to e.g. 3px

6. If you want to change the line style replace the value dotted with solid or dashed

7. If you want to change the colour of the line replace black with any of the colours in this list or if you know the hex number of the colour you want replace black with e.g. #DC143C

8. If you want more space around the line increase the padding-bottom value to e.g. 60px 

9. Once you're happy with the changes click on Save Template and you're all done you should have the style  you want.

 If you found this post useful, you might also enjoy my other mommy hacks and for loads of great blogging tips from load of great bloggers check out The Mommy Archive ...

   

Mommy Hacks Newsletter

If you would like to receive more Mommy Hacks and blogging tips subscribe to the Mommy Hacks mailing list

This post has been shared at ... Sugar Bee Crafts,  Home Stories A to Z,  The Shabby Creek Cottage,  Joyful Homemaking,  Serenity Now, The Gunny Sack, Crystal and Co, Ginger Snap Crafts, Trendy Tree House, Domesblissity, Ladybird Ln, Not Just a Housewife, Clever Chicks, Be Different Act Normal, Sumos Sweet Stuff, Keeping It Simple, Lines Across, Get Your Crafts On, A Bowlful of Lemons, Clean and Scentsible,  Delightful Order, We Are That Family, By Stephanie Lynn, Whipperberry,  More the Merrier Monday,  I Should Be Mopping the Floor,  Carolyn's Homework, Shabby Creek Cottage, 36th Avenue, Six Sisters Stuff, 52 Mantels, My Uncommon Slice of Suburbia, Elizabeth and Co, Whatever Goes, Finding Fabulous, The Thrifty Home, Skip to My Lou, Five Little Chefs, Fluster Muster, Creative Princess, DIY Crafty Projects, The DIY'ers, Naturally Living Mamma, Tumbleweed Contessa,Give Me the Goods, Martha Mondays