Blogger Comment design like on 'Spice up your blog

Big blogs like SpiceUpYourBlog is inspiration source to many people. Spice up your blog or SYB is a blog on blog designs, SEO tips and etc. Paul Crowe the owner of SYB is very knowledgeable about blogging and web design. In this tutorial you will learn how to make your blogger comment system design like on Spiceup your blog. 

SYB is well designed by Paul Crowe. But the comment system design is one of the best thing we find in SYB, the design and it's look makes the comments easier to understand. 

Now you don't have to keep that boring comment design by Blogger. We can easily change the overall design of comment and make it look and like the comment system on SYB.



Before you Apply this design, don't forget to check the



It can be done easily with CSS. You can make changes to the CSS if you understand what you are doing or you may just ignore making any changes. Follow these Instruction to add this long CSS

1. Go to Blogger Dashboard 


2. Now click on the Template tab


3. Click on the Customize button


4. Select the Advance tab > scroll down and Add CSS 


5. Now you will see a textarea on right side, this is where you have to paste the HTML

@font-face {

  font-family: 'Philosopher';

  font-style: normal;

  font-weight: 400;

  src: local('Philosopher'), url(http://themes.googleusercontent.com/static/fonts/philosopher/v4/OttjxgcoEsufOGSINYBGLYbN6UDyHWBl620a-IRfuBk.woff) format('woff');

}

.comment .avatar-image-container {

border: 1px solid #B6B6B6;

max-height: 70px !important;

margin-top: -5px;

width: 70px !important;

position: relative;

z-index: 50;

}

.comment .comment-block {

margin-left: 75px !important;

}

.comment .comment-header {

background: none repeat scroll 0 0 #A9F5D0;

color: #333;

font-size: 15px;

font-weight: bold;

margin-left: 60px;

}

.comment .comment-header a {

color: white !important;

text-decoration: none;

}

.comment .comment-content {

background: none repeat scroll 0 0 #FEFFF9;

border-bottom: 2px solid #E6E6E6;

font-size: 14px;

margin: 0 0 30px;

padding: 5px 5px 10px 10px;

}

.comment .comment-actions a {

background: none repeat scroll 0 0 #DDD;

color: #333;

display: inline-block;

line-height: 1;

margin: 0 3px;

padding: 3px 6px !important;

text-decoration: none;

}

.comment .comment-actions a {

background: none repeat scroll 0 0 #DDD;

color: #333;

display: inline-block;

line-height: 1;

margin: 0 3px;

padding: 3px 6px !important;

text-decoration: none;

}

.comment-header cite {

background: none repeat scroll 0 0 #DF7401;

border: 1px solid white;

color: white;

padding: 2px 20px;

position: relative;

z-index: 99;

margin-left: -20px;

}

cite.blog-author {

background: none repeat scroll 0 0 #8181F7 !important;

}

.icon.blog-author {

display: none !important;

background: url("") no-repeat scroll 0 0;

margin-left: 90px;

width: 60px !important;

height: 60px !important;

position: absolute;

right: 5px;

bottom: 5px;

top: 10px;

}

.comment .comment-header {

color: #333;

font-size: 15px;

font-weight: bold;

}

.comment .avatar-image-container img {

border: medium none !important;

height: 70px !important;

width: 70px !important;

max-height: 70px !important;

max-width: 70px !important;

}

.comment .comment-actions a {

background: none repeat scroll 0 0 #DDD !important;

color: #333 !important;

display: inline-block !important;

line-height: 1 !important;

margin: 0 3px !important;

padding: 3px 6px !important;

text-decoration: none !important;

font-size:16px;

}

.comment .comment-actions a:hover {

background: #CCC !important;

text-decoration: none !important;

}

.comments {

font-family: 'Philosopher', arial, serif !important;

font-size: 1em;

color: black;

}

.comments .continue a { 

display: block !important;

font-weight: bold !important;

padding: .5em !important;

color:#E34600;

font-size:16px;

}

.comments .continue a:hover {color:#4D3123;text-decoration:none;}

.item-control {

display: none !important;

}

.comments .continue {

border-top: 2px solid transparent !important;

}

This is a pretty long CSS but it works very well. After you apply this CSS to your blog, check your blog for the brand new SYB like Comment System which your readers will like.It also attracts your readers to comment which is good for your blog.