Descargar fuentes de google fonts a tu pc

23 de enero de 2015



Hoy les traigo un sencillo tutorial de como descargar e instalar fuentes de google/fonts en la pc, podría serles de utilidad si por ahí encuentran una fuente de allí para el diseño de sus blogs y tambien quieran descargarla para editar en photoshop.. en fin sin mas vueltas les dejo el tuto..

1. Deben ir a google.com/fonts  teniendo su sesión de gmail o google+ iniciada.

2. Busquen entre las categorías de fuentes que existen {ver imagen} y se ven alguna que les guste cliquean en Add Collection, toda las que van escogiendo se van agregando en la parte de abajo de la ventana {ver imagen}.



3. Una vez que encontraron todas las fuentes que les gustan cliquiean donde muestra la imagen y les aparecerá una ventada donde deben escoger .zip .. una vez que lo hagan comenzara la descarga.


4. Cuando termine de descargarse solo deben abrir el zip e instala la fuente en su pc♥

Espero les haya sido de utilidad el tutorial.. saludos!♥

Como editar la caja de comentarios

14 de enero de 2015


Hola a todos mis queridos angelitos.. ¿como están? Hoy les traigo un pequeño tutorial a petición de SDLN..
Como ya habran visto se trata de como personalizar los comentarios en el blog..
Pueden ver un vista previa en los comentarios de mi blog de pruebas
Bueno en fin.. comencemos con el tutorial:

Paso1:

Para que este tutorial funcione deben asegurarse de que no pegaron ningun código para personalizar los comentarios antes, y si lo hicieron deben borrarlo antes de comenzar..


Ahora que se aseguraron de eso, deben ir a Plantilla | Editar HTML y pegar arriba de ]]></b:skin> el siguiente código

.comments .comments-content .icon.blog-author {background-repeat: no-repeat; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);}


/* -- Fuente y tamaño del texto de los comentarios -- */
.comments {font-family: 'Arial'; line-height: 14px; font-size: 12px;}

/* -- Estilos de la cajita contenedora de los avatares -- */
.avatar-image-container {background: url('http://colourlovers.com.s3.amazonaws.com/images/patterns/2379/2379812.png');padding: 5px;border:2px solid #FFDDB0;}


/* -- Estilo de la caja de los comentarios -- */
.comment-block {border: 8px solid #CDBB93; border-radius: 8px; background: #fff; color: #666; box-shadow: inset 0 0 50px #FFDDB0, 0 0 3px #FFDDB0; border-image: url('http://colourlovers.com.s3.amazonaws.com/images/patterns/2379/2379812.png') 30 30 round; right: -15px; position: relative;
}


/* -- Estilo de los links responder o elmiminar el comentario -- */
.comments .comment .comment-actions a,.comments .comment .continue a {display: inline-block; margin: 0 0 5px 5px; padding: 0 2px; text-align: center; text-decoration: none; background: #fff url(http://colourlovers.com.s3.amazonaws.com/images/patterns/2379/2379812.png); color: #9CD1C9; border: 2px solid #bbb; border-radius: 2px; height: 20px; line-height: 20px; font-weight: normal; text-shadow: -1px 0 white, 0 1px white,1px 0 white, 0 -1px white; text-decoration:none;}


/* -- Color y tamaño de la fecha de los comentarios -- */
.comments .comments-content .datetime a {color:#9CD1C9; font-size:12px; float:right; text-decoration:none;}
.comment-content {margin:0 0 8px; padding:0 5px;}


/* -- Estilo de la cabecera donde va el nombre del que comenta -- */
.comment-header {font-size:18px; background: #fff url(http://colourlovers.com.s3.amazonaws.com/images/patterns/2379/2379812.png); text-shadow: -1px 0 white, 0 1px white,1px 0 white, 0 -1px white; border-bottom:2px solid #bbb; padding:5px;}
.comments .comments-content .user a {color:#9CD1C9; font-weight:normal; text-decoration:none;}


/* -- Color del link del nombre del que comenta -- */
.comment-header a {color: #335650; text-shadow: -1px 0 white, 0 1px white,1px 0 white, 0 -1px white;}


/* -- Oculta el lapicito en los comentarios del autor del blog -- */
.comments .comments-content .icon.blog-author{width:0px; height:0px; display:inline-block;}
.comments .comments-content .owner-actions {position:absolute; right:0; top:0;}


/* -- Estilo en el link mas respuestas de un comentario -- */
.comments .thread-toggle {margin: 0 0 10px 5px; padding: 0 5px; text-align: center; text-decoration: none; display: inline-block; background: #fff url(http://colourlovers.com.s3.amazonaws.com/images/patterns/2379/2379812.png); color: #9CD1C9; border: 2px solid #FFDDB0; border-radius: 2px;font-weight: normal;}


/* -- Aca no hay nada que editar -- */
.comments .thread-toggle .thread-arrow {display:inline-block; height: 6px; width: 7px; overflow: visible; margin: 0.3em; padding-right: 4px;}
.comments .thread-expanded .thread-arrow {background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc
AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;}
.comments .thread-collapsed .thread-arrow{background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent}

@media screen and (max-device-width:480px){.comments .comments-content .comment-replies{margin-left:0}}


Paso2:

Una vez que lo pegaron guardan y se fijan si es que se coloco correctamente el código.. traten de pegarlo entero sin que les falte ningún pedacito o lucirá mal.

Les tiene que quedar asi:


Paso3:

Editan a su gusto, coloque etiquetas que indican que cambia que en el código para que les sea mas fácil la edición.. si editan en los lugares donde dice color, border o background ya van a personalizar casi todo, traten de no tocar donde dice margin o padding asi no se les mueve de lugar nada.. :)


Espero y les sea de ayuda el tutorial! - cualquier duda envienmela a sol.pourcel@gmail.com