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.
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”
3 Un clic en “Editar HTML”
Ahora se le abrirá el Editor HTML de su plantilla
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.
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”
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
Recuerda suscribirte:
Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
46 comentarios: