Changing Comment Style is one of the biggest problem for blogger users that if I use Facebook Comment Box then it would don't attract visitors.Now forget these things I have created a blogger Comment Style same to same Facebook Comment Style so no need to implement Facebook Comment System because some readers like it and some like Blogger Comment System so this mean that all readers are happy. Readers happy then we'll happy.
Why you Use this Comment form?
As I said above that many bloggers didn't like Blogger Comment System and they like Facebook Comment System and Some didn't like Facebook Comment System and they like Blogger Comment System. So in my Opinion you have to add this Comment Style.Features
- Attractive and Awesome look like Facebook Comment Style.
- Load faster on any Browser due to simple CSS coding.
- It will double your comments
- No use of anything JQuery its purely Created with CSS3.
- You Should Use it must!
Tutorial To Change Blogger Comment Style Like Facebook
- Blogger>Template>Edit HTML
- Now find ]]></b:skin> by pressing Crtl+F.
- Don't forget to Unfold the Tags.
- Above the ]]></b:skin> Tag add this below coding by copying it.
/*------------- Comments Style Like Facebook by BloggerJinni.Blogspot.Com -------------*/
.comments h4 {
background: #0099CC;
padding: 10px;
margin-left: -5px;
color: black;
font-weight: bold;
font-family: magra;
font-size: 20px;
margin-bottom: 5px;
margin-top: 1em;
}
.comments {
font:normal 11px/14px "Lucida Grande",Tahoma,Verdana,Arial,Sans-Serif !important;color:rgb(51,51,51);
}
.comments .comments-content a {color:#3B5998 !important;}
.comments h2, .comments h3, .comments h4 {
font-family:"Lucida Grande",Tahoma,Verdana,Arial,Sans-Serif !important;
font-size:16px;
}
.comments .comments-content .comment {
margin:0 0 0;
padding:10px 0px 10px 0px;
border-top:1px solid #e9e9e9;
border-left:none;
}
.comments .comment .comment-header,
.comments .comment .comment-actions,
.comments .comment .comment-actions a,
.comments .comment .comment-thread.inline-thread,
.comments .comment .continue {
margin:0 0 0;
padding:0 0 0;
border:none;
background:transparent;
}
.comments .comment .comment-header {margin-bottom:4px;}
.comments .comment .comment-header .datetime a {color:#808080 !important;}
.comments .comment .comment-actions a {padding-right:5px;}
.comments .thread-toggle .thread-arrow {width:7px; height:7px; padding-right:4px}
.comments .comment .avatar-image-container,
.comments .comment .avatar-image-container img {
width:50px;
height:50px;
max-width:none;
max-height:none;
border:none;
padding:0;
margin:0;
outline:none;
}
.comments .comment .comment-block {margin:0 0 0 60px !important;}
.comments .comment .comment-thread.inline-thread {margin:7px 0 0 22px;}
.comments .comment .comment-thread.inline-thread ol {margin:7px 0 10px !important;}
.comments .comment .comment-thread.inline-thread .comment {
background-color:#EDEFF4;
padding:5px 5px 0;
margin:1px 0 0;
border:none;
border-bottom:1px solid #D2D9E7;
}
.comments .comment .comment-thread.inline-thread .comment .avatar-image-container,
.comments .comment .comment-thread.inline-thread .comment .avatar-image-container img {width:32px;height:32px;}
.comments .comment .comment-thread.inline-thread .comment .comment-block {
margin:0 0 0 40px !important;}
.comments .comment .comment-content {text-align:left;}
.comments .comments-content .icon.blog-author {
width:16px;
height:16px;
display:inline-block;
vertical-align:top;
background:transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuulMFIMsFbriN_ddEWjtqNIIiaF94TBRSWdclJUNEM1aHsMy5I_4if8p8BkeXfWlsanDx8PezhSEJ4Zk0eWe6FI3VljF4E9aSt9BEJax-_VGcqf-yxeASpDBtdp7QYvRSLUrAviS5Lfhu/s1600/author.gif') no-repeat 50% 50%;
}
.comments .comment .comment-thread.inline-thread .comment:last-child {
border-left:2px solid #A8B2CE !important;
}
- Click Save Template.
- Done!
Final Words
Congratulations! You have Successfully added this Comment Style in your blogger blog. If you need any kind of help then don't forget to comment below. Don't Forget to Share with your Friends. Take lots of Care of your's and your's family.Happy Blogging! Always Peace!!!
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.
Dear readers, after reading the Content please ask for advice and to provide constructive feedback Please Write Relevant Comment with Polite Language.Your comments inspired me to continue blogging. Your opinion much more valuable to me. Thank you. ConversionConversion EmoticonEmoticon