SLIDER

¡Hola!

Mónica Lemos
¡Hola! Soy Mónicay quiero que empieces a crear tu blog o tu canal de youtube sin complicaciones. Aquí descubrirás cómo.
PRÓXIMO CURSO

CREA TU CANAL DE YOUTUBE

Empieza y no te compliques
¿Te interesa?
Suscríbete y envíame un e-mail para informarte y/o reservar tu plaza.

Suscríbete

¿Quieres asegurarte de que tus posts estén perfectos antes de ser publicados?
Te regalo una Check-List que te ayudará en esto.


27 jun. 2016

Tutorial Blogger: Instalar boton subir / up personalizado C12-P2

colocar-instalar-boton-subir-blogger

Después de diseñar nuestro botón o escogerlo, lo siguiente es colocarlo en nuestra plantilla para que se pueda usar en nuestro blog ese diseño tan chulo que hemos escogido.

Resulta que existen varias opciones de acción en cuestión al botón de subir puesto que podemos instalarla en plan sencillo: que se vea todo el rato el botón y que suba instantáneamente, o podemos instalarlo de manera que aparezca y desaparezca cuando se necesita realmente. Esta última opción es la que he elegido porque me parece la más completa y adecuada.

Además podemos elegir entre que haga efecto scroll, de pasar la página, o que suba de forma inmediata, pero he elegido la de scroll porque creo que le da un efecto más chulo.

Así que sobre estas elecciones nos vamos a guiar. No te lío más y vamos allá.


Empezamos la clase

 En primer lugar vamos a pegar en un bloc de notas de nuestro PC, o en un word o writer, el siguiente código, para personalizarlo con nuestro botón:

/* Botón Ir Arriba
----------------------------------------------- */
#IrArriba {
position: fixed;
bottom: 30px; /* Distancia desde abajo */
right: 30px; /* Distancia desde la derecha */
}
#IrArriba span {
width: 100px; /* Ancho del botón */
height: 100px; /* Alto del botón */
display: block;
background: url(URL de nuestra imagen) no-repeat center center;
}


 Vamos a cambiar lo que he marcado en azul por la dirección de imagen de nuestro botón, (si no sabes cómo mira este vídeo)

Una vez que lo tengamos preparado vamos a nuestro blog:

 Plantilla

 Copia de seguridad

 Editar HTML

 Buscamos en nuestra plantilla (si no sabes cómo mira este vídeo) este código:

</head>
 y justo antes pegamos este código:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script> 
Este código , si no has seguido este curso desde el principio, puede que ya lo tengas, y si es así no debes volver a pegarlo. Busca googleapis.com y si no te aparece entonces sí que tienes que introducirlo de la manera que anteriormente te he expuesto.

 Luego buscamos este otro código:

</b:skin>
 y justo antes de ]]></b:skin> pegamos el siguiente código de estilo CSS:

/* Botón Ir Arriba
----------------------------------------------- */
#IrArriba {
position: fixed;
bottom: 30px; /* Distancia desde abajo */
right: 30px; /* Distancia desde la derecha */
}
#IrArriba span {
width: 100px; /* Ancho del botón */
height: 100px; /* Alto del botón */
display: block;
background: url(https://1.bp.blogspot.com/-SzjXddIYKpE/V1UnWXFmzXI/AAAAAAAAAEg/ZVQd42SCDGA-44M_k2AxWZPniygkuc93QCLcB/s1600/boton-subir.blog-pruebas.png) no-repeat center center;
}
 Lo siguiente es otra vez buscar en plantilla este otro código:

</body>
 y justo antes pegamos el siguiente código:

 <div id='IrArriba'>
