Agregar estilo a los comentarios

Si estas aburrido de los estilos de los comentarios de blogger, tengo unos muy buenos para ti, son los que uso en mi blog, y a mi simplemente me encantan y sobre todo son muy fáciles de agregar, solamente es Css y ya.

Sin mas por decir vamos al tutorial!



1.- Entramos a Plantilla > Editar HTML y buscamos la linea:

</b:skin>

2.- Justo arriba de esta pegamos los siguientes estilos:

.comments{

clear:both;margin-top:10px;
margin-bottom:0;
font-family:Arial;
line-height:18px;
font-size:13px;
}

.comments .comments-content{

margin-bottom:16px;font-weight:normal;
text-align:left;
}

.comments .comment .comment-actions a,.comments .comment .continue a{
 display:inline-block;
 margin:0 0 10px 10px;
 padding:0 15px;
 color:#424242 !important;
 text-align:center;
 text-decoration:none;
 background:#cccccc;
 border:1px solid #dddddd;
 border-radius:2px;
 height:26px;
 line-height:28px;
 font-weight:normal;
 cursor:pointer;
}

.comments .comments-content .comment-thread ol{
 list-style-type:none;padding:0;text-align:none;
}

.comments .comments-content .inline-thread{}

.comments .comments-content .comment-thread{
 margin:8px 0;
}

.comments .comments-content .comment-thread:empty{
 display:none;
}

.comment-replies{
 margin-top:1em;
 margin-left:40px;
 
}

.comments .comments-content .comment{
 margin-bottom:0;
 padding-bottom:0;
}

.comments .comments-content .comment:first-child{
 padding-top:16px;
}

.comments .comments-content .comment:last-child{
 border-bottom:0;
 padding-bottom:0;
}

.comments .comments-content .comment-body{
 position:relative
}

.comments .comments-content .user{
 font-style:normal;
 font-weight:normal;
}

.comments .comments-content .user a{
 color:#fff;
 font-weight:normal;
 text-decoration:none;
}

.comments .comments-content .icon.blog-author{
 width:18px;
 height:18px;
 display:inline-block;
 margin:0 0 -4px 6px;

}

.comments .comments-content .datetime a{
 color:#0E6284;font-size:12px;
 float:right;text-decoration:none;

}

.comment-content{
 margin:0 0 8px;
 padding:0 5px;
}

.comment-header{
 font-size:18px;
 background-color:#079FEE;
 border-bottom:1px solid #e3e3e3;
 padding:5px;
}

.comments .comments-content .owner-actions{
 position:absolute;
 right:0;
 top:0;
}
.comments .comments-replybox{
 border:none;
 height:230px;
 width:100%;
}
.comments .comment-replybox-thread{
 margin-top:0;
}
.comments .comment-replybox-single{
 margin-top:5px;
 margin-left:48px;
}
.comments .comments-content .loadmore a{
 display:block;
 padding:10px 16px;
 text-align:center;

}


.comments .thread-toggle{
 cursor:pointer;
 display:inline-block;
}
.comments .comments-content .loadmore{
 cursor:pointer;
 max-height:3em;margin-top:0;

}
.comments .comments-content .loadmore.loaded{
 max-height:0;
 opacity:0;
 overflow:hidden;

}
.comments .thread-chrome.thread-collapsed{
 display:none;
}
.comments .thread-toggle{
 display:inline-block;
}
.comments .thread-toggle .thread-arrow{
 display:inline-block;
 height:6px;
 width:7px;
 overflow:visible;
 margin:0.3em;
 padding-right:4px;
}

.comments .thread-expanded .thread-arrow{
 background:url("data:image/png;base64,iVBORw0K
GgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0Aac
VDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") 
no-repeat scroll 0 0 transparent;
}

.comments .thread-collapsed .thread-arrow{
 background:url("data:image/png;base64,iVBORw0KGgoAAAAN
SUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8
vL/DLgASBKnApgkVgXIkhgKiN
KJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent;
}

.avatar-image-container{
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTXbG3nPrLlbgw7KP3I9kkSQaorRkMkpKY5uBL3a4Cg6vQmHqE11i8YBljj0U1QY5deZpHjp6esxrSpPNsY0P3sbca6cubv8tB5tBlVdLRNR8gjcRyobdOfUlDmwf-bx5ryccRXpKKD3Lm/s1600/arrow.png) top right no-repeat;
 float:left;
 vertical-align:middle;
 overflow:hidden;
 width:65px !important;
 height:51px !important;
 max-width:65px; 
 !important;max-height:51px !important;
}

.comments .avatar-image-container img{ 
 border-radius: 50%; 
 padding:2px;
 border:1px solid #ccc;
 width:45px !important;
 height:45px !important;
 max-width:45px !important;
 max-height:45px !important;

}
.comments .comment-block{
 margin-left:65px;
 position:relative;
 border:5px solid #e3e3e3;
 border-radius:8px;
}

@media screen and (max-device-width:480px){
 
.comments .comments-content .comment-replies{
 margin-left:0;
}

3.- Ahora simplente guardamos cambios y los estilos estaran aplicados correctamente.