How to Add a Image Divider Between Each Comment in Blogger/Blogspot

Comments are very important part of the blogger.Because it gives readers a option to ask questions and doubts.So,very blogger must have to spend some of the time in customizing the comment panel and taking it serious that it is clean or not ..!As i have also posted Comment customizing tutorials like :-
How to Add a Separator/Border To Blogger Comments

.Today i am going to show you How to Add Image Separator to comments ..! :D This trick is very useful because it give a fresh cool look to the comment.Lets first look at Following image which represents demo of this tutorial :- 

How To Add This Border To Comments ?  


  1. Now go to Blogger Dashboard > Template
  2. Download a copy of your template

    Click Here 

    <-To Know How To Take Backup Of Your Template 

  3. Click on Edit HTML
  4. Hit Proceed button
  5. Check Expand Widget Templates checkbox
  6. Find below code in your template

]]></b:skin>


-If you are using threaded comments (with the reply option):
.comment-block {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilS0ZAu94JNJfjr9A0CPpoKerUdxqz5uP0SYfT4kxXJX6EgbLT2hfc2RQ2NjWEZwY-LTQClFu-iuOGPSfzoAiy4ItBaWefUyOyjGGft7_OvokvynbU2K7UT5mJpPyHVvsivKdZT9q0vlcK/s1600/mytrickscorner.blogspot.com+image+Divder.png);
background-repeat:no-repeat;
background-position:center bottom;
padding-bottom:30px;
margin-top: -10px;
}
.comments .continue {
border-top: 0px solid $(widget.alternate.text.color);
}


-If you are using previous commenting system (with no reply option)

#comments-block .comment-footer {
background-image:url(
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilS0ZAu94JNJfjr9A0CPpoKerUdxqz5uP0SYfT4kxXJX6EgbLT2hfc2RQ2NjWEZwY-LTQClFu-iuOGPSfzoAiy4ItBaWefUyOyjGGft7_OvokvynbU2K7UT5mJpPyHVvsivKdZT9q0vlcK/s1600/mytrickscorner.blogspot.com+image+Divder.png
);
background-repeat:no-repeat;
background-position:center bottom;
height: 50px;
}

Note: The URL that is in Orange represents the image that you can change as you wish , just remember that at the height must set the height of an image with 30px more, for instance, if the image's height is 50px then the value will be 80px. This is for making sure that the image won't overlap the date of comments . (for threaded comments, increase/decrease the padding 30 value)
8.Save Your Template

Done..! I hope You Like This..

If you Face any problem in Any Step Then Ask Me Freely in Comment box i will Try to reply soon.....

Comments
0 Comments