November 7, 2011

How to Add a Post Divider

Do you notice the divider that I have separating my posts? If you are trying to make your blog stand out, a post divider can really do the trick. It doesn't have to be anything fancy. In fact, simple is best when it comes to making a post divider. Here's what mine looks like:

Want to learn how to make one yourself? Here's how:

(This tutorial is for Blogger blogs with the Minima template. Follow steps 3-7 here to change your template to Minima.)

Update: If you would like to add a post divider using the Blogger Simple template, follow the instructions HERE.

Creating the Graphic
Creating the graphic for your divider is up to you, but here's some help getting started: 

First, you need to have some kind of design software. I use Photoshop, but you can use the home version, Photoshop Elements or any other software such as Pixlr (free online software), Corel or anything else that lets you import graphics and create designs.

Next, you need to find some graphics. I used graphics from Katie Castillo's digital scrapbook kit Happy Day. You can choose graphics from wherever you choose, just make sure that you check the owner's terms of use. Just because an image does not have a watermark, does not mean you have the rights to use it. Also, purchasing an image does not guarantee you can use it on the web. ALWAYS check the terms of use for the designer of the graphics you use. (Check my list of designers on my sidebar under Design Elements. Those ladies are great to work with and respond to usage inquiries fairly quickly.)

(If you would like help with some basics on creating a design with layers, take a look at my tutorial on Making Your Own Blog Button. This tutorial uses Pixlr.)

Here are a few tips when creating your divider: 
1. Figure out how wide your posting section is by going to the Design tab and clicking "Edit HTML". Do not change anything, but scroll down until you see:

#main-wrapper {

Under this, you will see a measurement for the width. My blog has a measurement of 570 pixels. When I made my post divider, I also made it 570 pixels wide. I also gave it a height of 85 pixels.

So, to figure out the size of your post divider, you can do anything equal to or smaller than the width of your main-wrapper. Any height around 100 pixels is good too.

2. When creating your image, do not use a lot of shadows or intricate details. This image is small and heavy shadows look too overpowering. Also, too many details get lost and look very busy. Remember, keep it simple, you want people to be more focused on your posts than your post dividers.

