Image Map

Personalize os links "Postagens mais antigas", "Postagens mais recentes" e "Home"

Hello girls! Hoje vou ensinar vocês a personalizarem os links que eu falei no título do post, como aqui no VP:

Clique em Continuar Lendo e veja:

Tutorial *-*

1. No Blogger, vá para Design> Editar HTML.
2. Marque a caixinha 'Expandir modelos de widgets'.
3. Tecle Ctrl F e procure por:

<b:includable id='nextprev'>

Você vai achar tudo isso embaixo:



<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>
<div class='clear'/>
</b:includable>


4. Agora subistitua tudo isso (Sem a parte que você procurou) por esse código:


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 IMAGEM ESQUERDA'/></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 IMAGEM DIREITA'/></a>
    </b:if>
    <a title='página inicial' class='home-link' expr:href='data:blog.homepageUrl'>
    <img src='URL IMAGEM HOME'/></a>
    </div>
    <div class='clear'/>
    </b:includable>

Agora é só substituir as partes em azul pelos URL's das imagens.

Comentários

Desenvolvimento por Chassy Cher