<a href='#Arriba'><span/></a>
</div>
<script type='text/javascript'>
//<![CDATA[
// Botón para Ir Arriba
jQuery.noConflict();
jQuery(document).ready(function() {
jQuery("#IrArriba").hide();
jQuery(function () {
jQuery(window).scroll(function () {
if (jQuery(this).scrollTop() > 200) {
jQuery('#IrArriba').fadeIn();
} else {
jQuery('#IrArriba').fadeOut();
}
});
jQuery('#IrArriba a').click(function () {
jQuery('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
});
//]]>
</script>
 Guardamos Plantilla y vemos Blog para ver los resultados.



vídeo tutorial



Así de fácil y sencillo habremos conseguido nuestro botón personalizado para subir con efecto scroll y aparece/desaparece. 


¿Qué te ha parecido?
¿Algún problema? Cuéntamelo en los comentarios y buscaremos una solución




   

18 comentarios

24 jun. 2016

Diseño: Crea y diseña tu propio botón "Subir" para tu blog C12-P1

Crea y diseña tu propio botón para subir en blog

Diseñar un botón es el tema que hoy nos ocupa con este tutorial sencillito para poder tener tu propio botón personalizado de "subir" en tu blog.

Es algo importante comprender que la armonía de tu blog tiene que darse lugar. La paleta de colores debe existir en el diseño de toda la interfaz de tu blog. 

Si has elegido 2 colores que esos sean los que dominen en todos los diseños de tus botones y elecciones a la hora de títulos, enlaces y demás, para conseguir esa armonía de tonalidades que marcará la diferencia entre un blog "normal" y un blog personalizado.

Por eso dedico una clase a cada uno de los detalles importantes de diseño gráfico de nuestro blog, para que sepas crearlo sobre tu propia paleta y tu propio estilo. Es primordial que exista una coherencia para no terminar con una interfaz  desordenada y sinsentido.


Usaremos Picmonkey para esto porque es básico y porque nos da muchísimas posibilidades. 

Podremos elegir tipo de letras colores, transparencias, formas, símbolos, fondos, texturas... y una gran variedad de opciones se nos desvelan con esta herramienta que debes empezar a manejar desde ya.

Aun con estos trucos y conocimientos puede que esto no sea lo tuyo, que simplemente no te apetezca o que te gusten más los diseños que te encuentras por este mundo 2.0 y por eso quiero compartir contigo el diseño que he creado para el blog de pruebas en el que llevamos a cabo el curso.

Para descargarlo solo tienes que hacer click en Pay with a tweet, que es un botón con el que compartes el post y luego te deja acceder a la descarga de la imagen a través de Google Drive. Muy fácil y sencillo a la vez que colaborativo.

diseño de botones freebies para descargar



freebies botones subir descarga gratis




Ahora solo queda enseñarte a diseñarlo si es que te interesa. Aquí te dejo el vídeo, y recuerda que menos es más :)

De todas formas si le preguntas a Google te responderá con un montón de recursos de otras personas que han creado este tipo de botones.

vídeo



¿Te ha gustado? En la próxima clase lo vamos a insertar en nuestro blog, con efecto scroll y además con el efecto de que aparezca y desaparezca según dónde se encuentre el lector la lectora en nuestra página. ¿Es genial verdad?




¿Te has descargado algún botón? ¿Te has animado a crear algún botón por tí misma/o? Cuéntamelo en comentarios aquí debajo ;)






   

No hay comentarios

21 jun. 2016

Freebie: Botones de descarga para tu blog

botones-de-descarga-para-blog-freebies

En esta nueva entrada de Agarimo vamos a compartir botones chulos de descarga para ti, para que puedas ponerlos en tu blog, que llamen la atención y sean atractivos. 

Soy consciente de que cada persona con su blog, tiene su paleta de colores, así que he querido hacer algo que pegue un poco con varios estilos.

No es fácil, pero el truco está en hacerlo sencillo. No obstante también añado alguno más diferente, por si os gusta y os pega con el estilo de vuestro blog. Además Nerea también ha creado sus botones y así nuestra sección queda mucho más completa y variada.

Descarga botones "descargar" originales






Descarga botones "descargar" sencillo




- Para llevártelos simplemente tienes que darle a descargar y luego en la página que se te abre, darle arriba a un icono que te deja descargarlo a tu PC, un icono como este: 

- Para usarlo simplemente tienes que subir la imagen a tu post, colocarla donde quieras y añadir enlace. Este enlace será el de tu archivo de descarga. 


Si quieres saber cuántas personas han descargado tu recurso, simplemente tendrás que acortar tu enlace con un acortador de enlaces con analítica de algún tipo. (Por ejemplo bit.ly o goo.gl/ ) 

Resulta bastante necesario intentar llevar este tipo de estadística porque no todas las personas que se descargan tus recursos llega a dejar un comentario (no hagas tú lo mismo y dime en comentarios que te has llevado uno ;) y de esta forma sabrás si ha gustado o no tu recurso y de ser así, cuántas personas se lo han llevado :)


Ofrecer recursos gratuítos de descarga es una idea genial que siempre satisface a lectoras/es porque les aportas de forma gratuíta recursos para sus necesidades o inquietudes. Siempre es una buena aportación que enriquece tu blog.

Algún pack de recetas, un patrón de costura, algún tipo de Check-list... siempre hay algo que podemos aportar. 

Personalmente me encanta regalar cositas que puedas llevarte y usar a tu antojo, aunque no comparta tantas como me gustaría, pero poco a poco iremos consiguiendo muchos recursos interesantes. 

Nerea tiene un estilo muy característico y  eso hace que nuestros Freebies se llenen de variedad para que te lleves aquel recurso que más se adapte a tu estilo, a tu blog, a tu vida. Es genial ¿No crees?

Su aportación es la siguiente:

Iconos-redes-sociales-freebie-gratis-descarga


Si quieres descargarlos haz click sobre la imagen e irás a su post para descargártelos :)
A mi me han gustado los de fondo acuarela , me parecen muy chulos. Tiene los dos modelos en varios colores para que puedas elegir el que más se adapte a tu blog. No te los pierdas. 


¿Qué te han parecido los diseños? ¿Se adapta alguno a tu blog? ¿Qué te apetece que compartamos en el próximo psot de Freebies? Deja tu respuesta en comentarios, que Nere y yo estamos deseando conocerlas :)


