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.
Posted by
Labels:

121 comments:

  1. Ah Bui 阿肥29 August 2017 at 12:17

    nice

    ReplyDelete
  2. Puran Mal Meena8 December 2017 at 05:05

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

    ReplyDelete
  3. My Poem26 January 2018 at 11:34

    nice share simple but usefull

    ReplyDelete
  4. Gaming motherboards price in india31 January 2018 at 23:08

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

    ReplyDelete
  5. Admin15 February 2018 at 12:21

    nice info thanks via Faizan Athar

    ReplyDelete
  6. Anonymous16 February 2018 at 03:42

    great

    ReplyDelete
  7. Unknown23 February 2018 at 03:39

    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
  8. Dregist Blog12 March 2018 at 08:13

    it didnt work for my blog check DREGIST

    ReplyDelete
  9. young pillar22 March 2018 at 10:01

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

    ReplyDelete
    Replies
    1. Anand22 March 2018 at 19:09

      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. Anand22 March 2018 at 19:12

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

      Delete
    3. young pillar9 April 2018 at 10:19

      Thank you so much sir!

      Delete
  10. Swati5 May 2018 at 22:08

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

    ReplyDelete
  11. Subroto20 May 2018 at 01:50

    Excellent! Really helped in making my blog prettier.

    ReplyDelete
  12. Assignment Help21 May 2018 at 03:06

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

    ReplyDelete
  13. sukhbinder singh25 May 2018 at 00:13

    VERY USEFUL INFORMATION

    ReplyDelete
  14. OMG MY WORLD FACTS27 May 2018 at 01:15

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

    ReplyDelete
  15. Admin8 June 2018 at 22:03

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

    ReplyDelete
  16. Anand17 June 2018 at 05:16

    thanks for comment :)

    ReplyDelete
  17. Srikunj Agarwal27 June 2018 at 08:47

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

    ReplyDelete
    Replies
    1. Anand27 June 2018 at 11:12

      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
  18. Bing Ads coupons30 June 2018 at 05:27

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

    ReplyDelete
  19. FELIZ ANIVERSARIO25 July 2018 at 05:40

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

    https://comprarimportadoss.blogspot.com

    ReplyDelete
  20. Global World3 August 2018 at 01:29

    sir,apne ads kase lagaya.

    ReplyDelete
    Replies
    1. Anand3 August 2018 at 01:36

      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
  21. Kashif15 August 2018 at 09:06

    Bahut achacha article hai Bhai keep it up

    ReplyDelete
  22. Admin16 August 2018 at 04:56

    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. Anand19 August 2018 at 20:11

      Yes
      you can use Google forms for this task :)

      Delete
  23. mayur9 September 2018 at 06:46

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

    ReplyDelete
  24. mayur9 September 2018 at 13:55

    bahut badiya ....nice post

    ReplyDelete
  25. Jamletloaded4 February 2019 at 08:07

    Wow

    ReplyDelete
  26. Paul8 February 2019 at 05:26

    Very thankful for this post!

    ReplyDelete
  27. Manirsharena16 March 2019 at 03:49

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

    ReplyDelete
  28. educationsza24 April 2019 at 02:07

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

    ReplyDelete
  29. Mion27 May 2019 at 11:59

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

    ReplyDelete
  30. Sandeep Kumar3 June 2019 at 04:08

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

    ReplyDelete
    Replies
    1. Anand4 June 2019 at 02:50

      Hello

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

      Thanks

      Delete
  31. Anand30 June 2019 at 23:09

    Thanks for comment :))

    ReplyDelete
  32. Shah RPG10 July 2019 at 08:33

    Thank YOu very Much for this Episo EPic

    ReplyDelete
  33. Muhammad Musa Daddy 4 October 2019 at 09:32

    Hi bro! Cant find this ]]> on mine

    ReplyDelete
    Replies
    1. Anand5 October 2019 at 05:23

      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
  34. Mahdi29 November 2019 at 22:07

    Thank you very much. I needed this code

    ReplyDelete
  35. Yarith10 December 2019 at 14:56

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

    ReplyDelete
  36. Anupam Kumar23 January 2020 at 12:08

    good post

    ReplyDelete
  37. Buy Now,Save Now12 February 2020 at 22:38

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

    ReplyDelete
  38. Anand28 March 2020 at 05:21

    thanks you :)

    ReplyDelete
  39. Phil16 April 2020 at 12:58

    Let's hope this works

    ReplyDelete
  40. Resepi Sedap20 April 2020 at 19:30

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

    ReplyDelete
  41. Ankit27 April 2020 at 22:41

    Really helpful information. I find it useful for my blog

    ReplyDelete
  42. YFR11 May 2020 at 05:01

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

    ReplyDelete
  43. Arpit Mishra11 July 2020 at 07:58

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

    ReplyDelete
  44. asdqwe5 August 2020 at 05:00

    hello

    ReplyDelete
  45. admin6 October 2020 at 07:13

    how to remove footer credit of any blogger template

    ReplyDelete
    Replies
    1. Anand6 October 2020 at 22:54

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

      Delete
  46. Unknown7 October 2020 at 04:04

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

    ReplyDelete
  47. Harshit Mishra7 November 2020 at 07:23

    nyc Brother

    ReplyDelete
  48. Akilihouse23 November 2020 at 03:55

    Nice

    ReplyDelete
  49. Amy Garg : Russian Escorts in Delhi22 December 2020 at 02:13

    Very good information about customized blogger comment option.

    ReplyDelete
  50. wswe7 February 2021 at 13:21

    wow

    ReplyDelete
  51. Aakash Dudhat22 February 2021 at 21:43

    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
  52. deoravijendra 25 March 2021 at 06:49

    THANKS I WILL USE THIS ON Aexdorid

    ReplyDelete
  53. sivaramaiah8 April 2021 at 04:31

    very good information, but working was problem, please solve it

    ReplyDelete
  54. lyrics pro21 April 2021 at 03:01

    GOOD JOB! THANK YOU...

    ReplyDelete
  55. Best scholarship in United States4 June 2021 at 00:17

    What a great info. More wisdom

    ReplyDelete
  56. Educational Tips Across The Nation4 June 2021 at 00:19

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

    Thanks

    ReplyDelete
  57. MR Laboratory5 July 2021 at 17:01

    Thanks for presenting so efficiently.
    I like it most.

    ReplyDelete
  58. Er. Masroor20 September 2021 at 07:01

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

    ReplyDelete
  59. Sajitha Balasooriya14 October 2021 at 11:21

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

    ReplyDelete
    Replies
    1. Anand15 October 2021 at 23:27

      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
  60. Checkmate1 December 2021 at 04:12

    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
  61. wisatamedis.id2 December 2021 at 00:37

    excellent

    https://wisatamedis.id/

    ReplyDelete
  62. Anonymous25 December 2021 at 21:24

    excellent, thanks for this.

    ReplyDelete
  63. noname25 April 2022 at 18:59

    nice

    ReplyDelete
  64. En Güncel Teknoloji Haberleri26 June 2022 at 12:09

    Wow nice post, nice blog thanks for sharing very information !

    ReplyDelete
  65. Starpro31 July 2022 at 21:53

    This a very good info

    ReplyDelete
  66. Anonymous11 September 2022 at 13:18

    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
  67. Anonymous11 September 2022 at 22:02

    thank you for sharing this is very informative blog article.

    ReplyDelete
  68. Anonymous12 October 2022 at 23:08

    Nice

    ReplyDelete
  69. Sammy digital6 November 2022 at 12:38

    Nice post

    ReplyDelete
  70. Ezra Daniel16 February 2023 at 02:47

    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

Subscribe to: Post Comments (Atom)