Personaliza comentarios(plantilla clasica)




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 

/**Creditos Lunany-kawaii**/ 


Firma Post


5 comentarios:

ir arriba