Personaliza tu pie de entrada

2/11/15
Dado el gran éxito que ha tenido mi cortita reseña de Downton Abbey (venga chicos, tan poquito confiáis en mi criterio? Jajajajaja) repetiré la noticia aquí mismo: 
Por motivos ajenos a mi fuerza de voluntad y capacidad tengo que dejar los idiomas (o al menos uno de ellos) por causas que requieren mi atención. No sigáis mi ejemplo ;)
Hoy traigo dos mini-tutoriales. Digo mini, porque es realmente simple. Bueeeeeeno, al menos el primero.
Vas a aprende a personalizar las etiquetas y añadir iconos para compartir a pie de entrada.
¡Empecemos!


CÓMO PERSONAlIZAR LAS ETIQUETAS

A mí hay una cosa que me trae de cabeza.  Y no es la coma entre las etiquetas. Hay mil tutoriales sobre eso en internet. Yo la cambié por una barra, jajajaja. 
No. Mi pequeño gran trauma era cómo quitar esto:


Etiquetas: 
Busqué por la información bastante tiempo. Puse el símbolo de un corazón hasta que inventé la solución. Seguramente esté en algún lado, pero no lo llegué a encontrar. Así que lo cuento aquí por si alguien ha tenido el mismo problema. 
Había leído varias cosas de html en ciertos blogs y en páginas web. Y recordé que   es algo parecido a lo que os conté en el post de cómo poner gadgets sin título. Significa algo así como ''en blanco''. 

Pues bien, es muy sencillo. Entramos en Diseño>Entradas del blog>Editar 
Bajamos al apartado de las etiquetas, y pegamos el código que escribí ahí arriba, tal que así: 


Y listo. Así solo aparecerán las etiquetas. Realmente la solución es súper sencilla ,¿no?  También tengo mis etiquetas personalizadas. Os dejo aquí el código CSS que tengo yo en mi plantilla, por si os ha gustado el efecto, pero lo cierto es que no recuerdo de dónde lo saqué, jajajaja.
Menos éste código CSS que no sé de dónde saqué, lo demás es invención mía eh ;)

Plantilla>Personalizar>Añadir CSS

