4.12.09

Cambiar enlaces entradas recientes antiguas...


Este tutorial fue actualizado: Ver actualización.

Para cambiar por imágenes los vínculos:

Entrada más recientePágina principalEntradas antiguas

que aparecen al pie de las entradas de Blogger vamos a ver dos métodos:


Primer método

1.- Vamos a Edición de HTML:

Página principal ► Diseño ► Plantilla ► Edición de HTML ► Expandir plantillas de artilugios

2.- Localizar y borrar el siguiente código:

<b:includable id='nextprev'>
  <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>
    <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>
    <b:if cond='data:blog.homepageUrl != data:blog.url'>
      <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
      <b:else/>
      <b:if cond='data:newerPageUrl'>
        <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
      </b:if>
    </b:if>
  </div>
  <div class='clear'/>
</b:includable>


3.- Reemplazar el código borrado, por el siguiente:

<b:includable id='nextprev'>
<div id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<a expr:href='data:newerPageUrl' expr:title='data:newerPageTitle'
id='blog-pager-newer-link'>
<img src='URL de la imagen'/></a>
</b:if>
<b:if cond='data:olderPageUrl'>
<a expr:href='data:olderPageUrl' expr:title='data:olderPageTitle'
id='blog-pager-older-link'>
<img src='URL de la imagen'/></a>
</b:if>
<a class='home-link' expr:href='data:blog.homepageUrl'>
<img src='URL de la imagen'/>
</a></div>
<div class='clear'/>
</b:includable>

Las partes resaltadas las reemplazamos por las direcciones de las imágenes.


Segundo método

Podemos aplicar un método en el cual no eliminamos el código sino que hacemos algunas modificaciones al mismo:

1.- Volvamos al código original:

<b:includable id='nextprev'>
  <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>

    <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>

    <b:if cond='data:blog.homepageUrl != data:blog.url'>
      <a class='home-link' expr:href='data:blog.homepageUrl'>
<data:homeMsg/></a>
      <b:else/>
      <b:if cond='data:newerPageUrl'>
        <a class='home-link' expr:href='data:blog.homepageUrl'>
<data:homeMsg/></a>
      </b:if>
    </b:if>

  </div>
  <div class='clear'/>
</b:includable>

2.- Reemplazamos los segmentos resaltados, así:

<data:newerPageTitle/>
que corresponde al texto "Entrada más reciente", por:
<img alt='data:newerPageTitle' src='URL de la imagen'/>,

<data:olderPageTitle/>
que corresponde al texto "Entradas antiguas", por:
<img alt='data:olderPageTitle' src='URL de la imagen'/>,

<data:homeMsg/>
que corresponde al texto "Página principal", por:
<img alt='data:homeMsg' src='URL de la imagen'/>,

Las partes resaltadas las reemplazamos por las direcciones de las imágenes.


Índice Edición HTML
Poner imagen de fondo a un blog Cambiar enlaces pie de página
Eliminar enlaces pie de página Eliminar 'Publicado por'
Eliminar fechas Eliminar la hora
Efecto subrayar links Eliminar barra superior
Evitar copias de blogs Ocultar o eliminar sidebar
Eliminar y reemplazar cabecera Ícono para barra de direcciones
Centrar títulos posts Ensanchar blog
Cambiar color fondo posts Color fondo sidebar
Agregar una sidebar Color fondo de comentarios
Personalizar firma pie de posts Personalizar fechas de los posts
Diseñador de plantillas de Blogger Crear página de inicio o Portada
Eliminar enlaces a autores de plantillas Cambiar de sitio la sidebar
Centrar imagen de la cebecera
Etiquetas: , , , , , ,

13 comentarios :

▼▲ Ocultar / Mostrar comentarios
Comentario escrito por Diegose07 : #

Disculpe la molestia pero sabe usted como poder sacar o cambia el icono de blogspot q esta en la barra de direcciones...
si tiene ese tip me lo podria facilitar... se lo agradesco su blog me ha ayudado bastante...

