How to Add a Post Divider

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.)

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;
height:150px;

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

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

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!