Translate

Thursday

How to: Add a Decorative Post Divider

The following tutorial will assist you in adding a post divider to your own blog. Post dividers serve as a decorative division between each blog posting.

Post dividers are easily installed through the Template Designer area of your Blogger blog by inserting a small snippet code into the Add CSS area. 

1. Before you begin you'll need to select a post divider image to use on your blog.  Post dividers can be found in two locations on my website ~ on an individual theme's page and on the Post Dividers page.  You can view the complete list on the Post Dividers page by clicking here.

  a.) Each post divider image has the complete code listed below the image. You will use that code to install the post divider image on your blog.  I suggest copying the code and temporarily pasting it to a text file ~ if you're using a Windows PC then a "Notepad" document is a good choice for that. This makes the process easier and less confusing.

  b.) In the example below I will be using the Whispers of Spring post divider and here is what that looks like on the page....

410 wide image and code

  c.) To install a post divider we will use the code found below the image example, rather than the image itself.  I will copy the entire section of code above onto a Notepad document and leave it open for use a little bit later on.  Now let's move on to installing the code onto our blog...

2. Begin by logging onto your blog and navigating to the "Template" area...


3. Next, click on the "Customize" button to the enter the Template Designer area of your blog...


4. At the bottom of the left side menu, click on "Advanced"...



5. Now scroll down the inner menu selections until you see Add CSS and click on that....



6. This will bring you to the CSS area of your blog...



7. If you previously added other CSS changes to your blog then you may see some code appear in this section.  In the example below, I have a snippet of code already inserted to center my banner...


If this is the case on your own blog them be sure to leave that code as is, do not remove it.  We are simply going to add an additional bit of code below, so be sure your mouse is positioned below any pre-existing code.

8. Now, copy the post divider code and paste it into the "Add custom CSS" area ~ again, being sure to paste it below any preexisting code/s...

.post{margin: 0 0 40px 0;
width: 90%;
background: url(http://www.plumroselane.com/image.png);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
padding-bottom:4.5em;
}

The part shown in red is different for each image so I've made that a generic link in the example above.  You won't have to make any changes to the code, as long as you're using one of my post divider.

9. In my example the code now looks like this...



10. With the code now in place you can now preview how the post divider image will appear. To do this, use the lower scroll bar on the right side to scroll down the sample view of your blog...


13. Continue scrolling down until you see the example post divider appear...



If an example does not appear then double check to be sure you copied and pasted the entire code into that CSS area.  In some cases the post divider may not show up. If this is the case the I suggest backing out of the Template Designer, do not save any changes, and start over again.  Please remember that if you've previously installed a post divider you will have to remove that code before trying to insert a new one.

14. With everything set, simply click the "Apply to Blog" button to save your changes...



Adjusting the space around your post divider: If  you find the post divider image appears to be cramped in under the bottom of your posts then you can change the last number on the bottom line of the code to a higher number.  This adjusts the margin between your posts and the post divider.  Changing the number to a higher number, like 5.5, 6.5 or 7.0 will add more space between your blog posts and the post divider image.

Enjoy!

9 comments:

  1. thank you!! I just did it!! Your instructions were very easy to understand. Thank you so much. Love your designs.

    ReplyDelete
  2. I just want to say thanks for the tutorial and for the awesome post divider. I added you blog button to my blog :) Will be back when I can tip! Thanks again!

    ReplyDelete
  3. Many thanks for a great, easy to understand tutorial - SUCCESS!!!! Fab designs! :)

    ReplyDelete
    Replies
    1. Thanks for the comment pinkclover.cards ~ so happy it was helpful!
      ♥Sharon

      Delete
  4. Thank you so much! I couldn't do it before. None of the sights I went to told me what to really do! Thanks. Here is the link if you would like to see it: http://celestenerdgirl.blogspot.com.au/
    I am still working on it and so it isn't perfect yet.
    -Celeste

    ReplyDelete
  5. you're my one stop blog theme place. Thank you for the free designs and I still enjoy the blog header and cards you made for me through Etsy. http://georgie-hornpuddinnpie.blogspot.com/

    ReplyDelete
  6. hi im new to blogging and since you seem like you know a lot about designing and blogs , how do install social media icons onto your blog? and do you design any? I love your designs though

    ReplyDelete
  7. Thank you so much for your tutorials and graphics.

    ReplyDelete

Due to a recent increase in SPAM comments preauthorization is temporarily set for all comments ~ once the situation improves I will remove that function.

I love your comments and appreciate your opinions so much ~ I hope you enjoyed your visit and come back often.
♥Sharon