Modificar el título de las entradas

Blogger tiene como opción preestablecida el que los títulos de tus entradas aparezcan siempre desplazadas hacia la izquierda, pero si, como yo, las prefieres centradas, es muy fácil de conseguir!

Ya sabes, sólo un poco de código y ya estaría! ;)

text-align: center; 

Además, si quieres añadir una línea en los títulos de los enlaces, sólo tendrás que añadir estos códigos:

border-top: 1px solid #000000;  (para una línea encima de los títulos)

border-bottom: 1px solid #000000;  (para añadir una línea debajo de los títulos de las entradas)

1 :Aquí, por supuesto, podrás modificar el grosor de la línea
#000000 : y aquí el color de la línea

Al final, el código puede quedar así:

h3.post-title {
color: #fe8181; 
border-bottom: 1px solid #fe8181; 
text-align: center; 
}

Aquí estamos diciendo que queremos los títulos de las entradas (h3.post-title) de color rosita (#fe8181), con una línea debajo (border-bottom) de i pixel de grosor y del mismo color rosa.
Además, estamos indicando a la plantilla que queremos la alineación del texto del título (text-align) centrada (center).

Fácil, verdad?

Modificar la fecha de tus entradas

A mi me gusta más tener la fecha de las entradas justo debajo del título de las mismas, pero para modificar su localización tendrás que tocar un poco de la plantilla html.

Pero, antes que nada, tendrás que ir a CONFIGURACION => Idioma y Formato y escoger la apariencia de la fecha, en términos de números y datos. Por ejemplo, yo en este blog he querido que no se mostrara la hora en que publico las entadas, pero sí la fecha, de este modo:

día / mes / año

pero eso va a gustos. Escoge tú el formato que prefieres y dale a guardar.

Antes de tocar la plantilla, acuérdate de hacer una copia de seguridad: PLANTILLA => Crear/Restablecer copia de seguridad.

Pues bien, vamos a PLANTILLA => Editar HTML => buscamos (CTRL+F) data:post.dateHeader =>  y borramos estos tres párrafos:

<b:if cond='data:post.dateHeader'>
          <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
        </b:if>

 => ahora buscamos (CTRL+F) b:includable id='post' var='post => y miramos unos cuantos párrafos más abajo, hasta encontrar </h3> => y, justo debajo, pegaremos el código que anteriormente hemos borrado:

<b:if cond='data:post.dateHeader'>
          <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
        </b:if>

Con esto ya hemos conseguido que la fecha se muestre debajo del título de las entradas pero si, como yo, quieres que ésta, además, esté centradita, tendrás que pegar, en vez del código anterior, este que te doy:

<b:if cond='data:post.dateHeader'>
   <center><h2 class='date-header'><span><data:post.dateHeader/></span></h2></center>
</b:if>

Se acabó! Guarda los cambios y dale a Ver Blog para que veas cómo ahora la fecha te aparece debajo del título de las entradas y, según lo hayas elegido así o no, centrada.

Peeeeeerooooo.....si, además quieres modificar o eliminar el rectángulo que hace de fondo a la fecha, o quieres modificar el color mismo de ésta, hará falta un poco más.....:
Aplica este código CSS para eliminar o modificar el color del fondo de la fecha (background-color: (transparent si no quieres, o #ffffff con el color que prefieras) y este otro para modificar el color de las letras y/o números de la fecha (color: #96ceb4)

.date-header span {
background-color: transparent;
color: #96ceb4;
}

Y, por último (buff!!) si pretendes cambiar el tamaño o la tipografía de la fecha, aplica este código CSS: si quieres cambiar el tamaño, modifica donde pone 11, la tipografía, modifica donde pone 'Open Sans' y, si la prefieres más finita, borra "bold". Voilá! Acordaos que AQUÍ os he explicado cómo cambiar las tipografías.

h2 {
font: normal bold 11px 'Open Sans';
}

Cambiar el color y tamaño de las letras

En un post anterior te enseñé a cambiar la tipografía de tu blog, pero ahora quiero enseñarte a cambiar el color y el texto de esas tipografías.

Para ello, añadiremos un poco más de código CSS al que pusimos cuando cambiamos la tipografía.

Concretamente, añadiremos  FONT-SIZE para el tamaño, en píxeles, de la letra;  y COLOR para el color de la letra. Quedaría, por ejemplo, así:

h3.post-title {
font-family: 'Open Sans', sans-serif;
font-size: 14px;
color: #666666;
}

En este código, como ya sabemos, le indicamos a nuestra plantilla que queremos que en los títulos de las entradas (h3.post-title) se aplique la tipografía Open Sans, pero además, le decimos que queremos que esa tipografía tenga un tamaño (font-size) de 14 píxeles y un color (color) gris.

Podemos modificar sólo el color o sólo el tamaño, como queramos.

La pregunta es.... ¿CÓMO SE LOS CÓDIGOS DE LOS COLORES PARA MI BLOG?

Fácilmente, de verdad! Para empezar, te voy a dar dos webs** que te ayudarán un montón para saber o escoger los colores de tu blog. Estos colores tienen un código "internacional". ¿Qué quiere esto decir? Pues que si yo digo #666666 aquí o en China, el color será el mismo. Además, estos códigos los saben interpretar la grandísima mayoría de los programas de diseño.

Para empezar, entra en esta web para escoger el código de color HTML. Ahí, haz clic sobre el color que te gusta y verás como en seguida te aparece un recuadro con el color y su código. Pues...ya lo tienes! Este código tienes que usarlo SIEMPRE con el símbolo # delante.

Así, por ejemplo, si quieres la letra del título de tus entradas sea de color rojizo, en el código CSS pondrás:

h3.post-title {
font-family: 'Open Sans', sans-serif;
font-size: 14px;
color: #DF0101;
}

Siendo #DF0101 el código que te ha dado el programa.

Si, por el contrario, tienes un código pero no sabes a qué color se corresponde, simplemente escríbelo donde dice INTRODUZCA SU CÓDIGO DE COLOR y el programa te lo mostrará.

También te permite deslizar el cursor dentro del recuadro grande para seleccionar un tono particular.

** Webs donde puedes escoger tu código de color:

CODIGO DE COLORES HTML
COLOR HEX

Cambiar el tipo de letra de tu blog

Hoy te voy a explicar cómo cambiar la tipografía de tu blog.

Tal vez ya te parezca correcta la tipografía de tu plantilla, pero, si quieres cambiarla, es posible!

Puedes cambiar la tipografía de tus entradas, o de los titulares de éstas, o del título de los gadgets, etcétera.

Empezaremos por ir a GOOGLE FONTS y allí escogeremos el tipo de letra que más nos guste. Por ejemplo, en este blog la tipografía de mis entradas es la Open Sans.

Bien, pues, una vez hemos escogido la tipografía, le damos a Add to Collection y luego a Use. Veremos que nos da varios códigos que tendremos que añadir a nuestra plantilla:

Empezaremos por copiar el link que nos da Google Fonts en el punto 3: Add this code to your website. Para ello, nos vamos a PLANTILLA => (guarda una copia!) => Editar HTML => buscamos (CTRL+F) <head> => justo debajo pegaremos el link pero, OJO, una vez lo hayas hecho y ANTES DE GUARDAR LOS CAMBIOS, añade el / antes de >. Esto es muy importante ya que si no te dará error!

Quedaría así: (en esta imagen verás que hay dos tipografías, Open Sans y Parisienne, porque tengo ambas en el blog)

Primera parte terminada! Ahora vamos de nuevo a PLANTILLA => PERSONALIZAR => AVANZADO => Añadir CSS => aquí vamos a pegar un código para que la tipografía que has escogido se aplique a donde tú digas. El código va a a ser diferente dependiendo de si lo que quieres modificar es la letra de tus entradas, de los títulos de tus entradas, etcétera.

La imagen de abajo es tal y como yo lo tengo a día de hoy en mi blog:

Te doy los códigos que deberás copiar a tu CSS en función de a qué elemento quieres cambiar la tipografía. Simplemente acuérdate de poner el código CSS que Google Fonts te da para la tipografía que has escogido.  Por ejemplo, en la primera imagen te marco el recuadro del código CSS de Google. En el ejemplo de Open Sans, este sería font-family: 'Open Sans', sans-serif;     

CÓDIGOS CSS PARA CAMBIAR LA TIPOGRAFÍA DE TU BLOG

CUERPO

body { 

  font-family: 'Open Sans', sans-serif;

}

TÍTULO DE LAS ENTRADAS

h3.post-title {

  font-family: 'Open Sans', sans-serif;

}

TÍTULO DE LOS GADGETS

.widget .title {

  font-family: 'Open Sans', sans-serif;

}

Ya está! Ya tienes la tipografía que más te gusta en un tu blog!!

Poner un botón para subir

Ideal para los blogs donde en la página principal hay varios posts para que no tengamos que darle a la barrita lateral subiendo y subiendo hasta volver a la parte superior del blog.

Un "botón" puesto en la esquinita inferior derecha de tu pantalla donde, en cualquier momento y en un solo clic puedas situarte en la parte superior del blog es una delicia, verdad?? :)

Yo lo he puesto en este y te voy a explicar cómo hacerlo, ya es es muy, muy fácil!

Para empezar, necesitarás encontrar una pequeña imagen (de unos 100x100px) para usarla. Yo he escogido una flecha como dibujada a mano. Hay miles de sitios donde puedes descargártelas gratuitamente o bien puedes diseñarla tú con cualquier programa de diseño (desde un photoshop hasta un pixl, picmonkey, etcetera).

Esa imagen necesitarás subirla a una web para que te genere una url. Lo más fácil es usar TYNIPIC, ya que es gratuito y te da la url en nada y menos. Yo me copio la url que me da en "Enlace directo para presentaciones":

Ok, pues. Una vez tengas la imagen que vas a utilizar y la url de la misma (ten en cuenta que Tynipic es una opción, pero no la única, ya que puedes hacer lo mismo subiendo la imagen a tu Google Drive, Google Fotos, Dropbox, etc), es cuando iremos a DISEÑO => añadiremos un gadget html abajo de todo, en el pie o footer del blog y copiaremos el siguiente código:

<a href='#' style='display croll;position:fixed;bottom:0px;right:0px;' title='SUBIR'><img src="URL DE TU IMAGEN", width=100px /></a>

y ya está!

Puedes modificar tanto la palabra que aparecerá cuando se sitúe el cursor encima de la imagen (SUBIR en este ejemplo) como el tamaño de la imagen (100 px en este ejemplo).

Y, donde pone URL DE TU IMAGEN, pega el enlace que te ha dado Tynipic o cualquir otro programa.

Ya tienes un botoncito para subir arriba!! :)