» Códigos, Dicas, Templates, Tutoriais para deixar o seu blog do seu jeito!

Configure o Next Post e o Previous Post do seu Blog





Quando você está lendo um post e, no final quando está terminando a sua leitura sempre tem os links de postagem mais recente e postagem mais antiga.

Se você gosta do que leu, muitas vezes é impulsionado a clicar em um destes links e continuar a ler os bons artigos do blog.

» Você pode deixar estes links como estão ou pode alterá-los colocando imagens com setas para a direita ou para a esquerda, com os dizeres Posts mais Antigos e Posts mais Recentes, com os símbolos ◄ ► ou até com o título do post anterior e do próximo, etc…
Vou ensinar como fazer tudo isso neste artigo:
Não Se Esqueça:
♥ Sempre tente antes num blogue de testes.
♥ Salve o seu template antes de começar, clicando em: Fazer backup/Restaurar
♥ Leia o tutorial até o fim e tenha certeza de ter entendido.
Entre no seu blog: Vá em ModeloEditar HTML→ Marque a caixinha Expandir modelos de widgets

Encontre o bloco de linhas abaixo▼

Procure pela Linha: <b:includable id='nextprev'>
<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>

    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

    <b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
    </b:if>
</div>
  <div class='clear'/>
</b:includable>

»Não se preocupe se o seu bloco de linhas estiver um pouco diferente deste o que interessam são as tags em vermelho.

1º Colocando imagens de setas nos links:
» Encontre e defina as imagens de setas para a direita, para a esquerda e de “Home” que te agradarem mais. Procure em sites de ícones.


Sugestões:» Ícones para o seu blog / » 22 Links de Sites de Ícones para Download → Nos sites de ícones procure por Arrow que significa Seta em inglês.

Salve as imagens em seu computador » Hospede em algum site de imagens ou no seu próprio blog » Guarde a URL das imagens

Eu escolhi estas imagens:

Next Home Previous

Para colocar a seta da Esquerda que significa Post mais Recente
Substitua a primeira tag em vermelho <data:newerPageTitle/> do código acima por esta tag:
<img alt='Next' border='0' src='URL da Seta da Esquerda'/>

Para colocar a seta da Direita que significa Post mais Antigo
Substitua a primeira tag em vermelho <data:olderPageTitle/> do código acima por esta tag:
<img alt='Previous' border='0' src='URL da Seta da Direita'/>

Para colocar a imagem de Home que Significa Início
Substitua a primeira tag em vermelho <data:homeMsg/> do código acima por esta tag:
<img alt='Home' border='0' src='URL da IMAGEM de Home'/>

♦ Clique em Visualizar para se certificar que está indo tudo certo.

♦ Clique em Salvar modelo.

Veja como ficou neste Blog de Demonstração no final do post.
2º Colocando Símbolos nos Links
Existem vários símbolos que representam setas que você pode colocar no seu blog. No Demoplate eu coloquei os símbolos ◄ ► que são representados pelos atalhos Alt+17 e Alt+16 respectivamente.

Veja neste post: Símbolos - Atalhos do Teclado a lista de símbolos e atalhos do teclado para você colocar.
Para colocar a seta da Esquerda que significa Post mais Recente
Substitua a primeira tag em vermelho <data:newerPageTitle/> do código no começo do post pelo atalho do símbolo:
[Alt+17 = ] ou 
[Alt+27 = ] ou 
[Alt+174 = «]
Para colocar a imagem da Direita que significa Post mais Antigo
Substitua a primeira tag em vermelho <data:olderPageTitle/> do código no começo do post pelo atalho do símbolo:
[Alt+16 = ] ou 
[Alt+26 = ] ou 
[Alt+175 = »]

O Código ficará assim:
<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'></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'></a>
      </span>
    </b:if>

    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

    <b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
    </b:if>
</div>
  <div class='clear'/>
</b:includable>

Neste caso não alterei o link do início. Mas fica a seu critério alterá-lo ou não.

♦ Clique em Visualizar para se certificar que está indo tudo certo.

♦ Clique em Salvar modelo.

Para colocar dizeres diferentes dos pré estabelecidos pelo blogger você faz o mesmo procedimento descrito acima.
3º Colocando os Títulos dos Posts no lugar dos links Next Post e Previous Post
1- Aqui vamos usar jQuery e precisamos colocar o link do javascript no HTML do blog:

» Cole esta tag <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' type='text/javascript'/>  acima da tag </head>


♦ Clique em Visualizar para se certificar que está indo tudo certo.

♦ Clique em Salvar modelo.

♦ Clique em Fechar .


2- Vá em Layout » Clique em Adicionar um Gadget » Escolha um gadget HTML/JavaScript » Cole o código abaixo em Conteúdo e Clique em Salvar.

<style type="text/css"> 
#blog-pager-newer-link {font-size:100%;width:200px;text-align:left;} 
#blog-pager-older-link {font-size:100%;width:200px;text-align:right;} 
</style> 
<script type="text/javascript">
$(document).ready(function(){ 
var newerLink = $("a.blog-pager-newer-link").attr("href"); 
$("a.blog-pager-newer-link").load(newerLink+" .post-title:first", function() { 
var newerLinkTitle = $("a.blog-pager-newer-link").text(); 
$("a.blog-pager-newer-link").text("<< " + newerLinkTitle); 
}); 
var olderLink = $("a.blog-pager-older-link").attr("href"); 
$("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() { 
var olderLinkTitle = $("a.blog-pager-older-link").text(); 
$("a.blog-pager-older-link").text(olderLinkTitle + " >>");//rgt 
}); 
}); 
</script>

Visualize seu blog e verá os títulos dos posts anterior e próximo. Confira no blogs de demonstrações Demoplate2.

OBS: »Você pode configurar os títulos como desejar alterando estas linhas de código CSS:

#blog-pager-newer-link {font-size:100%;width:200px;text-align:left;}
#blog-pager-older-link {font-size:100%;width:200px;text-align:right;}

Veja as imagens:

Antes:
Nexpost02


Depois:

Nexpost03


Apliquei este hack aqui no TPV. Veja no final deste post abaixo dos comentários.
OBS: Este hack funciona em todos os templates do blogger 2006 e 2010.

Fontes - Tradução e Adaptação dos artigos:
How To Change Older Post And Newer Post Link
Replace Older & Newer Post Links With Post Titles

25 Links com Lindos Ícones Sociais para o seu Blog




Se você tem um blog e deseja ter visitantes, já sabemos da importância de divulgar o seu blog em redes sociais ou em agregadores de conteúdo.

Sempre que encontro ícones destes sites divulgo-os aqui no TPV.
O visual do seu blog ficará lindo e também dando um destaque especial nestes sites sociais visando a divulgação do seu blog.

Fiz uma seleção de 25 sites com lindos ícones sociais grátis para você baixar.

1- Freebie: Set of social icons
preview
2- A Beautiful Free Vibrant Starburst Social Media Icon Set
starburstsocialmediaiconset
3- Free Metal Social Media Icon Set
Metal_Social_Media_Preview
4- Free Detailed Social Media Icons
free_detailed_social_media_icons_by_freeiconsfinder-d5lcwk8
5- Free Social Networking Media Icons
Free social networking icons
6- Freebie: Set of Egg-Shaped Social Icons
Egg-shaped social Icons
7-Woody Social Media Icons Set
woody-social-media-icons1
8- Set of Social Icons “Takeout Coffee Cup”
takeout coffe cup social icons
9- free icon set: Retro!
retro icon set
10- Black & White Minimal Social Icons
black-white-icon
11- Television Social Media Icons Set
tv-socialicon-set-580
12- New Social Media Icon Set
SN-Icons-set
13- Vintage Social Media Stamps: Icon Pack
preview (1)
14- Beautiful Free Letter Pressed Social Media Icons
beautifulletterpressedicons
15- Ribbon Icon Set
ribbon_icon_set_by_graphicavita-d4tnw7p
16- Bottles Social Media Icons By Apricum
apricum_social_media_icons
17- Extreme Grunge Social Media Garments Icons Pack
Grunge social icons
18- Vintage Icon Set For Bloggers
vinatge-icon-set-for-bloggers-preview
19- Candy Social Medica Icons
candy-social-icons
20- Sticker Style Social Media Icons
sticker_social
21- Graduation Hats Social Icons
landofweb3
22- Subtle Textured Grunge Noise Social Media Icons
subtlgrungeiconspreview
23- Pumpkin Social Icons
pumpkin social icons
24- 3D Circle Social Icons
3d circle social icons
25- Light Gray Social Icons Pack
light gray social icon pack

Posts Relacionados com Miniaturas




Existem muitas maneiras de colocarmos os posts relacionados no final dos posts dos nossos blogs.
♦ Podemos colocar somente os links na forma de texto;
♦ Podemos também colocar miniaturas com efeito hover (quando passamos o mouse em cima aparece o título da postagem). Inclusive este é um bom hack para ser ensinado aqui. Logo será!
Mas hoje vou ensinar como colocar os posts relacionados com as miniaturas (thumbnails) e o Título logo abaixo ▼.
Relacionados1
backup do template Não Se Esqueça:
» Essas configurações demandam algum conhecimento em códigos HTML e CSS. Portanto:
♥ Sempre tente antes num blogue de testes.
♥ Salve o seu template antes de começar, clicando em: Fazer backup/Restaurar
Leia o tutorial até o fim e tenha certeza de ter entendido.
Entre no seu blog: Vá em ModeloEditar HTML
Se não souber como fazer:

1ª Parte - Coloque o script e estilo dos Posts Relacionados com Miniatura

Encontre a tag </head> e cole este código▼ acima desta tag.
<!--Scripts e Estilo Posts Relacionados com Miniaturas-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;/*Cor do Título da Gadget dos Posts Relacionados*/
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;/*Fonte do Título dos Posts Relacionados*/ 
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;/*Cor do Título dos Posts Relacionados*/
}
#related-posts a:hover{
color:black;/*Cor do Título dos Posts Relacionados quando passa o mouse em cima*/
background-color:#d4eaf2;/*Cor do Fundo dos Posts Relacionados quando passa o mouse em cima*/
}
</style>
<script type='text/javascript'>
var defaultnoimage="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";
var maxresults=5;
var splittercolor="#CCCCCC";
var relatedpoststitle="Posts Relacionados";
</script>
<script src='http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Fim Scripts e Estilo Posts Relacionados com Miniaturas-->

♦ Clique em Visualizar para se certificar que está indo tudo certo.

♦ Clique em Salvar modelo.

Entendendo o código:

1º → A linha em azul define a imagem da miniatura quando o post não tiver uma imagem nativa.

[var defaultnoimage="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";]

A imagem utilizada neste hack é esta: no_image e está representada pelo URL: http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png
» Mas você pode usar a imagem que quiser.

Veja estes exemplos de imagens para você colocar no seu hack e ser exibida quando o seu artigo não tiver uma imagem:
gentleface.com free icon setfileclosephotodiagram-23no_image_3sem fotono_image5Deletedetail_no_imageno_image (1)no_imageno_image2no_image3noimagenoimage1no-image5no-photopicture (1)sem_foto1sem_imagemSlidesEstas imagens são apenas modelos que encontrei no google em uma busca rápida.
Sugiro que você crie a sua imagem para dar personalidade ao seu blog.
Se quiser usar alguma imagem destas clique em cima da imagem antes.

2º→ Esta linha indica o máximo de posts relacionados que você deseja colocar no final de seu post, neste caso são 5 posts.

[var maxresults=5;]

Isto vai variar de acordo com a largura da coluna dos seus posts.

3º → #CCCCCC – É a cor da linha que separa os posts relacionados.

[var splittercolor="#CCCCCC";]

