Estilo para comentarios

Vamos a trabajar

1 Ir a blogger

2 Da un clic en “Plantilla

3 Un clic en “Editar HTML

Ahora se te abrirá el editor HTML de tu plantilla, se mostrara igual como la imagen que esta a continuación

Personalizar la caja de comentarios de blogger

En este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor, debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor, a continuación mire la imagen la cual te mostrara tal y cual deberá aparecerte el buscador en tu editor HTML de tu plantilla y así puedas colocar el código en el buscador al momento que yo diga busca este código.

Personalizar la caja de comentarios de blogger
4 Busca este código

]]></b:skin>  o sino <b:skin>
Tienes que colocarlo antes  de ]]></b:skin>  y no ves que surte los cambios
colocalo despues de <b:skin>

El código es el siguiente:


/*---inicio estilo comentario ---*/
.comments {
  clear: both;
  margin-top: 10px;
  margin-bottom: 0px;
  line-height: 1em;
  padding: 5px;
}
.comments .comments-content {
  font-size: 13px;
  background:#fbf1df url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMybfJc6gHJt2tULcp_GX2Iwnu-x2mXd3Sl_UfOv4Lp2wmCi0FYGzwUAZEvOvviWBn18ch4rjr-PDkbI6-sgvYsmGXMmcWW25YAuBAusml-Tl8vhr2nggDY_2F22OUTMSRpau2SJdqZ_fP/s45/ayudadeblogger.PNG);
  margin-bottom: 16px;
  margin-top: -8px;
  margin-left: -10px;
  padding-left: 1em;
  zoom: 1.05;
  background-size: 100px;
}
.comments .comment .comment-actions a {
background: #4c382e;
cursor: pointer;
color: white;
padding: 5px 10px;
margin-right: -10px;
margin-left: 10px;
float: right;
margin-top: -13px;
}
.comments .comment .comment-actions a:hover {
  text-decoration: none;
background: orange;
color: white;
}
.comments .comments-content .comment-thread ol {
  list-style-type: none;
  padding: 0;
  text-align: left;
}
.comments .comments-content .inline-thread {
  padding: 0.5em 1em;
}
.comments .comments-content .comment-thread {
  margin: 8px 0px;
}
.comments .comments-content .comment-thread:empty {
  display: none;
}
.comments .comments-content .comment-replies {
  margin-top: 1em;
  margin-left: 36px;
}
.comments .comments-content .comment {
  margin-bottom:16px;
  padding-bottom:8px;
}
.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:bold;
}
.comments .comments-content .icon.blog-author {
  width: 18px;
  height: 18px;
  display: none;
  margin: 0 0 -4px 6px;
}
.user.blog-author a {
    background: #230504;
    padding: 3px;
    padding-bottom: 3px;
    margin-left: -5px;
    text-decoration: none;
}
.user.blog-author a:hover {
    background: #a9957f;
    padding-left: 15px;
color: white!important;
}
.comments .comments-content .datetime {
  margin-left:10px;
}
.comments .comments-content .comment-header,
.comments .comments-content .comment-content {
  margin:px;

}
.comment-header {
  color: #fbf2e0;
  background: #4c382e;
  padding: 5px;
  margin-left: -10px !important;
  margin-top: -10px !important;
  margin-right: -10px !important;
}
.comment-header a {
  color: #fbf2e0;
  font-family:' Bree serif', arial;
  font-size: 14px;
}
.comments .comments-content .comment-content {
  text-align:justify;
  margin-bottom: 15px;
  font: 15px magra, arial;
  line-height: 18px;

}
.comments .comments-content .owner-actions {
  position:absolute;
  right:0;
  top:0;
}
.comments .comments-replybox {
  border: none;
  height: 250px;
  width: 100%;
}
.comments .comment-replybox-single {
  margin-top: 5px;
  margin-left: 48px;
}
.comments .comment-replybox-thread {
  margin-top: 5px;
}
.comments .comments-content .loadmore a {
  display: block;
  padding: 10px 16px;
  text-align: center;
}
.comments .thread-toggle {
  cursor: pointer;
  display: inline-block;
}
.comments .continue {
  cursor: pointer;
}
.comments .continue a {
  display: block;
  padding: 0.5em;
  font-weight: bold;
}
.comments .comments-content .loadmore {
  cursor: pointer;
  max-height: 3em;
  margin-top: 3em;
}
.comments .comments-content .loadmore.loaded {
  max-height: 0px;
  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,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAABJRU5ErkJggg==") no-repeat scroll 0 0 transparent;
}
.comments .avatar-image-container {
float: left;
width: auto;
max-height: 56px;
visibility: hidden;
opacity: 0;
left: 50px;
position: relative;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}

.comment:hover .avatar-image-container {
visibility: visible;
opacity: 1;
left: 0;
}
.comments .avatar-image-container img {
  width: 36px;
  background: #4c382e;
  padding: 5px;
  border: 1px solid #4c382e;
}
.comments .comment-block {
    background: none repeat scroll 0 0 #FFFFFF;
    padding: 10px;
    position: relative;
    margin-left: 47px;
    box-shadow: 5px 13px 30px #f6dbb4;
}
#comments a {
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
text-decoration: none;
}
#comments a:hover {
color: #230504;
}
/* fin estilo comentario */

Puedes cambiar los colores a tu gusto, y también las imágenes.

Busqueda