28 Novembro 2009

Como colocar o hack “Leia Mais” no Blogger

Neste post vou ensiná-los a usar três modelos de códigos para resumo de postagens na página inicial do Blogger: o primeiro faz um resumo automático em todas as postagens, o segundo faz um corte manual e o terceiro é o próprio “Leia Mais” (jump break) do Blogger.

A nomenclatura para o resumo de postagens na página inicial varia muito. Podemos chamar de “leia mais”, “continue lendo”, “read more” e etc.

Os três modelos são simples de implementar e a escolha fica a critério do cliente ;)

Lembrando que nos templates que disponibilizo aqui no DB, o segundo hack já vem instalado.

Antes de fazer qualquer alteração, é altamente recomendável fazer um backup do template.

Modelo 1-Hack “Leia mais” com corte automático

Entre na aba  layout, clique em editar html e marque a caixa expandir modelos de widgets, localize (Ctrl + F) a tag </head> e cole, antes dela, o seguinte código:

<script language='javascript' src='http://halotemplates.s3.amazonaws.com/jquery-truncator/jquery-1.2.3.pack.js' type='text/javascript'/>
<script language='javascript' src='http://halotemplates.s3.amazonaws.com/jquery-truncator/jquery.extractor.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$('.excerpt').expander({
slicePoint: 280, // default is 100
expandEffect: 'fadeIn',
expandText: '[...]', // default is 'read more...'
userCollapseText: '[^]' // default is '[collapse expanded text]'
});
});
</script>

O destaque representa a quantidade de caracteres html que será exibida na página inicial.

Procure agora por este código:

<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Pra quem usa templates do Dicas Blogger, procure por:

<div class='post-body' expr:id='&quot;post-&quot; + data:post.id'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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'>Continue lendo &gt;&gt;</a>
</span>
<script type='text/javascript'>
checkFull(&quot;post-&quot; + &quot;<data:post.id/>&quot;);
</script>
</b:if></div>

Substitua tudo por:

<b:if cond='data:blog.pageType != "item"'>
<div class='excerpt post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<p><a expr:href='data:post.url'>Continue lendo...</a></p>
<b:else/>
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</b:if>

Clique em visualizar e se tudo estiver ok, salve.

Se quiser substituir a frase “continue lendo” por outra de sua preferência, basta substituí-la no código acima (destaque em vermelho).

Modelo 2-Hack “Leia mais”com corte manual

Entre no html do seu template, marque a caixa expandir modelos de widgets e procure por </HEAD>. Cole o código abaixo antes da tag </HEAD>

<b:if cond='data:blog.pageType != "item"'>
<script type="text/javascript">
function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
var found = 0;
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].id == "fullpost") {
spans[i].style.display = 'none';
found = 1;
}
if ((spans[i].id == "showlink") &amp;&amp; (found == 0))
spans[i].style.display = 'none';
}
}
</script>
</b:if>

Procure agora por:

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

Substitua tudo por:

<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'>Continue lendo &gt;&gt;</a>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>

Clique em visualizar e se tudo estiver ok, clique em salvar.

Escreva seu post normalmente e quando terminá-lo, clique em editar html e coloque o  código <span id="fullpost"> onde você deseja iniciar o resumo e </span> no final do post.

Post (área de corte) <span id="fullpost"> restante do post </span>

Veja um exemplo na imagem abaixo:

Pra quem usa o Windows Live Writer, é necessário colocar o <span id="fullpost"> após o término de um parágrafo “</p>” e o </span> também.

Modelo 3-Jump Break – o “leia Mais” do Blogger

Esta nova função já está presente nos modelos padrão do Blogger.

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 >

Para resumir os posts, é preciso usar o novo editor de textos do Blogger. Para habilitá-lo, entre no painel, clique em configurações e, no final da página, procure por configurações globais. Marque a opção editor atualizado.

Escreva seu post, escolha a área de corte (resumo) e clique no ícone do jump break

Jump Break Muitos usuários relataram que após o uso do jump break a sidebar foi parar embaixo dos posts, mas é preciso apenas tomar alguns cuidados. O corte tem que ser inserido após o fechamento de uma div. Portanto, após a inserção do jump break, é preciso clicar em editar html  e inserir o “more” após o fechamento de uma div (</div>)

jump break erro

jump break correto

Todos os modelos já haviam sido publicados aqui e em outros blogs, mas achei que ficaria mais legal colocá-los em um único post para facilitar a vida de todos.

Créditos para Usuário Compulsivo, Blogger Buster e El Escaparate de Rosa.

Continue lendo >>

26 Novembro 2009

Bug no sistema de comentários

O Blogger vem apresentando alguns problemas no sistema de comentários. Um deles é o “desaparecimento” dos comentários mais antigos. O outro é relacionado aos comentários moderados, que por mais que aceitemos ou recusemos, eles continuam aparecendo no painel da moderação e se insistirmos aparece o famoso erro Bx. Consequentemente os widgets que contam o número de comentários também estão instáveis. O problema já foi reportado aos funcionários do Blogger e deve ser resolvido em breve.

Continue lendo >>

24 Novembro 2009

Como mudar o domínio no Blogger

Queridos alunos leitores: meu lema sempre foi “dica aprendida, dica compartilhada”. Então hoje vou ensiná-los, passo-a-passo, como mudar o domínio do seu blog no Blogger/ Blogspot.

Para os menos habituados com os termos, domínio, segundo a Wikipedia, é um nome que serve para localizar e identificar conjuntos de computadores na Internet. O nome de domínio foi concebido com o objetivo de facilitar a memorização dos endereços de computadores na Internet. Sem ele, teríamos que memorizar uma sequência grande de números.

Para fins didáticos, o domínio é o endereço do seu blog e também pode ser chamado de URL

A plataforma Blogger – que é a nossa especialidade – já fornece GRATUITAMENTE o domínio blogspot.com. Quando criamos um blog no Blogger, o endereço SEMPRE será:

http:// [nome do blog] .blogspot.com

Manter esse endereço original já atesta que aquele blog está hospedado no Blogger. Não há nenhuma desvantagem nisso, certo? Errado. Sabemos que em muitas redes corporativas e universitárias, domínios que possuem a palavra blog são bloqueados. O mesmo acontece com o Orkut, MSN, Twitter e outros serviços erroneamente considerados como de lazer.

O ideal mesmo é já começar um blog com um domínio personalizado:

Por outro lado, é muito simples mudar o domínio do seu blog, mas lembre-se que:

  1. Não é de graça. Custa de R$ 15 a R$ 30,00/ ano
  2. Você vai perder os links de retorno que estão em outros blogs
  3. Teoricamente vai perder o pagerank, mas isso se recupera
  4. Rankings como os do BlogBlogs também serão zerados

O que você não vai perder:

  1. Número de leitores de feeds
  2. Posts, imagens, comentários e template
  3. Dados estatísticos
  4. Links indexados nos mecanimos de busca

O que o Blogger faz? Ele vai redirecionar seu antigo endereço blogspot.com para o seu domínio personalizado, automaticamente, mas a alteração completa pode demorar até 24 horas, portanto não entre em pânico com as telas de redirecionamento. É normal.

1. Escolha e registro do domínio

A primeira coisa a ser feita é escolher um domínio e registrá-lo. Existem domínios internacionais ( .com, .net, info, .org e etc) e os nacionais (.com.br, .blog.br e etc).

Para busca e registro, eu uso e recomendo o Uol Host. Seguem abaixo links de posts anteriores, onde ensinei como registrar e configurar um domínio personalizado:

2.Configuração no painel do Blogger

Uma vez comprado e registrado o domínio, devemos inseri-lo no blog. Para tanto, entre no painel, clique em configurações e na aba publicação, escolha “alternar para domínio personalizado” e logo em seguida, escolha “ir para configurações avançadas”

Configuração do domínio

Na caixa “seu domínio” escreva o endereço do domínio que você comprou, SEMPRE com o www antes. Marque a caixa de redirecionamento assim que o Blogger aceitar o novo domínio, para que seus leitores cheguem ao seu blog tanto com quanto sem o www.

3. Os Feeds

Se você usa os feeds do próprio Blogger, nada precisa ser feito pois a mudança será automática. Veja abaixo os endereços de feeds do Blogger (default):

Feeds do Blogger: http://seublog.blogspot.com/feeds/posts/default

Feeds do Blogger com domínio próprio: http://www.seublog.com.br/feeds/posts/default

Pra quem usa o FeedBurner e não quer perder o número de assinantes, basta entrar em edit feed details, no painel do FeedBurner e mudar o endereço do blog em original feed.

