Tutorial:Personaliza comentarios(plantilla clasica)



Hola¡¡ Bueno hoy les traigo un tutorial que me pidieron,si se dieron cuenta mayormente no hago tutoriales para plantilla clasica  , pero pronto las are,aveces los hago, bueno este tutorial no me pertenece es de Mell  al final tan los creditos 
Como leyeron el titulo es personalizar los comentarios de plantilla clasica o blogskin
Un ejemplo de como queda:


Si lo quieres tener sigas los siguiente:
Primero vamos a:
HABILITAR LOS COMENTARIOS 

Vamos a Plantilla,con Ctrl+F buscas <$BlogItemBody$>
y abajito colocas el siguiente código

<!-- Begin #comments -->
 <ItemPage>
  <div id="comments">
 <BlogItemCommentsEnabled><a name="comments"></a>
        <h5><$I18NNumComments$>:</h5>
        <dl id="comments-block">
          <$CommentPager$>
      <BlogItemComments>
      <dt class="comment-poster" id="<$BlogCommentAnchorName$>"><a name="<$BlogCommentAnchorName$>"></a>
        <$I18NCommentAuthorSaid$>
      </dt>
<table><tr><td valign="top" >
<div id="icon" >
<script type="text/javascript">
<!-- hide
numquotes = 4;
var quotes = new Array(numquotes);
quotes[0]="<img src=URL DE TU ICON>";
quotes[1]="<img src=URL DE TU ICON1>";
quotes[2]="<img src=URL DE TU ICON2>";
quotes[3]="<img src=URL DE TU ICON3>";
var rand = Math.floor(Math.random()*numquotes);
document.write(quotes[rand]);
// --></script>
</div>
</td><td valign="top" style="width: 100%;">
<div id="block">
      <dd class="comment-body">
        <p><$BlogCommentBody$></p>
      </dd>
</div>
</td></tr></table>
      <dd class="comment-timestamp"><a href="<$BlogCommentPermalinkURL$>" title="comment permalink"><$BlogCommentDateTime$></a>
   <$BlogCommentDeleteIcon$>
   </dd><br><br>
      </BlogItemComments>
      <$CommentPager$>
    </dl>
<p class="comment-timestamp">
    <$BlogItemCreate$>
    </p>
  <p class="comment-timestamp">
 <a href="<$BlogURL$>">... Back to the blog?</a>
    </p>
    </div>
</ItemPage>
  <!-- End #comments -->

Aora solo cambias "URL DE TU ICON" , por los iconos que quieras,
Notita: Los numeros indican que puedes variar de iconos

-Para aumentar mas iconos para que varien 
solo coloca debajo de  quotes[3]="<img src=URL DE TU ICON3>";
este codigo:
quotes[4]="<img src=URL DE TU ICON3>";
Debes seguir la seguencia de los numeros en este caso luego del 3 el 4
Tambien debes de cambiar el numero principal si agregas mas iconos
numquotes = 4;
Aora con Ctrl+F, buscas </style> y colocas el siguiente codigo antes de </style>
/* caja de color */
#block {
background: #fff url(Url de tu fondo);
padding: 10px;
border: 2px dashed #FFE4E4;/*Color de los bordes de la caja */
border-radius: 20px 7px 20px 7px}
/* Titulo "No hay comentarios/nro Cometarios" */
h5 {
font-family: 'Baskerville Old Face', cursive;
font-size: 25px;
color:#FFBCBC;/*Color de la letra*/
text-align:center;
background: #FFE4E4 url(Url de tu fondo);
border: 1px solid #F8D0FF;/*Color de los bordes del titulo*/
border-radius: 7px
}
/* Titulo "Publicar un comentario en la entrada" */
h4 {
font-size: 16px;
font-family: 'Century Gothic', cursive;
color:#FF9CA0;/*Color de la letra*/
text-align:center;
border-bottom: 1px dashed #F8D0FF;
margin-bottom: -10px;
}
.comment-poster {
color: transparent;
font-size: 10px;
}
/* Nombre de quien comenta */
.comment-poster a{
color:  #FF9CA0;/*Color de la letra*/
font-family: 'Baskerville Old Face', cursive;
font-size: 19px;/*Tamaño de la letra*/
}
.comment-icon, .blogger-comment-icon {
opacity: 0;
width: 0px;
}
/* Caja de color */
.comment-body {
color:  #C6C6C6;/*Color de la letra*/
font-size: 10px;
background: #fff url(Url del fondo);
padding: 7px;
border: 2px dashed #FFD2D3;/*Color del borde*/
margin: 0px;
}
/* Fecha */
.comment-timestamp a{
background:url(Url del fondo);
margin-top:9px;
border-radius:10px
color: #FFFFFF;/*Color de la letra*/
float: right;
}
#comment-editor {
height: 220px;
}
#icon img{
border: 1px solid #F2D5FF; /* BORDE DEL ICON  */
width: 50px;
border-radius: 100%;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;}
#icon img:hover {
transform: rotate(360deg) ;
-webkit-transform: rotate(360deg) ;
-moz-transform: rotate(360deg) ;
-o-transform: rotate(360deg) ;
-ms-transform: rotate(360deg) ;
}
#icon {
border: 1px dashed #F2D5FF; /* BORDE DEL CONTORNO */
background: #fff url(Url del fondo) left center; /* FONDO DEL ICON */
width: 55px;
padding: 5px;
border-radius: 100% 0 100% 100%;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
}
#icon:hover {
background: #fff url(Url del fondo) left top; /* FONDO DEL ICON HOVER */
}
Y ustedes lo cambian los colores y fondos a su gusto
Bueno este tutorial no me pertenece  , lo hice por que me pidieron 
Si te sirvio el tutorial, dale
Creditos a :Mi mundo de Creacion


16 comentarios :

  1. holaaa!! :3 nesesito tu ayuda cuando quiero intentar un tutorial de los tuyo cuando voy a buscar el codigo no encuentra ningundo T_T me estoy cansando que cuando le quiero agrgar algo a mi blog no me deje la suerte contesata!!! besos! :3

    ResponderEliminar
    Respuestas
    1. O.O¡ Para buscar un codigo presiona Ctrl + F , y te saldra un buscador y colocas el codigo que quieres buscar n.n¡

      Notita: Intenta asiendo clic derecho en tus codigos de tu plantilla y ases clic en seleccionar todo, y de hay recien presionas Ctrl + F para buscar , la cajita debe aparecer dentro de la caja de tus codigos de plantilla

      Eliminar
  2. guaaa gracias por este tuto, lo andaba buscando por todas partes, muchas gracias ;D

    Saluditos!! >w<

    ResponderEliminar
  3. Gracias por el tuto!!! Esta muy padre!! :)

    ResponderEliminar
  4. Arigatoo!! amiga esta hermoso como quedan los comentarios n_n

    ResponderEliminar
  5. *O* que bello >.< arigato por el tuto :3333

    Muchos besos y se me cuida!!

    ResponderEliminar
  6. Gracias ♥, estube buecando esto tantoo tiempo :] espero que funcione en mi blog :3 besitos ~+**

    ResponderEliminar
  7. muchas gracias por el tutorial!! el resultado es muy kawaii *^*

    ResponderEliminar
  8. te amooooo realmente te agradezco esto mujer dios que felicidad

    ResponderEliminar
  9. Respuestas
    1. en la plantilla clasica no permite que salga el avatar de quien comenta,asi que si quieres que salga algun avatar en las personitas que comentan , tu lo pones :3 ,eso es el icono o avatar

      Eliminar

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