Bueno, bueno, bueno, hacía ya varios posts que no hacía tutorial. Esta vez es un tutorial en el que vamos a tocar html y un poquito de css. Pero eh, que nadie se agobie que es super sencillo y además lo voy a explicar pasito a pasito, que a todos nos gusta que las cosas estén bien explicaditas.

Cuando acabéis este post pueden pasar dos cosas: lo habéis sustituido por foto o por iconos web. Sea como sea, va a molar tanto que no os arrepentiréis de haberlo hecho. Eso sí, antes de hacer este tutorial, para evitar sustos innecesarios vamos a guardar una copia de nuestra plantilla por si acaso no nos gusta el resultado (que lo dudo) o os pasa algo, para que podáis volver a como lo teníais hasta ahora.

personalizar-paginacion-blogger

Para guardar una copia de la plantilla es sencillo: Id a Plantilla y arriba a la derecha encontrareis un botón que pone “Crear/Restablecer copia de seguridad” le dais ahí y os aparecerá un cartelito, tenéis que clicar a Descargar plantilla completa. Ya está, ya la tenéis en vuestra carpeta de descargas. Empecemos el tutorial:

 

Cambiar la paginación por imágenes.

Id a Plantilla -> Editar html. Una vez dentro clicad en cualquier parte del código y con vuestro teclado clicais Control+F, os aparecerá un recuadrito para buscar. Este recuadro os tiene que salir dentro del mismo recuadro que tiene todo el código html, si no os sale ahí y os sale en cualquier otro lado de la pantalla no va a buscar dentro del código.

Dicho esto, teniendo ya el recuadro para buscar vamos a empezar cambiando “Entradas recientes” así que buscamos <data:newerPageTitle/>, lo encontraréis enseguida, este código que hemos buscado lo vamos a sustituir por este otro: <img src=’Url de la imagen‘/> La url de la imagen la podéis sacar de Tinypic, si no sabéis como usar tinypic tengo un minitutorial que os ayudará: Obtener las url de la imagen con Tinypic.

Una vez hemos sustituido ese código pasamos a buscar para cambiar “Inicio” así que tenemos que buscar este otro código <data:homeMsg/>. Volvemos a hacer lo mismo y sustituimos ese código por este otro: <img src=’Url de la imagen‘/> con la url de la imagen correspondiente en cada caso.

Y por último tenemos que cambiar “Entradas antiguas” así que buscamos este otro código <data:olderPageTitle/> y lo volvemos a sustituir por este <img src=’Url de la imagen‘/> En cada caso la url es diferente por lo tanto os quedará genial.

Ahora sólo falta guardar la plantilla y ya está, no tenéis que hacer nada más, ya habéis cambiado ese soso Entradas antiguas, entradas recientes y inicio que tiene Blogger por unas imagenes molonas que habéis hecho vosotros mismos o que habéis encontrado por ahí y os han gustado. ¿Era fácil o no?

cambiar-anterior-inicio-siguiente-imagenes-paginacion

 

Cambiar la paginación por Iconos Web.

Antes de empezar a cambiar nada, si nunca habéis usado iconos web tenéis que ir a Plantilla -> Editar html, clicar dentro del código -> Control+F para buscar y buscar <head>, allí, justo debajo vamos a pegar este código:

<link href=”//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css” rel=”stylesheet”/>

Si habéis usado ya Iconos Web en vuestro blog no os preocupéis porque este código ya lo tenéis puesto. Si no estáis seguro comprobadlo yendo a <head> como he explicado y ahí veréis si está el código o no.

Para saber que iconos vamos a usar, ya que hay muchísimos, tienen un catalogo, allí pone los nombres que es lo que nos interesa a nosotros con sus imágenes en miniatura para que veáis como son cada uno. Yo he escogido los que se llaman: home, angle-left y angle-right.

