Las imágenes en forma de botones están muy bien, desarrollan tu vena creativa, quedan muy cuquis y todo lo que tú quieras, pero ralentizan la carga de tu blog una barbaridad y más si no sabes cómo aligerar el peso de tus imágenes antes de subirlas.
Así que hoy te voy a contar cómo poner directamente iconos en tu blog y personalizarlos a tu gusto con la aplicación Font Awesome. No sólo vas a aligerar el tiempo de carga, sino que además los vas a poder emplear para hacer chulerías con ellos y lucir un blog más profesional. ¿Estás preparada para darle un make-up remolón a tu blog? pues vamos a ello!
No te voy a descubrir las américas (o quizás sí) porque esta aplicación lleva ya mucho tiempo funcionando y puede que hayas visto algún tutorial. Pero si es así y aún no te has animado, voy a tratar de convencerte. De hecho me he propuesto conseguirlo y te aviso que soy muy cabezota, así que, si no quieres arriesgarte, cierra esta pestaña inmediatamente .
¿Aún sigues aquí? ok, pues empiezo (no me digas que no te lo advertí).
QUÉ ES FONT AWESOME
Por si aún no la conoces, se trata de una aplicación repleta de símbolos de todo tipo, que una vez instalada te da la posibilidad de incorporarlos fácilmente a tu blog echando mano del HTML y el CSS. Si nada más leer esas siglas, te han dado ganas de salir corriendo, para el carro porque cuando te digo que es fácil, es que lo es, hazme caso que te vas a alegrar.
PARA QUÉ PUEDO USAR LOS ICONOS DE FONT AWESOME
Una vez instalada la cartera de iconos, el límite es tu imaginación, pero te voy a dar algunas ideas:
Para sustituir las aburridas viñetas de Blogger a la hora de enumerar opciones, como estoy haciendo yo ahora mismo con estas estrellitas.
Para poner caritas felices o tristes cuando quieres reforzar una emoción
Para usarlos en botones de llamada a la acción. Ejemplo:
Descárgatelo
Imprime la receta
Compra ahora
Para sustituir palabras como etiquetas, fecha, entradas recientes y antiguas, etc... Si te fijas, yo los empleo por todo el blog.
Para crear tus iconos sociales en el sidebar o en el menú
Para embellecer los títulos del sidebar
Para crearte un botón de subir o el botón de Leer más, si acortas tus entradas
Esto es lo que se me ocurre ahora mismo (es que a final de semana, las neuronas están desganadas) pero como te he dicho, el límite está en tu imaginación.
CÓMO INSTALAR FONT AWESOME EN MI BLOG
Que, ya te va gustando la historia verdad? venga, pues vamos al lío, verás que no tiene complicación.
Vámonos a Plantilla>Editar HTML (recuerda hacer tu copia de seguridad)
Haz clic en cualquier sitio (dentro de la plantilla) y pulsa CRTL+F para que te salga la caja de búsqueda. Pega <head> dentro de ella y dale a intro.
Añade este código justo debajo:
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet' type='text/css'/>Guarda los cambios, ya lo tienes instalado. Ahora el siguiente paso es visitar Font Awesome para ver los códigos que vas a usar. Te aconsejo que busques por temáticas, de lo contrario, te pasarás un buen rato haciendo scroll. Por ejemplo, para los iconos sociales deberás seleccionar Brand Icons.
CÓMO USAR LOS ICONOS EN MI BLOG
Vamos con los tutoriales. En el 1º video, te voy a explicar 3 formas de usarlos, incluyendo la instalación de tus redes sociales en el sidebar y a continuación le daremos formato con CSS.
En este vídeo vas a ver:
Cómo poner iconos a lo largo del texto
Cómo poner iconos para viñetas
Cómo poner iconos de redes sociales en el sidebar
Bajo el vídeo, tienes los códigos que necesitas para seguir el tutorial.
Para poner espacios entre texto e iconos, usa esta etiqueta:
Copia este código y pégalo en la parte de Diseño en un gadget HTML/Javascript:
<center><div class="botones-sociales">
<a href="ENLACE A TU RED SOCIAL" target="_blank"><i class="fa fa-facebook"></i></a>
<a href="ENLACE A TU RED SOCIAL" target="_blank"><i class="fa fa-pinterest"></i></a>
<a href="ENLACE A TU RED SOCIAL" target="_blank"><i class="fa fa-youtube"></i></a>
<a href="ENLACE A TU RED SOCIAL" target="_blank"><i class="fa fa-heart"></i></a>
<a href="ENLACE A TU RED SOCIAL" target="_blank"><i class="fa fa-twitter"></i></a>
<a href="ENLACE A TU RED SOCIAL" target="_blank"><i class="fa fa-google-plus"></i></a>
<a href="ENLACE A TU RED SOCIAL" target="_blank"><i class="fa fa-instagram"></i></a>
</div></center>Si no tienes alguna de las redes sociales que te he dejado, selecciona por completo la línea y bórrala. En el texto azul, debes añadir el enlace que lleva a tu red social.
Ahora le toca el turno, a la personalización de esos iconos sociales, para que se muestren totalmente a tu gusto. Lo podrás personalizar de 4 formas distintas, aquí puedes ver cómo quedan:
¿Cual te ha gustado más? Bajo el vídeo tienes las 4 maneras de añadir el CSS, ahora dale al play, para que veas cómo hacerlo:
CAMBIAR COLOR, TAMAÑO Y AÑADIR ESPACIADO:
.botones-sociales a{
position: relative;
margin: 0 auto;
max-width:100%;
color: #6EBFD7;
font-size: 14px;
padding: 5px;
}
.botones-sociales :hover{
color: #FFBDAF;
}
ASIGNAR COLORES DE MANERA INDIVIDUAL:
.botones-sociales a{
position: relative;
margin: 0 auto;
max-width:100%;
font-size: 14px;
padding: 5px;
}
.botones-sociales .fa-facebook {
color: #ffbdaf;
}
.botones-sociales .fa-facebook:hover{
color: #b7cdc0;
}
.botones-sociales .fa-pinterest {
color: #b7cdc0;
}
.botones-sociales .fa-pinterest:hover{
color: #ffbdaf;
}
.botones-sociales .fa-youtube {
color: #ffbdaf;
}
.botones-sociales .fa-youtube:hover{
color: #b7cdc0;
}
.botones-sociales .fa-heart {
color: #b7cdc0;
}
.botones-sociales .fa-heart:hover{
color: #ffbdaf;
}
.botones-sociales .fa-twitter {
color: #ffbdaf;
}
.botones-sociales .fa-twitter:hover{
color: #b7cdc0;
}
.botones-sociales .fa-google-plus {
color: #b7cdc0;
}
.botones-sociales .fa-google-plus:hover{
color: #ffbdaf;
}
.botones-sociales .fa-instagram {
color: #ffbdaf;
}
.botones-sociales .fa-instagram:hover{
color: #b7cdc0;
}
PONER BORDE A LOS ICONOS:
.botones-sociales a{
position: relative;
margin: 0 auto;
max-width:100%;
color: #b7cdc0;
border: 2px solid #ffbdaf;
border-radius:0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
font-size: 14px;
padding: 15px;
line-height: 3.6;
}
.botones-sociales :hover{
color: #ffbdaf;
border: 2px solid #b7cdc0;
border-radius:50px;
-moz-border-radius:50px;
-webkit-border-radius:50px;
}
AÑADIR TEXTURAS DE FONDO A LOS ICONOS:
.botones-sociales a{
position: relative;
margin: 0 auto;
max-width:100%;
color: #ffffff;
background: url(http://i65.tinypic.com/2w6gksh.jpg) repeat;
font-size: 14px;
padding: 15px;
line-height: 3.6;
}
.botones-sociales :hover{
color:#e3abc4;
background: url(http://i63.tinypic.com/2nkt6v5.jpg) repeat;
}¿Te ha gustado? pues prepárate porque las próximas semanas te contaré:
Cómo diseñar un menú desplegable con iconos sociales y buscador.
Cómo diseñar botones de acción personalizados, como este:
o este:
Cómo personalizar con iconos los títulos del sidebar
Cómo sustituir los textos de entradas antiguas y recientes con iconos
Cómo crear y personalizar un botón de subir con iconos
Cómo instalar los iconos en la caja final bajo el post
Y con esto acabamos, espero haberte convencido de la gran ventaja de pasarte a Font Awesome para personalizar tu blog. Ahora ya me puedo marchar tranquila a disfrutar del domingo. Te deseo que tú también lo hagas y ojalá te haya servido mucho la entrada de hoy.
¿Conocías la aplicación Font Awesome? ¿qué próximo tutorial de los que te he adelantado tienes ganas de ver primero? ¿Cómo piensas montarte el domingo? ¿me lo cuentas y charlamos un rato?
Que tengas un gran día!
¿Quieres ir por la vía rápida y conseguir un blog bonito con un sólo clic?
Con mis plantillas prediseñadas, no sólo tendrás un blog que cautive al primer vistazo, sino que además no te costará ningún trabajo instalarla y personalizarla a tu gusto, porque incluyen un PDF con videotutoriales para que sepas cómo adaptar tus contenidos sin problemas. Será como tenerme a tu lado, guiándote en todo momento y además aprenderás a toquetear tu plantilla sin ningún miedo, para incluir los códigos que te facilito. Plantillas hay muchas, pero tan fáciles de instalar como estas, seguro que no
Aquí te las dejo para que le eches un vistazo:
No hay comentarios:
Publicar un comentario