Novidade muito legal: um formulário de contato que pode ser inserido num blog do Blogger/Blogspot. Eu já tinha apresentado aqui o serviço do Contactify – Formulário de Contato para Blogger – Blogspot. Apesar de muito útil, o serviço conta com uma desvantagem: a pessoa tem que sair do blog para enviar um contato.

Bem, seus problemas acabaram. O Contactify agora oferece, através do Widgetbox, um widget que pode ser inserido facilmente no Blogger, dentro de um post.

Contactify Widget (Beta)

Tendo criado seu link (é muito fácil, veja meu post anterior sobre Formulário de Contato para Blogger) você já pode criar seu widget. É possível definir o tamanho – tenha cuidado para dar uma altura suficiente, ou os botões de “Aceito” e “Não Aceito” não vão aparecer – a mensagem que seus leitores vão ver após enviar o contato, e inclusive o CSS.

Comentário sobre o CSS: eles não especificam parâmetro nenhum; mas experimente incluir o CSS do seu blog, e verá uma boa diferença. Como o Blogger não oferece a opção de ter um CSS incluído nas páginas do blog, eu criei um arquivinho simples de CSS, e guardei o arquivo no Google Pages. Ficou bem melhor que o formato padrão.

Se quiser copiar, clique aqui: CSS para Contactify Widget.

Após customizar seu widget, eles oferecem inclusive incluir o widget através do próprio Widgetbox, clicando em “Get Widget”, depois em “See more”, e daí em “Add to Blogger post”.

Caso prefira fazê-lo você mesmo, é só copiar o código e colar no editor HTML do seu post. A vantagem desta opção é que você pode incluir qualquer texto que achar necessário, tanto antes como depois do widget.

Para ver como fica, dê uma olhada no meu formulário de contato.

_____________________________

Em tempo: Acabo de publicar minha novíssima página de “Perguntas Frequentes”, ou, como eu a batizei: Querido Leitor, FAQ You!

Espero que seja útil. Conforme surgirem coisas novas, vou atualizando. Aceito sugestões!

Technorati : Blogger hacks, Contactify, FAQ, dicas, ferramentas, formulário de contato, melhore seu blog, perguntas frequentes, widgets

Mais informação:

• Widget de Posts Relacionados para Blogger – Blogspot (81)
• Suplemento de Trackbacks Para Blogger – Blogspot (37)
• Personalize seu Blogger – Blogspot: Widget Customizável para Posts Recentes (33)
• Lista de Posts Relacionados no Rodapé do Post para Novo Blogger – Blogspot (65)
• Hack de Posts Recentes para Blogger Clássico (11)

Usar um domínio próprio é uma estratégia importantíssima para ter um blog decente, destacável e respeitável no Blogspot. Domínio próprio é um endereço personalizado; por exemplo, www.netdinheiro.com é um domínio personalizado.

Um domínio próprio oferece muitas vantagens:

- Elimina a má impressão causada por ter a palavra “blogspot” no seu endereço;

- Se você fizer o “dever de casa” direitinho, seus visitantes mal perceberão que você usa Blogger;

- Permite que, caso você decida sair do Blogger, você conserve seu PageRank;

- Caso você mude para WordPress, existe uma função que possibilita conservar as mesmas URLs, isto é, você não perderá indexação (ignoro se existe uma opção parecida em outros CMS);

- Enquanto você permanecer no Blogger, ele se encarregará de redirecionar as visitas vindas de seus links antigos (com blogspot no endereço) ao domínio novo;

Legal, não é? Mas para que você possa usufruir de todos esses benefícios, você precisa, primeiro que nada, colocar um domínio personalizado no seu blogspot.

DISCLAIMER:

POR FAVOR, LEIA TODO O PROCEDIMENTO ANTES DE INICIAR O PROCESSO, E SIGA AS INSTRUÇÕES CUIDADOSAMENTE.

Embora o processo seja relativamente simples, e eu mesma o tenha realizado com sucesso várias vezes, o Blogger não é a ferramenta mais confiável do mundo. Tenha cuidado, e esteja preparado para qualquer eventualidade.

Eu simplesmente estou ensinando aqui a fazer o que eu já fiz, seguindo as instruções dadas na Ajuda do Blogger, mais algumas dicas de minha própria experiência. A RESPONSABILIDADE SOBRE O RESULTADO FINAL É SUA.

Isso esclarecido, seguimos em frente.

Como eu coloco um domínio personalizado no meu blog no Blogger – Blogspot?

O primeiro passo é comprar seu domínio.

Se quiser usar um .br, deverá procurar o Registro.br, ou a LocaWeb – no momento, a única empresa autorizada a revender domínios .br (tks Manoel). Para outros domínios – .com, .org., .net, .info, etc – você dispõe de muitas opções onde comprar. Pessoalmente, prefiro o Godaddy, pois o sistema de controle total sobre os DNS que eles oferecem, facilita muitíssimo o processo. O problema é que muitos registrars (empresas que vendem domínios) internacionais só aceitam pagamento com cartão internacional ou Paypal.

Pense bem antes de escolher

Dedique um tempinho a escolher seu domínio. Lembre-se, ele vai lhe acompanhar por muito tempo; pense em como esse domínio se verá dentro de um ano, dois, cinco, dez anos. Evite palavras de baixo calão, ou que passem impressão de estupidez. Em caso de dúvida, pergunte ao Fábio como um nome pode afetar o futuro do seu blog!

Você pode usar um domínio – www.meudominio.com – ou um subdominio – www.exemplo.meudominio.com – com ou sem www. No entanto, o Blogger não aceita subdiretórios – www.meudominio.com/exemplo não pode ser usado.

Caso esteja pensando em incluir a palavra “blog” no seu endereço, leve em conta que os domínios que contêm essa palavra são bloqueados em muitos lugares.

E lembre-se: você só precisa comprar um domínio, não uma hospedagem ou host. O Blogger vai continuar hospedando seus arquivos, posts, fotos, comentários; de fato, a única mudança que você verá será no endereço de seus posts. De resto, tudo continuará funcionando extamente da mesma forma.

A única exceção seria caso você queira usar publicação FTP, isto é, hospedar você mesmo seus arquivos, utilizando o Blogger somente como CMS. O FTP permite que você faça coisas que não são possíveis com os Blogspot hospedados no Blogger, mas também tem muitas desvantagens (por exemplo, não é possível usar layouts – o FTP só funciona com o modelo clássico). Mais informação sobre Blogger e FTP aqui.

Segundo Passo – Configurando os DNS

DNS significa Domain Name System ou Sistema de Resolução de Nomes. Um servidor DNS determina aonde um determinado endereço web leva o visitante; ele relaciona o endereço web com o lugar onde o conteúdo está guardado, onde pode ser acessado. Até agora, você tem um domínio (endereço) mas ele não está apontando à lugar nenhum; nenhum servidor na Internet sabe aonde direcionar as pessoas que visitam esse endereço.

Para que seu novo domínio aponte ao seu Blog, você deve criar um CNAME (canonical name) para o seu domínio, associando-o com ghs.google.com. O procedimento exato para fazer isso depende do lugar onde você registrou seu domínio, e recomendo que você descubra isso ANTES de dar início ao processo. Vou dar dois exemplos aqui: o Godaddy e o Zoneedit.

No Godaddy:

1 - Entre na sua conta no Godaddy.

2 - Entre em My Account -> Manage Domains

3 - Clique no domínio que você quer usar, e depois em Total DNS Control And MX Records.

4 – Clique em Add New CNAME Record. Se por alguma razão você já tem um CNAME criado para esse domínio, clique em Edit (o ícone do lápis que aparece nessa linha).

5 - No campo Name, insira somente o Subdominio que você quer usar. Por exemplo, se você quer usar www.meudominio.com, insira somente www. Se você quer usar subdominio.meudominio.com, insira somente subdominio.

6 - No campo Host Name, coloque ghs.google.com

7 - Clique em Continue, e depois em Add. Se você está editando um CNAME existente, clique em Continue e depois em Update.

No Zoneedit:

O Zoneedit não vende domínios; ele serve para os casos em que o lugar onde você comprou o domínio não permite a edição do CNAME. Por exemplo, eu usei o domínio que ganhei na promoção Ganhe um domínio grátis do BrPoint, para o Blog Templates. O lugar onde o domínio foi registrado não permite edição de CNAME. Então, fui à cata de soluções, e descobri o Zoneedit.

1 - Crie uma conta no Zoneedit.

2 - Entre na sua conta. Clique em Add Zones.

3 - Bem em cima, você verá que diz “Enter domain name”, e ao lado há uma caixinha em branco. Aí é onde você deve inserir seu domínio (sem http nem www). Por exemplo, se você vai usar www.meudominio.com, digite meudominio.com e clique em Add Zone.

4 - O Zoneedit vai lhe fornecer os dois DNS que você precisa para configurar seu domínio. Volte ao painel de controle do domínio (no meu caso, no http://dominios.weblugar.net/) e insira os DNS.

ATENÇÃO: A ativação dos DNS pode demorar até 72 horas. Caso você receba uma mensagem de erro ao tentar inserí-los no seu domínio, espere mais um tempo e tente de novo.

5 - Volte ao Zoneedit. Clique no domínio que você quer usar.

6 - Clique em Aliases (CNAME). Fica no topo da página, entre outros links.

7 - No campo Alias insira seu domínio – por exemplo, www.meudominio.com

8 - No campo Actual Name digite ghs.google.com

9 - Clique em Add New Alias.

A esta altura, seu domínio está configurado para ser usado no Blogger. Como você deve ter percebido, o importante é que o domínio tenha um CNAME apontando para ghs.google.com. Caso você não esteja usando Godaddy ou Zoneedit, procure por instruções de como fazer isso na ajuda do site onde você registrou o domínio, ou consulte o suporte. Você também encontra instruções para alguns outros serviços de registro na Ajuda do Blogger (em Inglês)

IMPORTANTE: Não confunda os DNS com o CNAME. Você só terá que modificar os DNS caso o lugar onde você comprou o domínio não forneça DNS.

ghs.google.com NÃO É UM DNS; é o valor que você deve inserir no CNAME. Se a configuração do domínio pede DNS – DOIS DNS, sempre são dois DNS – use o Zoneedit como foi descrito acima. Após configurar os DNS (algo como ns1.zoneedit.com e ns3.zoneedit.com - o próprio Zoneedit lhe indicará os DNS corretos) use o ghs.google.com para configurar o CNAME.

IMPORTANTE 2 – Todos os registros de domínio oferecem a opção de Redirecionamento ou “Web Forwarding”. Essa opção permite que, quando alguém digita um determinado endereço, seja automaticamente levado à outro. Isso é extremamente útil, pois o Blogger só redireciona um endereço. Usando o redirecionamento do domínio, fazemos com que as duas versões do nosso endereço – com www e sem www – apontem ao mesmo lugar.

Por exemplo: se você configurar www.meudominio.com para usá-lo no Blogger, quem visitar http://meudominio.com vai dar de cara com uma página de erro (e vice versa). Para evitar isso, configure seu domínio para que a versão que você não vai colocar no Blogger, seja redirecionada para a versão que você vai usar.

Usando o exemplo acima, você deverá configurar o redirecionamento (ou web forwarding) de http://meudominio.com, para que ele aponte à www.meudominio.com.

Configurando o Blogger com o Domínio Personalizado

Esta é a parte fácil.

1 - Entre na sua conta do Blogger. Vá até Configurações -> Publicação.

2 - Clique em Alternar para: Domínio Personalizado.

3 - No campo Seu Domínio, insira seu domínio – aquele que você configurou previamente nos passos anteriores. Usando o mesmo exemplo, seria www.meudominio.com

4 - Clique em Salvar Configurações.

PRONTO! Agora é só esperar a propagação – isto é, que os servidores da Internet informem uns aos outros sobre seu novo endereço. Esse processo pode levar até 72 horas. Durante esse período, é possível que seu blog fique fora do ar, ou que possa ser acessado por algumas pessoas e outras não. Não entre em pânico! É completamente normal.

No entanto, se após 72 horas seu blog não tiver voltado ao normal, com o novo endereço, é hora de se preocupar. Dê uma checada em todas as configurações, veja se cometeu algum erro. Caso positivo, corrija o que estiver errado e espere novamente. Se não houver nada de errado, mas o blog continuar fora do ar, entre em contato com o suporte da empresa onde você comprou o domínio.

Quando tudo estiver funcionando corretamente, seu antigo endereço do blogspot será automaticamente redirecionado para o novo endereço. Ou seja, todos os inbound links e bookmarks que você já tenha, continuarão funcionando. E, como o redirecionamento é feito com um 301 Redirect, você conserva seu PageRank e indexação. Essa atualização não é instantânea, e é possível que nos primeiros dias você se depare com um PR 0. Tenha um pouco de paciência e tudo voltará ao normal.

Inclusive, estou estudando (juntamente com o Janio) uma forma de migrar para o WordPress, e manter esse redirecionamento – dessa forma, você não perderá nada, absolutamente nadinha quando quiser migrar. Assim que tiver novidades concretas, publico um tutorial sobre isso.

Se você faz upload de imagens no Blogger, elas continuarão funcionando. Mais informação sobre isso aqui: O que acontece com minhas imagens quando meu blog é movido?

Se você usa o Zoundry, recomendo que faça o download de seu blog com o novo endereço. Caso contrário, as categorias terão que ser adicionadas manualmente em cada post.

Se quiser ver os domínios personalizados funcionando, acesse o Deusario (onde usei o Godaddy) ou o Blog Templates (Onde usei o Zoneedit).

E antes que você pergunte: já, já vou colocar domínio personalizado aqui.

Mais informação:

• Widget: Formulário de Contato para Blogger – Blogspot (20)
• Widget de Posts Relacionados para Blogger – Blogspot (81)
• Suplemento de Trackbacks Para Blogger – Blogspot (37)
• Personalize seu Blogger – Blogspot: Widget Customizável para Posts Recentes (33)
• Lista de Posts Relacionados no Rodapé do Post para Novo Blogger – Blogspot (65)

UFA!

UPDATE! Ainda não acabou. Estive resolvendo uns erros no código. ATENÇÃO:

Se você já instalou o hack, lamento informar que terá de copiar os códigos de novo. Refaça o processo, pois você terá que inserir a URL do seu blog para que o hack funcione corretamente. As novas instruções estão incluídas no processo de instalação. Com este update, corrigi o problema que estava dando erro ao tentar incluir o blog nos Favoritos do BlogBlogs, e corrigi o link do Technorati, que estava apontando ao post, e não ao blog.

Ainda não sei qual é o problema com o widget de votos do Rec6; assim que descobrir a solução faço uma nova atualização. Peço desculpas pelos transtornos causados.

_________________________________________

Este post me deu um trabalhão, mas finalmente consegui: botões de social bookmarking para Blogger! Esses botões são uma excelente forma de divulgação e fidelização.

Agora você pode ter no seu blog links para os principais Social Bookmarks. Esses links permitem adicionar seus posts aos Favoritos em diversas redes sociais: nos nacionais Rec6, Linkk e Ueba, mais Technorati, Delicious, Digg e Stumble Upon. E como bonus, um link para adicionar seu blog aos favoritos do BlogBlogs!

Achou pouco? Tem mais! Depois de quebrar a cabeça, consegui decifrar o código necessário para incluir o widget do Rec6 que mostra automaticamente o número de votos que seu post recebeu, no melhor estilo Digg. O código disponibilizado pelo próprio Rec6 só funciona com o Blogger Clássico; mas você pode ter esse widget no Novo Blogger também.

Vamos por partes. Dê uma olhada neste blog, para ver quais são suas escolhas. No rodapé do post, você vai ver duas linhas de botões, aparentemente iguais, se não fosse porque uma tem um ponto de exclamação depois da frase Adicione aos Favoritos!

Passe o mouse sobre os ícones da segunda linha. O texto Adicione aos Favoritos! vai mudar, por exemplo para “Adicionar ao Rec6″. Gostou? Eu também.

Então, porque estou oferecendo duas versões diferentes? Porque para ter esse efeito dinâmico, você precisa usar um arquivo de javascript hospedado por você mesmo, conforme eu expliquei neste post: Como Exibir Sumários dos Posts com Link de “Leia Mais” No Blogger – Blogspot. Se você não quiser ou não souber como fazer isso, pode usar a versão simples. A escolha é sua.

Por favor, leia todo este post antes de aplicar o método que desejar.

Botões de Social Bookmarking para Blogger – Versão Simples

1 - Como sempre, primeiro faça back-up do seu template.

2 - Na Tab “Editar HTML”, clique em “Expandir Modelos de Widget”.

3 - Procure pelo seguinte código:

<p class=’post-footer-line post-footer-line-3′/>

4 - Copie todo o código que está nesta página, e cole logo abaixo dessa linha.

UPDATE: Após colar o código no seu template, procure por esta linha, que está logo no começo do código que você acabou de colar:

<a href=’http://www.blogblogs.com.br/my/gadgets/fave?url=URLDOSEUBLOG‘

SUBSTITUA a parte em vermelho pelo endereço do seu blog, SEM A BARRA / AO FINAL.
Por exemplo: se eu fosse colocar o Blogando por Dinheiro, o final da linha ficaria assim:

/my/gadgets/fave?url=http://blosque.com‘

Cuidado para não inserir nem deletar nada. O problema é que o Blogblogs não aceita a URL com a barra no final, por isso dá erro. Inserindo diretamente sua URL, o problema é resolvido.

5 - Dê um preview. Você ainda não deveria ver nenhuma mudança. Tudo certo? Salve.

6 - Passe às configurações.

Botões de Social Bookmarking para Blogger – Versão Dinâmica

1 - Faça o download do script: clique neste link com o botão direito do mouse, e salve o arquivo favoritos.txt no seu computador.

2 - Mude a extensão do arquivo de txt para js, no próprio Notepad. Simplesmente abra o arquivo, selecione “Guardar como” e substitua favoritos.txt por favoritos.js

3 - Faça o upload do arquivo em sua conta. Uma opção grátis para hospedar seus arquivos é o Google Pages.

4 - Coloque a URL do seu script no seguinte código:

<script src=’Insira aqui a URL do script‘ type=’text/javascript’/>

Por exemplo: se eu estivesse hospedando o script na minha conta do Google pages, a URL seria:

<script src=’http://nospheratt.googlepages.com/favoritos.js‘ type=’text/javascript’/>

5 - Entre na sua conta do Blogger. Como sempre, faça antes um backup do seu template! Na tab “Editar HTML”, clique em “Baixar modelo completo”, e salve uma cópia do template no seu computador.

6 - Procure a tag </head>.

7 - Copie o código do script, com sua URL, e cole-o logo ANTES da tag </head>.

8 - Ainda na Tab “Editar HTML”, clique em “Expandir Modelos de Widget”.

9 - Procure pelo seguinte código:

<p class=’post-footer-line post-footer-line-3′/>

10 - Copie todo o código que está nesta página, e cole logo abaixo dessa linha.

UPDATE: Após colar o código no seu template, procure por esta linha, que está logo no começo do código que você acabou de colar:

<a href=’http://www.blogblogs.com.br/my/gadgets/fave?url=URLDOSEUBLOG‘

SUBSTITUA a parte em vermelho pelo endereço do seu blog, SEM A BARRA / AO FINAL.
Por exemplo: se eu fosse colocar o Blogando por Dinheiro, o final da linha ficaria assim:

/my/gadgets/fave?url=http://blosque.com‘

Cuidado para não inserir nem deletar nada. O problema é que o Blogblogs não aceita a URL com a barra no final, por isso dá erro. Inserindo diretamente sua URL, o problema é resolvido.

11 - Dê um preview. Você ainda não deveria ver nenhuma mudança. Tudo certo? Salve.

12 - Passe às configurações.

Configurações

A esta altura, você não vai ver os botões na Home do blog, pois eles estão configurados para aparecer só nas páginas dos posts. Se você prefere que eles apareçam na Home também, volte ao trecho de código que você adicionou após a linha <p class=’post-footer-line post-footer-line-3′/> e delete a primeira e a última linha, isto é:

<b:if cond=’data:blog.url != data:blog.homepageUrl’> e </b:if>

Se você não quer que os botões fiquem centrados, delete também as tags <center> e </center>. Eu já explico como usar outro alinhamento.

Você deve adicionar isto ao seu CSS, de preferência na parte onde estão os estilos do post:

.favoritos {
font-weight: bold;
}

.favoritos img {
border: none;
}

Note que antes de “favoritos” há um ponto. Não é erro, é assim mesmo.

No primeiro grupo, você pode configurar a fonte, margens, e o que mais quiser. Se você eliminou as tags que centralizam os botões, insira abaixo de font-weight: bold; esta linha: float: left;

Isso fará com que os botões fiquem à esquerda. Se quiser à direita, substitua left por right.

O segundo grupo faz com que os ícones não tenham borda. Se quiser que as bordas apareçam, delete-a. Se souber como, pode alterar essa linha para configurar as bordas como quiser. Nesse grupo também pode definir margens ou padding para os ícones.

Uma palavrinha sobre os ícones: os links que estão nos códigos apontam à imagens que estão hospedados na minha conta do Google Pages. Aconselho que você faça download delas e hospede-as você mesmo – nesse caso, não esqueça de trocar as URLs das imagens. É só procurar as linhas como esta:
src=’http://blogandopordinheiro.googlepages.com/stumbleupon.gif’
As imagens estão todas depois de src= Cuidado para não deletar as aspas que estão antes e depois da URL. Se você não quiser hospedar as imagens, não me oponho; mas não vou aceitar queixas caso os links deixem de funcionar por algum motivo.

Dê um preview, se tudo estiver certinho, salve. Já está pronto! Agora você tem links de social bookmarking no seu Blogger – Blogspot.

Widget com Número de Votos no Rec6

Este é bem mais simples de instalar.

1 - Como sempre, primeiro faça back-up do seu template.

2 - Na Tab “Editar HTML”, clique em “Expandir Modelos de Widget”.

3 - Procure pela seguinte linha de código:

<p><data:post.body/></p>

4 - Cole este código logo ANTES dessa linha:

<div class=’rec6′>
<script expr:src=’”http://rec6.via6.com/link.php?action=widget&url =” + data:post.url’ type=’text/javascript’/>
</div>

5 - Na parte do CSS onde estão os estilos do post, cole este trecho de código:

.rec6 {
float: left;
margin: 5px;
}

.rec6 img {
border: none;
}

Se você prefere que o widget apareça à direita, troque left por right. Pode aumentar ou diminuir a margem, colocar padding, etc.

6 - Dê um preview. Tudo certo? Salve!

Ainda não coloquei os botões de Social Bookmarking aqui porque não me deu tempo – mas testei tudo no blog onde você pode ver o script em funcionamento. Logo vou colocar tudo por aqui também.

Hack Original: Beautiful Beta

ACABOU!

UPDATE: Botões de favoritos e compartilhamento (Social Bookmarking)
Criação do Gregori Pavan – versão com 30 botões!

Compare Preços de:
Blog: Comunicação e Escrita Íntima na Internet
Blogs! Seja Um Editor na Era Digital
Alavancando Negócios na Internet

E mais: Acessórios para Internet, Ferramentas, DVD, Filmes, Celulares, Notebooks, Câmeras, Jogos, Wii, PS3 no JáCotei

Technorati : BlogBlogs, Blogger, Blogger Hacks, Blogspot, Botões, Delicious, Digg, Divulgação, Favoritos, Linkk, Links, Rec6, Social Bookmarking, Stumble Upon, Technorati, Ueba, Widgets

Mais informação:

• Widget: Formulário de Contato para Blogger – Blogspot (20)
• Widget de Posts Relacionados para Blogger – Blogspot (81)
• Twitter: Considerações Opiniológicas + 15 Fatos sobre o Twitter (15)
• Tweet Beep: Saiba Quando Seus Posts Aparecem no Twitter (5)
• Suplemento de Trackbacks Para Blogger – Blogspot (37)

Este é um dos Hacks para Blogger – Blogspot mais pedidos de todos os tempos: Posts Resumidos na Home Page do Blog, com link de “Continue Lendo” ou “Leia Mais” no final do resumo.

Existem outros hacks que cumprem a mesma função, de diferentes formas; mas depois de vários testes, este é o melhor, na minha opinião. Ele permite que você resuma somente os posts que desejar, como você já deve ter visto por aqui.

Vamos ao Hack! Preste atenção, pois ele está dividido em 3 partes:

I – Configurando o script
II – Modificando o Template
III – Configurando o Editor do Blogger

Na Primeira Parte, você deve escolher entre duas opções: inserir o script diretamente no seu template, ou hospedar o script externamente. Siga somente as instruções para a opção que você escolheu!

A Segunda Parte e a Terceira Parte se aplicam na íntegra à todos os casos, sem importar qual opção você escolheu na Primeira parte.

I – Primeira Parte – Configurando o Script

Devido aos problemas recentes com os scripts dos hacks, vou explicar aqui duas formas de implementar o “Leia Mais”: inserindo o script diretamente no seu template, ou hospedando o script externamente.

1º Opção – Inserindo o script diretamente no seu template

1 - Entre na sua conta do Blogger. Como sempre, faça antes um backup do seu template! Na tab “Editar HTML”, clique em “Baixar modelo completo”, e salve uma cópia do template no seu computador.

2 - Procure a tag </head>.

3 - Copie TODO o código mostrado nesta página e cole-o logo ANTES da tag </head>.

4 - Dê um preview, veja se está tudo certinho, e salve o template. A esta altura, você ainda não deveria ver nenhuma mudança no visual do blog.

Agora, você deve passar à II – Segunda Parte – Modificando o Template

2º Opção – Hospedando o script externamente

Por favor, só escolha esta opção se você tem alguma idéia de como fazer isto. Se este método lhe parecer muito complicado, é melhor optar pela 1º opção, e pronto.

1 - Faça o download do script: clique neste link com o botão direito do mouse, e salve o arquivo LeiaMais.txt no seu computador.

2 - Mude a extensão do arquivo de txt para js, no próprio Notepad. Simplesmente abra o arquivo, selecione “Guardar como” e substitua LeiaMais.txt por LeiaMais.js

3 - Faça o upload do arquivo em sua conta. Uma opção grátis para hospedar seus arquivos é o Google Pages.

4 - Coloque a URL do seu script no seguinte código:

<script src=’Insira aqui a URL do script’ type=’text/javascript’/>

Por exemplo: se eu estivesse hospedando o script na minha conta do Google pages, a URL seria:

<script src=’http://nospheratt.googlepages.com/LeiaMais.js’ type=’text/javascript’/>

5 - Entre na sua conta do Blogger. Como sempre, faça antes um backup do seu template! Na tab “Editar HTML”, clique em “Baixar modelo completo”, e salve uma cópia do template no seu computador.

6 - Procure a tag </head>.

7 - Copie o código do script, com sua URL, e cole-o logo ANTES da tag </head>.

8 - Dê um preview, veja se está tudo certinho, e salve o template. A esta altura, você ainda não deveria ver nenhuma mudança no visual do blog.

Agora, você deve passar à II – Segunda Parte – Modificando o Template

II – Segunda Parte – Modificando o Template

Tanto se você escolheu inserir o script no template, como se preferiu hospedá-lo externamente, deve seguir as seguintes instruções:

1 - Ainda em “Editar HTML”, clique na caixinha “Expandir Modelos de Widgets”

2 - Procure o seguinte trecho de código:

<div class='post-body'>
<p><data:post.body/></p>

3 – Substitua essas duas linhas pelo seguinte código:

<div class='post-body' expr:id='"post-" + data:post.id' >
<b:if cond='data:blog.pageType == "item"'>
<style>#fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost{display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<a expr:href='data:post.url'>Leia Mais…</a>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>


4 - O texto em vermelho – Leia Mais… – pode ser substituído pelo texto de sua preferência.

5 - Dê um preview, veja se está tudo certinho, e salve o template. A esta altura, você ainda não deveria ver nenhuma mudança no visual do blog.

III – Terceira Parte – Configurando o Editor do Blogger

1 - Ainda na sua conta do Blogger, vá até Configurações -> Formatação.

2 - Bem em baixo, Você verá a caixa vazia do Modelo de postagem. Copie e cole as seguintes linhas dentro dessa caixa:

Digite aqui o resumo do post
<span id="fullpost">
Digite aqui o resto do post
</span>

É melhor copiar e colar este código, para não correr o risco de inserir espaços ou caracteres que impediriam o hack de funcionar. Salve as configurações.

3 - Agora, quando você entrar em “Criar Postagem”, a caixa mostrará onde você deve digitar o resumo do post (a parte que você deseja que apareça na Home, antes do link “Leia Mais…”) e onde digitar o resto do post (a parte que aparecerá somente na página do post).

Atenção: as tags <span id="fullpost"> e </span> devem permanecer intactas para que o hack funcione! Antes de publicar seu post, certifique-se de que elas não foram alteradas.

E se eu não quiser resumir um post?

Simplesmente, quando for escrever o post, delete completamente o texto que aparece na caixa do texto da postagem. Não se preocupe; cada vez que você for criar um novo post, o texto que indica onde digitar o resumo e o resto do post reaparecerá.

Você escolhe se quer resumir o post ou não, e o link de Leia Mais só aparecerá nos posts que foram divididos com o <span id=”fullpost”>. Não é genial?

Observação: o Ramani avisa no post original do hack que se você clicar no link “Postagens Mais Antigas”, é possível que o link “Leia Mais” apareça mesmo em posts antigos que não foram divididos seguindo o hack. Ele explica que este é um problema conhecido, para o qual ele ainda não encontrou solução.

Eu acho que este é um preço pequeno a pagar, para ter seus posts resumidos/com sumário e link “Leia Mais” no Blogspot. Eu mesma não vi esse problema aqui no Blogando, pelo menos ainda. Mas a decisão é sua, é claro.

Observação 2: Se você usar este hack, lembre-se de incluir um link ao Hackosphere (o blog do autor do hack) na sua sidebar ou num post. É o mínimo que podemos fazer para agradecer, não é mesmo?

Observação 3: Obrigada ao Felipe Xavier por descobrir qual era o problema com o código!

Compare Preços de:

Blog: Comunicação e Escrita Íntima na Internet

Blogs! Seja Um Editor na Era Digital

Alavancando Negócios na Internet

E mais: Acessórios para Internet, Ferramentas, DVD, Filmes, Celulares, Notebooks, Câmeras, Jogos, Wii, PS3 no JáCotei

Mais informação:

• Widget: Formulário de Contato para Blogger – Blogspot (20)
• Widget de Posts Relacionados para Blogger – Blogspot (81)
• Suplemento de Trackbacks Para Blogger – Blogspot (37)
• Personalize seu Blogger – Blogspot: Widget Customizável para Posts Recentes (33)
• Lista de Posts Relacionados no Rodapé do Post para Novo Blogger – Blogspot (65)

Não há bem que sempre dure, nem mal que sempre se ature… ou será o contrário? Anyway, finalmente, depois de vários dias e uma luta ingrata, depois de vários erros, complicações e burrices de todo tipo, os problemas mais graves do layout novo estão resolvidos!

Consegui os scripts necessários para fazer os hacks funcionarem. Os comentários recentes, os posts recentes, o expand/collapse dos arquivos, o “Continue Lendo…” dos posts resumidos, e mais que nada, as Categorias Ajax, tudo está funcionando devidamente nos conformes!

Aliás, explicando o que eu escrevi ontem, sobre o Blogger ter incluído o “Continue Lendo” num post que não foi resumido: a “gênia” aqui tinha esquecido que esse hack também dependia de um script que estava fora do ar! Ok, quem nunca fez uma idiotice dessas que atire o primeiro mouse!

A maioria dos scripts que eu estava usando foram criados e eram hospedados pelo Ramani, autor do EXCELENTE blog Hackosphere. Assim que os scripts saíram do ar, ele publicou um post, pedindo aos leitores que deletassem as chamadas dos scripts de seus templates, e os substituíssem pelos scripts completos – que ele se deu ao trabalho de modificar para que possam ser inseridos dentro do próprio template. Ele também fez um update nos posts originais onde os hacks forma postados, para que ninguém perdesse tempo.

O Ramani até mesmo inclui um pop-up de alerta no lugar dos scripts quebrados, para alertar os usuários mais distraídos de que mudanças precisavam ser feitas. Foi um pouco chato, pois o alerta aparece para qualquer pessoa que acesse o blog com os hacks quebrados (é possível que algum de vocês tenha visto isso no Blog Templates), mas não deixa de ser uma boa forma de evitar que os blogs ficassem com problemas por muito tempo.

Ele também se deu ao trabalho de visitar cada um dos blogs que deixou comentários no blog dele, dizendo que não tinha conseguido fazer a substituição, para ver o quê há de errado e ajudar a resolver. O Ramani esteve aqui e me deixou uns comentários – eu tinha pedido à ele o código sem modificar, para que eu pudesse hospedá-lo eu mesma, em vez de inserir os scripts no template. Pois não é que o rapaz se deu ao trabalho de fazer um upload ao site dele, com os scripts do jeito que eu pedi, e voltar aqui para me passar o link? Ah, e (a pedido meu, pois eu tentei e não consegui) ele também entrou em contato com o autor das Categorias Ajax, para avisá-lo de que seu script está com o mesmo problema de excesso de banda. Tudo isso à troco de nada, é claro.

O motivo pelo qual estou escrevendo tudo isto é para agradecer, de coração, ao Ramani. Por desenvolver esses hacks tão úteis, legais e fáceis de instalar; por compartilhar seu trabalho com qualquer um que queira usá-lo, por se preocupar com seus leitores, por dispender seu tempo para ajudar quem teve problemas com seus hacks. Thanks, Ramani!

Até hoje, e por estranho que pareça, o único hack do Hackosphere que eu já traduzi foi o Hack de Posts Recentes para Blogger Clássico – devidamente creditado e linkado, obviamente. Aliás, se você está usando esse ou qualquer dos outros hacks criados por ele, não esqueça de incluir um link ao Hackosphere no seu blog – na sidebar, num post ou onde quer que seja que você tenha sua lista de links. E isso vale para quaisquer outros hacks de outros autores. É o mínimo que podemos fazer para agradecer pelos excelentes serviços que eles nos prestam, você não acha?

Os próximos hacks a serem traduzidos são justamente os mencionados: o widget de comentários recentes, o expand/collapse (peekaboo) dos arquivos, e o “Continue Lendo…” dos posts resumidos. Vou traduzir primeiro este último, o hack para mostrar só os resumos dos posts na Home do blog, pois MUITA gente já me pediu isso.

Bem, ainda ficam outras coisas para resolver – a questão da coluna central carregar por último, descobrir a razão da demora do carregamento do blog, fazer com que a imagem do Header seja clicável (sugestão da Lu, aprovadíssima), e alguma outra coisa que… você já sabe, né?

Além disso, logo vai sair o post com a lista completa de Hacks usados aqui no Blogando, traduzidos ou por traduzir, com links para os posts originais – conforme o prometido. No mais, é continuar tocando o barco, e manter sempre o olhar no objetivo!

Obrigada a todos pela paciência e pelo apoio. E um OBRIGADA grande e especial ao Ramani!

Compare Preços de:
Blog: Comunicação e Escrita Íntima na Internet
Blogs! Seja Um Editor na Era Digital
Alavancando Negócios na Internet

E mais: Acessórios para Internet, Ferramentas, DVD, Filmes, Celulares, Notebooks, Câmeras, Jogos, Wii, PS3 no JáCotei

Technorati : Blogger Clássico, Blogger Hacks, Categorias Ajax, Comentários Recentes, Continue Lendo, Expand/collapse, Layout, Pekaboo, Posts Resumidos, Posts recentes, Problemas, Tradução

Mais informação:

• Detrás dos Bastidores: Novidades, Reflexões, Links e Um Pouco de Humor (14)
• Blosque Retrospectiva 2007 (2)
• A Dama e o Vagabundo (12)
• Xeque-Mate, Blogosfera (28)
• WordPress 3.0, Themes e Novidades (5)

Importante - Se você quer Posts Relacionados para o Novo Blogger, você deve escolher entre estes dois posts:

Widget de Posts Relacionados para Blogger – Blogspot
Lista de Posts Relacionados para Blogger – Blogspot

Bem, como vários leitores estavam interessados em um hack de Posts Relacionados para o Blogger Clássico (ou Antigo, ou Velho, como queiram) eu fui procurar um, e achei.

Eu não uso Blogger Clássico, então, não sei que tão bem funciona este hack. Quem for usá-lo, por favor volte depois para contar se funcionou, assim eu compartilho essa informação com outros leitores, ok?

Este hack usa a função de busca de “palavras no título da postagem” da Pesquisa Google de Blogs (Google Blog Search). Ele procura posts anteriores, com títulos que contenham ao menos duas palavras não-triviais (por, com, que, são palavras triviais) em comum com o título do post onde a lista está sendo mostrada.

Instalando o Hack de Posts Recentes no Blogger Clássico

1 - Entre na sua conta no Blogger. Escolha o blog que quer editar: clique em Modelo->Editar HTML.

IMPORTANTE: sempre faça back up antes de modificar seu layout. Copie todo o código HTML num arquivo TXT, e salve uma cópia em seu HD.

2 - Procure esta tag:

<$BlogItemBody$>

3 - Adicione este código APÓS a tag <$BlogItemBody$> :

<ItemPage>
<script language=”Javascript”
src=”http://www.anniyalogam.com/scripts/relatedposts-blog.php?
url=<$BlogItemPermalinkUrl$>&blog=<$BlogURL$>”>
</script>
</ItemPage>

4 - Salve as alterações. Pronto!

Se tudo correr bem, a lista de Posts Relacionados aparecerá – somente nas páginas de postagem – logo depois do corpo do post. Caso não existam posts que preencham as condições da busca que eu expliquei acima, não aparecerá nada.

O único problema que eu vejo que pode haver com este hack é o idioma; o hack foi desenvolvido em inglês, e ignoro como o critério para “palavras triviais” se aplica em outros idiomas. Como eu disse, vocês terão que experimentar e me contar. Espero que este hack seja útil!

Fonte do Hack: Hackosphere

________________________________
Compare Preços de: Artigos Personalizados, Coisas Personalizadas, Ferramentas, DVD, Filmes, Celulares, Notebooks, Câmeras, Jogos, Wii, PS3 no JáCotei

________________________________

Technorati : Blogger Clássico, Blogger Hacks, Blogspot, Como Faço, Customizado, Dicas, Melhore seu BLog, Personalizar, Posts Relacionados, Widget

Mais informação:

• Widget de Posts Relacionados para Blogger – Blogspot (81)
• Lista de Posts Relacionados no Rodapé do Post para Novo Blogger – Blogspot (65)
• Exibindo Anúncios AdSense Dentro do Post – Blogger Clássico (13)
• Widget: Formulário de Contato para Blogger – Blogspot (20)
• Suplemento de Trackbacks Para Blogger – Blogspot (37)

Você já instalou a Lista de Posts Relacionados, mas o Título da lista não aparece? Quer mudar a fonte, o tamanho ou a cor da letra? Vamos lá:

1 - Entre na sua conta do Blogger. Vá até a tab “Editar Html”, clique em “Expandir modelos de widgets”.

2 - Procure esta linha de código (que você adicionou durante a instalção do hack):

<p class=’post-footer-line post-footer-line-3′/>
<b:if cond=’data:blog.url != data:blog.homepageUrl’>Posts Relacionados</b:if>
<script type=’text/javascript’>
removeRelatedDuplicates();
printRelatedLabels();
</script>

Esse é o código que vamos editar para alterar a aparência do Título.

3 - Se você tem alguma outra coisa na terceira linha do rodapé – por exemplo, o Widget “View Blog Reactions” do Technorati – provavelmente o Título “Posts Relacionados” está ao lado dele, em vez de estar em outra linha. Para solucionar isso, insira duas tags <br/> no lugar indicado:

<p class=’post-footer-line post-footer-line-3′/>
<br/><br/><b:if cond=’data:blog.url != data:blog.homepageUrl’>Posts Relacionados</b:if>
<script type=’text/javascript’>
removeRelatedDuplicates();
printRelatedLabels();
</script>

4 - Se o Título não aparece, provavelmente ele tem a mesma cor que o fundo da página. Ou talvez você gostaria de destacá-lo melhor. Você pode modificar isso facilmente, bem como o tamanho, e qualquer outro estilo que se possa aplicar com CSS. Para isso, você tem que adicionar as tags <span> e </span>, com os devidos valores, no lugar indicado:

<b:if cond=’data:blog.url != data:blog.homepageUrl’><span style=’font-size:150%; font-weight:bold; color:red;’>Posts Relacionados</span></b:if>

Os valores em AZUL são os que você pode modificar.

font-size:150% Aumente ou diminua o número, para aumentar ou diminuir a fonte. 100% sé o tamanho normal.

font-weight:bold Bold significa que o Título vai aparecer em negrita. Se não quiser a negrita, substitua bold por normal

color:red Esta é a cor da fonte. Você pode subsituir red por qualquer outra cor (em inglês): black, green, blue..

Lembre-se de não inserir espaços ou caracteres, e de não deletar nada. Se você entende de CSS, pode dar o estilo que quiser ao título, usando esse <span>.

5 - Se a lista aparece com vinhetas ou não, depende do seu CSS. Você pode alterá-lo, mas isso é com você. Os templates variam na forma como os estilos são criados, e eu não tenho como (ou pelo menos não descobri ainda uma forma de) ensinar como alterar a formatação da lista, que sirva para todo mundo. Se eu descobrir, faço um update deste post.

Bem, por agora é só isso. Obrigada ao Anderssauro por inspirar este post!

________________________________
Compare Preços de: Artigos Personalizados, Coisas Personalizadas, Ferramentas, DVD, Filmes, Celulares, Notebooks, Câmeras, Jogos, Wii, PS3 no JáCotei

________________________________

Technorati : Blogger, Blogger Hacks, Blogspot, Como Faço, Customizado, Dicas, Melhore seu BLog, Personalizar, Posts Relacionados, Widget

Mais informação:

• Widget: Formulário de Contato para Blogger – Blogspot (20)
• Widget de Posts Relacionados para Blogger – Blogspot (81)
• Suplemento de Trackbacks Para Blogger – Blogspot (37)
• Personalize seu Blogger – Blogspot: Widget Customizável para Posts Recentes (33)
• Lista de Posts Relacionados no Rodapé do Post para Novo Blogger – Blogspot (65)

Esta é uma dica super-ultra-mega útil para quem usa o Blogger antigo – Modelo Clássico: como colocar anúcnios Adsense dentro do post. Agradeçam ao Anny do TV Retrô por esta dica! Aliás, se você nasceu antes de 1990, não deixe de visitar o Blog dele; lá você encontra um montão de coisas legais sobre os programas de TV que costumava assistir quando era criança. O único problema é que dá uma saudade…

Voltando ao Adsense Dentro do Post

Como eu expliquei neste post – Como Exibir Anúncios AdSense Dentro do Post – Novo Blogger – uma das posições mais rentáveis para exibir seus anúncios do Adsense é dentro do post, logo abaixo do título. Lá eu afirmei que era quase impossível fazê-lo no Blogger antigo; eu mesma nunca consegui. No entanto, o Anny veio me salvar, e ajudar você, irmão, que ainda usa o modelo Clássico do Blogger.

Como ele me explicou (eu não lembro quase nada do Blogger antigo), no código do modelo clássico, existem as tags:

<$BlogItemTitle$> – Título do post
<$BlogItemBody$> – Onde inicia o corpo da postagem

Então, o que estiver entre essas duas tags aparecerá entre o título e o corpo de todos os posts. Nesse lugar é onde você vai inserir o código do Andsense. E como o Adsense só permite 3 blocos de anúncios por página, o Adsense só aparecerá nos 3 posts mais recentes – exatamente como no Novo Blogger.

Inserindo o Código do Adsense Dentro do Post

1 - Em sua conta de Adsense, crie o anúncio que deseja exibir em seu post. Copie o código completo do anúncio.

2 - Entre na sua conta no Blogger. Escolha o blog que quer editar: clique em Modelo->Editar HTML.

IMPORTANTE: sempre faça back up antes de modificar seu layout. Copie todo o código HTML num arquivo TXT, e salve uma cópia em seu HD.

3 - Procure este código:

<BlogItemTitle>
<h3 class=”post-title”>
<BlogItemUrl><a href=”<$BlogItemUrl$>” title=”external link”></BlogItemUrl>
<$BlogItemTitle$>
<BlogItemUrl></a></BlogItemUrl>
</h3>
</BlogItemTitle>
<div class=”post-body”>
<div>
<$BlogItemBody$>

5 - Copie o código do seu anúncio, e cole-o depois de </BlogItemTitle>. O HTML deve ver-se assim:

<BlogItemTitle>
<h3 class=”post-title”>
<BlogItemUrl><a href=”<$BlogItemUrl$>” title=”external link”></BlogItemUrl>
<$BlogItemTitle$>
<BlogItemUrl></a></BlogItemUrl>
</h3>
</BlogItemTitle>
código do anúncio
<div class=”post-body”>
<div>
<$BlogItemBody$>

6 - Clique em “Visualizar“, e certifique-se de que as alterações foram feitas de forma correta – ou seja, verifique que o blog continue funcionando. A única diferença deve ser o seu bloco de anúncios, logo abaixo do título do post. Tudo certinho?

7 - Se você quer centrar o bloco de anúncios:

Basta colocá-lo entre as tags <center> e </center>. Muitos blogs e fóruns por aí recomendam usar as tags <div align=”center”> e </div>, mas esse método não funcionou nem pra mim nem pro Anny. Então, use <center> e </center>.

Nesse caso ficaria assim:

<BlogItemTitle>
<h3 class=”post-title”>
<BlogItemUrl><a href=”<$BlogItemUrl$>” title=”external link”></BlogItemUrl>
<$BlogItemTitle$>
<BlogItemUrl></a></BlogItemUrl>
</h3>
</BlogItemTitle>
<center>
código do anúncio
</center>
<div class=”post-body”>
<div>
<$BlogItemBody$>

8 - Salve o modelo, e pronto.

Importante: Como eu não uso mais o Blogger Clássico, não testei este hack. O Anny, quem me deu a dica, usa, e o resultado é excelente, como você pode ver no blog dele.

________________________________
Compare Preços de: Autor, Lei, Direito, Dinheiro, Renda, Profissional, Ferramentas, DVD, Filmes, Celulares, Notebooks, Câmeras, Jogos, Wii, PS3 no JáCotei

________________________________

Technorati : Adsense, Blogger, Blogger Clássico, Blogger Hacks, Dicas, Monetização, Problogger, Problogging, Rendimento, Tips

Mais informação:

• Widget de Posts Relacionados para Blogger – Blogspot (81)
• Lista de Posts Relacionados no Rodapé do Post para Novo Blogger – Blogspot (65)
• Hack de Posts Recentes para Blogger Clássico (11)
• Widget: Formulário de Contato para Blogger – Blogspot (20)
• Suplemento de Trackbacks Para Blogger – Blogspot (37)

UPDATES:

Hack de Posts Recentes para Blogger Clássico
Customizando a Lista de Posts Relacionados

Ontem eu ensinei como criar um Widget de Posts Relacionados para seus posts. O problema do widget é que ele aparece no rodapé da página de postagem, depois dos comentários – muito embaixo, e bastante difícil de ser encontrado.

Outra solução é colocá-lo na Sidebar, mas eu acho que assim também não fica bom, pois não é “estândar”, e as pessoas provavelmente não vão notá-lo enseguida. Então, coloquei as catracas pra funcionar, e descobri (euzinha, sozinha, sozinha sem a ajuda de ninguém ) uma solução melhor.

Pra isso, você tem que seguir as instruções do post Widget de Posts Relacionados para Blogger – Blogspot, direitinho, até o passo número 7, onde diz “Salve o template”. Feito isso, volte aqui.

Adicionando a Lista de Posts Relacionados no Rodapé do Post

1 - Ainda na tab “Editar Html”, clique em “Expandir modelos de widgets”.

2 - Procure esta linha de código:

<p class='post-footer-line post-footer-line-3'/>

3 - Adicione este código LOGO DEPOIS dessa linha (você pode substituir “Posts Relacionados” por qualquer texto que desejar):

<b:if cond='data:blog.url != data:blog.homepageUrl'>Posts Relacionados</b:if>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>

4 - O código deve ficar assim:

<p class='post-footer-line post-footer-line-3'/>
<b:if cond='data:blog.url != data:blog.homepageUrl'>Posts Relacionados</b:if>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>

Tenha cuidado para não apagar ou sobreescrever nada, pois um simples espaço ou caracter sobrando ou faltando pode phoder completamente seu template.

5 - Salve o template. Você já pode ver sua lista de posts relacionados, ANTES dos comentários! Legal, não é?

Customizando a Quantidade de Posts Relacionados

Tanto se você está usando este método, como se decidiu usar o widget, pode determinar o número máximo de posts que aparecerão na lista. Este hack usa as Categorias (Labels, Marcadores ou Etiquetas do Blogger – é tudo a mesma coisa) para escolher os posts relacionados. Ou seja, ele vai “puxar” posts que estejam na mesma (ou mesmas) categoria.

Para modificar o número de posts que serão mostrados – o número pré-determinado são 10 posts, se achar que está bem assim, não faça mais nada – vá até a tab “Editar Html”, e clique em “Expandir modelos de widgets”. Procure este código no template:

<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in
-script&callback=related_results_labels&max-results=5"' type='text/javascript'/>
</b:if>

Mude o número 5 para qualquer coisa que você queira. Aparentemente, esse número não indica o total de posts, mas o máximo de posts que são mostrados por cada categoria – embora eu não tenha certeza disso. Experimente mudar o número algumas vezes, até encontrar a combinação ideal para você.

E, caso você esteja se perguntando, o hack e o widget funcionam com todos os posts, inclusive os mais antigos.

Motivos Que Podem Causar Que o Hack de Posts Relacionados Não Funcione

1 – Você não usa as Categorias do Blogger.

Se seus posts não estão categorizados, a lista de posts relacionados não aparecerá – mas se você instalou o hack direitinho, provavelmente o título “Posts Relacionados” vai aparecer, sem nada embaixo. Coloque categorias nos posts, e a lista vai aparecer.

Se você tem alguns posts categorizados e outros não, a lista só aparecerá nos posts com categorias, mas o título “Posts Relacionados” vai aparecer em todos.

2 – Suas categorias contêm caracteres especiais

Alguns caracteres, como (?) e (/) podem causar problemas com este hack. Elimine-os das suas categorias, e pronto.

3 – Código adicionado de forma incorreta

O código do passo 3 deste posts deve ser adicionado após o código do passo 5 do post Widget de Posts Relacionados para Blogger – Blogspot, de forma que o código do passo 5 fique depois do código do passo 3 no HTML. Não entendeu? Simplesmente siga as instruções ao pé da letra e não modifique nada depois de instalar o hack!

Sempre tenha cuidado para não apagar ou sobreescrever nada, pois um simples espaço ou caracter sobrando ou faltando pode phoder completamente seu template.

4 – Você usa um Modelo Clássico de Template

Este hack é para o NOVO Blogger. Logo vou estar postando um hack para o Modelo Clássico ou Blogger antigo.

Hack original: Purple Moggy
Modificado por Nospheratt – Isto é, eu! Estou muito orgulhosa do meu pequeno hack, deu pra notar?

________________________________
Compare Preços de: Artigos Personalizados, Coisas Personalizadas, Ferramentas, DVD, Filmes, Celulares, Notebooks, Câmeras, Jogos, Wii, PS3 no JáCotei

________________________________

Technorati : Blogger, Blogger Hacks, Blogspot, Como Faço, Customizado, Dicas, Melhore seu BLog, Personalizar, Posts Relacionados, Widget

Mais informação:

• Widget de Posts Relacionados para Blogger – Blogspot (81)
• Hack de Posts Recentes para Blogger Clássico (11)
• Exibindo Anúncios AdSense Dentro do Post – Blogger Clássico (13)
• Widget: Formulário de Contato para Blogger – Blogspot (20)
• Suplemento de Trackbacks Para Blogger – Blogspot (37)

Update: A solução ideal:

Lista de Posts Relacionados no Rodapé do Post para Novo Blogger – Blogspot

Também leia esse post se você encontrou algum problema na instalação do hack.
________________________________

Como eu mencionei no post de ontem sobre a usabilidade do conteúdo, uma lista de “Posts Relacionados” no rodapé dos posts oferece vários benefícios. Alguns desses benefícios são:

- Permite ao leitor encontrar exatamente o que lhe interessa, sem ter que revirar todo o site;

-É uma excelente “isca” para que o visitante/paraquedista conheça mais o seu blog;

- Aumenta a probabilidade de que o usuário leia mais posts;

- Mantém posts mais antigos à vista;

- Melhora a navegabilidade do blog.

Para quem usa WordPress ou outras plataformas, é muito fácil oferecer essa lista. Já o nosso querido Blogger não oferece essa opção. No entanto, já existe uma forma de implantar essa funcionalidade no novo Blogger, desenvolvida por um dos melhores hackers do Blogger – Blogspot. Antes que você pergunte, não, eu não conheço nenhuma forma de implantar “Posts Relacionados” no Blogger Clássico.

Como Exibir Uma Lista de Posts Relacionados no novo Blogger – Blogspot

Você vai ter que mexer um pouco com o código do blog. Este hack inclui a criação de um widget que vai exibir a lista. Essa não é uma opção muito prática, visto que não é possível inserir o widget no corpo dos posts. Mas não se preocupe; eu consegui melhorar o hack, para que a lista seja exibida no final do post, antes dos comentários como em qualquer outra plataforma de blog.

Primeiro, Vamos ao Hack

Siga cada passo cuidadosamente, prestando atenção para não inserir espaços ou caracteres desnecessários. Depois de cada passo, visualize o blog para certificar-se de que está tudo certinho, e salve antes de passar ao próximo passo. Assim, será mais fácil saber onde foi que você errou, e poderá voltar atrás sem ter que fazer tudo de novo.

1 - Entre na sua conta do Blogger. Como sempre, faça antes um backup do seu template! Na tab “Editar HTML”, clique em “Baixar modelo completo”, e salve uma cópia do template no seu computador.

2 - Procure a tag </head>. Cole o seguinte código logo ANTES dela:

<script type="text/javascript">

  //<![CDATA[

  var relatedTitles = new Array();

  var relatedTitlesNum = 0;

  var relatedUrls = new Array();

  function related_results_labels(json) {

  for (var i = 0; i < json.feed.entry.length; i++) {

  var entry = json.feed.entry[i];

  relatedTitles[relatedTitlesNum] = entry.title.$t;

  for (var k = 0; k < entry.link.length; k++) {

  if (entry.link[k].rel == 'alternate') {

  relatedUrls[relatedTitlesNum] = entry.link[k].href;

  relatedTitlesNum++;

  break;

  }

  }

  }

  }

  function removeRelatedDuplicates() {

  var tmp = new Array(0);

  var tmp2 = new Array(0);

  for(var i = 0; i < relatedUrls.length; i++) {

  if(!contains(tmp, relatedUrls[i])) {

  tmp.length += 1;

  tmp[tmp.length - 1] = relatedUrls[i];

  tmp2.length += 1;

  tmp2[tmp2.length - 1] = relatedTitles[i];

  }

  }

  relatedTitles = tmp2;

  relatedUrls = tmp;

  }

  function contains(a, e) {

  for(var j = 0; j < a.length; j++) if (a[j]==e) return true;

  return false;

  }

  function printRelatedLabels() {

  var r = Math.floor((relatedTitles.length - 1) * Math.random());

  var i = 0;

  document.write('<ul>');

  while (i < relatedTitles.length && i < 20) {

  document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] +

  '</a></li>');

  if (r < relatedTitles.length - 1) {

  r++;

  } else {

  r = 0;

  }

  i++;

  }

  document.write('</ul>');

  }

  //]]>

  </script>

