Comentarios Kawaii en Blogger

Holas!! 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