Suscríbete y no te pierdas nada, maja/o!!
Blogger Paso a Paso

  
6 comentarios

20 jun. 2016

Tutorial Blogger: Personalizar el menu de paginas y pestañas C-11



¡¡Hola!! No sabes lo contenta que estoy con esta clase. Es tan útil y tan sencilla que te va a encantar tanto como a mi. Además te comparto un truco muy útil de diseño.

Llega el momento de personalizar nuestro menú de páginas, para que quede molón, limpio, claro, atractivo.

Como siempre digo, en cosa de diseño es mejor algo sencillo pero "cuco" y ya sabes que para los títulos del sidebar he elegido el fondo Washi-Tape , y para el menú he diseñado (usando el washi de los títulos de sidebar) un Washi Tape más largo y me ha encantado como ha quedado de fondo de menú. Me quedo con ese. 

Os lo comparto para que puedas descargarlo y usarlo y además te regalo un truco para cambiarle el color y que así puedas conseguir el color de tu paleta de colores.

truco para cambiar color de cualquier background o imagen de fondo






Podría ponerme a diseñar varios colores para que te los descargaras pero tendría que hacer un montonazo para que alguno te pudiera servir, así que ¿Qué mejor que consigas tú misma/o el color que buscas?

Si quieres descargarlo solo tienes que compartir el post en alguna de tus redes a través del siguiente botón. Así me ayudarás a mi y yo a ti, es genial ¿Verdad? Prometo tutorial para que puedas añadir este recurso en tu blog :)







Una vez que tengamos nuestro diseño pensado y preparado (en el caso de la imagen) para nuestro menú de páginas, vamos a editarlo y copiarlo en nuestra plantilla. Para esto simplemente te facilito los códigos de diferentes estilos para que puedas colocar el que quieras.

Al final del post de explico lo que puedes modificar.

** Selecciona el código al completo (está en un cuadro de texto extensible) y copia el que elijas en tu plantilla (explico dónde se copia después de todos los códigos y opciones).

Fondo del menú con Washi-tape:



Selecciona el texto y copialo.