27 de enero de 2010, 12:33
Comentario escrito por Pedro Pablo Pachón : #

Diegose07:
No es molestia. La información que necesita está está en: http://bloguermast.blogspot.com/2010/01/icono-barra-direcciones-blogger.html

Saludos.

28 de enero de 2010, 8:41
Comentario escrito por Ayda : #

Se ven mucho mejor estos enlaces con las imágenes.

¡Excelente Blog!

5 de marzo de 2010, 13:38
Comentario escrito por Paulina : #

Como siempre, sus explicaciones son muy claras y fáciles de entender.
Cualquiera de los dos métodos son muy entendibles y aplicables.

Gracias.

6 de marzo de 2010, 9:50
Comentario escrito por Lualanmi : #

Me aqyudó mucho, muchas gracias.

27 de noviembre de 2012, 16:13
Comentario escrito por Pedro Pablo Pachón : #

Lualanmi:¡Con mucho gusto!
Saludos.

28 de noviembre de 2012, 3:52
Comentario escrito por Anónimo #

como coloco una imagen del disco duro?

Luis Brea

9 de marzo de 2013, 17:18
Comentario escrito por Pedro Pablo Pachón : #

Luis Brea, al crear una entrada o al editarla, en "redactar" o en "HTML", encuentra, entre los íconos de la parte superior, el de una imagen, al poner el cursor del mouse encima se puede leer "Inserta imagen", hace click sobre ese ícono y aparecerá una ventana con el título "Seleccionar archivo"; en el menú de la izquierda deja seleccionada la opción "Subir" y hace click en "Elegir archivo". En la ventana que aparece busca el archivo "Imágenes", lo abre y hace doble click sobre la imagen que va a subir. Cuando aparezca la imagen hace click en el botón "Añadir las imágenes seleccionadas" que está en la parte inferior.

Saludos.

12 de marzo de 2013, 14:17
Comentario escrito por Unknown : #

Hola,
Para la plantilla nueva, sabe cómo se podría hacer?

Cràcias
Mireia

6 de junio de 2013, 14:36
Comentario escrito por Pedro Pablo Pachón : #

Mireia Bertran,

1.- Va a Diseño ► Plantilla ► Editar HTML
2.- Hace un click dentro del editor
3.- Digita CTRL + F
4.- En el rectángulo de búsqueda (Search:) que aparece en la parte superior derecha del editor introduce la primera línea del código indicado en el tutorial, que es ésta: <b:includable id='nextprev'> (debe ser copiada y pegada exactamente igual a como está en el código del tutorial).
5.- Da Enter y el buscador la llevará a esa línea.
6.- Hace click en la flecha negra que está a la izquierda de esa línea, para expandir el código, y lo tendrá completo.

Saludos.

7 de junio de 2013, 5:34
Comentario escrito por Unknown : #

Muchisimas gracias!!

Mireia
The M's little world

10 de junio de 2013, 6:28
Comentario escrito por Bea : #

Mira, tengo un problema. Es que no encuentro por ninguna parte ese código en la edición de HTML de mi blog utilizando el buscador. Me estoy volviendo loca porque no encuentro casi nada. ¿Dónde está situado más o menos? Gracias.

28 de julio de 2013, 10:32
Comentario escrito por Unknown : #

Bea, Posiblemente tienes dificultades con el buscador. Mira este tutorial:

http://bloguermast.blogspot.com/2013/07/nuevo-editor-html-de-blogger.html

Saludos.

29 de julio de 2013, 7:45

Este blog ya cumplió su ciclo, por esta razón, aunque sigue a disposición de los usuarios, no se harán más publicaciones ni se atenderán más consultas. La respuesta a su inquietud puede estar entre los comentarios hechos hasta aquí.

El autor.

Suscribirse a: Enviar comentarios ( Atom )