Attractive Comment Style For Blogger.Com Blogs ~ Blogging Crave

First of all sorry for late posting I was busy in some problems but today I'm back with this great post :) I’m giving you a much awaited tutorial that every blogger should want it and attract their blogger blogs with this comment style. So lets start the post and give you the CSS codes and explain you all the things about comment style.

Features

Attractive look
Definitely attract the visitors
Load faster on any web browser
It will gain your comments
All the readers like it
Totally created with CSS3
Enjoy!

Why You Should Use This Comment Style

So as I mentioned you all the features and this Comment Style has much more features so I think all the bloggers must add this Comment Style in his blogger blogs because this widget has many features such as Attractive Yes! I’m rite that this widget have attractive look because it has orange color and If you want to change the color then you will customize it you will change it as your theme color.

Tutorial To Add the Comment Style

So in this part I’m giving you all the CSS codes properly and explain you everything as I can do as possible …

Go to Blogger
Now click on Template
Edit HTML
Now click cntrl + f
And find ]]></b:skin>
Unfold the code
Under the ]]></b:skin> tag add this copy and paste the code from below

#comments h4 { text-transform: uppercase; font-family: 'Yanone Kaffeesatz'; font-size: 24px; font-weight: normal; margin-bottom: 35px; display:inline; } #comments h4:before { content: "\f0e6"; font-family: FontAwesome; font-style: normal; font-weight: normal; font-size: 28px; padding-right: 5px; left: 0; } #comment-editor { background:transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK5OMxOG8MNsYyM5Eu4_dgFGA7BUGO4UncHNadkslnevW3LqEdXyn94dvgztTxqG320635NPwtIj030orByYc4DlvaanPLkIYIIrS0Hrp-IbjLedzQfx-v86CHcBEgNtlVMtoVgypRLi9A/s1600/ajax-loader+(2).gif') no-repeat 50% 30% } #comment-editor{ width:103%!important; margin-left:-1% } .comment-form{ width:100%; max-width:100% } .comments { margin: -2px -25px -0px -40px; line-height: 1em; border-top: 1px solid #ccc; padding: 10px 15px; } .comment-form p { font-size: 13px; line-height: 18px; padding-bottom: 20px; font-family: lora; font-style: italic; } .comments .comments-content .comment-content{ text-align: justify; font-family: Arial; line-height: 1.4em; font-size: 13px; font-weight: normal; padding: 20px; border: 1px solid #d2d2d2; } .comments .comments-content .user a{ text-decoration:none; } .comments .comments-content .user{ font-family: 'Yanone Kaffeesatz'; font-size: 24px; font-weight: normal; } .comments .comments-content .datetime{ opacity: .5; color: #999!important; font-family: lora; font-size: 14px; float: right; font-style: italic; } .comments .comments-content .datetime a{ text-decoration:none; } .comments .comment .comment-actions a{ background: #4C7BB6; color: #fff; padding: 10px; margin-top: -32px; text-transform: uppercase; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; -webkit-transition: 0.25s; -moz-transition: 0.25s; -o-transition: 0.25s; transition: 0.25s; -webkit-backface-visibility: hidden; float: right; } .comments .comment-block{ margin-left: 128px; position: relative; } .comments .avatar-image-container img{ max-width: 111px; } .comments .avatar-image-container{ float: left; max-height: 200px; overflow: hidden; width: 114px; } .deleted-comment{ font-style:italic; color:gray; }

That’s all friend Enjoy it and get rid of old and unattractive Comment Style From your blogger blog.

Need any help about this Comment Style?

Yes! Friends you are hearing truth that I’m going to help you all, you just need to do comment and tell me which kind of help and in reply I will help you as soon as possible. Stay Tuned!!

About Admin

Syed Zaver Abbas is SEO expert in pakistan. he is web designer, web developer, software developer and graphics designer that means he is multi talented. he is also learning more about computer science.