Android Helping is a way to get information on Android knowledge.

Customize Blogger Comments With Beautiful CSS

Image result for beautiful comment system for bloggerHaving a blog with beautiful and eye catching style is the 1st success in Blogging. On Tricks For Tips it is also remains my strategy to make it beautiful. In today's tutorial i am going to teach you how to add this CSS code that will make your blogger threaded/nested comments beautiful and give them a pro look. Before going for tutorial i first have to tell some features about it ,well let us read them...

Features

  • Make commenter avatars rounded.
  • Add border with round corners around avatar.
  • Make whole comment appear in a triangle having a blue bubble look.
  • Shadow Around comments.
  • Dotted Border of replies.
  • Fully Customizable
Wants its demo then comment on this post and check..

Tutorial begins now

Step no. 1 Click on Edit HTML in templates section of your Blogger Dashboard.
Step no. 2 A sort of codes appear - Left Click anywhere inside that code and then press Ctrl+F to launch search bar as show below
 
Step no. 3 Paste or type the following code inside the search bar to find it
]]></b:skin>
Step no. 4 Just above that  ]]></b:skin> add the below code given
.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;
}
.comments .comment-thread.inline-thread {
border-left: 3px dotted #DDDDDD;
}
Step no. 5 Click on Save Template and you have done it.

Read Below Paragraph If You Want Customization In Appearance Of Comments

Changing Codes As We Wish

  1.  Change the #F9F9F9 value to change the color of the background.
  2. Change #555 to change the color of comments text.
  3. Change #EEEEEE to change the shadow color around comments.
  4. To change the size or roundness customize 60px value.
If you want to check the codes of colors than use Color Hex Code Generator Here

I am telling what other codes means you can change them if you wish
  1. In 4px solid #EEEEEE , defines about comment border like 4px defines comment border thickness.
You have done it nothing remains to tell more.

At last

What at last, it takes an hour to provide this css code and than after reading this post you do not share it than than...I will teach you ( Just Joking Man)
Objection killed vecause i hope that i have described all  the things but if some thing remains than tell me know in comments. 
Happy Blogging



Share:

No comments:

Post a Comment

If you have any problem and questions related to this article then please ask them. One of our moderators will reply soon. Please keep in mind that all the comments are checked for moderation and spam ones are deleted immediately. These spam contacts also include those which are not related to this article. Thanks for understanding !

Popular Posts

Recent Posts

Unordered List

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
  • Vestibulum auctor dapibus neque.

Sample Text

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation test link ullamco laboris nisi ut aliquip ex ea commodo consequat.

Pages

Theme Support

Need our help to upload or customize this blogger template? Contact me with details about the theme customization you need.