SERVICIOS - DISEÑO - FREEBIES - MEJORA TU BLOG -

1 oct. 2014

Personaliza el pager de tu blog. (Página principal, entradas antiguas...)

Hace un tiempo, pues igual 3 meses ajajaj, me preguntaban como cambiar el pager de nuestro blog, esto:

Bueno vamos a ver como cambiarlo.
Vamos a editar HTML de la plantilla (hacemos una copia de seguridad por si a caso)

Esto es para las entradas recientes.
Buscamos esto en la plantilla:
<data:newerPageTitle/>

Deberíais encontrarlo entre un texto como este:

 <b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl + &quot;?max-results&quot; ' expr:id='data:widget.
instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>

Cuando lo encontréis borráis esto <data:newerPageTitle/>

Y en su lugar pondremos esto: <img src='http://URL_DE_LA_IMAGEN _'/>
O sea debería de quedarnos así:

<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl + &quot;?max-results&quot; ' expr:id='data:widget.
instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><img src='http://URL_DE_LA_IMAGEN _'/></a>
</span>
</b:if>


Ahora para cambiar lo de entradas antiguas tendréis que buscar esto:
<data:olderPageTitle/>

Pues hacemos lo mismo que arriba, borramos lo de <data:olderPageTitle/> y pegamos la url de la imagen:
<img src='http://URL_DE_LA_IMAGEN _'/>
 
Y por último para la Página principal pues es exactamente igual que lo demás, buscamos esto: <data:homeMsg/>
lo borramos y lo sustituimos por la dirección de la imagen:<img src='http://URL_DE_LA_IMAGEN _'/>


Si solamente queréis cambiar el tamaño de la fuente y el tipo de letra, entonces vamos al código CSS de la plantilla, lo desplegamos y abajo de todo, antes de:

</b:skin>

Pegáis esto:

.blog-pager-older-link, .home-link,
.blog-pager-newer-link {
background-color: #FFFFFF; /* Color del fondo, para transparente poned transparent */
padding: 5px;
font: normal normal 16px Arimo; /* Tamaño y tipo de letra *//* LN */
color: #AC5D7B; /* Color de la letra *//* LN */
}


Si abrir la plantilla para hacer este detallito os da miedo, abrir la pestaña de Diseño, la encontraréis en la columna de la izquierda de vuestra página de administración del blog. Luego dais al link que veréis arriba a la derecha donde dice Diseñador de plantillas. Una vez allí le hacéis clic en Avanzado y Añadir CSS.
Pegáis el código que os he dado cuando lo tengáis personalizado a vuestro gusto y le dais a guardar.

Ya está, así de sencillo.
He visto que Celia de El perro de papel también publicó este tutorial, os dejo el link por si os sirve más el de ella o si la entendéis mejor.
Tutorial en el Perro de Papel

Espero que os sirva y os resulte facilito. Muah!

Lireth's Notebook

7 comentarios:

  1. Muchas gracias, hacía tiempo que me gustaba saberlo. Petons.

    ResponderEliminar
  2. Yo lo hice hace tiempo! pero quizás vuelvo a cambiarlo, así que me vendrá genial!
    Tengo que hacerme un recopilatorio de tutoriales para cambiar todo jajaja

    ResponderEliminar
  3. Gracias voy a intentar ponerme a ello aunque yo para esto soy una patosa , aunque lo explicas genial ^_^.
    Un besazo

    ResponderEliminar
  4. ¡oh! :O me tengo que poner a ello, es algo que he ido dejando porque no le daba mucha importancia, pero ahora que nuestro blog está cogiendo forma estaría super bien mejorar el pager. ¡Muchas gracias!

    ResponderEliminar
    Respuestas
    1. ¡¡¡Ostras pero si tienes emoticones!!!! jajaja

      Eliminar
  5. Eliminé los textos pero me queda la barra (pager): cómo la elimino? Gracias

    ResponderEliminar
    Respuestas
    1. Así queda http://emilianotualaetcetera.blogspot.com/

      Eliminar