Dicho esto y sabiendo que nombres tienen (¡Importantísimo no dejarnos el guion en el nombre!) pasemos a personalizar nuestra Entradas antiguas, Inicio y Entradas recientes. Vamos allá:

Como antes, vamos a empezar por las “Entradas recientes”, así que buscamos este código <data:newerPageTitle/>, pero esta vez no lo vamos a sustituir por el anterior sino por este otro <i class=’fa fa-nombredelicono‘></i> en nuestro caso <i class=’fa fa-angle-left‘></i>.

Ahora pasamos a buscar el de “Inicio” así que buscamos <data:homeMsg/> y lo sustituimos por el código de nuestro icono web <i class=’fa fa-home‘></i>.

Y por último buscamos el de “Entradas antiguas<data:olderPageTitle/> y lo sustituimos por el de nuestro icono <i class=’fa fa-angle-right‘></i>.

En este tutorial llegado a este punto no hemos acabado porque falta personalizar los colores y efectos que tendrá el icono web cuando pasemos el ratón por encima. Así que guardamos la plantilla y vamos a Plantilla -> Personalizar y de allí a CSS.

Pegamos este código:

fa{
color: #FE2E2E; /*Color del icono*/
background: #F2F2F2; /*Fondo del icono, si no queréis que tenga fondo podéis borrar esta línea*/
border: 1px solid #1C1C1C; /*Borde, si no queréis que tenga borde podéis borrar esta línea*/
font-size: 18px; /*Tamaño del icono*/
}
.fa:hover{ /*Formato al pasar el ratón por encima*/
color: #ffffff; /*Color del icono*/
background: #F2F2F2; /*Fondo del icono, si no queréis que tenga fondo podéis borrar esta línea*/
border: 1px solid #1C1C1C; /*Borde, si no queréis que tenga borde podéis borrar esta línea*/
}

Así cambiaríais todos los iconos de golpe, pero si queréis que cada uno tenga una forma o tenéis otros iconos y no queréis liarla podéis usar este otro código para cambiarlo uno por uno:

.fa-home{
color: #FE2E2E; /*Color del icono*/
background: #F2F2F2; /*Fondo del icono, si no queréis que tenga fondo podéis borrar esta línea*/
border: 1px solid #1C1C1C; /*Borde, si no queréis que tenga borde podéis borrar esta línea*/
font-size: 18px; /*Tamaño del icono*/
}
.fa-home:hover{ /*Formato al pasar el ratón por encima*/
color: #ffffff; /*Color del icono*/
background: #F2F2F2; /*Fondo del icono, si no queréis que tenga fondo podéis borrar esta línea*/
border: 1px solid #1C1C1C; /*Borde, si no queréis que tenga borde podéis borrar esta línea*/
}

Ahora sólo os falta toquetear los colores y esas cosas, si no sabéis de donde sacar los códigos de los colores aquí tenéis una página donde encontraréis todos los colores que queráis con sus códigos.
Aquí lo único que tenéis que tener en cuenta es que para cada icono tiene que haber un código completo y tiene que contener su nombre, en este caso estamos personalizando el de inicio porque pone .fa-home{ y .fa-home:hover{, para hacer los otros dos deberéis cambiar por .fa-angle-left{ y .fa-anlge-left:hover{ por ejemplo, o el nombre que tenga vuestro icono.
Cuando hayáis hecho todos los retoques que queráis tocando los colores, tamaño, etc y haciendo todas las combinaciones que queráis simplemente guardáis y listo, ya está. Este ha sido un poco más complicado pero es mi preferido, me encanta como queda.

cambiar-paginacion-iconos-web

 

¿Que os ha parecido este tutorial? ¿Os ha gustado? A mi es una de las cosas que más me gusta personalizar, porque da un toque personal a nuestro blog ya sea por imagenes o con los iconos web por el color, la forma en que los ponemos, etc.

Un besazo enorme a todos.

Laura.

Pin It on Pinterest

Share This