How to install a Post Divider

Hey! Here's a new tutorial, how to install a post divider, requested by Tapity1.

How to install a Post Divider

1. Find out the width of your blog's main wrapper

First of all, you'll need to find out the width of your main wrapper. That way, you can make sure that your post divider is the right size.

To do this, go to Design>Edit HTML on your blog.

Hit CTRL+F to search. Search for...

#main-wrapper

Now, you'll find a code that looks like this:

#main-wrapper {

width:425px;

(more code here)

The width of your main-wrapper is whatever number that's under your width. In my case, it's 425px.

2. Make your Post Divider

Now, make your post divider! REMEMBER TO MAKE THE WIDTH THE SAME WIDTH AS YOUR MAIN-WRAPPER! Otherwise, it'll be too big or too small.

 I also suggest making the height 50-75px. Make sure that you save it as a .PNG! Not only will it have good quality, but if you want your post divider with a transparent background, PNG is the only format that works.

3. Host your image online

Now, upload your image to Tinypic or Photobucket.

Leave the window open coz we'll need the direct link for later.

4. Install your Post Divider

Now, log onto Blogger, and go to Design>Edit HTML.

Hit CTRL+F again and search for...

.post {

Now, you'll find a code that looks something like this.

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

 Now, delete this whole code and replace it with...

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

Replace "URL GOES HERE" with your post divider's direct link. You might want to change the "5.5" for "padding-bottom" with a 5.0 or 4.5 if you think your post divider isn't "fitting". Preview and save!

Have fun and enjoy!

Until next time...