Configuração dos feeds

O feed original que estará no painel do FeedBurner será o do Blogger. Apenas mude o endereço do domínio blogspot pelo do domínio personalizado.

ANTES: http://seublog.blogspot.com/feeds/posts/default

DEPOIS: http://www.seublog.com.br/feeds/posts/default

Os assinantes continuarão a receber os posts via feeds sem nem notarem a mudança.

4.O Sitemap

Quem usa o Google Webmaster Tools, deverá criar um novo perfil para o domínio personalizado e enviar novos sitemaps. A forma mais atual de enviar sitemaps para quem usa o FeedBurner é esta e vai depender do número de posts:

atom.xml?redirect=false&start-index=1&max-results=100
atom.xml?redirect=false&start-index=101&max-results=100
atom.xml?redirect=false&start-index=201&max-results=100
atom.xml?redirect=false&start-index=301&max-results=100

Pra quem não sabe o que é um sitemap e nem como inseri-lo, recomendo estes posts:

5. O Google Analytics

Pode manter como está, pois o que vale é o código que foi inserido no blog. Caso você use outros serviços de web analytics, verifique se será necessário criar uma nova conta.

6. BlogBlogs e afins

Em serviços como BlogBlogs e Technorati, será necessário criar um novo perfil, já que eles não permitem a alteração da url. O ranking antigo não será zerado, mas como os backlinks mudarão, aos poucos o antigo endereço irá caindo e o novo subindo ;)

Well, o post ficou ENORME, mas meus tutoriais não são para preguiçosos, né? LOL O objetivo principal é evitar que você leitor passe pelo stress que passei ;) E lembre-se: se não for usar o domínio de imediato, NÃO DIVULGUE-O e coloque-o em um blog de testes.

Continue lendo >>

23 Novembro 2009

E a Justiça foi feita!

O www.dicasblogger.com.br voltou pra mim \o/ Graças à bondade e à amizade do Amílcar e do Teilor, abnegados colaboradores do fórum de ajuda do Blogger. O Blogger tem SAC e funciona \o/ Meu muito obrigada aos dois e a todos que ajudaram direta ou indiretamente.

A amizade é a melhor coisa do mundo! Quem tem amigos, nunca está sozinho!!!!

E eu estarei mais presente lá no fórum a fim de poder retribuir o atendimento recebido.

Quanto ao futuro do malfeitor, já encomendei uma reza pra Irmã Selma :P

Continue lendo >>

21 Novembro 2009

O novo domínio vai ficar para uma próxima

Lembram do novo domínio do blog? Pois é, hoje fui fazer a configuração para direcionar o dicasblogger.blogspot.com para o dicasblogger.com.br e me deparei com uma mensagem dizendo  que outro blog já estava hospedado naquele endereço. Achei estranho.

Fiz toda a configuração no Uol Host, conforme consta neste tutorial e nada do Blogger aceitar o domínio. Fui dando refresh na página até que, finalmente, ela abriu:

dicas blogger falso

A princípio pensei que tivessem roubado o domínio. Corri no Uol Host e lá estava ele, firme, forte e no meu nome. Com a ajuda de amigos no Twitter, consegui tirar aquela página do ar  e fazer o direcionamento ao contrário ( do .com.br para o blogspot)

Só que eu descobri uma grave falha de segurança no Blogger, pois não pede-se comprovação de quem é o dono do domínio na hora de configurá-lo. Sendo assim, qualquer um pode pegar um domínio alheio ainda não configurado, colocar no Blogger e travá-lo.

Se você que está me assistindo, tem um domínio próprio e ainda não quer usá-lo, coloque-o em um blog de rascunho, antes que alguém o faça.

No meu caso, eu continuo sendo a dona do domínio dicasblogger.com.br, mas ao configurar o DNS ele apontará para um outro blog, que não é o meu.

Não sinto raiva de quem fez isso, apenas pena, muita pena. Ninguém pode ser feliz vivendo de inveja e de vingança. Eu pelo menos tenho paz no meu coração. Só fico triste de saber que tem alguém que me detesta tanto e que nem me dá o direito de saber porque…

Agradeço a todos os amigos que interagiram comigo pelo Twitter, seja tentando me ajudar ou mesmo para me dar uma força. Adoro todos vocês. E vamos seguir em frente.