.post-labels {border-top: 0px solid #f2f2f2; /*Línea superior */border-bottom: 2px solid #f2f2f2; /*Línea inferior */border-left: 0px solid #cccccc; /*Línea superior */border-right: 0px solid #cccccc; /*Línea inferior */margin-top: 0px;background:#ffffff; /*Color de fondo*/padding:7px; /*Altura de la caja*/width:500px;font-size:11px;display:block; /*Si queréis que os ocupe todo el ancho de la entrada la caja de las etiquetas, borrad esta línea*/text-transform:uppercase; /*Letras en mayúscula*/}.post-labels a:link {color:#555555;background:transparent; /*Si quieres fondo, pon el código de un color*/padding:7px;margin-right:3px;}


Ésto ha sido fácil, ¿no? Pues en el siguiente viene lo complicado, pero también el resultado es más chulo. Para centrar las etiquetas... eso es más ''complicado''.
 Si alguien quiere saberlo, que me mande un correo al formulario de sugerencias.
¡ACUÉRDATE DE HACER COPIA DE SEGURIDAD!

PONER ICONOS PARA COMPARTIR AL PIE DE LAS ENTRADAS

Mi pie de página es así:  
Tiene las etiquetas personalizadas que os enseñé a hacer arriba, el ''leer más'' y ¿veis esos iconos en el medio? sirven para compartir en las redes sociales la entrada del blog o el blog mismo. 
Y al lado de todos los iconos de compartir, se puede apreciar como unos bocatas de conversación. Es el enlace a comentarios.
Antes el enlace era una frase entera: ''Tsk... (nº de comentarios) déjame tú uno, anda.''
Si alguien prefiere ponerlo de ésta forma (con una frase), que siga éste tutorial.

¿Preferís mi forma? ¡Vamos allá!


Antes de nada decir que la idea la saqué de éste tutorial de objetivo tutifruti. Aquí ella enseña a poner iconos al final de cada entrada, pero con imágenes propias. Está muy bien, pero yo no quería usar imágenes, quería usar los iconos de Font Awesome. Y eso fue un poco más difícil de conseguir.

Vayamos por partes: las personas que queráis utilizar vuestras propias imágenes, entrad en el tutorial de objetivo tutifruti. 
Los que queráis utilizar los iconos de Font Awesome, seguidme, por favor.
Yo prefiero la última opción porque tiro más a diseños minimalistas. Pero para gustos...

CÓMO INSTALAR FONT AWESOME

Ésto va a ser un tutorial dentro de un tutorial, jajajaja. Primero os voy a explicar qué es Font Awesome y cómo instalarlo. 
Font Awesome es una fuente de iconos web, como Icon Finder o Socicon. Tiene un catálogo donde puedes escoger el icono que más te guste. 
Antes de utilizar ésta opción tenemos que instalarlo. Pero eh, no te vayas, eso es súper fácil. 

Entra en Plantilla>HTML y busca: <head>
Justo debajo, pega la siguiente línea: 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"/>

¿Ves? No es complicado.




AVISO: yo no voy a explicar aquí cómo se ponen los iconos ni en la barra superior, ni en el sidebar. Sólo explicaré cómo ponerlos en el pie de página. Si a alguien le interesa que haga otro tutorial, que me lo haga saber.
El código original lo saqué de Add to any


Con las correspondientes imágenes, que se ven en ésta foto. A mí éstos logos no me entusiasman, y no cuajan bien con el diseño de mi blog. Y como ya dije arriba, no quería simplemente poner otra URL para otra imágen. Así que cambié el código para poder usar los iconos que quería. 

Le das a CTRL+F y buscas:

 <div class='post-footer'>

→ Nosotros necesitamos el segundo, así que le das a enter dos veces. Justo debajo, pegas el siguiente código:


<center><div class='a2a_kit'>    <a class='a2a_button_facebook'>        <i alt='Facebook' border='0' height='55' width='54'/><i class='fa fa-facebook'/>    </a>    <a class='a2a_button_twitter'>        <i alt='Twitter' border='0' height='55' width='54'/><i class='fa fa-twitter'/>  </a> <a class='a2a_button_google_plus'>        <i alt='Google+' border='0' height='55' width='54'/><i class='fa fa-google-plus'/>  </a><a class='a2a_dd' href='https://www.addtoany.com/share'> /*no toques esto.*/        <i alt='Share' border='0' height='55' width='54'/><i class='fa fa-plus'/>    </a></div></center>


→ Si quieres añadir otra red social, lo único que tienes que hacer es añadir debajo de la última </a> ésto: 

<a class='a2a_button_google_plus'>        <i alt='Google+' border='0' height='55' width='54'/><i class='fa fa-google-plus'/>
  </a>


Y cambiar lo que está en azul por el código del icono que queráis. Podéis elegir en el catálogo.
Si lo quieres dejar así, estupendo. Se ha terminado. 
Si no te conformas, no pegues el código todavía, vamos a por la última parte del tutorial. 

CÓMO PERSONALIZAR EL ENLACE A COMENTARIOS

Ya sé que dije que era mini, jeje. Pero se ha alargado más de lo que esperaba. Quiero que quede todo claro. Así que bueno, es largo. Pero no es difícil. Solo tenéis que seguir los pasos poco a poco. 
Entramos en Plantilla>Editar HTML
Pulsamos CTRL+F y buscamos lo siguiente: 

<data:post.commentLabelFull/>

El primero de la plantilla. (Al menos en mi caso lo es)

Una vez localizada esa línea, la borras. Y copias las líneas que tiene justito encima:

 <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>

Guarda esas líneas en el bloc de notas, mismamente. Busca en el catálogo los iconos de conversación que más te gusten. En mi caso yo escogí éste:

<i class='fa fa-comments'/>

 Lo uniremos con las líneas que hemos guardado en el blog de notas. Quedará así:


 <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><i class='fa fa-comments'/></a>


Y ésto, lo vamos a unir con el código que dejé arriba. Quedará así:

<center><div class='a2a_kit'>    <a class='a2a_button_facebook'>        <i alt='Facebook' border='0' height='55' width='54'/><i class='fa fa-facebook'/>
    </a>         <a class='a2a_button_twitter'>        <i alt='Twitter' border='0' height='55' width='54'/><i class='fa fa-twitter'/>  </a>      <a class='a2a_button_google_plus'>        <i alt='Google+' border='0' height='55' width='54'/><i class='fa fa-google-plus'/>
  </a>         <a class='a2a_dd' href='https://www.addtoany.com/share'>        <i alt='Share' border='0' height='55' width='54'/><i class='fa fa-plus'/>
    </a> <i class='fa fa-comments'/>    <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>

                                   </a>  </div></center>


Le das a CTRL+F y buscas:

 <div class='post-footer'>

Como dije arriba, necesitamos el segundo, así que le das a enter dos veces. Justo debajo, pegas el código que tienes justo arriba.



Yyy solo queda... ¡Lo último!(Prometido) Personalizar nuestros iconos con código CSS


PERSONALIZAR FONT AWESOME

Plantilla>Personalizar>Añadir CSS (Y pega el siguiente código)

1. Personalizar todos los iconos.


.fa{color: #666666; /*Color del icono*/background: transparent; /*Fondo del icono*/border: 0px solid #333333; /*Borde*/font-size: 13px; /*Tamaño del icono*/margin-bottom: 10px;margin-top: -12px;

}.fa:hover{ /*Al pasar el ratón por encima*/color: #ffffff; /*Color del icono*/background: transparent; /*Fondo del icono*/border: 0px solid #eeeeee; /*El borde*/-moz-transition: all 0.5s ease-in-out; /*Todo ésto en rojo es para hacer que los iconos giren cuando pasas el ratón sobre ellos*/-webkit-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;-moz-transform: rotate(360deg);-webkit-transform: rotate(360deg);-o-transform: rotate(360deg);transform: rotate(-360deg);}

2. Personalizar un solo icono de Font Awesome


.fa-twitter{color: #666666; /*Color del icono*/background: transparent; /*Fondo del icono*/border: 0px solid #333333; /*Borde*/font-size: 13px; /*Tamaño del icono*/margin-bottom: 10px;margin-top: -12px;

}.fa-twitter:hover{ /*Al pasar el ratón por encima*/color: #ffffff; /*Color del icono*/background: transparent; /*Fondo del icono*/border: 0px solid #eeeeee; /*El borde*/-moz-transition: all 0.5s ease-in-out; /*Todo ésto en rojo es para hacer que los iconos giren cuando pasas el ratón sobre ellos. Si no lo quieres, bórralo.*/-webkit-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;-moz-transform: rotate(360deg);-webkit-transform: rotate(360deg);-o-transform: rotate(360deg);transform: rotate(-360deg);}



3. Poner bordes o fondo redondeado en Font Awesome



.fa{ background-color: #999999; /*Color de fondo*/ border: 1x solid #999999; /*Color de borde*/ width: 13px; height: 13px; text-align: center; padding: 8px 8px;
 border-radius: 18px;margin-bottom: 10px;margin-top: -12px
}



Os animo a que no toquéis los números de tamaño (widht, height, padding, margin...) porque se os desajustará la imagen y tendréis que encontrar unas medidas específicas para que esté en un círculo perfecto.

*Ya sé que esto no aparecía hace unos días. Voy añadiendo cosas según se me van ocurriendo y saliendo bien. Si se me ocurre algo más, seguiré actualizando.*

Cambiando lo que está en naranja por el nombre de la red social que deseas personalizar. Tendréis que repetir la operación tantas veces como queráis personalizar los distintos iconos.



Na, terminamos por hoy. Dale a vista previa, y modifica el CSS a tu gusto. Yo no tengo nada más que añadir. Para cualquier duda, un correo. 
Y ya que estás aquí, déjame un comentario, que me ha costado mucho explicarlo todo, jajajaja. 
Me río, pero lo digo en serio. ¡Y a suscribirse si aún no lo has hecho!

Muaaaa!!



12 comentarios

  1. Genial Nereaa¡¡ Le daré uso a este tutorial que iba necesitando un cambio¡¡ Muchas gracias por tu aportación ;) sigue así¡¡

    ResponderEliminar
    Respuestas
    1. Estoy intentando hacer lo de Font Awesome y no soy capaz...es que no entiendo qué es lo que hace ni como se instala... aay, que torpe :P
      Un saludo :)

      Eliminar
    2. Es que es algo complicado. Ahora te mando un e-mail y te explico mejor!
      Mua

      Eliminar
    3. Mil gracias guapa¡¡ :)

      Eliminar
  2. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
  3. ¡Hola! Wauuuuu más que un "mini-tutorial" son muchos juntos, que wai, sirve de muchisima ayuda :). Menudo currazo de entrada has hecho ^^

    ResponderEliminar
    Respuestas
    1. Son éstas entradas que cuestan más escribirlas que ponerlas en práctica... jajajaja
      Cuando empecé a trabajar con font awesome, no sabía ponerlo ni en las flechas de pie de página. Me exasperaba. No sé qué narices hacía mal. Pero cuando lo entiendes, por fin, es súper fácil.
      De todos modos, no he conseguido POR COMPLETO el acabado que quería. Aún sigo dándole vueltas para mejorarlo. jejeje

      No sé si lo he explicado del todo bien... Pero bueno, iré resolviendo las dudas que vayan surgiendo.
      Mmmua!

      Eliminar
  4. Todas estas entradas de tutoriales me parecen muy muy útiles. He recurrido a muchos y la verdad es que le dan un aspecto al blog genial. Cuando me comentabas lo de los índices, ¿te referías a las etiquetas? Yo es que no las tengo puestas porque en mi caso, sería prácticamente lo mismo que tengo puesto en el menú :P.
    Un saludo :)

    ResponderEliminar
    Respuestas
    1. Hago poquísimos tutoriales, la verdad. No sé si es lo que mejor se me da.
      No. Hablo de una página estática donde pones todas tus entradas ordenadas de alguna forma. Yo tengo el índice general , en la barra superior. Y dos índices que dan pena, por autor y por título, de mis reseñas , jajajajaja.
      No sabes lo que leía yo eh, devoraba los libros. Y si tuviera tiempo seguiría haciéndolo. Esa sección no sería tan pequeña!

      Eliminar
  5. Guaaauuu! Vaya tutorial más completo! *-* Tiene gracia, porque siempre que he querido modificar el pie de página nunca he encontrado tutoriales buenos sobre cómo hacerlo, parece que hay tutoriales relativos a cualquier cosa menos a este tema, ¡gracias gracias por compartirlo!

    Me lo guardo para cuando le pueda echar un ojo más detenidamente (; Un beso!

    ResponderEliminar
    Respuestas
    1. Sí... me pasó lo mismo... Me volví loca buscando la forma de hacerlo, y que fuera gratis. Así que tuve que inventarme una forma. No te digo yo que haya otras más fáciles por ahí, pero solo se me ocurrió esta y funciona, así que muy contenta.

      Espero que lo entiendas todo bien y no me haya olvidado de explicar nada. Es la primera vez que hago uno tan largo y no sé si está todo claro, pero sino mándame un email y te ayudo. Jajajaja
      Mua!!

      Eliminar
  6. Este si lo entendí (bueno un poco ) pero lo leer con atención. Buen tuto, gracias.

    ResponderEliminar