Personalizar la caja de comentarios de blogger


En vista de que he tenido cientos de emails, preguntándome como cambiar de estilos a los comentarios de su blog de Blogger, les traigo un sorprendente código CSS, con el cual solo tendrán que insertarlo en su Editor HTML de Blogger y podrán obtener un magnifico estilo en la caja de comentarios de su blog de Blogger. Lo que hará el código CSS es mostrar un nuevo estilo de comentarios en su blog de Blogger, al responder como autor de su blog lo marcara de color rojo, y los usuarios que comenten en su blog lo dejara de forma normal en el color predeterminado de los estilos, además al pasar el cursor por cualquier comentario se desprenderá la imagen del usuario que hiso el comentario en su blog de Blogger. Los colores y los estilos son únicos en su categoría, es un estilo hermoso, que a todo blogger les encantara.

Personalizar la caja de comentarios de blogger

Anteriormente publique algunos trucos para blogger de los cuales les dejo los enlaces


A continuación mire su demostración en mi blog de demos, mire la caja de comentarios al final de la pagina de demos


Impresionante verdad

Vamos a trabajar

1 Ir a Blogger

2 Un clic en “Plantilla

Personalizar la caja de comentarios de blogger

3 Un clic en “Editar HTML

Personalizar la caja de comentarios de blogger

Ahora se le abrirá el Editor HTML de su plantilla

Personalizar la caja de comentarios de blogger

En este punto deberás presionar la tecla “Control” de su teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de su editor, 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 le muestra como debe aparecerle el buscador en el editor HTML de su plantilla y así pueda 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>

Una vez que hayas encontrado el código, tendrás que insertar las siguientes líneas de código arriba del código que encontraste.

.comments {
  clear: both;
  margin-top: 10px;
  margin-bottom: 0px;
  line-height: 1em;
  padding: 5px;
}
.comments .comments-content {
  font-size: 13px;
  background:#fff url(http://3.bp.blogspot.com/-Y_KpLXSJxp0/UdRAtQib20I/AAAAAAAAD7I/enOyiNmzSP4/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: #299DFF;
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: red;
    padding: 3px;
    padding-bottom: 3px;
    margin-left: -5px;
    text-decoration: none;
}
.user.blog-author a:hover {
    background: #29f;
    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: #fff;
  background: #299DFF;
  padding: 5px;
  margin-left: -10px !important;
  margin-top: -10px !important;
  margin-right: -10px !important;
}
.comment-header a {
  color: #fff;
  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: #299DFF;
  padding: 5px;
  border: 1px solid #299DFF;
}
.comments .comment-block {
    background: none repeat scroll 0 0 #FFFFFF;
    padding: 10px;
    position: relative;
    margin-left: 47px;
    box-shadow: 5px 13px 30px #999;
}
#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: black;
}

Eso es todo ahora da un clic en “Guardar plantilla

Personalizar la caja de comentarios de blogger

Mira tu nueva caja de comentario en cualquier entrada de tu blog.

Facial verdad!

¿Necesitas ayuda?

Cualquier pregunta no duden en hacérmelo saber y de inmediato les responderé

Saludos





Share:

Related post

Disqus

Disqus comments:


Google+

Google+ comments:

Facebook

Facebook comments: