Se você tem um blog e esta cansado daquele padrão do blogger de
Postagens mais recentes,
Postagens mais antigas e
Início não se preocupe... seus problemas acabaram, vou ensinar de uma maneira prática e fácil para você alterar isso...
Caso você já estaja acostumado a alterar o template, pode pular para o
Terceiro passo!
Primeiro passo - Ir ao HTML do seu layout e Fazer o Back-up do seu template.Vá na pagina do Blogger e clique em cima do seu blog...logo após isso clique nos botões Layout e depois Editar HTML. |
| Nesta tela você tem controle total do Layout do seu blog, qualquer alteração errada você pode estar bagunçando o seu layout, então antes de fazer qualqer coisa, clique em Baixar modelo completo e salve no seu computador o arquivo XML... este arquivo é um Backup do seu layout, se caso você altere algo de forma errada você apenas precisa restaura-lo clicando em Browse e depois Fazer Upload. |
Se já tiver feito o Backup siga para o proximo passo. |
Segundo passo - Expandir modelos de Widgets. | Por padrão o Blogger da uma "Resumida" no seu template. Por exemplo: Todos as tags <b:> que normalmente sao Widgets o Bloggerdeixa oculta. Com essa opção desabilitada você não consegue fazer muita coisa mais a fundo em seu blog... Para podermos alterar os Links precisamos deixar a caixinha ativa... portanto Clique em Expandir modelos de Widgets e vamos ao proximo passo ! |
Terceiro passo - Achar o código.Você vai procurar a tag <b:includable id='nextprev'> (ela termina com </b:includable>)
Tudo queu estiver dentro dela é referente aos 3 links...Normalmente, por padrão o código que você irá encontrar é algo mais ou menos desse formato:
- Citação :
- <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=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=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=blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href=blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>
</div>
<div class='clear'/>
</b:includable>
Quarto passo - Alterar !<data:newerPageTitle/> é o link POSTAGENS RECENTES
<data:olderPageTitle/> é o link POSTAGENS ANTIGAS
e os 2
<data:homeMsg/> são o link INICIO
Você pode simplesmente Escrever alguma Palavra, ou até mesmo colocar uma foto...
no Rox Tirinhas eu criei 3 imagens, fiz upload no Picasaweb, o código ficou assim:
- Citação :
- <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=newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><img alt='Postagens Recentes' src='http://lh5.ggpht.com/_xW-aoipFuac/S2fr89y6qSI/AAAAAAAABYk/L0JHkBFTPtI/Recentes.png'/></a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href=olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><img alt='Postagens Antigas' src='http://lh4.ggpht.com/_xW-aoipFuac/S2fr8kma7RI/AAAAAAAABYc/tmuk0fcQ0wg/Anteriores.png'/></a>
</span>
</b:if>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href=blog.homepageUrl'><img alt='Inicio' src='http://lh5.ggpht.com/_xW-aoipFuac/S2fr8oaHAwI/AAAAAAAABYg/wq9GyOMItkQ/Inicio.png'/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href=blog.homepageUrl'><img alt='Inicio' src='http://lh5.ggpht.com/_xW-aoipFuac/S2fr8oaHAwI/AAAAAAAABYg/wq9GyOMItkQ/Inicio.png'/></a>
</b:if>
</b:if>
</div>
<div class='clear'/>
</b:includable>
Dica: Se for colocar uma com o código IMG você precisa colocar /... ficando assim:
<IMG SRC="caminho" ALT="Texto"/>Espero que seja util para alguem este tutorial =)