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 :-
-If you are using threaded comments (with the reply option):
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.....
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 ?
- Now go to Blogger Dashboard > Template
- Download a copy of your template
Click Here
<-To Know How To Take Backup Of Your Template
- Click on Edit HTML
- Hit Proceed button
- Check Expand Widget Templates checkbox
- 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.....