Informações sobre o problema com o jump break

Diversos leitores estão reportando um sério problema ao usar o jump break – o resumo de postagens do Blogger. O que acontece? A sidebar simplesmente se desloca para baixo da área dos posts, deformando todo o layout do blog.

Fiz uma pesquisa em outros metablogs e ontem mesmo atualizei o post com um código que resolveria o problema.  Como no meu blog de testes o “leia mais” do Blogger funcionou perfeitamente, fiquei sem ter como testar o novo código e pedi que os usuários afetados testassem e me dessem um retorno. Não deu certo.

Agora fui dar uma lida nos meus feeds e soube que a equipe do Blogger já está ciente do problema. No Blogger Buster, um famoso metablog em língua inglesa, encontrei um artigo sugerindo apagar todas as divs no html do post onde foi inserido o jump brek (<div> e </div>). Fui conferir os posts que estão no meu blog de testes e não encontrei nenhuma tag div e como eu disse no início, nesse blog está tudo ok.

Issues with the sidebar shifting beneath blog posts after adding Jump Links to posts

Many people have reported that their blog's layout appears distorted after adding Jump Links to their blog posts. For some layouts, the Jump Link causes the sidebar to shift beneath the blog post, as though the link is outstretching the boundaries of the post section.
In the comments of my announcement post, N@k$h@tr@! explained that this is because the Jump Link is somehow inserted between the opening and closing DIV tags in the HTML of a blog post.
N@k$h@tr@! recommends to view any posts to which Jump Links have been added in Edit HTML mode and delete any <div> and </div> tags you find (full details may be found on this blog post).
The Blogger Team are aware of this situation, and I assume this glitch will be resolved soon.

Peço novamente, que os leitores que foram afetados com o deslocamento da sidebar, testem essa nova dica e que depois venham aqui me contar o resultado.

É preciso calma e paciência, já que a equipe do Blogger está analisando o que vem ocasionando tal inconveniente. E se conselho servir pra alguma coisa, usem o hack do Compulsivo até que o do Blogger se torne estável ;)

Jump Break – o hack “Leia mais” do Blogger

Dando continuidade às comemorações pelos 10 anos do Blogger, foi anunciado no Blogger In Draft que agora é possível resumir os posts da página inicial de forma automática, sem a necessidade de truques ou gambiarras (hack “leia mais”)

Por enquanto, essa função só está disponível para quem usa o novo editor de textos do Blogger. Para habilitá-lo, entre no painel, configurações e, no final da página, procure por configurações globais. Marque a opção editor atualizado.

O resumo funciona tranquilamente nos templates disponibilizados pelo Blogger. Já os que são criados por usuários precisarão da instalação de um pequeno código.

Para quem, como eu, usa o Windows Live Writer, recomendo este hack publicado no Usuário Compulsivo – Posts resumidos na página inicial do Blogger.

Usando o resumo de postagens em templates do Blogger

Quem usa o template Mínima ou os demais modelos disponibilizados pelo Blogger, deve entrar no novo editor de textos, escrever o post e escolher onde o resumo deve ser iniciado. Daí é só clicar no ícone inserir jump break.

Publique o post logo a seguir. Veja, na imagem abaixo, como ficará o post publicado:

Para mudar a mensagem “continue lendo” por outra qualquer, entre no layout do blog e em postagens do blog, clique em editar. Procure por Texto do link da página de postagem e escreva uma frase de sua preferência.

Usando o resumo de postagens em templates personalizados

Para quem usa um template personalizado – que é o caso dos modelos criados por mim e pelos demais colegas – é preciso instalar um código no html do template.

Entre em layout, editar html e clique em expandir modelos de widgets. Usando a combinação Crtl+F do seu teclado, procure pelo seguinte trecho: <data:post.body/>

Logo abaixo do trecho citado, cole o seguinte código:

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if >

No caso dos templates do Dicas Blogger, procure por <p><data:post.body/></p>. Este trecho aparecerá 2 vezes. Cole o código embaixo do segundo trecho:

Em alguns dos nosso templates, o hack Leia Mais do Compulsivo já encontra-se instalado e caso você queira usar o do Blogger, basta seguir esse tutorial que funcionará do mesmo jeito. Fiz diversos testes com resultados satisfatórios.

Chique, né? Agora vamos aguardar as outras novidades \o/ #blogger10anos

**Confiram também a minha entrevista ao @CaioLausi, no Blog do Lausi ;)**

ATENÇÃO: Diversos leitores reportaram que a nova função “Leia mais” faz com que o layout do blog fique deformado, jogando as colunas para debaixo dos posts. Veja aqui a solução.

Conheça Porto de Galinhas na faixa!

Que tal ir para Porto de Galinhas, PE, com tudo pago e ainda ficar ao lado de um seleto grupo de blogueiros famosos? Não, não é uma brincadeira. Através da promoção Porto Cai na Rede, isso pode se tornar uma realidade pra vocês.

Eu tive a felicidade de ser convidada para participar dessa ação, com direito à passagem e hospadegm nos melhores hotéis da cidade, tudo de graça, mas infelizmente por medo de avião por compromissos inadiáveis de trabalho, não estarei presente. Perdi a chance de fazer do @Cardoso, o meu escravo pessoal :P

Para a Juliana, meus eternos agradecimentos. No próximo BlogCamp/BarCamp/CampusParty que você vier, me comprometo a ser seu escravo pessoal durante a estadia.

Passaralho Twitteiro - Eles passarão, eu passaralho

Acredito que vocês não são tão bobos ocupados como eu e que adorariam pegar esta boquinha, certo? Então, corram ao portal Porto cai na rede e se inscrevam na promoção. Além dos 40 convites vips, têm mais 5 convites esperando por vocês.

Vocês podem concorrer a três convites escrevendo um post com o tema “Porque eu quero ir para o Porto Cai na Rede” ou a dois por sorteio – um se cadastrando no portal e outro seguindo o perfil @portocainarede no Twitter.

Para participar, cliquem em EU QUERO IR e preencham a pesquisa. Os resultados serão divulgados no dia 13 de setembro,  no Portal, no Blog e no Twitter.

Personalize os marcadores do Blogger

Conforme alguns já notaram, fiz algumas alterações na forma de exibição dos marcadores do blog. Antes os posts apareciam por completo e com aquela mensagem “Mostrando postagens com marcador Primeiros Passos. Mostrar todas as postagens” Agora, só aparecem os títulos dos posts e sem a referida mensagem.

Ao fazer essa alteração, minha intenção foi facilitar a vida dos visitantes, já que no caso de marcadores vinculados com muitos posts a página demorava muito pra carregar. Um exemplo é o marcador “informações”, com 94 posts até o momento.

Existem diversas formas de personalização, então escolha a que você mais gostar.  

Antes de começar as alterações, faça um backup do seu template e salve no pc.

1. Excluindo a mensagem padrão do marcador (Fonte: El Escaparate de Rosa )

Entre em editar html, marque expandir modelos de widgets e procure (Crtl+F) por:

<b:include data='top' name='status-message'/>

Apague essa linha inteira, visualize e se tudo estiver bem, clique em salvar modelo.

2. Ocultando a mensagem padrão do marcador

Você pode também ocultar a mensagem padrão, ao invés de excluí-la. Inclua no CSS do template, antes de ]]></b:skin> , o seguinte código:

.status-msg-wrap {
display:none;
}

Clique primeiro em visualizar e se tudo estiver bem, clique em salvar modelo.

3. Alterando a mensagem do marcador, sem excluí-la (Fonte: Icebreaker )

Entre em editar html, marque expandir modelos de widgets e procure (Crtl+F) por:

<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>

Substitua todo o código acima por este:

