How To Add Beautiful Divider(image) Between Each Comment in Blogger

The Comments Section of a Blog is the most important section,Actually readers ideas about the blog Contents are reflected in this Section.Keeping in view this thought you should make your Blogger Comment Section more accessible and neat.To make your Comments Section navigative you should add a divider between each comment,otherwise it just become a jumble of letters and makes the visitors flee away.So be Professional and make your Comments Outlook attractive and Stylish,now How to do,Follow the below steps.

How To Add Beautiful Divider(image) Between Each Comment in Blogger

  • Go To Blogger Dashboard
  • Click On Template
  • Now Click On Edit HTML
  • Now Search for This Tag ]]></b:skin>
  • Now Copy the Below Script and just paste it above ]]></b:skin> tag
Note:- The Below Script is for New Style Comments i.e threaded comments(with reply option)
.comment-block {
background-image:url(http://2.bp.blogspot.com/-Hjv1gf9jTdc/UYDrKFxpU_I/AAAAAAAAAfo/0vsiHYKlZM0/s1600/separater.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);
}
Note:- The below script is for old commenting system(with no reply option)

#comments-block .comment-footer { background-image:url(http://2.bp.blogspot.com/-Hjv1gf9jTdc/UYDrKFxpU_I/AAAAAAAAAfo/0vsiHYKlZM0/s1600/separater.png); background-repeat:no-repeat; background-position:center bottom; height: 50px; }

  • For Changing the Divider image Change "http://2.bp.blogspot.com/-Hjv1gf9jTdc/UYDrKFxpU_I/AAAAAAAAAfo/0vsiHYKlZM0/s1600/separater.png" with your Own image url.
  • For changing the height of the image in Old Commenting System change the value 50.
  • Increase or decrease the padding in threaded comments by changing the value of 30px.
  • And Now just hit Save Template and that's it ;)

So What's up

Making Changes in Blogger Template is not easy,but it is interesting ;),make your comment style more beautiful by adding a divider image,stay Blessed Happy Blogging.
SHARE

Iftikhar Uddin

I am a Web Developer,Graphic Designer,Blogger Wizard,WordPress Samurai,Code Engineer,SEO Guru,Software Engineer and food hunter.

  • Image
  • Image
  • Image
  • Image
  • Image
    Blogger Comment
    Facebook Comment

12 comments:

  1. Nice tips bro keep it up. Hard effort keep blogging:

    ReplyDelete
    Replies
    1. Hey Hafeez Khan Welcome to our Blog,thanks for stopping by ;)
      Do visit Again :)
      Regards,
      Ifti

      Delete
  2. Replies
    1. Hey Pareelel Blog Welcome to our Blog,thanks for stopping by ;)
      Do visit Again :)
      Regards,
      Ifti

      Delete
  3. Amazing idea bro.. I am really happy with your blogging ideas and tips. Please keep posting such an informative posts.

    ReplyDelete
    Replies
    1. Hey Ankit Kumar Singla,Thanks For Stopping by :) I am agree with you,recently my exams has been started i will back Soon InshAllah,Do Visit Again ;)
      Regards.
      Ifti!

      Delete
  4. Wonderful blog checkout my latest post at
    http://definingwords.blogspot.com/2013/04/the-dromedary-camel.html
    feel free to leave a comment and like us on facebook

    ReplyDelete
  5. Iftikhar Bhai i need your help in your this blog i have seen that you have add thumbnail images to your post but when i click on the post i do not see any image on post page. only can see images on home page. i want to know how do you add this tricks in your blog?

    ReplyDelete
  6. I am really happy with your blogging ideas and tips payudara montok . Please keep posting such an informative posts.

    ReplyDelete
  7. I am really happy with your blogging ideas and tips. Please keep posting such an informative posts.

    ReplyDelete
    Replies
    1. Thanks for Stopping By , Keep Visiting for more fantastic posts!
      Regards,
      Iftikhar

      Delete