/ / How To Add Background Images And Border To Blogger Comments?

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0ESe8NxO41fo9d4oCSKkUPZNukJv29oNnK7zUfKkP2m_KG2SHT22USGWTUOgsRfqxyHoN3L09GhMrv2A_8hd4V2ra0zv3ALbOtUQB9YsOkGaGVnNlbgC8RK-2P46FtLCiDPo-_rcLbeh8/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0ESe8NxO41fo9d4oCSKkUPZNukJv29oNnK7zUfKkP2m_KG2SHT22USGWTUOgsRfqxyHoN3L09GhMrv2A_8hd4V2ra0zv3ALbOtUQB9YsOkGaGVnNlbgC8RK-2P46FtLCiDPo-_rcLbeh8/s150/background.png');
    }


    • To change the the background image replace https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0ESe8NxO41fo9d4oCSKkUPZNukJv29oNnK7zUfKkP2m_KG2SHT22USGWTUOgsRfqxyHoN3L09GhMrv2A_8hd4V2ra0zv3ALbOtUQB9YsOkGaGVnNlbgC8RK-2P46FtLCiDPo-_rcLbeh8/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