<div class='status-msg-wrap'>
<li>Você está no marcador &quot;<data:blog.pageName/>&quot;:</li>
</div>

A parte assinalada em vermelho pode ser substituída pela frase que você quiser.

4. Para personalizar a nova mensagem (Fonte:Dicas Blogger)

Aqui daremos um estilo para a frase acima, colocando cor, plano de fundo, borda e alinhamento no texto. Entre no html do template e procure por ]]></b:skin>

Cole, logo acima, o seguinte código:

.status-msg-wrap {
text-align: left;
margin:6px 0px;
background:#e6e6e6;
color: #cc0000;
padding:6px;
border:1px solid #ccc
}

.status-msg-wrap li {
list-style-type:none;
font-weight:bold

}

Você pode substituir a parte em vermelho por center (texto alinhado no meio) ou por right (texto alinhado à direita) e a parte em verde para normal ou italic. Para alterar o background (plano de fundo), a cor do texto (color) e a cor da borda (border) use uma tabela de cores e substitua pelos respectivos números. 

5. Para mostrar apenas os títulos dos posts

Vá até o blog Templates para Novo Blogger e siga este tutorial da Ariane.

Este post foi publicado originalmente às 12:03 h e atualizado às 16:30 h.

Caixa de busca no cabeçalho do Blogger

Atendendo a pedidos, irei ensiná-los como colocar uma caixa de busca/pesquisa no cabeçalho do blog. Quero lembrar que a aplicação desta técnica pode não funcionar em todos os templates, mas funciona no Mínima e nos modelos do Dicas Blogger.

Antes de começar, faça um backup do seu template por precaução e aplique a gambiarra técnica primeiro em um blog de testes e só depois em seu blog principal.

Entre no painel do Blogger e na aba layout, clique em editar html. Marque a caixa expandir modelos de widgets e procure por /* ----- HEADER ----- */ ou #header-wrapper ( que é onde começa o código do cabeçalho).

Copie o código abaixo e cole ANTES do código do cabeçalho (header).

/* ----- Busca ----- */ #busca{ width:auto; height:auto; z-index:1; position: absolute; top: 50px; left: 660px; }

Inserindo o código antes do header

Procure agora por <div id='header-wrapper'>e cole logo abaixo o código de busca:

<div id='busca'>
<form action='/search' id='searchthis' method='get' style='margin:0;padding:0;display:inline;'><input id='search-box' name='q' onblur='clickrecall(this,&apos;Pesquisar&apos;)' onclick='clickclear(this, &apos;Pesquisar&apos;)' size='20' style='color: #999;' type='text' value='Pesquisar '/> <input id='search-btn' type='submit' value='Buscar'/></form> </div>

Caso você queira colocar uma caixa de busca do Google Adsense, substitua a parte em vermelho do código acima pelo código fornecido pelo AdSense.

<div id='busca'>CÓDIGO DO ADSENSE</div>

Ajuste a posição da caixa de busca, alterando os valores top e left do 1° código.

Vá visualizando o template até ficar legal e só depois clique em salvar modelo.

Este método foi testado em todos os modelos do Blogger e nos nosso templates.

Como configurar o Gmail no Thunderbird

O Gmail - serviço de email gratuito do Google - ficou fora do ar por algumas horas na tarde de hoje, deixando milhares de usuários dependentes, a ver navios (ou baleias).

Aqui em casa estava tudo funcionando na mais perfeita ordem, já que sou antiquada e não leio emails pela web e sim através do Thunderbird – um cliente de emails da Mozilla, a mesma empresa que desenvolve o maravilhoso navegador Firefox.

A princípio não consegui entender o desespero do pessoal, que tuitava compulsivamente sobre a falta que o Gmail faz. Me perguntei: se está funcionando via POP e via IMAP, por que este povo não configura o Outlook Express ou baixa o Thunderbird? A resposta foi dada pelos próprios usuários: quase ninguém mais sabe fazer isso. É coisa de gente jurássica como eu, que usa a internet desde 1920.

