How to create and install a custom post divider for your blog


Today I’m going to show you how to easily add a custom post divider to your blog. It’s a great way to add some extra personality to your blog, and also, well… divide your posts! For this tutorial I’m working with blogger, however the coding is the same for any blog platform.

 

Step 1: First what you’re going to do is create the image for your divider. You can use any image/photo editing program. I used Adobe Illustrator, but you can just as easily use a free editing site online such as picmonkey.com. The most important part of this step is to make sure your image is a good size for your blog. Everyone’s blog will be different but here is a little formula to figure out how big your image should be. Log into your blogger dashboard and click Template >  Customize > Adjust Widths. You’ll then see the size of your entire blog and sidebars. For example, my entire blog has a width of 1310 pixels. The left and right sidebar combined are 550 pixels. Subtract the sidebar(s) from the entire width and that will equal the approximate size your divider should be.  So mine should be around 706 pixels.
Here is my divider:
Step 2: Now upload your image to an image hosting website, such as photobucket.com or imageshack.com. Once you upload your image, take note of the image URL. Mine is:
http://i1301.photobucket.com/albums/ag113/KellyStahleyArtDesign/postdivider.jpg
Step 3: Insert your image URL into the following code:
.post{
margin: 0 0 40px 0;
width: 90%;
background: url(your image URL);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
padding-bottom:3.5em;
}
So it will look something like this:
.post{
margin: 0 0 40px 0;
width: 90%;
background: url(http://i1301.photobucket.com/albums/ag113/KellyStahleyArtDesign/postdivider.jpg);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
padding-bottom:3.5em;
}
Step 3: Now you’re going to have to insert it into the CSS of your blog. Open up the blogger dashboard. Click on Template > Customize > Advanced then scroll down to the bottom and click on Add CSS. You’ll see the screen below, paste in the code we just created from above.
Click apply to blog and that’s it! You just installed your custom post divider!


Related Posts

Add a Facebook Comment

Comments

  1. This is cool! I hadn’t thought of using a divider before. Thanks. =0)
    ~Kim
    http://2justByou.blogspot.com

  2. I’ve always wanted to know how to do this! Thank you! ;-)
    -Jamie
    ChatterBlossom

  3. Useful information, thank you!

Speak Your Mind

*

Follow

Get every new post delivered to your Inbox

Join other followers