How to Add Post Separators in Blogspot

If your Blogspot blog design does not come with a post separator to delimit your blog entries, you can add your own by editing the template. You need to change a small part of the blog post's CSS to add a post separator. The separator can be any type of image and may require some adjustment before it displays in a proper location at the end of the post.

Step 1

Log into your Blogspot account and click the specific blog that you want to edit, if you have multiple blogs associated with your email login.

Step 2

Click the drop-down menu and select Layout. Click "Edit HTML." You may wish to save a copy of the original HTML code your Blogspot layout is currently using before you make any changes to the template. You can copy and paste the code into a text or HTML editor.

Related Reading: How to Add a Password to Blogspot

Step 3

Search through the Blogspot template until you see the CSS class definition labeled ".post." This div class controls the styling of your posts. Type "background: url(picturelink);" (without quotes) after the beginning bracket that follows .post. Replace "picturelink" with the direct URL of the picture you're using to separate your posts. Press "Enter."

Step 4

Type "background-repeat: no-repeat;" to prevent the separator image from repeating in the background of the .post DIV class. Press "Enter." Type "background-position: bottom center;" to set the post separator so it appears at the bottom of your posts. Press "Enter."

Step 5

Type "margin:.5em 0 1.5em;" and press "Enter" to set the separator margins. (You may need to adjust these numbers to match your specific spacing requirements on your blog template.) Press "Enter." Type "padding-bottom:2.5em;" and press "Enter." (You may also need to adjust these numbers.) Save the template changes to make your post separator live on the Blogspot blog.