Descargar fuentes de google fonts a tu pc

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!♥

Seguir leyendo

Como editar la caja de comentarios

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

Seguir leyendo

Como colocar una imagen en el borde del blockquote

Hoy les traigo un corto y sencillo tutorial de como colocarle un pattern a los bordes del blockquote como pueden ver en la imagen de ejemplo o también pueden chequear el resultado en mi blog de pruebas ♥

Paso 1

Vas a Plantilla | Editar HTLM | y encima de ]]></b:skin>  pegas el siguiente código:
     

blockquote {
background: #fafafa; /* Color del fondo de la caja */
padding: 5px;
color: #666; /* Color del texto */
border: 10px solid ; /* Grosor del borde */
box-shadow: inset 0 0 10px #bbb, 0 0 5px #bbb; /* Sombra dentro de la caja */
border-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6-DF0Y2w6RBYxyg4xrQ-Ox9ZtKi4D_GyBAgwvIx8WEGW5iMHODTwgyjbKedH-d7tMkh59TwXaEuzfff8iJcKJzKIVAETsigl92oV_D-qYVvTlmHsi5VbcZKQflUN8A7sona8KTcq7UPE/s1600/3817521.png') /* Url de la imagen del borde */
    20 20 round; /* Escala de la imagen del borde */}

Paso 2

Ahora solamente debes de editar cada cosa a tu gusto:

Donde dice /* Escala de la imagen del borde */ es para ajustar el tamaño de la imagen que aparecerá en el borde del blockquote..
si pones un numero menor, como 10 10 round; la imagen será mas grande..
si pones un numero mayor como 30 30 round; la imagen será mas pequeña..

RECOMENDACIÓN
Si ya tenias tu antigua blockquote personalizada, te recomiendo que borres  el código que ya tenia tu plantilla y que lo remplaces con el que deje.. si no podría no quedar bien al superponerse ambos códigos..

Seguir leyendo