3 - Salve o template. Clique na caixinha “Expandir modelos de widgets”.

4 - Procure o seguinte trecho de código (certifique-se de que é esse trecho exato, existem outros parecidos):

<b:if cond='data:post.labels'>

  <data:postLabelsLabel/>

  <b:loop values='data:post.labels' var='label'>

  <a expr:href='data:label.url' rel='tag'><data:label.name/></a>

  <b:if cond='data:label.isLast != "true"'>,</b:if>

  </b:loop>

  </b:if>

5 - Cole este código ANTES do </b:loop> :

<b:if cond='data:blog.pageType == "item"'>

  <script expr:src='"/feeds/posts/default/-/" + data:label.name +
"?alt=json-in-script&callback=related_results_labels&max-results=10"'
  type='text/javascript'/>

  </b:if>

6 - O código deve ficar assim (a parte vermelha é o que você adicionou):

<b:if cond='data:post.labels'>

  <data:postLabelsLabel/>

  <b:loop values='data:post.labels' var='label'>

  <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if
  cond='data:label.isLast != "true"'>,</b:if>

  <b:if cond='data:blog.pageType == "item"'>

  <script expr:src='"/feeds/posts/default/-/" + data:label.name +
  "?alt=json-in-script&callback=related_results_labels&max-results=10"'
  type='text/javascript'/>

  </b:if>
   </b:loop>

  </b:if>

