Tutorial:Personalizar comentarios # 2



Hola ¡¡¡Ya areglaron mi computadora ayer,en la noche hiba a publicar esto ,pero no aguante el sueño   ya bueno y les traigo otro personalizar comentarios ,asi se vera 

Para los que les gustan aqui el codigo
Deberan ir a plantilla./Edicion de HTML/Presionan Ctrl+F/y ponen ]]></b:skin>
Al encontrarlo ,pegan el siquiente codigo antes de ]]></b:skin>



/**======================================================================

AREA GENERAL DE COMENTARIO

========================================================================**/

@font-face {font-family:'Vibur';src:local('Vibur'), url('http://themes.googleusercontent.com/static/fonts/vibur/v4/e2dR39U2ZC6nUGtJrQCN9Q.woff') format('woff')}

.comments{

width:99% !important;       /* TAMAÑO DE LA CAJA COMENTARIO*/

margin:0 auto;

font-style:normal !important;

font-size:12px !important; /* TAMAÑO DE TEXTO  */

font-family:verdana !important; /* FONT DE TEXTO  */

background:#FCD6DF  !important/* COLOR DE  FONDO */;

color:#FCD6DF;

border-radius:10px;

}

/**=======================================================================

COMENTARIOS (1 comentario, 2 comentários...)

========================================================================**/

.comments h3,.comments h4{

width:98%;

padding:7px;

margin-bottom:10px;

color:#ff1499;             /* COLOR DE  TEXTO*/

font-family:'Vibur' !important;/* FONT-FAMILY  */

font-size:33px !important;       /* TAMAÑO DE TEXTO  */

}

/** ==================================================================

COSAS DE COMENTARIOS (engloba: botones, avatar, data, icono ...)

====================================================================**/

.comments .comment-block {

position:static !important;  /* AVATAR */

background:transparent !important;         /* COLOR DE FONDO */

margin-left:23px;

padding:0 0 0 30px;

border-top:5px #ff1490 solid

}

.comments .comments-content .comment {

padding:20px 10px !important;

margin-bottom:15px !important

}

/* estilos para comentario de autor */

.comments .comments-content .user a,.comments .comments-content .user{

font-style:normal;

border:0;

color:#fff !important;

text-shadow:0 1px #999;

font-family:'Vibur';

font-size:20px;

background:#ff1490;

padding:4px 36px;

margin-left:-8px;

border-bottom-right-radius:10px;margin-top:-2px

}

/* estilo da data */

.comments .comments-content .datetime a{

background:none !important;

font:bold 11px courier new;

float:right;

font-size:9px;

color:#aaa;

border:0 !important

}

/* estilo do avatar */

.avatar-image-container {position:absolute !important;

min-width:60px;

min-height:60px;

border:5px #ff1490 solid;

border-radius:60px;

padding:0 !important;

box-shadow:0 0 3px #ff1490;

margin-left:-9px !important;

margin-top:0 !important;

background:#fff;

overflow:hidden

}

.avatar-image-container img {

margin:0;

display:block;

max-height:60px;

min-height:60px;

max-width:60px;

min-width:60px;

padding:0 !important;

border-radius:60px;

border:0 !important;

overflow:hidden

}

/** ==================================================================

TEXTO DE COMENTÁRIO

====================================================================**/

.comments p{

font-size:12px !important;

font-family:courier new !important;

text-shadow:0 0 !important;

padding-left:20px !important;

color:#eee !important

}

/** ==================================================================

BOTON - RESPONDER

====================================================================**/

/* boton responder de segundo nível */

.comments .continue a {

background:#fff !important;

color:#777 !important;

float:right;

padding:2px 4px!important;

height:23px;line-height:23px !important;

margin-top:-45px !important;

text-shadow:0 0 !important

}

/* boton responder de primer nível */

.comments .comment .comment-actions a,.comments .continue a {

font-size:11px !important;

color:#fff;

padding:3px 6px;

border:0 !important;

line-height:30px;

margin:5px;

margin-left:10px;

font-family:helvetica;

text-shadow: 0 1px #999;

border-radius: .5em;

background: #ff1490;

font-weight:800;

box-shadow:inset 0 1px 2px #666

}

/* boton hover*/

.comments .comment .comment-actions a:hover,.comments .comments-content .user a:hover {

text-decoration:none !important;

padding-bottom:4px

}



/* estilos para respuestas */

.comments .comment-thread.inline-thread {

background-color:transparent !important;

padding:0.5em 1em;

border-radius:5px;

border:1px #ddd dashed !important

}

.comments .comments-content .comment-replies {

margin-top:1em;

margin-left:56px !important

}

.comments .continue {

border-top:0 !important

}

.comments .thread-toggle,.icon.blog-author  {display:none !important}

/** ==================================================================

BONUS - estilos para formato de texto comments

====================================================================**/

.comments .comments-content a{background:#999 url(http://lh3.ggpht.com/_NZJzdRm10Y0/TTSFb1rPnWI/AAAAAAAAAFM/1kbIuCoul8A/s800/th_minisetas.gif)no-repeat left;color:#000;padding-left:15px;font-weight:400}

.comments .comments-content em{font:normal 12px 'segoe script';color:#fff}

.comments .comments-content b{font:bold 11px 'arial';color:#999;text-shadow:0 0}

.comments .comments-content strong {margin:10px 0;border:1px #fff solid;background:url(http://2.bp.blogspot.com/-rRFTCvBi0A4/TwXcVciZO0I/AAAAAAAAWzM/K2dXpNdjcaw/s1600/code.jpg);overflow:auto;width:98%;position:relative;border-radius:10px;box-shadow:0 0 5px rgb(199,198,166);color:#FCD6DF;display:block;padding:5px 12px;text-shadow:0 1px #fff;line-heigth:18px;font-size:12px}

/** ==================================================================

[ //http://lunany-kawaii.blogspot.com/]

====================================================================**/
Si no les gusta el color,solo cambienlo ,tiene a su ladito para que sepan que es ,por ejemplo si quieren cambiar el color de fondo esta asi :
background:#FCD6DF  !important/* COLOR DE  FONDO */;


Bueno eso es todo  espero que les haya gustado

4 comentarios :

  1. que bien ya tengo otra forma de personalizar los comentarios de mi blog n_n pronto usare este tuto para una nueva plantilla gracias!

    ResponderEliminar
  2. Tienes un premio en mi blog http://yurikasekai.blogspot.com.es/2013/01/premio-premio-2-lugar-del-concurso.html :DDD

    ResponderEliminar
  3. Awww Kawaii! Me encanta ^^ Lo puse en mi blog, gracias x el tutorial :D

    ResponderEliminar
  4. Lo he puesto en mi blog :3elocoyfriquimundodekaren.blogspot.com.es

    ResponderEliminar

Hola :3 Bienvenidos a Lunany-kawaii
Debera seguir las siguientes reglas:
-No insultos
-No spam
-Ni peleas
gracias ♥