15 enero, 2013

Tutorial : Cambia el aspecto de tus comentarios!

Hola niñ@s hermos@s ¿Cómo están hoy? Yo con calor ya que en Argentina hace como 28º3 y va subiendo T n T . Hoy les traigo este pequeño tutorial, que si bien no es que sea algo wow!, al menos yo hasta hoy no lo sabia!. Tengo varios seguidores que son nuevos así que me pareció un lindo detalle ayudarlos en las cosas que voy aprendiendo :3
Tal ves ya se  aburrieron como yo estilo que tiene blogger para mostrar los comentarios. A que acá les traigo uno muy Cute que me gusto mucho.
Les muestro el ejemplo de la apariencia que tendrá cuando lo terminen de realizar. 
Si ven esta mas redondeado, y mas organizado. También cuando ponen responder no se les habré otra ventana ni nada. Y la imagen de los que comentan aparece circular lo cual le da un toque lindo.



1. Van a plantilla /Edición de HTML/Expandir plantillas de artilugios
2. una ves que que se les habra la ventana con codigos pongan Ctrl+F  y buscan:  ]]></b:skin>
3. Antes!! de  ]]></b:skin> pongan:
.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%;}


.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;
}

Guardan y se fija como les quedo. 
Recuerden que les conviene siempre tener una copia de segurida de su edición HTML por si les sale mal.


http://lunany-kawaii.blogspot.com.ar/

También les dejo el link de un blog donde pueden encontrar otros estilos :3
http://ciudadblogger.com/2011/02/enmarcar-y-separar-comentarios-en.html


Besos !




8 comentarios:

  1. Es muy bonito! Voy a intentarlo en mi blog :3 gracias por compartirlo! Besos!

    ResponderEliminar
    Respuestas
    1. De nada Catnip :3
      Acordate de hacer una copia del HTML así no se te pierde la info anterior si sale mal, pero no creo tengas problemas :3

      besos!

      Eliminar
  2. Es muy bonito >///< el mio es con la misma estructura pero diferente diseño :D

    ResponderEliminar
    Respuestas
    1. Sii me encantan! es que lo estuve buscando todo el dia :P
      :O vos de donde lo sacaste??

      Eliminar
  3. si, yo tambien voy a intentarlo :D gracias por el tuto, ciudad blogger es una pagina muy buena, la he visitado en varias ocasiones y sus tutos son buenisimos!!
    besos!

    ResponderEliminar
    Respuestas
    1. De anda Gabi :3 sisi es muy bueno ese blog!

      Eliminar

Gracias por comentar !
Puedes escribir lo que quieras, siempre y cuando sea con respeto y trate sobre lo que es la entrada. De lo contrario sera borrado.
Kiss <3

-Effy

PD: Si ves que no te sigo, dejame un mensaje porque muchas veces me salta el usuario de google+ y no aparece blog alguno al cual pueda seguir >.< .



ir arriba
Cute Polka Dotted Pink Bow Tie Ribbon