3 Customized Stylish Comment Box For Blogger


Stylish Comment Box for Blogger/BlogSpot


Comment Box is the most interesting section of a website, and a stylish customized comment box is a great way to collect feedback from your website’s visitors. Today In this article I am going to show you how you can customize your comment box for your Blogger/BlogSpot Blog. I will also provide you HTML, CSS code to make your comment box more stylish and attractive.


customized stylish comment box for blogger blogspot






BlogSpot own comment box is not very eye-catching to attract your blog reader, Stylish comment boxes for BlogSpot that I am going to provide are very attractive, customized, and responsive.


Advantages of Stylish Comment Box for Blogger:



  1. With a “Customized stylish comments box” your blog looks professional, attractive, and stylish.
  2. Stylish Comment box For Blogger” encourages other readers of the blog to participate actively.
  3. You can improve your blog post quality by reading your blog reader's suggestions.

    I am going to provide you pure CSS code for a stylish comment box for your BlogSpot blog because any third party script slow down your website, this CSS code will not affect your blogger site’s speed.

    CSS Code for Customized Stylish Comment Boxes


    Style 1:





    .comments .comment-block { background: #F9F9F9; color: #555; box-shadow: 0 4px 10px #EEEEEE; position: relative; margin-top: 10px; margin-left: 60px; padding: 10px; border: 4px solid #EEEEEE !important; border-radius:10px; font: 1.190em/1.2 Cambria,Georgia,sans-serif;} .comment-thread li .comment-block:before { position: absolute; display: block; left: -26px; color: #EEEEEE; content: "\25C4"; font-size: 30px;} .comments .avatar-image-container { width: 60px; height: 60px; max-height: 60px; margin:0px 0px 0 -28px; padding: 0px; border: 7px solid #EEEEEE; border-radius:60px;} .comments .avatar-image-container img { overflow:hidden; width: 60px; height: 60px; max-width: 60px; border:0 !important; border-radius:60px;} .comments .comment-thread.inline-thread { background: none;} .comments .continue { border-top: 0px solid transparent;} .comments .comments-content .datetime { float: right; font-size: 11px;} .comments .comments-content .user a{ font-size: 15px; color: #498EC9;} .comments .comments-content .datetime a:hover{ color: #777; text-decoration: none;} .comments .comments-content .comment:first-child { padding-top: 0px;} .comments .comments-content .comment { margin-bottom: 0px; padding-bottom: 0px;} .comments .continue a { padding: 0px;} .comments .comments-content .icon.blog-author { background-image: none;}

    Style 2:





    .comments h4  
      {  
      color:#ffffff;  
      display: inline-block !important;  
      background:#3BB7D9;  
      padding:10px;  
      }  
      .comments .comment .comment-actions a {  
      background:#3BB7D9;  
      border-radius: 5px;  
      color: #ffffff;  
      font:12px georgia;  
      margin-right: 8px;  
      padding:5px;  
      text-decoration: none !important;  
      }  
      .comments .comment-block {  
      background:#f8f8f8;  
      border: 1px solid #f0f0f0;  
      padding: 10px;  
      }  
      .continue  
      {  
      border-top:none !important;  
      }  
      .continue a {  
      background:#3BB7D9;  
      border: 1px solid #3BB7D9;  
      border-radius:5px;  
      color: #ffffff;  
      display: inline-block !important;  
      margin-top: 8px;  
      padding:5px;  
      text-decoration: none !important;  
      font:12px georgia ,arial;  
      }  
      .comment-header a {  
      color: #222222 !important;  
      }  
      #comments .avatar-image-container img {  
      border:2px solid #f0f0f0;  
      border-radius: 50px 50px 50px 50px;  
      height: 58px;  
      max-width: 58px;  
      }  
      .comments .avatar-image-container {  
      border: 2px solid #FFFFFF;  
      border-radius: 34px 34px 34px 34px;  
      box-shadow: 1px 1px 3px #dcdcdc;  
      float: left;  
      margin-left: -20px;  
      max-height: 61px !important;  
      overflow: hidden;  
      width: 61px !important;  
      }  


    Style 3:






    .comments h4  
      {  
      color:#ffffff;  
      display: inline-block !important;  
      background:#292832;  
      padding:10px;  
      }  
      .comments .comment .comment-actions a {  
      background:#292832;  
      border-radius: 5px;  
      color: #ffffff;  
      font:12px georgia;  
      margin-right: 8px;  
      padding:5px;  
      text-decoration: none !important;  
      }  
      .comments .comment .comment-actions a:hover {  
      background:#808080;  
      border-radius: 5px;  
      color: #292832;  
      font:12px georgia;  
      margin-right: 8px;  
      padding:5px;  
      text-decoration: none !important;  
      }  
      .comments .comment-block {  
      background:#f8f8f8;  
      border: 1px solid #f0f0f0;  
      padding: 10px;  
      }  
      .continue  
      {  
      border-top:none !important;  
      }  
      .continue a {  
      background:#292832;  
      border: 1px solid #292832;  
      border-radius:5px;  
      color: #ffffff;  
      display: inline-block !important;  
      margin-top: 8px;  
      padding:5px;  
      text-decoration: none !important;  
      font:12px georgia ,arial;  
      }  
      .comment-header a {  
      color: #222222 !important;  
      }  
      #comments .avatar-image-container img {  
      border:2px solid #292832;  
      border-radius: 50px 50px 50px 50px;  
      height: 58px;  
      max-width: 58px;  
      }  
      .comments .avatar-image-container {  
      border: 2px solid #FFFFFF;  
      border-radius: 34px 34px 34px 34px;  
      box-shadow: 1px 1px 3px #dcdcdc;  
      float: left;  
      margin-left: -20px;  
      max-height: 61px !important;  
      overflow: hidden;  
      width: 61px !important;  
      }  

    How To Add Customized Comment Box In Blogger/BlogSpot?


    Step 1:

     Go to à Blogger

    Step 2:

    Go to à Theme

    Step 3:

    Click On à Customize

    Step 4:

    Go to à Advanced Tab

    Step 5:

    Go to à Add “CSS Code for Stylish Blogger Comment Box

    Step 6:

    Paste Your “Stylish Comment Box CSS Code” in the Box

    Step 7:

    Finally, Click on “Apply Now” to save your Settings



    Congratulations! Check Your Blogger/BlogSpot Comment Box.

    Check our comments box also and give us your suggestions that how we can improve the quality of our blog posts.

    21 Comments

    1. Amazing comment boxes . i really love it...

      ReplyDelete
      Replies
      1. Thanks Aizaz Hassan, Keep Visiting Our Blog ...

        Delete
    2. This comment has been removed by a blog administrator.

      ReplyDelete
    3. This comment has been removed by the author.

      ReplyDelete
    4. I appreciate your effort and your thoughts. it’s really good work.Although I would like to share something really helpful for #custom Boxes in UK.

      Click here to read
      https://realitypaper.com/wholesale-soap-packaging-boxes-uk-give-your-soap-products-a-customized-look-at-affordable-rates.html

      ReplyDelete
    5. From Fast custom boxes.It’s actually a great and useful piece of info. I am satisfied that you just shared this helpful packaging update with us.Please stay up to date like this. Thank you for sharing.
      https://fastcustomboxes.com/custom-essential-oil-boxes/

      ReplyDelete
    6. Welcome ---- Keep Visiting Our Blog :)

      ReplyDelete
    7. The companies all over made a huge step forward to issue their products in the market with custom eco-friendly boxes to make a positive impact. Thanks for sharing Custom Packaging Boxes

      ReplyDelete
    8. your blog post having lots of information according to my needs. Custom Boxes Wholesale is very necessary for our custom products, it makes our our product protected and it also makes our product attractive and effective. it helps to increase our product retail market. Printing Services

      ReplyDelete
    9. I would like to thank you for sharing such amazingly informative post about Custom Printed Soap Packaging Boxes.Keep sharing such content. Stickers Printing Services

      ReplyDelete
    10. your blog post having lots of information according to my need. OXO Packaging made wholesale custom bakery boxes with free logo and free shipping. It helps to boost your product sale because it makes your product unique and attractive as compare others. Custom Postal Boxes

      ReplyDelete
    11. Blogging and Digital Marketing are increasing day by day and most of the individuals are worry about that and having headache how they learn Blogging or Digital marketing.
      Definitely, it needs here of experts who can tell you and teach you all about Blogging and Digital Marketing.
      For that case, Blogging-academy is the best expert for learning about blogging.
      blogging academy

      ReplyDelete
    12. To increase brand awareness and expand sales, you need to go with the mailer boxes.

      ReplyDelete
    13. This comment has been removed by the author.

      ReplyDelete
    14. this is very pleasant and healthful put up. i love it so much and recognize your paintings. you have done simply very tremendous task. thanks for sharing this amazing post.
      display boxes supplier

      ReplyDelete
    Previous Post Next Post