Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.
Custom CSS Style For Blogger Comments
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.
Related Tricks & Tutorials
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
I installed your code but i have the same comment box.Can you take a look to my page and see what’s wrong?
dasdad
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
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?
great comment box. i have installed it on my blog
i want to guest post on ur blog . ihave send you the post article written by me. please if u like it tell me
Good!!!!!!!!
My blog http://akbalthom.blogspot.com/
Your content is very helpful for me, want to go to try
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
thanks for your information it was good also useful to me
Thanks for your information !!!