Fondo del menú de páginas cuadrado





Fondo del menú de páginas cuadrado con bordes redondeados



Menú de páginas con línea arriba y abajo:



Menú de páginas con línea arriba y puntitos abajo:



Menú de páginas cuadrado con selección en blanco








Ey!! ¿A que están chulos? Pues ¿Qué tal si lo personalizamos un poquito más a nuestro gusto? 



Personalizar los códigos:

En las clases anteriores como en la de personalizar título de gadgets, hemos practicado la modificación básica de algunos códigos, para acercarnos al efecto deseado. De todas formas te dejo una explicación de todos los significados para que puedas adaptarlo.

.PageList {
text-align:center !important;
}
.PageList li {
display:inline !important; 
float:none !important;
}

Esta parte del código, lo llevan todos, es para centrar las pestañas. Si lo quieres a un margen basta con cambiar center por right o left, según quieras derecha o izquierda, respectivamente.

.tabs-inner .section:first-child {
margin: -10px 0px 30px 0px; /*posición del menú*/
}

.tabs-inner .section:first-child ul {
border-top: 0px solid #000;/*bordes del menú arriba*/
border-bottom: 0px dotted #000;/*bordes del menú abajo*/
}

En esta parte podemos cambiar todo lo que queramos para que se adapte a nuestro gusto. Cambiar el color, que ahora está en negro #000 o el tamaño de la línea, en este código con 0px.
- Si queremos que la línea sea punteada: dotted
- Si queremos que sea a rayas: dashed
- Ahora está en solid que es una línea normal, arriba top y punteada abajo bottom.
- Si quieres que también tenga línea a los lados usa border-left y border-right con el resto de código igual.


.tabs-inner .widget ul {
background: #8fb59e; /*fondo del menú*/
  height: 50px; /* ancho del menú*/
margin-bottom: 0; /* margen abajo*/
  margin-top: 0; /* margen arriba*/
  margin-left: -30px; /* margen izquierda*/
  margin-right: -30px; /* margen derecha*/
}

.tabs-inner .widget li a {
  display: inline-block;
padding: 20px;/*espacio entre pestañas*/
  font:normal bold 12px Arial; /* tipo de letra*/
text-transform: uppercase; /*mayúsculas, si no lo quieres elimína esta línea*/
letter-spacing: 3px; /* espacio entre letras*/
  color: #fff; /* color del texto*/

  border-$startSide: 0px solid #fff; /* borde en la pestaña, así no hay*/
  border-$endSide: 0px solid #fff; /* borde en la pestaña, así no hay*/
}

.tabs-inner .widget li:first-child a {
  border-$startSide: none;  /* borde en la pestaña, así no hay*/
}

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
  color: #8fb59e; /*Color cuando pasamos con el ratón*/
  background-color: #fff; /* fondo de la pestaña cuando pasamos con el ratón*/
  text-decoration: none; /* sin subrayado de enlace*/
}

En todo el resto ya te lo dejo señalado en cada código, cambia al gusto.

Podéis cambiar todos los códigos de color e ir viendo los cambios para visualizar cómo os gusta más, pero si no controláis mucho de código os aconsejo que solamente uséis uno de los códigos que he compartido y cambies donde he puesto  #8fb59e por el color que elijas de tu paleta de colores, es super fácil, no me digas que no! ;)

De todas formas cualquier dudita ya sabes, me lo cuentas en los comentarios de aquí abajo :)


.
Ahora vamos a colocar el código en nuestra plantilla para que nuestro menú quede así de bonito.

 Vamos a Plantilla

 Hacemos una Copia de Seguridad

 Le damos a Editar HTML

 Buscamos en plantilla (si no sabes cómo mira este vídeo) el siguiente código:

.tabs-inner .section
Después borramos todo lo que hay desde ese primer código hasta este otro:

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {  color: $(tabs.selected.text.color);  background-color: $(tabs.selected.background.color);  text-decoration: none;}
Este anterior también se elimina.

 En su lugar pegamos el código que hayamos elegido de los anteriores que os he compartido.

 Guardamos y Listo!

