How to Add Seperators Between Blog Posts in Blogger

The most attractive thing in Blogger blogs is the Blog Layout and Design which attracts visitors to the blog . And since I saw many Blogger blogs, i noticed that one of the most annoying things is that there is no separator or divider between blogger posts,which is also a part of Design and Style of Blog.So this Tutorial is all

about “How to add a Separator between Blogger Blog posts easily”.You have to follow following steps. Before starting the tutorial , Demo is necessary :-

Log into your blogger account, move to , Dashboard >> Layout >> Edit html, and Search the Following Code :-

.post

Below is the part which should be there, so do not disturb that part:-

.post {
margin: 0 0 40px 0;
width: 90%
}

Now, we need to add some code to add separator between the Blog Posts , the code which we are going to put is in between the braces { and }

Here is the css for separator which you have to add between the braces :-

background: url(Separator-Image-Url);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
padding-bottom:2.5em;

The whole code will look like this :-

.post{
margin: 0 0 40px 0;
width: 90%;
background: url(Separator-Image-Url);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
padding-bottom:2.5em;
}

Just add the Image Link In Between (Separator-Image-Url).  And move to your Blog and refresh it and see the change. You can use following images as Separators, just Copy Link Location of Original Link of Desired Image.

Link to Use :- Original Link

Link to Use :- Original Link

Link to Use :- Original Link

You can create your own Blog Post Separators with Paint or any image editing tool.

Comments

  1. Pubudu Kodikara says

    Cool! its very useful to keep your blog tidy!
    .-= Pubudu Kodikara´s last blog ..Step by Step How to Install Ubuntu 9.10 in Your System =-.

  2. Rajesh Kanuri @ TechCats says

    although I am not a blogspot Blogger i love the concept of having separators.. will try this in my blog and implement if i like the look and feel..
    .-= Rajesh Kanuri @ TechCats´s last blog ..How To Add Snow Effect For Christmas In Blogger (BlogSpot) Blogs =-.

  3. says

    I love the idea of separaters… its useful for me as i m a blogspot user :)
    .-= Loveish´s last blog ..Orkut Introduces Slideshows And Inline Photo Browsing =-.

  4. Tinh says

    I am a fan of blogger for several years as of its good free hosting and never afraid of being hacked. However, it i not easy to tweak, thanks for sharing this
    .-= Tinh´s last blog ..List of Do-Follow Forums =-.

  5. Linda says

    Great info. But how can I alternate between two or three different post separator images, instead of using the same one each time?

  6. says

    Undeniably think that that you merely documented. The perfect validation appeared to be out there the simplest issue to be aware of. I say to you, I always get aggravated while individuals examine worries that they clearly have no clue over. You managed to hit the nail upon the top and also stated out the overall element without having side effects , the public could take a signal. Shall be return to get more. Thanks !

  7. Neida Felmet says

    You made several good points there. I did a search on the theme and found the majority of people will consent with your blog.

  8. says

    After examine a couple of of the blog posts in your web site now, and I truly like your method of blogging. I bookmarked it to my bookmark web site checklist and might be checking again soon. Pls take a look at my site as nicely and let me know what you think.

  9. Aletha Bargen says

    Good post. I be taught one thing more challenging on completely different blogs everyday. It is going to always be stimulating to read content material from different writers and practice somewhat one thing from their store. I?d want to use some with the content on my blog whether you don?t mind. Natually I?ll provide you with a link in your net blog. Thanks for sharing.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>