Home » Blogger Tutorials, Tricks and Hacks » Blogger Comments Tricks » Custom CSS Style For Blogger Comments

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

Custom CSS Style For Blogger Comments

Custom CSS Style For Blogger Comments

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error

3,284 views

Today’s featured tutorial comes from Valsaraj R of netoopsblog.blogspot.com, and through it, he’ll be showing us another way to spruce up our Blogger blog’s comment section. This is especially great for those of you who are starting to grow tired of the same comment section design.

His custom CSS-style is so easy on the eyes. It uses a bit more spacing than usual so it doesn’t look cramped. Also, the avatar is enlarged a bit to the reader can get a better look at the commenter’s (your) face. 😉

Anyway, let’s see how it’s done.

  • In your Blogger dashboard, go to the Template section.
  • Click on Edit HTML and then Proceed.
  • Using Ctrl+F, look for ]]></b:skin> in your template’s code.
  • Copy the code below and paste it just before ]]></b:skin>
.comments .comment .comment-actions a {
background: none repeat scroll 0 0 #FFD99E;
border: 2px solid #FFB43D;
border-radius: 3px 3px 3px 3px;
color: #000000;
font: bold 12px arial;
margin-right: 14px;
padding: 3px 9px;
text-decoration: none !important;
text-shadow: 1px 1px 0 #FFFFFF;

}

.comments .comment-block {

background: none repeat scroll 0 0 #E2E2E2;
border: 4px solid #ABABAB;
border-radius: 3px 3px 3px 3px;
padding: 3px 10px;

}

.continue a {
background: none repeat scroll 0 0 #FFD99E;
border: 2px solid #FFB43D;
border-radius: 3px 3px 3px 3px;
color: #000000 !important;
display: inline-block !important;
margin-top: 7px;
padding: 3px 8px !important;
text-decoration: none !important;
text-shadow: 1px 1px 0 #FFFFFF;
}
.comment-block:hover > .comment-header {
border-bottom: 2px solid #000;
-moz-transition: border-color .5s ease;

}

.comment-header a {

color: #000000 !important;

}

#comments .avatar-image-container img {
border: 2px solid #FFFFFF !important;
border-radius: 50px 50px 50px 50px;
height: 57px;
max-width: 57px;

}

.comments .avatar-image-container {
border: 2px solid #FFFFFF;
border-radius: 34px 34px 34px 34px;
box-shadow: 1px 1px 3px #ABABAB;
float: left;
margin-left: -40px;
max-height: 60px !important;
overflow: hidden;
width: 60px !important;
}
  • Save your template and there you have it, you’re done!

By the way, there are two versions for this but we’ll only going to feature one of them here. If you’d like to see the other you can visit Valsaraj’s web page as mentioned earlier.

Liked It ? Please Share

Comments

11 Responses | Post A Comment | Subscribe To Comments RSS Feed

  1. andrey says:

    I installed your code but i have the same comment box.Can you take a look to my page and see what’s wrong?

  2. Jed says:

    Very nice comment box, I found it works different on some templates, so you may need to play around with it a little but once installed correctly Its a really nice comment box. Thanks Keith

  3. i m a new blogger and my blog is http://webcodeexpert.blogspot.in/ .Its having good design but still i want more attractive looks.please suggest me what should i do to make it more user friendly and attarctive?

  4. Syed Ali says:

    great comment box. i have installed it on my blog

  5. Syed Ali says:

    i want to guest post on ur blog . ihave send you the post article written by me. please if u like it tell me

  6. ThL W9 says:

    Your content is very helpful for me, want to go to try

  7. ArchiVip says:

    Este artículo te dará una buena idea de cómo usar los pronombres directos e indirectos en las oraciones. Eso puede ser muy útil cuando se trata de expresar pensamientos diferentes. casas prefabricadas

  8. pavan says:

    thanks for your information it was good also useful to me

  9. sekar says:

    Thanks for your information !!!

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here