3. When saving your file, unless you have a rectangular post divider, save it as a png file. (Don't know what a png is? Read here.) Don't forget to also save it as a layered file, Photoshop file if you are using Photoshop, Pixlr file if you are using Pixlr, etc. If you want to make changes later, you will want the original file.

How to put it on your blog
1. When you want to place images on your blog, other than in your posts, you must upload them to a web hosting service of your own or a photo hosting site like Photobucket. You can create a free account to upload your images. However, if you use this site for a lot of web images and have a lot of traffic to your blog, you may need to upgrade to a Pro Account or look into another web hosting service.

If you choose to use Photobucket, you need to login to your account and click the green Upload button. Click the green button "Select photos and videos" and Browse to find your png file. When the image is uploaded, click the small box next to the file name so that there is a check mark. Then click "Choose action" and select "Generate link codes for selected".

A window will pop-up. Click in the box that says "Direct link". This will copy the link code so that you can paste it in the next step.

(If you accidentally saved the image before getting the link code and you are now in your album, hover your mouse over your image until a list of options appears below the image. Click the code next to "Direct Link". Clicking this automatically copies the link for you.)

2. Now, login to your blog and click Design and then "Edit HTML". 

Before you make any changes, back-up your template. (Then if you make any mistakes or decide you don't like what you did, you can put your old template back on.)
Once you have backed up your template, scroll down until you see the line that starts with:

 .post {

Change the part that says "1px" to say "0px".

Like this:

(This takes away the border below your posts.)

3. Now, scroll down a little more until you see this line:

.post-footer {

You are going to add a few lines as follows:

Add the following EXACTLY, right after ".post-footer {"  

background-image:url(Direct Link);background-repeat:no-repeat; background-position: bottom center;

If this doesn't work for you, try this instead:

background-image:url(Direct Link) no-repeat bottom center;

Where it says, "Direct Link", you will replace the Direct Link code that you copied from Photobucket.

When you finish, it should look like this: 

*Notice that the height I chose was roughly double the height of my image. You may need to adjust yours according to the image you created.
4.  Before you hit SAVE, do the following:
 A. Click "Preview. If you need more space above your blog, increase the height. Click Preview again before saving.
 B. If your divider has a huge space below it, change the following line:

margin: .75em 0;

So that it reads as follows:

  margin: .75em  0   -50px;

Click Preview. If you need to close the gap even more, increase the number 50 (keep the - before it). If you need to increase the space, decrease the number of 50 (keep the - before it).

5. If everything looks good, click Save!

That's it! Your very own post divider!!

Let me know how it went! I'd love to see your post dividers!



  1. I tried using your tutorial but when I click "Preview" the divider's top is cut off and it covers the post footer. What do I do?

  2. Rachelsie,

    To adjust the spacing, follow step 4. Start by increasing the height until you can see the top of your divider and you have a nice space above it.

    Then, to fix the bottom, change the line that says Margin to read: margin:.75em 0 50px; (as it says in the instructions). If this is still not enough space, increase the 50px until it looks good.

    Let me know if this works!


  3. I just wanted to say thank you, thank you, thank you!
    I googled lots of "page divider tutorials" and yours is the best one out there!
    Your put it in english! I really love the photos and the red circles.
    It worked for me.

  4. I also googled a ton of tutorials for this. Yours was by far the most helpful! Thanks a ton

  5. With the new template, all you have to do is add the stuff after the post.footer part.

  6. Thanks Rachel! I will actually be posting some instructions in the next week or two on adding these elements to the new templates.

  7. I got a post divider on shabby blogs and did the first few steps, however when I pasted the code into the HTML gadget, the code i had didn't have any of the things that we were supposed to change....maybe i did something wrong. Im just a little confused!

  8. Hi Ksampayo,
    Read through the first few steps again. Did you upload the post divider to Photobucket or something similar? You won't be pasting the code from step 1 into a gadget. You have to click "Edit HTML". (Make sure you backup your template before you change the HTML.

  9. So i tried your tutorial and the post divider uploaded underneath the original posts and it also showed up at the top of the sidebar gadget pictures?? I don't know why it would do that? Can you help me please?!

    1. I looked at the blog linked to your profile and everything looked ok. Is this the right blog? Do you still need help? If not, tell me exactly what you did and give me a link to your blog.

  10. Hi Dani, thank you soo much for all your tutorial.. I have tried all your tutorial from "Design it Myself" blog and all worked well for me.. I wanna post divider to my blog but i have already add the signature which doesnt suit to put both together.. I want to remove the signature and add divider post.. Is there any method to remove the signature? I followed 'kevin and amanda' method. Have a look at my blog ~ Thank you..

    1. I'm so glad my tutorials have been helpful. Yes, adding both the post divider and signature are tricky. They can work together but it takes a bit of tweaking to make it work right. I will add that to my list of future tutorials. In the meantime, to remove the post divider, you need to follow Kevin and Amanda's instructions as if you were adding the code, but instead of adding it, find the code that you entered and delete it. Just be very careful that you do not delete anything else or your template will get messed up. Let me know how it goes!

  11. It didn't work for me :( I got the divider to go up, but I couldn't find where to change the 1px to 0px. Mine doesn't look like yours: here's mine (
    /* Posts
    ----------------------------------------------- */
    .date-header span {
    background-color: $(date.header.background.color);
    color: $(date.header.color);
    padding: $(date.header.padding);
    letter-spacing: $(date.header.letterspacing);
    margin: $(date.header.margin);

    .main-inner {
    padding-top: $(;
    padding-bottom: $(main.padding.bottom);

    .main-inner .column-center-inner {
    padding: 0 $(main.padding);

    .main-inner .column-center-inner .section {
    margin: 0 $(main.section.margin);

    .post {
    margin: 0 0 $(post.margin.bottom) 0;
    }, .comments h4 {
    font: $(post.title.font);
    margin: .75em 0 0;

    .post-body {
    font-size: 110%;
    line-height: 1.4;
    position: relative;

    .post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
    .BlogList .item-thumbnail img {
    padding: $(image.border.small.size);

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

    -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
    -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
    box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);

    .post-body img, .post-body .tr-caption-container {
    padding: $(image.border.large.size);

    .post-body .tr-caption-container {
    color: $(image.text.color);

    .post-body .tr-caption-container img {
    padding: 0;

    background: transparent;
    border: none;

    -moz-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
    -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
    box-shadow: 0 0 0 rgba(0, 0, 0, .1);

    .post-header {
    margin: 0 0 1.5em;

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

    .post-footer {background-image:url(;background-repeat:no-repeat; background-position: bottom center;
    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%;

    1. Hi Erica,

      This tutorial is for the Minima Template. You have the Simple Template so it will be different. Here is a link to a tutorial for the Simple Template: How to Make and Add a Post Divider.

      Also I noticed that you do not have a link back to my blog. In order to use my designs you must have a link back to my blog. If the link does not show up in the top left corner, you must add my button to your sidebar. The code for this is in my sidebar.


  12. Your instructions are very clear. Thanks a lot!

  13. Thank you so much! I have searched all over the internet and not found a website with easier directions!!!
    I Teach. What's Your Super Power?

  14. Thanks for the terrific template and tutorials!

    Sally Said Sew

  15. So appreciate the tutorial! Worked great for me. THANK YOU!

  16. Hi!
    Photobucket I can not do it. I can not find the Generate link codes for selected and aa small box next to the file name, and the check mark next to the ...
    I think the pop-up window is different.


Thank you so much for leaving a comment! I would love to answer everyone's questions, but I am a busy mama. I will try my best, but technical questions that require me to study your blog's html are very time consuming for me. I may not be able to answer all of these comments. If you are a reader that knows the answer to a question, please help your fellow readers by offering your advice.