Para que el proceso te resulte mucho más fácil te dejo el vídeo tutorial :)


vídeo




   EXTRA    si te interesa un menú superior fijo, que tenga iconos de redes sociales y además sea responsive, visita el tutorial "Menú desplegable responsive con iconos de redes sociales - Blogger" Te encantará

¿Qué te ha parecido? ¿Fácil o difícil? Podemos adaptarlo todo a  nuestro estilo de blog con unos pocos detalles y crear un menú de páginas a nuestro estilo. 
Si tienes cualquier duda no dudes en comentar aquí debajo. Además me ayudaría muchísimo y me haría muy feliz que le dieras like al vídeo y compartieras en post en tus redes para poder seguir currándome más posts de utilidad y creando más cursos interesantes :)



¿Quieres asegurarte de que tus posts estén perfectos antes de ser publicados?
Te regalo una Check-List que te ayudará en esto.




4 comentarios

17 jun. 2016

Tutorial Blogger: Crea paginas y menu de paginas con pestañas C-10

Crea paginas y un menu de paginas

Uyy, qué bien, casi no queda nada para terminar el curso, ¡Espero que te esté resultando de mucha ayuda!

Esta clase es muy molona, sobre todo la segunda parte, porque esta es bastante sencilla y básica. Vamos a crear nuestras páginas y poner un menú de páginas en nuestro blog y nos va a quedar chulísimo cuando terminemos las dos partes, puedes ver como quedaría en este blog de pruebas.

consejos  

En este post solo nos vamos a centrar en la parte técnica, pero en próximos posts te hablaré de qué páginas son obligatorias en un blog, el porqué, y cómo deben estar estructuradas. De momento os diré que debemos tener por lo menos 3 páginas:

  Página Principal o Home : es una página que siempre nos lleva a la página de inicio del blog, donde los posts se encuentran publicados aleatoriamente (en cuanto a etiquetas) y cronológicamente (según fecha de publicación).

  Sobre mi : imprescindible de todo punto, ya que debemos mostrar quienes somos de forma más detallada para que nuestro lector o nuestra lectora sepa que estas palabras son escritas por alguien con una dedicación especial, única y propia. Es una buena forma de "conectar" con tus lectores/as.

  Contacto : otra imprescindible, ya que si nuestros lectores o nuestras lectoras quieren contactar con nostras/os para decirnos cualquier cosa, como consultar alguna duda, o algún tipo de sugerencia, siempre tendrán visible cómo hacerlo.

  Otras: por ejemplo podemos poner páginas que encajen solo los posts de alguna etiqueta en concreto, es uno de los beneficios de un buen etiquetado de nuestros posts. O también podemos añadir alguna de nuestras redes sociales.

Pues , una vez que sabemos esto vamos a crear las páginas y a crear el menú donde las enlazaremos.

comenzamos la clase


Crea las páginas es algo muy sencillo, es igual que crear una entrada, visualmente es lo mismo, pero a la hora de publicarla no la encontraremos en ningún lugar si no creamos un menú de páginas.

Además, otra diferencia con las entradas es que para crear una página debemos ir a Páginas, en el menú lateral del panel de nuestro blog, aquí;

crear-pagina-en-blogger

Le damos y aparecemos aquí, donde tenemos que darle a Página Nueva para crear nuestra página:

crear-pagina-en-blogger

Ahora toca redactar la página, y esto funciona de la misma manera que una entrada, salvo por un par de diferencias, como las etiquetas, pero resta trabajo únicamente.

Una vez creadas nuestras páginas vamos a instalar nuestro menú de páginas.

Instalar menú de páginas encima de la cabecera: para esto no vamos a usar el mismo procedimiento y es algo que trataremos en posts futuros que no formarán parte del curso. 

      Aunque tengamos un menú encima de la cabecera es muy aconsejable tener un menú debajo de ella. Podemos separar las temáticas según nos convenga, por ejemplo, en el menú de encima de la cabecera el "Sobre mi, Contacto, Confianza..." y en el de debajo de la cabecera algunas de las categorías o temáticas de tu blog (etiquetas) Pronto veremos cómo hacerlo.



