StarAnime!: Personaliza tus comentarios!♥

Konichiwaa!!

Perdón por no escribir los últimos días

Pero estuve muy ocupadita... Estaba pensando en también hacer unos tutos Kawaii de Manualidades y cosas así

.... Si lo haria ... Me apoyarias?

Bueno .. Ya no los aburro ahahah Mucha charla

Primero Vamos a Habilitar los Comentarios (Solo si es que no los tienes activados

)

Después Vamos a Plantilla

Editar Html

Siguiente Pulsa Control+F y Buscas <$BlogItemBody$> Y abajo colocas este códiguito

<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">
</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>

Ahorita Solo cambias URL DE TU ICON , Por imágenes que gustes (Su url)

Seguir Pulsa Control+F y Busca </Style> Y colocas este código arribita de eso

/* 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 */
}

Donde hay # Seguido de letras y números .. Solo ve a una plantilla de códigos de colores y ya

Nice day!

miércoles, 3 de junio de 2015

Personaliza tus comentarios!♥

1 comentario: