How to add a blog post divider on Blogger

A post divider is simply a line or image, which divides your blog posts. It helps the reader distinguish one post from another when scrolling down through your blog. You can a a minimal line or something that matches your theme. I’ve added some free dividers to the shop if you don’t want to make your own.

Add a post divider – with image

Create an image that you want to use as a divider. I suggest using GIMP to do this, it’s a free alternative to Photoshop. Once you’ve designed the divider, save it and upload it to Dropbox, Photobucket, Flickr, etc. Go to Template > Edit HTML and search for .post {. Add the following code underneath .post { and before }.

background:url('DIRECT IMG URL');
background-repeat: no-repeat;
background-position: bottom center;
padding-bottom: 10px;
margin:  10px 0px  10px 0px;

If .post { is not in your template, use this code instead. Go to Template > Customise > Advanced > Add CSS and paste the following code.

.post { background:url('DIRECT IMG URL');
background-repeat: no-repeat;
background-position: bottom center;
padding-bottom: 10px;
margin:  10px 0px  10px 0px; }

This will add it above ]]> </b:skin> in Template > Edit HTML. Change DIRECT IMG URL to the Direct Image Url of your image from Dropbox, Photobucket, Flickr or whatever hosting site you uploaded it to. Alter the margin and padding values show in pink to position the divider if it’s on top of another element such as your post footer details, post title etc.

Add a post divider – no image

Go to Template > Edit HTML and search for .post {. Add the following code underneath .post {

border-bottom: 1px solid #eeeeee; padding-bottom: 10px; margin:  10px 0px  10px 0px;

If you cannot find .post { in your template then use this method. Go to Template > Customise > Advanced > Add CSS and paste the following code. This will add it above ]]> </b:skin> in Template > Edit HTML, if you want to alter or delete it later.

.post { border-bottom: 1px solid #eeeeee; padding-bottom: 10px; margin:  10px 0px  10px 0px;}

You can edit the thickness of the line by altering 1px, the colour by changing #eeeeee. Solid is a solid line, you can also used dotted, dashed, groove, double, ridge, inset and outset. Alter the margin and padding values to position the divider.

How to find code in Blogger HTML Editor.
How to fix no reply blogger comments.
How to move and remove the header gadget on your blog.
Backup your entire blog on wordpress or blogger.

Add a post divider – with image

Add a post divider – no image

Related Posts