7 - Salve o template. Se você quer adicionar o widget de Posts Recentes no final da página de postagem, você precisa…

Permitir a Adição de Elementos às Postagens no Blog

• Permaneça na tab “Editar HTML”:
• NÃO clique em “Expandir modelos de widgets”. Se a caixinha estiver marcada, desmarque.
• Procure pelo código dos Posts; ele deve estar logo após o Header-wrapper. O código é este (ou alguma coisa muito parecida):

<div id='main-wrapper'>

  <b:section class='main' id='main' showaddelement='no'>

  <b:widget id='Blog1' locked='false' title='Postagens no blog' type='Blog'/>

  </b:section>

  </div>

Simplesmente substitua “no“ por “yes“. Salve as mudanças.

Fim da Adição de Elementos às Postagens no Blog

Agora podemos continuar com o hack de Posts Recentes.

Como Criar o Widget de Posts Recentes

1 - Vá até a tab “Elementos da Página”.

2 - Você verá que agora existe um link “Adicionar um elemento de página“, sobre o campo dos posts. Clique nesse link.

3 - Escolha “HTML/JavaScript”, clicando em “Adicionar Ao Blog”.

4 – Escolha um Título – “Posts Relacionados”, “Veja Também”, o que você quiser – e cole o seguinte código no campo do Conteúdo:

<script type="text/javascript">

  removeRelatedDuplicates();

  printRelatedLabels();

  </script>

5 - Salve as alterações. Volte para a tab “Editar HTML”. Clique na caixinha “Expandir modelos de widgets”.

6 - Procure o código do widget que você acaba de adicionar. Uma forma fácil de encontrá-lo e procurar o título que você deu ao widget, e certificar-se de que ele está dentro de uma tag <b:widget>. É algo assim:

<b:widget id='HTML13' locked='false' title='Posts
  Relacionados' type='HTML'>

  <b:includable id='main'>

  <!-- only display title if it's non-empty -->

  <b:if cond='data:title != ""'>

  <h2 class='title'><data:title/></h2>

  </b:if>

  <div class='widget-content'>

  <data:content/>

  </div>

  <b:include name='quickedit'/>

  </b:includable>

  </b:widget>

7 - Inclua as linhas em vermelho, EXTAMENTE ONDE ESTÁ INDICADO.

<b:widget id='HTML13' locked='false' title='Posts
  Relacionados' type='HTML'>

  <b:includable id='main'>

  <b:if cond='data:blog.pageType == "item"'>
   <!-- only display title if it's non-empty -->

  <b:if cond='data:title != ""'>

  <h2 class='title'><data:title/></h2>

  </b:if>

  <div class='widget-content'>

  <data:content/>

  </div>
  

  <b:include name='quickedit'/>

  </b:if>

  </b:includable>

  </b:widget>