Instalar menú de páginas debajo de la cabecera:

Esta es la parte que nos atañe y como ya me he liado bastante voy a ir al grano. 

  Vamos a Diseño

  Donde pone Cross-Column vamos a añadir un gadget

  En la ventana que se nos abre, buscamos Páginas ( Muestra una lista de páginas independientes en tu blog.) y la seleccionamos

  En esta nueva ventana seleccionamos las páginas que queremos que aparezcan en el menú.

  Si queremos añadir alguna página que sea una etiqueta es tan sencillo como añadir enlace externo, escribir el nombre (título) y añadir la URL de esa página. En el vídeo lo tienes muy bien explicado.

  Guardamos y listo.

vídeo






   EXTRA    si te interesa un menú superior fijo, que tenga iconos de redes sociales y además sea responsive, visita el tutorial "Menú desplegable responsive con iconos de redes sociales - Blogger" Te encantará


En la siguiente clase veremos cómo personalizarlo y ponerlo chulo chulo Mientras puedes ir mejorando el diseño de tus páginas con fotos chulas y un texto bien redactado.

   ¿Te ha gustado esta clase? ¿Crees que es útil tener un menú de páginas?  




¿Quieres asegurarte de que tus posts estén perfectos antes de ser publicados?
Te regalo una Check-List que te ayudará en esto.




4 comentarios

13 jun. 2016

Tutorial Blogger: Personaliza un solo titulo de Gadget C9-P2


En la anterior clase vimos como podíamos personalizar todos los títulos de nuestros gadgets en conjunto, pero si lo que queremos es personalizar solo un título ¿Cómo lo hacemos? 

Pueden existir varias opciones, como por ejemplo que tengas todos los títulos personalizados pero que uno en concreto no quieras que aparezca el título, o que sea de otra forma.

Esto es bastante sencillo aunque no lo parezca. En esta clase voy a explicar cómo modificar uno de los títulos, y si lo que quieres es que cada uno de los títulos sea diferente solo tendrás que repetir los pasos con los diferentes gadgets del sidebar/columna lateral del blog.


empezamos

Modificar el título de un gadget

En un primer momento lo que debemos hacer es saber qué título queremos modificar, para saber cómo se llama nuestro gadget en código y así usarlo para darle el estilo.

Nos vamos al gadget en cuestión y le hacemos click derecho encima de su título y le damos a inspeccionar.

Así podremos ver cómo le llama Blogger a ese gadget en concreto. En el vídeo te lo explico mucho mejor, para que puedas llevarlo a la práctica sin problemas.

Una vez que sabemos cómo se llama nos vamos a Plantilla.

Copia de seguridad, como siempre, por si las moscas.

Editar HTML y vamos a buscar dentro de nuestra plantilla (si no sabes cómo mira este vídeo) el siguiente código:

h2 {

y debajo de su paréntesis de cierre ( este } ) pegamos el siguiente código, con nuestras modificaciones correspondientes (para las modificaciones puedes y debes guiarte por la clase anterior) :

yo he usado un Washi Tape de color diferente al del resto de los títulos de los gadget, este;


lo he usado en el de mi Instagram, pero puedes usarlo en el gadget que  quieras. (más adelante os enseñaré a incluir un feed de Instagram ;) )


#HTML3 .title {font-family: 'Arial' !important;  font-size:11px !important; color: #666 !important;  text-transform: uppercase; letter-spacing: 4px; text-align: center; background-image: url(https://2.bp.blogspot.com/-_bGzmG2doyA/V07nAqQuz8I/AAAAAAAAG7g/Hnnr9dFq6lsbS9DJVXiq1USqRUsSRWEBACLcB/s1600/5washitape-instagram.png); padding: 15px;}
Guardamos plantilla y listo!

* Tan solo debemos nombrar en la etiqueta que empieza con "#" el widget que queremos modificar y especificar que solo queremos modificar el título con la etiqueta ".title"



