Tutoriais Blogger Vanessa S.
Alterar Link Postagens Mais Antigas e Recentes
Se você quiser, pode modificar o link Postagens Mais antigas e Postagens Mais Recentes, que se encontram no final de cada postagem, podendo alterar apenas o texto ou incluir uma imagem no lugar do texto.
Quer ver ‘comofaz’?
[becape]Antes de mais nada, você já deve saber que é sempre bom fazer um backup do seu Template para evitar transtornos.[/becape]
feito isso, entre na edição HTML do seu template, clique em “Expandir modelos de widgets” e procure pelo seguinte código:(você pode usar ctrl+f colando a 1ª linha do código para facilitar sua busca)
<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 + "_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='data: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='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>
Para substituir apenas o texto:
<data:olderPageTitle/> Se refere ao link para postagens mais antigas. Se quiser alterar o texto padrão do blogger por um seu, basta SUBSTITUIR este trecho pelo seu texto.(Sugestão:Página Anterior);
<data:newerPageTitle/> Se refere ao link para postagens mais recentes, faça o mesmo procedimento explicado acima substituindo este trecho pelo seu texto. (Sugestão:Próxima Página);
<data:homeMsg/> Se refere ao link para página inicial do blog (Inicio), siga o mesmo procedimento explicado acima, substituindo este trecho pelo seu texto. Esse trecho aparece duas vezes, portanto você deve modificar 2 vezes da mesma maneira.
Substituir texto por imagem:
Se quiser substituir por imagens de seta esquerda, direita e home,Procure pelo 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 + "_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='data: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='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 tudo por:
<b:includable id='nextprev'>
<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='ENDERECO-DA-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='ENDERECO-DA-IMAGEM-DIREITA'/></a>
</b:if>
<a title='página inicial' class='home-link' expr:href='data:blog.homepageUrl'>
<img src='ENDERECO-DA-IMAGEM-HOME'/></a>
</div>
<div class='clear'/>
</b:includable>
Coloque o endereço da sua imagem no local indicado.
Pronto, agora é só salvar e conferir o efeito!
Se quiser, confira também o artigo: Customizar os Links de Navegação do Blogger.
Como colocar esta seta lateral que tem neste blog, não achei na pesquisa. obrigada
Qual seta?
Ahh ameii, funcionou direitinho.
Muito obrigado ?
yay, funcionou direitinho no meu!!!! ^^
adoro seu blog *-*
Oi Vanessa,
Recoloquei o html e os links retornaram. Agora não sei como usar o comando “display:none”. Onde e de que forma coloco? Eu até procurei pelo código do seu outro artigo #blog-pager-older-link, e o encontrei mas sem o símbolo #, encontrei apenas blog-pager-older-link, aparece 3 vezes em dois blocos de span, ao todo 6 vezes. E fiquei sem saber depois do que usar “display:none”. Tem algum tutorial sobre isso?
Vc tem que localizar no CSS:
blog-pager
blog-pager-older-link
blog-pager-newer-link
ah! eu tava perdida no HTML. Achei blog-pager no CSS e coloquei display:none e sumiu a barra branca. Yes! Mas no CSS só achei mesmo o blog-pager. Os outros só aparecem já depois , pela primeira vez numa correção do IE6. Mas acho que não tem problema, será? vou testar inserir mais postagens (até agora só fiz uma de teste). De qualquer forma o objetivo era sumir com o background dos links e ele sumiu. Valeu mesmo!!!
Blz! só não sei o que fazer com o espaço em branco que fica no template após retirado os links. Tem como sumir com esse espaço?
Vládia,não sei te informar ao certo, pq para cada caso é um caso..tudo pode variar de template para template..mas posso te recomendar que dê uma olhada neste artigo:
https://www.mundoblogger.com.br/2010/09/corrigir-bug-nos-links-de-navegacao.html
Pode ser que te ajude.
Obrigada Vanessa, mas o link que você passou ensina como colocar de volta os links e não é isso que quero. acabei de retirar. o que quero é fazer sumir o background dos links que apaguei, pois depois de retirados fica só uma faixa branca no lugar que eles estavam, entre a área de postagem e o rodapé. se souber de algo que possa ajudar com isso. pensei em apagar todo o código que se refere a esses links (postagens e início), mas fiquei com receio de danificar o template e não saber como consertar. você saberia qual código define o background deles?
Vc retirou os links como? Apagou as linhas html ou apenas acrescentou o “display:none” no CSS?
Se acaso apagou as linhas html, tente coloca-las novamente e oculte os links de navegação pelo CSS, usando o “display:none”.
Ameeeeeeeeeeiiii!!!!
Eu já modifiquei no meu template, eu particularmente gostei muito do resultado! Suas dicas são ótimas! Jamais nos abandone, nós blogueiros precisamos de você!
Beijuzzzzz!!!!
Se quiser dar uma olhada:pensaoacaso.blogspot
uma duvida que vem na cabeça de muitos e poucos sabem é como mudar a frase quando passa o mouse sobre a imagem para proxima pagina ou seja postagem mais antigas e recentes como mudaria esse texo que aparece quando por cima é colocado o mouse ?
Willian
Vou ficar te devendo a resposta, pq eu não sei te informar.
Bom dia Clau,
Gostaria de fazer uma pergunta..
Como eu poderia alterar o numero de postagem exibidas?
Tipo: No meu blog quando clico em postagens antigas mostra um limite de 7 postagens…
Como eu poderia aumentar esse limite?
PS: Gostaria de aumentar para 20
Oi Clau !
Tem como eu mudar a cor do telhadinho e das setinhas ?
Desde já agradeço!
Fabiane
Não há como eu te prestar uma ajuda mais precisa, mas tente fazer o seguinte:
tenta localizar a linha <b:includable id='nextprev'>
(use o ctrl+f), e em seguida tenta localizar as urls das imagens e vai substituindo uma por uma.
Oii..
Fiz tudo conforme o tutorial e deu certinho, só que hospedei as imagens em um site externo e acabou dando problemas nesse site, ai tentei seguir pelo tutorial para mudar as imagens e não acho mais o código.. sera que vc poderia me ajudar?
Fabiane.
Obrigada
Muuuito obrigada ! Deu certinho!!
E para quem quer só mudar o css destes links eis os códigos para 'postagens mais antigas', 'inicio' e 'postagens mais recentes'.
.blog-pager {padding: 20px;} =aqui é o espaçamento geral
.blog-pager-newer-link {color:#fff;
background-color:#441a55;} =postagens mais recentes
.blog-pager-older-link{color:#fff;
background-color:#441a55;padding: 2px;}=postagens mais antigas
.home-link {color:#fff;
background-color:#1b1a1a;padding: 2px;}=inicio
Por Eu xD, quem quiser ver o resultado é só ir no meu blog:
thebelement.blogspot
ola de novo rss
por acaso no link das postagens mais antigas nao sabes como se sobe ou desce
tipo para ficar mais junto acima nao sei se me entendes?
Dani
Quanto tempo querida! Que bom ver vc por aqui novamente. 🙂
Oi, Clau!
Quanto tempo, hein? Saudades!
Como você está?
Voltei aqui, como sempre, pra 'pegar' o mapa da mina, que só você tem de uma maneira prática e fácil! rsrs
Beijo no coração!
Dani
procurei e nao encontrei o que queria =(
o codigo e assim->
nao da para fazer algo assim do genero ->
me ajuda pf..
capas dvd de portugal
Há uns dias atras eu publiquei um artigo ensinando como colocar anúncios do adsense nos posts..dá uma lida no artigo, talvez te ajude.
obrigado pela resposta
so mais uma coisinha aqui neste site ->ptcapas.blogspot
da para subir ou descer, o anuncio google que esta por baixo dos posts?
capas dvd de portugal
Esse link são os créditos do autor que criou o script. Tente fazer contato com ele para ver se ele autoriza e retira os créditos. Somente o autor tem autoridade para isso.
ola aqui neste site -» http://www.abu-farhan.com/2009/12/beautiful-new-page-navi-for-blogger/ consegues retirar o link que fica por baixo ?
desde ja obrigado
Clau,no template designer novo blog (o que eu uso) não encontro nenhum dos 3 trechos
Muito obrigado, estava atrás disso.
Só preciso fazer uns ajustes.
Muito legal isso, vou colocar imagens no lugar dos links, pois colocar numeração nas páginas não é muito bom, usei a ferramenta de numeração e não gostei muito, acho essa padrão melhor, colocar imagens é melhor ainda, mas onde acho imagens assim? Tenho que fazer mesmo? AH, estou tendo um sério problema, não entendo, esses links de postagens mais antigas, e de numeração não estão apareçendo no blog, pq? Não tem nada abaixo. Abs!
@Raí Uzumaki:
Eu que agradeço pelo comentário e continue nos acompanhando sempre viu? 😉
Bem eu acompanho seu site a muito tempo e gostaria de te agradecer por essa grande dica viu.
me ajudou bastante !!!
que massa em.. esse funcionou no meu blog. eu tinha usado um que nem funcionava. a maioria das coisas que eu acho no blog dos outro nao funciona. e aqui ta tudo funcionando. Vlwa ae
Agora estou seguindo seu bloguinhu!!! ^^
:***