Pesquisa personalizada

quarta-feira, 17 de dezembro de 2008

Widget de posts por categoria com imagens





Conforme eu tinha anunciado, encontrei um script de posts recentes com imagens, (thumbnails) no blog da Marianne, que foi o primeiro passo para que pudesse fazer( pelo menos, tentar) um script de posts por categoria. Aqui venho usando o widget disponibilizado pela em seu blog antigo e modificado pelo Compulsivo abaixo da área dos posts. Por ele ter sido feito no Yahoo Pipes, seu carregamento era lento e em alguns navegadores, não funcionava de jeito nenhum... No IE, nem dava sinal.

O código, recentposts_thumb.js, que peguei no blog da Marianne, foi publicado no blog do Anhvo, cuja linguagem é incompreensível para mim, já que ele é vitnamita, esse código mostra os posts recentes com imagens, e então, eu comecei a brincar com o script mesmo sem saber como essa linguagem funciona, acabei modificando-o, justamente usando comparações e analogias vistos em outros scripts. Primeiramente vou descrever o que eu fiz, para depois dar o tutorial.

Ao tentar decifrar o script, me deparei na parte do endereço de feed, que estava assim:
document.write("<script src=\""+home_page+"feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\">
A parte do endereço de feed é essa:[ "+home_page+"feeds/posts/default], e eu já tinha publicado como obter um feed por categoria, logo, fiz a seguinte troca:
document.write("<script src=\""+home_page+"feeds/posts/default/-/"+label+"?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\">

Onde + label+ é a variável que representa o marcador escolhido. Então renomeei o código para tagposts_thumb1.js.

O próximo passo era acrescentar no código do widget a variável label:

Antes:
numposts = 2;
home_page = "URL DO SEU BLOG";

Depois:
numposts = 2;
label = "MARCADOR";
home_page = "URL DO SEU BLOG";



Os primeiros resultados podem ser vistos no meu blog de testes! Photobucket
E agora, sem mais delongas, vamos ao tutorial do...

... Widget de posts por categoria com imagens:

1 - Antes de tudo: Vá em lay-out => Editar HTML => Faça um backup do seu template! Cautela e caldo de galinha não faz mal à ninguém... exceto à galinha!

2 - Baixe o arquivo tagposts_thumb1.js num servidor de sua preferência (eu uso o Skydriver, aprenda a usá-lo, a Juliana explica!)

3 - Copie e cole o código seguinte criando um widget nos elementos de páginas na seção lay-out de seu blog, onde você quiser. Como eu estou emulando um template magazine, o legal é criar antes duas colunas abaixo da área das postagens, conforme descrito no Bloggerbuster, ou nesse post do Estimulanet.Com

<script language="JavaScript">
imgr = new Array();

imgr[0] = "URL DA 1ª IMAGEM";
imgr[1] = "URL DA 1ª IMAGEM";
imgr[2] = "URL DA 1ª IMAGEM";
imgr[3] = "URL DA 1ª IMAGEM";
imgr[4] = "URL DA 1ª IMAGEM";

showRandomImg = true;

tablewidth = 220;
cellspacing = 2;
borderColor = "#ffffff";
bgTD = "#ffffff";

imgwidth = 64;
imgheight = 64;

fntsize = 12;
acolor = "#00c";
aBold = true;
icon = "•";

text = "comentários";

showPostDate = false;

summaryPost = 100;
summaryFontsize = 11;
summaryColor = "#c00";
icon2 = "→";

numposts = 2;

label = "MARCADOR";

home_page = "URL DO SEU BLOG";

</script>
<script src="URL-DO-ARQUIVO-tagposts_thumb1.js" type="text/javascript"></script>

<div style="text-align: right; ">
<span style=" background: #eee;">>>Veja mais em <a style="font-weight: bold;" href="http://NOME-DO-SEU-BLOG.blogspot.com/search/label/NOME-DO-MARCADOR">MARCADOR</a>
<<</span></div> 



4 - Agora explicando passo a passo cada parte do código, como diria Jack o Estripador:

a) Imagens aleatórias
imgr[0] = "URL DA 1ª IMAGEM";
imgr[1] = "URL DA 1ª IMAGEM";
imgr[2] = "URL DA 1ª IMAGEM";
imgr[3] = "URL DA 1ª IMAGEM";
imgr[4] = "URL DA 1ª IMAGEM";

showRandomImg = true;

Escolha 5 imagens e as hospede num servidor de imagens (Use o Picasa, de preferência, ou o próprio Skydrive). Quando você fizer um post sem imagem, o script irá colocar aleatoriamente uma dessas que estão armazenadas.

b) Tabela
tablewidth = 220;
(Ajuste aqui o comprimento da tabela de acordo com a sua barra lateral)
cellspacing = 2;
(Ajuste aqui o espaço entre as células)
borderColor = "#ffffff";
(Coloque aqui a cor da borda da tabela, que no caso está na cor branca)
bgTD = "#ffffff";
(Coloque aqui a cor de fundo da tabela)

c) Ajuste das imagens
imgwidth = 64;
(Comprimento da imagem)
imgheight = 64;
(Altura da imagem)

d) Fonte e cor do endereço do post
fntsize = 12;
(Tamanho da fonte)
acolor = "#00c";
( Cor do link)
aBold = true;
(Link disposto em negrito, se não quiser assim, coloque false no lugar de true)