8 - Salve o template. Você já pode arrastar seu widget de Posts Recentes para onde queira; o lugar mais aconselhável é debaixo das “Postagens do Blog”. A lista só vai aparecer nas páginas de postagem – não na Home do blog.

O problema do widget é que ele fica depois dos comentários, lá embaixo, na página do post. Se você tiver muitos comentários, é provável que muitos leitores não vejam sua lista de posts relacionados. O melhor mesmo seria uma solução estândar, com a lista de posts relacionados logo abaixo do posts, não é?

Eu descobri como implantar essa solução perfeita. No entanto, você vai ter que me desculpar, mas este post já está muito longo. Amanhã eu ensino o procedimento para que você possa ter uma lista de posts relacionados como essa que você vê aí embaixo.

Fonte do Hack: Purple Moggy

________________________________
Compare Preços de: Artigos Personalizados, Coisas Personalizadas, Ferramentas, DVD, Filmes, Celulares, Notebooks, Câmeras, Jogos, Wii, PS3 no JáCotei

________________________________

Technorati : Blogger, Blogger Hacks, Blogspot, Como Faço, Customizado, Dicas, Melhore seu BLog, Personalizar, Posts Relacionados, Widget

Mais informação:

• Lista de Posts Relacionados no Rodapé do Post para Novo Blogger – Blogspot (65)
• Hack de Posts Recentes para Blogger Clássico (11)
• Exibindo Anúncios AdSense Dentro do Post – Blogger Clássico (13)
• Widget: Formulário de Contato para Blogger – Blogspot (20)
• Suplemento de Trackbacks Para Blogger – Blogspot (37)