4º → Determina o título dos posts relacionados no final do post.

Neste caso será “Posts Relacionados”, mas você pode colocar da forma que quiser. Exemplo: “Artigos Relacionados”, “Você pode Gostar dos Artigos”, etc…
[var relatedpoststitle="Posts Relacinados";]

5º → Este é o URL do código javascript.

Você pode baixá-lo e hospedar onde quiser. Veja→ Como Hospedar Javascript no seu Googlecode
[<script src='http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js' type='text/javascript'/>]

OU

Você pode hospedá-lo no seu próprio blog. » Basta substituir esta linha acima por este código ▼:
    <script type='text/javascript'>
      //<![CDATA[
  var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.media$thumbnail.url}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl[relatedTitlesNum]=d}else{if(typeof(defaultnoimage)!=='undefined'){thumburl[relatedTitlesNum]=defaultnoimage}else{thumburl[relatedTitlesNum]="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png"}}}if(relatedTitles[relatedTitlesNum].length>35){relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,35)+"..."}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++}}}}function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++){if(a[j]==e){return true}}return false}function printRelatedLabels_thumbs(current){var splitbarcolor;if(typeof(splittercolor)!=='undefined'){splitbarcolor=splittercolor}else{splitbarcolor="#d4eaf2"}for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==current)||(!relatedTitles[i])){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>0){document.write('<h2>'+relatedpoststitle+'</h2>')}document.write('<div style="clear: both;"/>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<a style="text-decoration:none;padding:5px;float:left;');if(i!=0)document.write('border-left:solid 0.5px '+splitbarcolor+';"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img style="width:72px;height:72px;border:0px;" src="'+thumburl[r]+'"/><br/><div style="width:72px;padding-left:3px;height:65px;border: 0pt none ; margin: 3px 0pt 0pt; padding: 0pt; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; line-height: normal; font-size-adjust: none; font-stretch: normal;">'+relatedTitles[r]+'</div></a>');i++;if(r<relatedTitles.length-1){r++}else{r=0}}document.write('</div>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}
   //]]>
    </script>
A parte interessante disso é que você pode configurar o tamanho da miniatura da imagem do post relacionado e a largura do espaço onde fica o título do post. Fazendo as alterações necessárias no código em verde.

2ª Parte - Colocando o Código dos Posts Relacionados com Miniaturas abaixo do Post

Encontre a linha:
<div class='post-footer-line post-footer-line-1'>
Se você não encontrar esta linha procure por:
<p class='post-footer-line post-footer-line-1'>
Obs: Se você colou o código abaixo da 1ª linha que apareceu no seu blog e os posts relacionados não apareceram, desfaça, procure pela próxima linha igual e refaça este procedimento. Dá certo na maioria das vezes. Este hack funciona para os modelos de templates 2010 do blogger. Veja o Demoplate 2010

Abaixo de uma destas linhas cole o código:
<!--Código Posts Relacionados com Miniaturas-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<!--Código Posts Relacionados com Miniaturas-->

♦ Clique em Visualizar para se certificar que está indo tudo certo.

♦ Clique em Salvar modelo.

Entendendo o Código

1º Está vendo o código:

max-results=6
Este código está relacionado com a primeira parte dos códigos.

→ Esta linha indica o máximo de posts relacionados que você deseja colocar no final de seu post » Se você quiser colocar 5 posts relacionados no final do post, neste código devera ser sempre um número a mais, ou seja, 6.


2º Os posts relacionados estão configurados para serem exibidos apenas quando abrir o post.

Se você quiser que sejam exibidos na página inicial é só retirar estas 2 linhas dos 2 blocos de códigos acima:
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- remove --></b:if>

Fonte: Tradução e Adaptação do Tutorial Related Posts Widget for Blogger with Thumbnails

 
Copyright ©2007-2014. Templates para VOCÊ - Todos os Direitos Reservados
Licença Creative Commons
Baseado no Tema Johny Classicsite | Tecnologia do Blogger