Comentarios Kawaii en Blogger

coment-kawaii-bloggerHolas!! como estan? yo, algo estresada pues mis días de vida se acortan cada vez más D: (??) pronto regresaré a la uni u_u que rápido pasó el tiempo, y aún me queda mucho por hacer en el blog :S ... en fin, para no dejarlos sin posts (tengo muchas series pendientes de actualizar) les vengo a revelar todos mis secretos (??) si, así es; como ya me cambie de sistema de blog pues ya no necesito "ocultar" mis "trucos secretos" para hacer kawaii el blog y super funcional xD, como recuerdan, antes pertenecia a la familia de Google pero ahora ya me aparté para pasar a "algo más profesional" como el wordpress, donde tienes que ser más paciente aún y saber exactamente lo que haces o si no todo se va XP a la ruina.

En esta ocasión les mostraré como hacer que sus comentarios en Blogger tengan más "estilo" y sean más kawaiis... bueno, pueden cambiar los colores y ya no es tan kawaii, a continuación te doy 4 códigos css que agregas a tu plantilla y ya! eso es todo, el estilo de tus comentarios cambiará :3 ... lo que tienes que hacer es:

1.- Iniciar sesión en blogger y entrar al blog al cual quieres cambiar el estilo.
2.- Acto seguido entras a "Plantilla" en tu menú de la izquierda y eliges "Editar HTML".
3.- En el código localiza ]]></b:skin> y antes de esa etiqueta colocas cualquiera de los siguientes css para adornar los comentarios... y eso es todo.
*Los dos estilos del avatar en circulo, al posicionarte en ellos dan una linda vueltesita XP.
*El segundo estilo además trae incluido un css para cambiar las etiquetas, si no te gusta solo borra el css que diga .post-labels

 

ESTILO KAWAII 1





[css]/* Coment Kawaii v1 */
.comment-content{
background:#FFE2E2;
padding:13px;
border-radius:30px;
color:#666;}

h4{
background:#F9D7FF;
text-align:center;
color:#FDBADB;
text-shadow:2px 2px 3px #888;
font:30px ttn !important;}

@font-face{
font-family:ttn;
src:url(http://static.tumblr.com/dep4vzc/82Km8jmz4/tutano_cc_v2.ttf);
}

.comment-block{background:#FEF3F3;
padding:10px;
border-radius:30px;
border:3px dashed #FEE8E8}

.avatar-image-container{background:#FFE2E2;padding:5px;border-radius:50% 50% 0 50%;}

.avatar-image-container img{
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
border-radius:50%;}

.avatar-image-container img:hover{
border-radius:50%;
transform: rotate(360deg) ;
-webkit-transform: rotate(360deg) ;
-moz-transform: rotate(360deg) ;
-o-transform: rotate(360deg) ;
-ms-transform: rotate(360deg) ;}

.datetime{
background:#fff;
padding:8px;
float:right;
border-radius:30px;
font:10px arial;
margin-top:10px;}

.secondary-text{
padding:8px;
background:#fff;
border-radius:30px;
float:right;
border:2px solid #FEE8E8;
}[/css]

ESTILO KAWAII 2





[css]/* Coment Kawaii v2 */
/* Caja del comentario */
.comment-content{
background:#fff ;
padding:13px;
border-radius:10px;
color:#000;
font-size: 12px;
}
/* Titulo "No hay comentarios/nro Cometarios" */
h4{
border-radius: 10px;
background:#f3fbfa;
text-align:center;
color:#696969;
text-shadow: 0px 0px 3px #fff;
}
/* Nombre del usuario */
.user {
color: #98aeb2;
background: #FFF5EE;
padding: 7px;
margin-left: 10px;
border-radius: 10px 10px 0 0;
}
.icon {
background: transparent;
}
/* Caja de color */
.comment-block{
background:#f3fbfa;
padding:10px;
border: 1px dashed #fff;
border-radius: 15px 15px 15px 15px;
font-size: 12px;
}
/* Links de la caja de color */
.comment-block a{
font-weight: normal;
}
/* Contorno de los avatares */
.avatar-image-container{
background:#ffe99e;
padding:5px;
border-radius:50% 50% 0% 50%;
}
/* Avatares de comentarios */
.avatar-image-container img{
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
border-radius:50%;
}
/* Avatares de comentarios "HOVER" */
.avatar-image-container img:hover{
border-radius:50%;
transform: rotate(360deg) ;
-webkit-transform: rotate(360deg) ;
-moz-transform: rotate(360deg) ;
-o-transform: rotate(360deg) ;
-ms-transform: rotate(360deg) ;
}
/* Links Fecha/Responder/Eliminar */
.secondary-text a{
font-size: 11px;
color: #BEBEBE;
padding: 3px;
margin: 3px;
background:;
float: center;
border-radius:5px;
text-shadow: none;
}
.post-labels {
background:;
padding:5px;
margin: 2px;
width:500px;
font-size:12px;
}
.post-labels a:link {
color: #BEBEBE;
background: #FFFACD;
padding:3px;
border: 0px dashed;
border-radius:4px;
margin-right:3px;
}
.post-labels a:visited {
color:#BEBEBE;
}
.post-labels a:hover {
color:#696969;
background:#F5F5F5;
}[/css]

ESTILO KAWAII 3





[css]/* Coment Kawaii v3 */
.comment-content{
-webkit-animation:borde 7s infinite;
background: #f5f5f5;
border-left: 15px solid #4299b4;
padding: 10px;
margin-left: px;
}
@-webkit-keyframes borde
{
0% {border-left: 15px solid #4299b4;}
25% {border-left: 15px solid #f24d9e;}
50% {border-left: 15px solid #6d578c;}
75% {border-left: 15px solid #fadfab;}
100% {border-left: 15px solid #3fbbae;}
}
h4{
margin-left: -15px;
margin-right: -15px;
margin-top: 80px;
background:#6d578c;
text-align:center;
color:#fff;
}
.user a{color: #fff; text-transform: uppercase; background: #3fbbae; padding: 10px 10px 9px 10px; border-top: 4px solid #3fbbae; margin-left: 0px;}
.icon {background: transparent;}
.comment-block{padding: 0px; margin-top: 0px!important;}
.comment-block a{font-weight: normal;}
.avatar-image-container{
-webkit-animation:icon 7s infinite;
background:#4299b4;
padding:5px;
margin-top: -13px!important;
margin-left: 23px!important;
width: 30px!important;
height: 30px!important;
}
@-webkit-keyframes icon
{
0% {background:#4299b4;}
25% {background:#f24d9e;}
50% {background:#6d578c;}
75% {background:#fadfab;}
100% {background:#3fbbae;}
}
.avatar-image-container img{ width: 30px;}
.avatar-image-container img:hover{}
.secondary-text a{
font-family: cambria;
font-size: 10px;
text-transform: uppercase;
color: #f24d9e;
}[/css]

ESTILO KAWAII 4





[css]/* Coment Kawaii v4 */
h4{
background:#f3fbfa;
text-align:center;
color:#696969;
margin-left: -15px;
margin-right: -15px;
}
.user a {
color: #ea9999;
background: #f3fbfa;
padding: 8px;
}
.comments .avatar-image-container {
width: 46px;
height: 46px;
max-height: 46px;
border-top: 4px solid #ffe99e;
border-left: 4px solid #ffe99e;
border-bottom: 4px solid #ffe99e;
border-right: 17px solid #ffe99e;
background: #ffe99e;
margin-top: -8px;
margin-left: -4px;
}
.comments .avatar-image-container img {
width: 46px;
height: 46px;
max-width:46px;
}
.comment-content{
background: #f5f5f5;
border-left: 15px solid #ffe99e;
padding: 10px;
}[/css]

 

Bueno eso es todo por hoy ^^ pronto más trucos y cosillas para tu blog en blogger ;3

 

8 comentarios:

  1. Ya me vas a abandonar otra vez :C .. ok ya XD
    yeey salgo dos veces *-* .. gracias por liberar estos bonitos codigos :3 .. creo que a la siguiente plantilla que haga utilizare el segundo ^^
    Gracias Leslie!

    ResponderBorrar
  2. jejejeje de nada ^^, voy a seguir posteando trucos para blogger, me los estaba guardando para que no me los copiaran pero, ahora que estoy en wordpress ya no me sirven de nada XP así que los comparto mejor :3 ... jejejje si, si quieres estudia los códigos css porque puedes arreglarlos de tal manera que crees tu propio estilo, cambiando colores, posiciones, imagenes y un largo etc. ^^ Saludos!

    ResponderBorrar
  3. ¡Hola !, Tu Blog me encanta es demasiado lindo, Muchas gracías por los grandes aportes que das a la gente nueva en los blog's ♥

    ResponderBorrar
  4. ¡Muchísimas gracias me sirvió de mucho!

    te invito a pasar por mi blog:
    http://elblogdesayury.blogspot.com.es/

    ¡Un abrazo1

    ResponderBorrar
  5. hola podrías hacer el nombre milagros seria genial

    ResponderBorrar
  6. Gracias por los codigos, soy seguidor tuyo aunque no regular y no de comentar mucho, pero me gusta mucho tu blog, siempre los haces muy kawaiis <.<
    Estan chulos cx
    Gracias por los codigos. Saludos !

    ResponderBorrar