Como uma coisa leva à outra, acabei me lembrando que o Gmail se chamava GigaMail e que quando foi lançado, assim como aconteceu om o Orkut, era preciso conseguir um convite para poder criar uma conta de correio eletrônico. O meu convite foi adquirido no velho e bom Mercado Livre pela módica quantia de R$1,00.

Ah, vocês devem estar pensando: “a Tia Ju está delirando, só pode ser -  Gmail e Orkut com convite e ainda à venda no Mercado Livre? E o Gmail não se chama Google Mail?”  Bem meus queridos pimpolhos, a Wikipédia não me deixa mentir:

O Gmail (também GMail, Google Mail ou Giga Mail) é um serviço gratuito de e-mail criado pelo Google em 2004. Atualmente novos cadastros são abertos ao público e podem ser feitos diretamente no site. Foi anunciado no dia 1 de Abril de 2004, Dia da Mentira, o que lançou inicialmente certa dúvida quanto à sua autenticidade. Fonte: Wikipedia

Se você, meu querido leitor, passou por momentos de tensão enquanto, freneticamente, apertava a tecla F5 do seu teclado na esperança de ver seu Gmail novamente na ativa, aprenda a configurá-lo no Thunderbird e da próxima vez que ele baleiar, ria dos seus amigos e mostre que você é um blogueiro antenado.

A primeira coisa a ser feita é baixar o Thunderbird aqui. Uma vez instalado, vá a sua conta do Gmail e ative o encaminhamento POP. Volte ao Thunderbird e clique em ferramentas – configurar contas – nova conta e escolha a opção Gmail.

Clique em avançar e na página seguinte, coloque seu nome e sua conta do Gmail, respectivamente. Clique novamente em avançar e depois em concluir. Fácil, não?

E sabem por que nós usávamos este tipo de programa? Porque o espaço de armazenamento dos serviços de correio eletrônico era pequeno demais, as caixas postais viviam lotadas e os emails voltavam para o remetente. A solução então era usar softwares clientes para baixar tudo no disco rígido e zerar a caixa de entrada.

O mais famoso cliente foi o Outlook Express, que acompanhou o Internet Explorer desde sua 4ª versão. No Windows Vista, ele passou a se chamar Windows Mail.

Assim como o Firefox é um produto open source que concorre com o Internet Explorer, o Thunderbird concorre com o Outlook Express / Windows Mail. 

Dicas Blogger também é história.  GigaMail e Thunderbird - direto do túnel do tempo.

Promoção: a importância da parceria transparente

Parceria e transparência

Como todo mundo já sabe, sou a favor da transparência sempre – tudo limpo e brilhando. Por isso achei  importante prestar alguns esclarecimentos sobre os brindes que foram distribuídos na promoção e agradecer aos envolvidos no processo.

No ano passado o único prêmio – 1 template + domínio + logotipo – foi financiado por mim mesma, ou seja, com o dinheiro do meu trabalho formal. Já neste ano (2009) a coisa foi bem diferente, pois contei com quatro generosos patrocinadores:

• Trapo Chic: 5 camisetas (diversos modelos)
• BQEG: 2 camisetas (sarcasmo e no spam)
• Blog do Lausi: 1 camiseta do Twitter
• Dicas Blogger: 2 templates da Ariane e 5 camisetas “Sou Blogueiro”

Ué, por que o Dicas Blogger aparece na lista? Uai, porque pude pagar os prêmios citados acima com o dinheiro proveniente dos rendimento dele. Simples assim.

Quero agradecer de todo coração à Mônica, da Trapo Chic, ao Marcel, do blog Byte que eu gosto e ao Caio Lauisi, do Blog do Lausi por terem gentilmente doado os brindes para o nosso sorteio. E pra quem não ganhou nada, restou tirar mesmo o escorpião do bolso e dar uma passadinha nessas três lojas, né? Vale a pena conferir.