Novidades: Widget de formulário de contato no Blogger

Hoje foi introduzido um novo widget na galeria do Blogger: o Formulário de contato. Um formulário simples onde o leitor entra com um nome válido, um endereço de e-mail e o corpo da mensagem. O dono do blog recebe a mensagem através do seu e-mail de registro.

Como exibir as suas imagens do Instagram em seu blog

O Instagram é um app de sucesso, que antes restrito aos usuários do iPhone, teve sua versão lançada para o Android e obteve um sucesso estrondoso, tanto é que foi comprado pelo Facebook. Com o Instagram você tira fotos em seu dispositivo móvel e aplica vários filtros, disponibilizados pela ferramenta, e as publica nas principais redes sociais do momento.

Posts relacionados com imagens

Uma alternativa interessante e legal para quem não quer mexer em códigos do template, mas quer ter os posts relacionados em cada postagem é o widget do LinkWithin. Ele fornece um script que pode ser colocado aos elementos de páginas do Blogger.

Basta ir à página do site e fornecer o seu e-mail, a url do seu blog e a plataforma utilizada:

O script fornecido pode ser colocado tanto na sidebar quanto na coluna principal dos posts.
Caso você queira customizá-lo, é só entrar em contato que eles te atendem prontamente. Por exemplo. a frase "You might like these stories" pode ser mudada para outra do seu interesse.

O widget não tem nenhum anúncio, é grátis e se adapta perfeitamente com o design de seu template. E vocês podem vê-lo em ação no final do post.

Este post NÃO É patrocinado.

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 Rô 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!
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.

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!

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

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.