ATUALIZAÇÃO: Algumas pessoas não entenderam porque o domíno www.dicasblogger.com.br está apontando para o http://dicasblogger.blogspot.com. Vejam bem, o domínio é meu, ele não foi roubado, apenas está bloqueado para ser usado no Blogger/Blogspot. O indivíduo  foi no painel e em publicação>domínio personalizado ele inseriu um domínio que não é dele e, pior, o Blogger aceitou. #epicfail

image

Ao tentar fazer o mesmo com o MEU domínio, o Blogger não aceitou, enviando uma mensagem que “outro blog já está hospedado neste endereço”, que é o blog do infeliz.

Agradeço, de todo o coração, pelas mensagens de apoio e de carinho que venho recebendo. Inclusive posts foram escritos e isso muito me emocionou. Muito obrigada!

Continue lendo >>

20 Novembro 2009

Novas funções no editor de posts do Blogger in Draft

O Blogger mantém uma página de testes chamada Blogger in Draft. É nela que nós usuários testamos as novas funções antes da implementação na página oficial.

As novidades apareceram no novo editor de textos do Blogger. Para utilizá-lo, é preciso entrar em configurações>configurações globais e marcar “editor atualizado”.

Entrando pelo Blogger in Draft veremos dois novos ícones – um para a inserção de vídeos e outro para tradução de palavras e dicionário. Além disso, a forma de se colocar imagens nos posts também mudou, tendo agora total integração com o Picasa.

Ícones do Editor

O dicionário é muito interessante, pois permite que vejamos o real significado das palavras e a forma correta de escrevê-las. Já  o tradutor é uma mão na roda e usa o Google Translator para fazer a tradução. Para utilizá-los, basta escrever uma frase ou uma palavra, passar o mouse sobre elas e clicar no ícone vermelhinho. Vejam:

Tradutor/Dicionário

Dá até para fazer uma rápida pesquisa usando o próprio Google como mecanismo de busca:

Dicionário

E por último, temos as imagens integradas ao Picasa, que é organizador de fotos do Google:

Imagens

Pra quem usa o editor de posts do Blogger, acredito que estas funções serão de grande valia.

Continue lendo >>

19 Novembro 2009

Template Fire

DemonstraçãoDownloadTermos de Uso

retirada da navbar

edição dos posts direto da home

artigos relacionados

personalização da caixa de comentários

novo formulário de comentários

1 coluna à esquerda

1 coluna à direita

1 coluna embaixo do cabeçalho

3 colunas no rodapé

cores personalizáveis

Após baixar o arquivo, clique com o botão direito do mouse e escolha a opção abrir. Dentro da pasta você irá encontrar o template em .xml, a imagem do cabeçalho e a dos feeds. Faça um backup dos widgets que encontram-se em seu blog e efetue a troca de template.

Para colocar a imagem do cabeçalho, entre em layout > elementos de página > cabeçalho > editar. Faça o upload da imagem e marque a caixa “atrás do título e descrição”. Ou se você preferir editar o título do blog com essa imagem, marque “por trás do título e descrição”.

Trocando a imagem Este template vem com a possibilidade de mostrar apenas um resumo da postagem na página inicial (Hack Leia Mais), que não é o Jump Break. Ao terminar de escrever seu post, entre em “editar html”, escolha o local de corte e cole <span id="fullpost">. No final do post, cole </span>. Daí é só publicar que já vai aparecer o Leia Mais.

Hack Leia maisPara colocar links no menu que fica embaixo do cabeçalho, entre em layout > editar html> linkbar e siga as instruções contidas neste post - Como inserir links na linkbar.

Confira diversas funções e truques que podem ser utilizados neste template com facilidade:

  • Hack - artigos relacionados com imagens
  • Avatar nos comentários do Blogger
  • Personalize os marcadores do Blogger
  • Caixa de busca no cabeçalho do Blogger
  • Páginas estáticas no Blogger sem data
  • Caso você queira realizar alterações na estrutura do template, tais como adicionar ou retirar sidebar ou mesmo instalar outros hacks, pesquise como fazer.

    Veja também os Termos de Uso, Licença e FAQ - Perguntas Frequentes do Dicas Blogger.

    ©Template by Dicas Blogger – todos os direitos reservados. Não retire os créditos.

    Continue lendo >>

      ©Dicas Blogger 2007-2009. Todos os direitos reservados | Design por Juliana Sardinha

    Contato | Política de Privacidade | Topo