e)Data do post
showPostDate = false;
(Do jeito que está, a data não vai ser mostrada. Se você quiser mostrá-la, coloque true no lugar de false)

f) Resumo do post
summaryPost = 100;
(Aqui coloque a quantidade de caracteres do resumo)
summaryFontsize = 11;
(Tamanho da fonte do resumo)
summaryColor = "#c00";
( Cor da fonte do resumo)

g) Outras configurações:
numposts = 2;
(Aqui coloque quantos posts você quer que apareça. Para um estilo magazine o ideal são dois)

label = "MARCADOR";
(Aqui, no negrito, coloque o marcador escolhido)

home_page = "URL DO SEU BLOG";
(Em negrito, coloque a url do seu blog, não esquecendo de colocar / no final, exemplo: http://crazyseawolf.blogspot.com/)
</script>
<script src="URL-DO-ARQUIVO-tagposts_thumb1.js" type="text/javascript"></script>
(Em negrito, coloque a URL do arquivo tagposts_thumb1.js que você hospedou antes)

Um detalhe: os comprimentos (widths e heights) estão em px, e o código das cores em hexadecimal ( sempre começando com #), consulte tabela.

h) Essa última parte eu acrescentei, caso você queira colocar um link para que o leitor possa pesquisar outras postagens no marcador determinado.

<div style="text-align: right; ">
<span style=" background: #eee;">>>Veja mais em
<a style="font-weight: bold;"
href="http://NOME-DO-SEU-BLOG.blogspot.com/search/label/NOME-DO-MARCADOR">MARCADOR
</a><<</span></div> 


Onde estiver em negrito, substitua com o nome do seu blog, nome do marcador e marcador, respectivamente. Se achar desnecessário, pode até apagá-la, eu a coloquei mais para dar um charme no widget. Photobucket

Em tempo, sou um principiante em códigos, se alguém encontrar algum erro, alguma coisa desnecessária, um código mais simples ou um um novo script, dê um toque. Eu vou agradecer! Photobucket

Observação: Como será que se faz aquelas caixas para se oferecer widgets direto para o blog? Copiar e colar ninguém merece!!! Photobucket

Atualização: o valor icon que aparece duas vezes no código original acima usava os símbolos [•] e [→], e eu não sabia o que representavam. Pesquisando aqui, descobri que se tratam de carácteres especiais de tabela.


Permalink:





Sobre o Autor:
Crazyseawolf Para saber mais sobre o autor deste blog, visite o seu perfil no Google+ ou este link . Para enviar uma mensagem, clique aqui . Para outras informações, leia o FAQ .



11 comentários :

  1. Olá Cidão!

    Achei muito interessante esse widget de post por categoria. Mas estou copiando o script "tagposts_thumb1.js.", só que está vazio. Você poderia me ajudar?

    George

    ResponderExcluir
  2. George: Ele estava hospedado no Skydrive, e os arquivos colocados lá, não estão funcionando, aliás, não sei se você sabe, mas há uma incompatibilidade entre a Microsoft e o Blogger. O que posso te sugerir é o site da Rô, o Bloggersphera. Ela mudou o script e fez coisas maravilhosas com ele.

    ResponderExcluir
  3. puts veio.. nao acredito mesmo.. eu crente que tinha achado a solução e vc me tira o script do ar?!?! :T no blogsphera so ensina a colocar esses widgets de forma horizontal.. e eu tava procurando justamente vertical, sem comentarios.. acredito que la nao explica isso.. não eh possivel! Abraço

    ResponderExcluir
  4. Renato: Troquei de servidor. O script agora está funcionando.

    ResponderExcluir
  5. cara eu naum consigo fazer funcionar http://econespaco.blogspot.com
    nem com o seu aqui nem com o do blogshera la o link para baixar o arquivo ta corrompido
    me salva

    ResponderExcluir
  6. rapaz eu to precisando tirar o numero de comentarios e mudar a fonte vc sabe como eu faço isso??
    vai quebrar uma árvore to batendo cabeça

    ResponderExcluir
  7. @Arq. Gustavo Julião


    O arquivo está funcionado. Troquei de host. :)

    ResponderExcluir
  8. @Resgate music


    Coloque 0 no número de comentários, quanto a troca da fonte, não dá com esse código. Ele se integra à fonte que você usa no seu blog.
    :)

    ResponderExcluir
  9. Muito bom, valeu pelo post, me ajudou muito

    ResponderExcluir
  10. gostei deste sistema, editar ele, para nao aparecer nada alem da imagem da postagem? queria colocar em meu blog uma parte onde aparecerá 4 posts de marcadores diferentes mas, so aparecer a imagem, eu consegui um porem a imagem distorce quando aumento o tamanho dela no script

    ResponderExcluir

Pessoal, comentem, críticas e elogios serão bem aceitos. E eu respondo, posso demorar mas respondo. Esse velho lobo do mar tarda mas não falha!!!!

Leia antes a minha Política de Comentários.

Se quiser deixar o link de uma postagem sua, utilize o código abaixo trocando o que está escrito em letra maiúscula:

<p><abbr><em><strong>SEU NOME</strong> - último post do blog... <a href="<strong>LINK-DA-POSTAGEM</strong>"><strong>TÍTULO DA POSTAGEM</strong></a></em></abbr><p>

Related Posts with Thumbnails
Google
 
 
Template Denim, criado por Darren Delaye, customizado por Crazyseawolf.