Personalizar "entradas antiguas" "home" "entradas mas recientes" con imagen

Hay muchas personas que en su sitio al final de cada entrada tienen los link de "Entradas mas recientes" "Página principal" y "Entradas mas antiguas" pero lo tienen simplemente con solo letras si lo que quieren es personalizarlo y ponerle imagenes en lugar de palabras pues aquí les muestro como hacerlo de la forma mas sencilla,en muchas plantillas ya biene estas opciones pero como les dije con solo palabras,ahora vamos a personalizarlo.
Recuerden siempre guardar una copia de seguridad antes de empezar con los cambios.

1-Lo primero que vamos a hacer es ir a diseño a Edición de HTML.
2-Activa la opción "Expandir plantillas de artilugios" y en el código busquemos lo siguiente:

o usen Ctrl+F y usen cualquier linea del código para encontrarlo mas rápido siempre asegúrese de que coincida lo demás.

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

&quot;_blog-pager-newer-link&quot;'

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 + &quot;_blog-pager-older-

link&quot;'

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>



Estos códigos corresponden a estos enlaces de navegación.

<data:newerPageTitle/> – "Entrada más reciente"
<data:olderPageTitle/> – "Entradas antiguas"
<data:homeMsg/> – "Página principal"



Para cambiar el texto por otro de su agrado sólo remplazamos la etiqueta correspondiente a cada enlace por nuestro texto, un ejemplo, para el link de entradas recientes sustituimos completamente "<data:newerPageTitle/>" por "entradas más recientes".

Para cambiar el texto por una imagen ejemplo, para el link de entradas recientes sustituimos completamente <data:newerPageTitle/> por
<img alt='data:newerPageTitle' src='AQUÍ VA LA DIRECCIÓN DE LA IMAGEN' />
sustituimos completamente <data:olderPageTitle/> por
<img alt='data:olderPageTitle' src='AQUÍ VA LA DIRECCIÓN DE LA IMAGEN'/>
sustituimos completamente <data:homeMsg/> por
<img alt='data:homeMsg' src='AQUÍ VA LA DIRECCIÓN DE LA IMAGEN'/>

Una ves encontrado ese código lo van a sustituir por este que les brindo ya con imagen simplemente si no les gusta la imagen la cambian .


<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'>
<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 + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><img alt='data:newerPageTitle' src='http://dl.dropbox.com/u/25944020/left.gif'/></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 + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><img alt='data:olderPageTitle' src='http://dl.dropbox.com/u/25944020/right.gif'/> </a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><img alt='data:homeMsg' src='http://dl.dropbox.com/u/25944020/casatube.gif1.gif'/> </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>


Una ves hecho eso le dan a guardar y es todo disfruten ese nuevo diseño para su plantilla.
El resultado lo pueden ver al final de cada post de este sitio .asi les va quedar a ustedes.

Votar esta anotación en Bitácoras.com
Compartir esta entrada :



data:newerPageTitle data:olderPageTitle data:homeMsg
:) :( ;) :D ;;-) :-/ :-O X( B-) #:-S :(( :)) =)) ~X( :-t 8- =P~ #-o =D7 :-SS :-q :-bd

0 comentarios:

Publicar un comentario