How To Add A Horizontal Line between Each Post in Blogger

Advertisements

Adding a post separator or divider line is very easy task in blogger. You can add a Horizontal Line between Each Post in Blogger with following three ways.

First Method

1. Go to Blogger >>Theme >> Edit HTML

2. Click anywhere in the HTML codes and Press Ctrl+F 

3. Now search for .post code line

4. Add the following code below the .post

border-bottom:1px groove #b4b4b4;

5. Save the Theme and check the blog



Second Method

1. Go to Blogger >>Theme >> Edit HTML

2. Click anywhere in the HTML codes and Press Ctrl+F 

3. Now search for ]]> </b:skin> code line

4. Add the following code above the ]]> </b:skin>

.post { border-bottom:1px groove #b4b4b4;}

5. Save the Theme and check the blog

Third Method

1. Go to Blogger >>Theme >> Edit HTML

2. Click anywhere in the HTML codes and Press Ctrl+F 

3. Now search for  <div class='post-footer-line post-footer-line-3'/> code line

4. Add <hr /> tag below the div class='post-footer-line post-footer-line-3'/>

5. Save the Theme and check the blog

Note: 1. If horizontal line is not appearing between the posts you can try to Add <hr /> tag below the <div class='post-footer-line post-footer-line-2'/>

Note: 2. You can add styles in <hr/> tag like <hr style="color: #b4b4b4; width:20%;" />

Note: 3. You can change color of line according to you blog theme.

To pic color code visit www.w3schools.com color names
To change border style  visit www.w3schools.com border