XYUENX: Create and Add a Post Divider (Blog Tutorial)

Haven't posted a tutorial for ages. A quick hint: If you want to increase blog traffic, post some kind of tutorial. Haha.

Okay, so this time we will be talking about creating and adding a post divider to your blog. What are post dividers? They are a long narrow strip of decoration that are placed at the bottom of each post, supposedly to divide your posts so that people know where a post ends and where another begins.

An example of a post divider

To me, I don't think it's anything more than another nice decoration that cheers up a drab blog though. But it's easy and fun, so why not?
Anyway, there are many ready-made post dividers around the web for free (and sometimes for a small fee), but sometimes, you just want a certain divider that has the same theme/design as your blog. Don't worry, you can make a simple divider on your own! Or even use an image that you already have. :)

Here's how it works:

Part 1: Creating the Post Divider
The Holy Grail photo editor that I use is Picmonkey. It's so awesome that I'm using it for almost all my designing on this blog, including my post divider.
If you already have a post divider image, scroll to Part 2 to learn how to add it into your blog.

Step 1: First of all you need to find the width of your post area. To check, go to Template > Customise, to open up the Template Designer.

Step 2: Go to Adjust Widths. You'll see two numbers, one for the entire blog, one for right sidebar. The width of post area is what's left after deducting the bottom number from the top number.

In my case, 1250-350=900px.

So my post divider needs to be 900px wide.

Step 3: Now here's the designing part. Go to picmonkey, or any other photo editors that you use, Pixlr, Photoshop, anything. I'll be demonstrating picmonkey here. Click Edit A Photo. This will open up a window to upload a photo. Choose any photo, but make sure the width is at least as wide as your post area (900px in this demo), and height at least 100px.

Step 4: Okay, I chose a photo. Now, click on the first icon on the left, then click on CROP. Enter the width and height. In this demo, I'll be entering 900px x 90px. Enter your post area's width, and for height, anything below 100px. Depends on how thick you want your divider to be.

Step 5: Now you have a definite space to work with, but we need it to be blank. Click on the fifth icon on the left which will open the Overlay tray. Click on Geometric and use a rectangle. Resize the rectangle so that it covers the whole area and change the colour to white.

Step 6: Combine everything to the base so that you won't accidentally shift the rectangle away while designing later (which is extremely annoying). Click on the icon second from the right on top. This will do the job.

Step 7: Start designing! This is what I made in 5 minutes (excluding thinking-what-to-design-and-trial-and-error time). If you know what you want, it can be done very fast, especially if you're used to the interface. I know it's not very perfect, but it's just a demo, and I didn't have much time to think. If your background is in another colour, you can set the rectangle (in the above steps) to that colour, so that the background of the divider will look transparent. :)

For the ultimate designing, Photoshop is still the best. You can start from scratch. If you want to use the premium stuff from Picmonkey, you can purchase them. For me, I'm satisfied with the free tools on Picmonkey, with a little extra thought and creativity.

When you're done, save it. Save in the best quality if possible.

Now you have your very own post divider! :)

Part 2: Adding The Post Divider Into Your Blog

What good is a post divider without adding it into your blog right? Here is the easy way to add it! No more messing around with the long paragraphs of html codes. ;)

Step 1: Now upload your post divider to a photo-hosting site. I use Photobucket. Any other sites will do too. If you're using Photobucket, copy the direct link as shown in the photo below. For other sites, copy the direct link of the photo.

Step 2: Go back to Template Designer. (Template>Customise)

Click Advanced > Add CSS.

Then, paste the following code. If you have codes there already, be sure to leave some space between the other code and this one.

.post-footer {

background:url(THE DIRECT LINK) no-repeat center;

height: 215px;

margin: 20px 0px -50px;

padding: 5px 10px;

}

Replace THE DIRECT LINK with your post divider link.
Height: Choose a size almost double the height of your post divider. This will leave some space between your post text and the divider itself, so things won't look cramped.

Margin: You probably won't need to change this but I'll explain. First number, 20px, is the size above the post footer, including comments, labels etc. Second number, 0px, is the left and right of the post footer. Third number, -50px is the size below the post footer.
If your post divider looks out of place, then adjust the numbers accordingly. :)