Un gadget sin título

Si no quieres que aparezca un título en concreto es muy sencillo, simplemente tendrás que llevar el mismo procedimiento que el anterior pero en vez de pegar ese código, pegas el siguiente (con el nombre de tu gadget precedido de almohadilla!! ) :

#HTML3 .title {
display:none;
}

Listo!! Todo muy masticadito eeeh!  Espero que os haya gustado!

Es bastante sencillo pero si por cualquier cosa encuentras impedimentos házmelo saber y lo arreglamos juntas :)

  Os dejo con el vídeo ...

vídeo







¿Has hecho alguna modificación? ¿Prefieres dejar todos los títulos iguales? Cuéntamelo en los comentarios :)


suscríbete


   

No hay comentarios

10 jun. 2016

Tutorial Blogger: Como instalar fuentes en Blogger

Tutorial Blogger: Como instalar fuentes en Blogger

Cuando nos paseamos por blogs nos damos cuenta al instante de lo cómodo, o incómodo, que nos resulta pasar un rato leyendo en cada blog. Quizás no nos preguntamos porqué, pero notamos que en ciertos blogs estamos más cómodas/os que en otros. Una de las razones principales es por el tipo de letra que se usa para redactar las entradas.

Inciso!! Al final del post hay regalo! :)

Obviamente no es el único punto importante, pero sí que es uno de los detalles imprescindibles a tener en cuenta

Digamos que si nos encontramos tipografías un tanto ilegibles y difíciles de entender, nos cansaremos visualmente y como no nos interese muchísimo la información, nos iremos pronto de ese blog

Pues eso mismo le ocurre a tus lectores/as así que debemos tener en cuenta esto , siempre, para elegir un tipo de letra para nuestro blog.

Blogger nos ofrece bastantes tipos de letra para usar en nuestro blog y en nuestras entradas, y ciertamente muchas de ellas nos servirían perfectamente para crear una fácil lectura y crear una redacción bonita. Pero a veces somos "culos inquietos" y queremos algo más de lo que Blogger nos ofrece, y eso está genial y es muy válido. Por eso hoy os traigo este tutorial, para que puedas elegir el tipo de letra que quieras para personalizar más todavía tu blog.

Estos tipos de letra que nos vamos a instalar, no solo sirven para nuestros post/entradas, si no que también los podemos usar en los títulos de entradas y sidebar (gadgets de la barra lateral) y esto es ya un punto y aparte en la personalización de nuestro blog porque es una forma importante de acentuar nuestro estilo y personalización.

Si ya conoces mi curso para crear y diseñar tu blog desde cero en varias clases podrás descubrir que tras instalar estas fuentes, podrás modificar tus fuentes donde aparezca lo siguiente;

font-family:

Ya que ese código es el que define el tipo de letra de aquel "apartado" o sección que queramos personalizar. Puedes usar estas tipografías en todos los lugares que quieras, simplemente añadiendo el CSS (código de estilo) que te proporciona la fuente que instales.

Vamos a empezar con la parte práctica ya, porque me podría pasar largo rato hablando sobre tipografías en tu blog, pero lo vamos a dejar para otro post.

     ACTUALIZACIÓN:     Google Fonts ha cambiado la interfaz de la página donde podemos conseguir los tipos de letra y por lo tanto he modificado el post para que sea realmente de utilidad, y también he eliminado el vídeo antiguo (no sirve para nada) y he creado uno nuevo.    


Te lo voy a explicar paso a paso, como de costumbre, y con un vídeo, así que no tengas miedo, vé paso a paso y quedará tal como quieres.

- Vamos a la página de Google.com/fonts

- Elegimos las tipografías que nos gusten, y cuando veamos alguna que nos interesa de verdad

- Le damos a  , pero te aconsejo no elegir demasiadas. 

Ya sabes que menos es más. Aunque al principio quizás quieras, o tengas, que probar varias, al final es mejor quedarse con las que realmente vas a usar, para no llenar la plantilla de código innecesario porque será perjudicial para nuestro blog.

