Search & Find

Sponsor Post

Best Telegram Groups List Collection - Updated

Wednesday 2 August 2017

How to Customize Blogger Comment Box with Pictures

Hello friends welcome to the Techtspot blog, today I will show you how to insert or add a stylish custom Comment box for the Blogger blog with pictures.
Customize Blogger Comment Box

Why we need to Customize the Blogger Comment box in the blog?

Here we customize or design our Blogger blog comment box and the comment box means an option where anyone (visitors) can write their thoughts about what they read & watch on any platform (blogging, videos, ppt/pdf, images, GIF, etc...) and here most of the case in the Blogger blog has the normal design for the comment box.

Now when we are uploading the custom theme (third party themes) and design our default blogger themes but most of the time the comment box looks like the same, here we want to design our blog comment box so in this post, I give you a CSS code that can allow you to customise or make a different design for your blogger blog comment box, now let's start.


These are the Following Steps:- Step 1: First go to the Blogger blog dashboard and click the Theme option and now you can click the Customise drop-down button and select the Edit HTML option.
Customize Blogger Comment Box 1
Step 2: Here click anywhere in the code and press Ctrl+F button then find out the "]]></b:skin>" code, now you make space above the code then paste the custom comment box CSS code and at the last, you can click the Save button.
Customize Blogger Comment Box 2
Stylish Custom Comment Box Code:-
.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;}
Step 3: Now open the Blogger blog to check the results.

Read More:- 
How to Add Google Map widget in Blogger blog
Disable Comments Box on Blogger blog Posts/Pages
How to Add Blogger to Yandex Webmaster Tools
How to Add Google Analytics to Blogger blog

I hope you enjoy this Post. If any problem comment it.

121 comments:

  1. Great Information. Thank you for sharing this type of article. Keep updating new article.

    ReplyDelete
  2. nice share simple but usefull

    ReplyDelete
  3. Helpful blog, it help us to learn about designing of blog, keep it up.

    ReplyDelete
  4. I found that site very usefull and this survey is very cirious, I ' ve never seen a blog that demand a survey for this actions, very curious... logo design

    ReplyDelete
  5. It does not working with my template. http://www.youngpillar.com/

    ReplyDelete
    Replies
    1. hello sir
      if this not work on your blog then Design Blogger Template Theme this link, here you get the Comment Box design option.

      Delete
    2. visit this link sir and there you get the Comment Box design option then you can Design what you want :)

      Delete
  6. Thank you so much for sharing this information sir...

    ReplyDelete
  7. Excellent! Really helped in making my blog prettier.

    ReplyDelete
  8. Thank you for sharing valuable information. Nice post. I enjoyed reading this post. College Assignment Help

    ReplyDelete
  9. nice post i see you videos also it really helps me thanks for sharing these idias.

    ReplyDelete
  10. Do not work in my blog..
    i am done your tutorials you can cheak www.hindirealhelp.com

    ReplyDelete
  11. Do you have any post on how to increase size of blogger default comment box?

    ReplyDelete
    Replies
    1. No i have not any post but you can do this by GO TO Blogger Setting >> Posts, Comments and sharing option >> then edit Comment Location Option :)

      Delete
  12. I had many useful things from this article. i really appreciate your efforts. Thanks for shearing that informative post with us.

    ReplyDelete
  13. Bom dia obrigado por ter compartilhado com seu conteúdo muito bom sucesso parabéns.

    https://comprarimportadoss.blogspot.com

    ReplyDelete
  14. Replies
    1. Hello there
      First i have Google adsense Account.
      Second Link my blog to Google adsense.
      Third Go to Blogger Layout >>> click add a gadget link >> click adsense Ads then select responsive ad >>> click Save button.

      that's it :)

      Delete
  15. Bahut achacha article hai Bhai keep it up

    ReplyDelete
  16. Can I add a column to get data information such as phone, e-mail, website and address in this comment column? Thank you for the information

    ReplyDelete
    Replies
    1. Yes
      you can use Google forms for this task :)

      Delete
  17. बहुत बढ़िया जानकारी ..thanks

    ReplyDelete
  18. Very thankful for this post!

    ReplyDelete
  19. Thank you so much for sharing helpful information, so as we too create the great blogs!!keep going!!

    ReplyDelete
  20. Nice article
    this is my blog website
    https://educationsza.blogspot.com

    ReplyDelete
  21. Great writing hand. Please do not stop to share your most valuable knowledge with us.

    ReplyDelete
  22. dear sr its not working in my blog https://ratelists.blogspot.com

    ReplyDelete
    Replies
    1. Hello

      Don't worry you can use Disqus Comment, This is the best way

      Thanks

      Delete
  23. Replies
    1. don't worry follow these steps >>>>

      Click Blogger Theme >>
      Click Customize Button >>
      Click Advanced button >>
      Scroll Down
      Click Add CSS >>

      Now paste the Code here

      that all < "-" > Thanks

      Delete
  24. Thank you very much. I needed this code

    ReplyDelete
  25. also check this
    https://voiceofhopestudio.blogspot.com/

    ReplyDelete
  26. It's still helpful for people who like to use blogs to express their opinions

    ReplyDelete
  27. Hi thanks for sharing this amazing tip. I will update once its working! Cheers!

    ReplyDelete
  28. Really helpful information. I find it useful for my blog

    ReplyDelete
  29. Awesome but the author image is over lapping. But good Trick. Thanks Check
    https://www.yourfitnessrink.com/

    ReplyDelete
  30. very nice https://99-gadget.blogspot.com/

    ReplyDelete
  31. how to remove footer credit of any blogger template

    ReplyDelete
    Replies
    1. Hello, In new blogger update footer credit option is very complicated to remove so you can edit thanks

      Delete
  32. thank you so much for this blog great article blogspot vs wordpress

    ReplyDelete
  33. Very good information about customized blogger comment option.

    ReplyDelete
  34. Very well written article and its helpful us a lots but please add some more information which needed to improve our quality work like https://www.youtube.com/watch?v=Nm6Gj-IZLhM

    ReplyDelete
  35. very good information, but working was problem, please solve it

    ReplyDelete
  36. This a very good info I wish you more wisdom to give us hint like this

    Thanks

    ReplyDelete
  37. 🙏 Nice post Sir... Well done, Watch all type of XvideoStudio !!! Click Here For Visit My Site thanks ... 🙏

    ReplyDelete
  38. Hey sir your blogspot i think very old. so are you disappoint now because you not start on wordpress?

    ReplyDelete
    Replies
    1. WHY? I am disappointing?? because I am using blogger, look I just write down some article and publish in blog and I like Tech and I publish them that's all ...

      Delete
  39. Its an excellent effort. I was exploring some best logo design company near me and after seeing your creativity i just flattered. Keep up the good work.

    ReplyDelete
  40. excellent

    https://wisatamedis.id/

    ReplyDelete
  41. excellent, thanks for this.

    ReplyDelete
  42. Wow nice post, nice blog thanks for sharing very information !

    ReplyDelete
  43. I am happy to find this post Very useful for me, as it contains lot of information. I always prefer to read The Quality and glad I found this thing in you post. Also I will share with my friends and once again thanks a lot.
    News Wave24

    ReplyDelete
  44. thank you for sharing this is very informative blog article.

    ReplyDelete
  45. hello, my name is ezra daniel and i am a content writer. I really like your blog, this blog is very informative. thanks for sharing this because it will enhance our knowledge.
    Read More

    ReplyDelete