Tutorial: Post Dividers

Want to separate your posts with a cute image?
I am going to show you how today!

First you need to see how wide your image can be.

Go to you Layout> Edit html.

Push Crtl F and a search box should pop up.

Type the words "main-wrapper"

Once you have located the words "main-wrapper" the next line under that will say:  

width: 500px {or whatever number you have right there}

That number is the widest you would want to make your post divider otherwise it will get cut off.

Once you have the image you want to use upload it to photobucket.

In photobucket you can re-size the image if you need to.

Okay now go back to your blog html.

Find the part of the code that says this...

.post{ margin:.5em 0 1.5em;border-bottom:1px dotted $bordercolor;padding-bottom:1.5em;}

Replace that code with this code.

.post { background: url(your-image-url); background-repeat: no-repeat; background-position: bottom center; margin:.5em 0 1.5em; border-bottom:0px dotted $bordercolor; padding-bottom:5.5em; }

Then all you need to do is replace your-image-url with the
direct link from photobucket.

To get the direct link from photobucket you go to share > Get link code > then direct link

You might need to change the 5.5em to a little bigger or smaller to fit your image.
Just mess with it and see.
But ALWAYS pre-view before you push save.
 That way if you don't like it you can change it!

Hope this was helpful! I would love to see your cute post dividers! Leave me a link!