Una vez que tengas tus tipografías elegidas vamos a darle a donde te muestro en la imagen, que está aquí, mira:



y entonces se despliega el lugar donde puedes elegir las variaciones de cada tipografía que puedes elegir en CUSTOMIZE (nº2 de la siguiente imagen), y los códigos que necesitamos en EMBED (nº1 de la siguiente imagen).



Realmente en CUSTOMIZE te aconsejo seleccionar solo las clásicas:

Bold (700) , Normal Italic (400)  y Normal (400)

Una vez que las tenemos seleccionadas toca copiar el código que te facilita Google/fonts en EMBED - STANDARD:

y ahora nos vamos al blog:

- Plantilla
- Copia de seguridad
- Buscamos en plantilla este código (si no sabes como mira este vídeo)

</head>
- y justo antes pegamos el código que hemos copiado en Google/fonts.

  / / /   A T E N C I Ó N   \ \ \   porque a ese código le falta algo para que funcione, antes de su carácter de cierre , osea este   >   tenemos que poner una barra como esta   /   y entonces sí que podemos darle a

- Guardar Plantilla y listo, ya podremos usar nuestros nuevos tipos de letra.


Cambia las fuentes en tu blog

Para poder usarlo como he dicho antes, podrás modificar las partes de tu plantilla donde encuentres

font-family:

y tendrás que poner el código que Google/fonts te facilita , nº 4 de la imagen que te he compartido más arriba.

Esos serán los códigos que tendrás que usar para modificar el tipo de letra de aquella parte de tu blog que prefieras. En mi caso aparecen 2 porque son las que he elegido, pero en tu caso aparecerán las que tu escogieras. 

  Un detalle a tener en cuenta   es que podrás cambiar la tipografía de todas tus entradas por defecto, pero dentro de ellas no tendrás una opción sencilla,  en el editor de entradas, donde puedas elegir tus tipografías, así que, quizás sea complejo en un mismo posts cambiar de tipografía varias veces. 

Para esto deberías entrar en la parte HTML de tu editor de entradas y cambiar la parte font-family: ... por aquella que hayas instalado de Google/fonts con el código del apartado 4 de la última imagen que te he compartido. No te lo recomiendo, más bien te recomiendo que crees un texto citado por defecto, con otro tipo de letra u otro estilo (CSS ya personalizado en tu plantilla, lo veremos en la clase número 13

Cambiar la tipografía de todas tus entradas 

Buscar en tu plantilla 

.post-body {


y después pegar el código que google/fonts te comparte en ese apartado número 4 (imagen anterior)

- Guardar Plantilla y Ver blog.


 / / /   I M P O R T A N T E \ \ \ T R U C O / / /  algunos tipos de letras parece no funcionar, el cambio de código no surge efecto y esto es debido a que existen tipos de letras que solo se componen de su nombre, sin nada después de la coma, como es el caso que he elegido en el vídeo. Elimina la coma y el problema estará resuelto. 

Te explico todo con detalle en el vídeo, para que no se te pase nada y te resulte todo más dinámico y sencillo :)




Espero que os haya gustado, creo que os encantará porque es muy útil este tutorial y seguro que ya teníais ganas. Además saber cómo solucionar esos problemillas e impedimentos que Google nos ha creado, nos ayuda a superar pequeñas frustraciones.

Por cierto que espero que me comentes algunas sugerencias para posts futuros, ya tengo unos cuantos preparados muy útiles gracias a vuestras sugerencias :)

Que paséis un finde estupendo!! Y por cierto,   EL REGALO  : os comento que si os gustan los organizadores semanales he diseñado uno en la colaboración que he empezado con Frikymama, dale click a la siguiente imagen para ir al post donde te lo puedes descargar! :)









   


1 comentario
© Blogger Paso a Paso • Theme by Maira G. Adaptada por Mónica Lemos, autora de este blog.
Todas las imágenes son del banco de imágenes Unsplash.com o bien de mi propia autoría.
Si quieres puedes reclamar tu autoría - Contactar con la autora del blog.