Viajar por Europa

abril 21, 2011

cambiar texto entradas antiguas

cambiar en plantilla nueva blogger titulo texto entradas antiguas, entradas mas recientes
Muchos preferimos cambiar o decorar un poco el texto "entradas antiguas" o "entradas mas recientes" que aparece a pié de pagina en los blogspot. Yo lo veo muy pequeño, falto de colorido, en resumen no es un texto que resalte y los lectores que no están acostumbrados a los blogs puede que no reparen en él.


Tambien puedes cambiar entradas mas antiguas por una imagen, unas pequeñas flechas, y la típica casita para la pagina principal.

Así es que vamos a desarrollar  los distintos sitemas para la modificacion de las etiquetas "entradas antiguas" y "entradas más recientes"

  • Cambio de formato por dos métodos.
  • Cambio por imagen.

Cambio del formato de las etiquetas "entradas antiguas" y "entradas más recientes" y "página principal"

Método complicado, aunque no dificil.

Yo he cambiado simplemente el color y un pequeño efecto cuando pongo el cursor sobre el letrerito "entradas antiguas" o "entradas recientes" en unos de mis blogs, haciendo pruebas y he conseguido lo que pretendía resaltarlo en rojo, para que se vea, que llame la atención.

Lo hice diferente a como lo he visto en otros posts, pero creo que me ha quedado bien.

Como siempre tienes que entrar en la edición HTML de la plantilla y no tienes que ampliar artilugios. Solo te indico el resultado final, en una de las plantillas nuevas de blogger. Lo marcado en subrayado es lo que he  añadido.


/* Accents

---------------------------------------------- */

.section-columns td.columns-cell {
  border-$startSide: 1px solid $(body.rule.color);

}
.blog-pager a{
  background: $(paging.background);

line-height: 11px;
font-size: 12px;
font-weight:bold;
color: #f6201e;
text-decoration:underline;}
.blog-pager a:hover {
background: $(paging.background);

font-weight: bold;
font-size: 12px;
font-weight:bold;
color: #5421bb;
}


Método muy simple.

También hay una forma mucho más fácil, la de ésta plantilla que simplemente es añadir lo subrayado donde se indica. He copiado directamente de mi plantilla todas las lineas para dar un idea de donde debe insertarse.


.post-footer {
 margin: .5em 0 0;
 color: $(post.footer.text.color);
 line-height: 1.6;
}

#blog-pager {
font-size: 140%
}
#comments .comment-author {
padding-top: 1.5em;

.blog-pager-older-link, .home-link,
.blog-pager-newer-link {
background-color: $(content.background.color);
padding: 5px;
}


Sustituir las etiquetas "entradas antiguas", "entradas más recientes" y "página principal" por una imagen.

Si te quieres complicar un poco más la vida y sustituir las etiquetas: entradas antiguas - entradas más recientes y home, por flechas o cualquier otra imagen entonces solo consiste en ver el codigo fuente de la plantilla. Ahora si tienes que ampliar artilugios.

Antes que nada, buscate tres imágenes, seguramente querrás "flechas" y la tipica "home", pues guardalas en el sitio que utilices (Picasa de Google).

Las etiquetas que identifican las entradas antiguas y recientes son:

<data:newerPageTitle/> para  “Entrada más reciente”
<data:olderPageTitle/> para  “Entradas antiguas”
<data:homeMsg/> para “Página principal”

Vamos a cambiar literatura por imágenes para ellos sigue a pié de la letra lo que te indico en los tres apartados. Ten mucho cuidado cuando hagas las sustituciones de no borrar las </a>del final. Ojo, si haces una vista previa del primer cambio no vas a ver nada porque no aparece en la página de prueba. Empieza pues por el segundo o mejor el tercer cambio.

1º Cambio de "entradas más recientes" por una imagen:

<div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
      </span>
    </b:if>

Ahora procede a realizar con mucho cuidado el cambio que te indico:

<data:newerPageTitle/> cambialo por <img alt='data:newerPageTitle' src='http://pagina de la imagen.gif' />


2º Busca ahora el siguiente codigo que viene a continuación del anterior:


<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>


Vuelve a hacer el cambio que te indico, como en el caso anterior:

<data:olderPageTitle/> cambialo por  <img alt='data:olderPageTitle' src='http://pagina de la imagen.gif' />


3º Por último busca el siguiente código y haz lo que se indica:


<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
cambia <data:homeMsg/> por <img alt='data:homeMsg' src='http://url de la imagen .gif'/>

No hay comentarios:

Publicar un comentario

Si haces un comentario procura que no sea anónimo y si estás solicitando algo al menos espero que votes en Google Plus. Saludos.