How To Add Background Images And Border To Blogger Comments?

Comments usually help users to identify post quality.Comments also plays a good role in site bounce rate.Many people does not comment even on quality posts.A good looking comment section attracts a user to comment and thereby increases post popularity.Many people switch to 3rd party comment systems for good looking comment sections.This post will help you add a background image to your blogger comment section.

Image background in Blogger comment
Image background in Blogger comment

Steps To Add Background Image And A Border To Blogger Comment Section

  • Go to your Blogger Dashboard.
  • Navigate to Template > Customise > Advanced > Add CSS
  • Copy and paste the following code in the box.                                                                                                 
#comments{border: 1px solid #cdcdcd;
background-image:url('https://lh5.googleusercontent.com/-ck-Qim1Y73w/UcvOifVkYXI/AAAAAAAACAY/oBOfmqBuD0w/s150/background.png');
}



Only Border


  
  #comments{border: 1px solid #cdcdcd;
}



  • To change the border line size replace 1px to desired value.
  • To change border color replace #cdcdcd with the HTML color code.(To find HTML color codes visit here OR here.)

Only Background Image


    #comments{
    background-image:url('https://lh5.googleusercontent.com/-ck-Qim1Y73w/UcvOifVkYXI/AAAAAAAACAY/oBOfmqBuD0w/s150/background.png');
    }



    • To change the the background image replace https://lh5.googleusercontent.com/-ck-Qim1Y73w/UcvOifVkYXI/AAAAAAAACAY/oBOfmqBuD0w/s150/background.png with your image URL.(Make sure the image size is less)

    Bckground Color Only


    #comments{
    background-color:#FAEFEF;
    }

      To get color codes visit here.
      Check your site performance!
          SHARE

          About Shan Eapen Koshy

            Blogger Comment
            Facebook Comment