Asociacion: personalizar boton ir a pagina principal

Cómo Ponemos Una Imagen Para El Texto "Entradas Más Recientes" De Nuestro Salto De Línea. Paso A Paso.:

Los más creativos no se conformarán "sólo con texto". Si deseamos añadir una imagen, hay que seguir estos sencillos pasos:

1) Realiza una copia de seguridad de tu Blog siguiendo la guía para la que te he puesto el enlace. No te llevará más de dos minutos y si cometes cualquier error, simplemente podrás volver a tu copia de seguridad.

2) Dentro de Blogger, en el menú de la izquierda, dirígete a la opción "Plantilla" y selecciona el botón "Editar HTML". Se te mostrará el código fuente de Blogger que compone tu plantilla.

Editor de plantilla de Blogger.

Poniendo La Imagen Para El Enlace "Entradas Más Recientes"

3) Pulsa CONTROL + F para localizar el texto <data:newerPageTitle/>

Se trata de la etiqueta que controla el texto para el enlace de las "Entradas más recientes". El código completo que debes estar viendo y sobre el que vamos a actuar es este:

<b:if cond='data:newerPageUrl'>



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

</b:if>

Para poner una imagen en vez del texto que por defecto se carga para "Entradas más recientes" cambia o comenta como hago en el ejemplo el texto <data:newerPageTitle/> por <img src="DIRECCIÓN_DE_TU_IMAGEN" width="ANCHO" height="ALTO"/></a>

Quedaría algo así:

<b:if cond='data:newerPageUrl'>

<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><img src="DIRECCIÓN_DE_TU_IMAGEN" width="ANCHO" height="ALTO"/> </a>

</b:if>

En amarillo: La parte de código que no es necesario tocar y que no cambia.
: Comentamos la línea que hace que salga el texto "Entradas más recientes" al presentar nuestra página. El comentario , hace que el navegador lo interprete como texto "que no existe", que se salta. Es mejor comentarlo para no tenerlo que borrar, si no te gusta el resultado puedes quitar las etiquetas de comentario y vuelve a dibujarse normalmente. Si lo prefieres, puedes borrarlo directamente, esto según tus preferencias.
<img src="DIRECCIÓN_DE_TU_IMAGEN" width="ANCHO" height="ALTO"/>: Aquí pondrás la imagen que hayas diseñado y que desees que se muestre para que el usuario pulse y acceda a las entradas más recientes.

Poniendo La Imagen Para "Entradas Antiguas"

4) Pulsa CONTROL + F para localizar el texto <data:olderPageTitle/> (un poco más abajo de las páginas para entradas más recientes, se encuentra esta etiqueta que referencia a las más antiguas).

Se trata de la etiqueta que controla el texto para el enlace de las "Entradas antiguas". El código completo que debes estar viendo y sobre el que vamos a actuar es este:

<b:if cond='data:olderPageUrl'>

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

</b:if>

Para poner una imagen en vez del texto que por defecto se carga para "Entradas antiguas" cambia o comenta como hago en el ejemplo el texto <data:olderPageTitle/> por <img src="DIRECCIÓN_DE_TU_IMAGEN" width="ANCHO" height="ALTO"/></a>

Quedaría algo así:

<b:if cond='data:olderPageUrl'>

<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><img src="DIRECCIÓN_DE_TU_IMAGEN" width="ANCHO" height="ALTO"/> </a>

</b:if>

En amarillo: La parte de código que no es necesario tocar y que no cambia.
: Comentamos la línea que hace que salga el texto "Entradas antiguas" al presentar nuestra página. El comentario , hace que el navegador lo interprete como texto "que no existe", que se salta. Es mejor comentarlo para no tenerlo que borrar, si no te gusta el resultado puedes quitar las etiquetas de comentario y vuelve a dibujarse normalmente. Si lo prefieres, puedes borrarlo directamente, esto según tus preferencias.
<img src="DIRECCIÓN_DE_TU_IMAGEN" width="ANCHO" height="ALTO"/>: Aquí pondrás la imagen que hayas diseñado y que desees que se muestre para que el usuario pulse y acceda a las entradas más antiguas.

Poniendo La Imagen Para "Página Principal"

5) Pulsa CONTROL + F para localizar el texto <data:homeMsg/> (un poco más abajo).

Se trata de la etiqueta que controla el texto para el enlace de las "Página principal". El código completo que debes estar viendo y sobre el que vamos a actuar es este:

<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

Para poner una imagen en vez del texto que por defecto se carga para "Página principal" cambia o comenta como hago en el ejemplo el texto <data:homeMsg/> por <img src="DIRECCIÓN_DE_TU_IMAGEN" width="ANCHO" height="ALTO"/></a>

Quedaría algo así:

<a class='home-link' expr:href='data:blog.homepageUrl'><img src="DIRECCIÓN_DE_TU_IMAGEN" width="ANCHO" height="ALTO"/></a>

En amarillo: La parte de código que no es necesario tocar y que no cambia.
: Comentamos la línea que hace que salga el texto "Página principal" al presentar nuestra página. El comentario , hace que el navegador lo interprete como texto "que no existe", que se salta. Es mejor comentarlo para no tenerlo que borrar, si no te gusta el resultado puedes quitar las etiquetas de comentario y vuelve a dibujarse normalmente. Si lo prefieres, puedes borrarlo directamente, esto según tus preferencias.
<img src="DIRECCIÓN_DE_TU_IMAGEN" width="ANCHO" height="ALTO"/>: Aquí pondrás la imagen que hayas diseñado y que desees que se muestre para que el usuario pulse y acceda a las entradas más antiguas.

sobre Las Imágenes Que Utilices, Útiles Recomendaciones Y Formas De

Proximos Eventos

personalizar boton ir a pagina principal

Cómo Ponemos Una Imagen Para El Texto "Entradas Más Recientes" De Nuestro Salto De Línea. Paso A Paso.:

Poniendo La Imagen Para El Enlace "Entradas Más Recientes"

Poniendo La Imagen Para "Entradas Antiguas"

No hay comentarios:

Publicar un comentario