Altere os links de navegação do seu blog

Sabe aqueles links que geralmente no seu blog aparece como Postagem mais recente, Início e Postagem mais antiga ? Há varios blogs que não gostam desses termos e tratam logo de trocar o nome ou até mesmo inserir um imagem em seu lugar, melhorando a estética, e visibilidade desta função tão útil para qualquer site ou blog, seja ele pessoal ou profissional.

Bom, o objetivo principal desta postagem é mostrar o quanto é fácil alterar esses nomes muito facilmente e sem nenhuma complicação.

Para que iniciemos o tutorial, recomendo que façam um Backup no seu template.

Acesse  a guia design > editar HTML, logo após marque a caixinha expandir modelos de widgets.

1º Vamos iniciar aplicando o estilo CSS para um código que ainda iremos inserir:
Localize o código abaixo, para encontrar mais rapidamente, utilize a ferramenta Ctrl + F do seu teclado.

#blog-pager-newer-link {

float: $startSide;
}

#blog-pager-older-link {
float: $endSide;
}

#blog-pager {
text-align: center;
}


Se você modifica seu template por meio da função designer de modelo do blogger, o código a ser encontrado será este:

.blog-pager {
background: $(paging.background);
}

.blog-pager-older-link, .home-link,
.blog-pager-newer-link {
background-color: $(content.background.color);
padding: 5px;
}


Após encontrar, substitua todo o código por este:

#blog-pager a {
font-family: Arial;
color: #333; /*Cor da letra*/
font-size: 13px; /*tamanho da letra*/
padding: 5px;
text-decoration: none;
background: #e6e6e6; /* cor do fundo*/
border: solid #ccc 1px; /*cor da borda*/
}

#blog-pager a:hover {
color:#fff; /*Cor da letra ao passar o mouse*/
background-color:#0071bb; /*Cor da fundo ao passar o mouse*/
}

.blog-pager-older-link {
float: right;
}

.blog-pager-newer-link {
float: right;
}


Salve e vamos para a parte do HTML.

1º Localize o código abaixo, para encontrar mais rapidamente, utilize a ferramenta Ctrl + F do seu teclado.


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


E substitua por este outro 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 + &quot;_blog-pager-newer-link&quot;' title='posts mais recentes'>&#171; página anterior</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;' title='posts mais antigos'>próxima página &#187;</a>
</span>
</b:if>
</div>
<div class='clear'/>
</b:includable>


Salve e Pronto! O resultado obtido será este:

Até a próxima!

Share This :