Gadget com Marcadores do Blog por Data

Código para mostrar os arquivos do Blogger de apenas um marcador. Veja como criar um gadget de arquivo do Blog mostrando apenas as postagens de uma das categorias do seu blog.

Gadget com Marcadores do Blog por Data

Esse gadget de arquivo separados por marcador é uma adaptação de outros códigos que já publicamos anteriormente:

Para usar esse código você pode adicionar um gadget de html/javascript ou Criar Paginapara mostrar os arquivos de um marcador especifico do Blogger. O código é o seguinte:

<style type="text/css">
.arquivos a{color: #000000;padding: 5px;display: block;text-decoration: none;}
.arquivos a:hover{color:#C00;text-decoration: underline overline;}
</style>

<div class="arquivos">
<script>
var postTitle=new Array();var postUrl=new Array();var postMp3=new Array();var postDate=new Array();var postYear=new Array();var postMonth=new Array();var postYearMonth=new Array();var postYearMonth2=new Array();var postTanggal=new Array();var postLabels=new Array();var postBaru=new Array();var sortBy="titleasc";var tocLoaded=false;var numChars=250;var postFilter="";var numberfeed=0;var month2=["Janeiro","Fevereiro","Março","Abril","Maio","Junho","Julho","Agosto","Setembro","Outubro","Novembro","Dezembro"];function loadtoc(a){function b(){if("entry" in a.feed){var d=a.feed.entry.length;numberfeed=d;ii=0;for(var h=0;h<d;h++){var m=a.feed.entry[h];var e=m.title.$t;var l=m.published.$t.substring(0,10);var p=m.published.$t.substring(5,7);var g=m.published.$t.substring(8,10);var n=month2[parseInt(p,10)-1]+" "+m.published.$t.substring(0,4);var c="/"+m.published.$t.substring(0,4)+"_"+p+"_01_archive.html";var j;for(var f=0;f<m.link.length;f++){if(m.link[f].rel=="alternate"){j=m.link[f].href;break}}var o="";for(var f=0;f<m.link.length;f++){if(m.link[f].rel=="enclosure"){o=m.link[f].href;break}}postTitle.push(e);postDate.push(l);postUrl.push(j);postYearMonth.push(n);postYearMonth2.push(c);postTanggal.push(g)}}}b();displayToc2();document.write('<br/><a href="http://www.mundoblogger.com.br/2009/11/criar-um-mapa-do-site-no-seu-blog.html" style="font-size: 9px; text-decoration:none; color: #616469;">Widget by Mundo Blogger</a></br/>')}function displayToc2(){var a=0;var b=0;while(b<postTitle.length){temp1=postYearMonth[b];document.write('<a style="font-size:18pt;padding-top:25px;padding-bottom:5px;background-image:none" href="http://www.dicasparablogs.com.br'+postYearMonth2[b]+'">'+temp1+"</a>");firsti=a;do{document.write('<a href="'+postUrl[a]+'" title="'+postTitle[a]+'">'+postTitle[a]+"</a>");a=a+1}while(postYearMonth[a]==temp1);b=a;if(b>postTitle.length){break}}};</script>
<script src="http://www.dicasparablogs.com.br/feeds/posts/default/-/Mais%20visitas?start-index=1&amp;max-results=19&amp;alt=json-in-script&amp;callback=loadtoc"></script>
</div>

Sabemos que ele é um código longo, mas são poucas partes que você precisa alterar. No inicio dele temos a formatação dos links com estilo CSS:
.arquivos a{color: #000000;padding: 5px;display: block;text-decoration: none;}
.arquivos a:hover{color:#C00;text-decoration: underline overline;}

Veja aqui algumas dicas para formatar links:
Códigos CSS para Criar Efeitos no Blog
Efeitos em links (sublinhado, sobrelinha, tachado)

Depois precisamos alterar dois trechos com o endereço do seu blog. No final do código procure por:

href="http://www.dicasparablogs.com.br'+postYearMonth2

E coloque o endereço do seu blog no lugar do nosso (http://www.dicasparablogs.com.br). Um pouco depois deste código você vai encontrar:

src="http://www.dicasparablogs.com.br/feeds/posts/default/-/Mais%20visitas?start-index=1&max-results=19

Aqui novamente troque o http://www.dicasparablogs.com.br pelo endereço do seu blog. Mas também é necessário alterar o nome do marcador que você vai utilizar que em nosso exemplo é o marcador Mais Visitas.

Veja que no código aparece Mais%20visitas, se colocar simplesmente escrito Mais Visitas como aparece no blog o código não funciona, mas conseguir essa codificação é simples basta clicar com o botão direito do mouse sobre o link do seu marcador e copiar o link. Depois cole no bloco de notas, copie o trecho do nome do marcador e coloque no lugar deste nosso exemplo.

Finalmente só falta alterar o numero 19 que aparece no final (max-results=19), isto configura quantos links aparecem daquele marcador. Veja abaixo a demonstração dos arquivos do blog por marcador.

Para terminar queremos lembrá-lo que esse código pode deixar seu blog mais lento por isso recomendamos que use esse código numa pagina individual ou se usar como gadget faça com apenas um marcador.

Fizemos esse tutorial para responder a pergunta feita num comentário da postagem Como Melhorar e Personalizar um Blog, então queremos agradecer a pergunta que serviu como sugestão para esse post.

3 comentários:

  1. Muito bom o artigo,acabei de por um no meu blog. http://naocustanadaesperar.blogspot.com.br

    ResponderExcluir
  2. Olá Fabiano,
    Gostaria de saber se você pode me indicar um programa onde se cria template, pode ser um site online também. Não sei muito criar template pelo "Editar HTML" e nem "CSS".

    ResponderExcluir
    Respostas
    1. os programas para criar template não funcionam para o blogger.

      O blogger usa muitas tags próprias e por essa razão não dá para criar um template. Você pode usar um programa de edição de html para testar formatações de texto (css), mas para colocar no seu blog tem que ser pela pagina editar html.

      Excluir