Criando um Link para Post Aleatório no Blogger

Você já pensou em colocar um link para artigo aleatório no Blogger, mas não sabe como?
Baseado no widget do Blog Godown, que cria uma lista de artigos aleatória, eu “desenvolvi” (usando o famoso "POG") um código para o blog “The Oatmeal Traduzidos”, que você pode ver em ação aqui e que agora compartilharei com você.

1 – Crie uma nova página estática no Blogger:

2 – Em “Editar HTML”, cole o código abaixo:

<script type="text/javascript">document.write('<h3>Carregando...</h3>')</script>
<script type="text/javascript"> var randarray = new Array();var l=0;var flag; var numofpost=1;function randomposts(json){ var total = parseInt(json.feed.openSearch$totalResults.$t,10); for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}} if(flag==0&&l!=0){randarray[i++]=l;}}for(n in randarray){var p=randarray[n];var entry=json.feed.entry[p-1]; for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var newpage = entry.link[k].href;window.location.href=newpage;break;}} }} </script>
<script src="/feeds/posts/summary?alt=json-in-script&start-index=1&max-results=500&callback=randomposts" type="text/javascript"></script>
<noscript>
<p align="center"> <strong>Você precisa ter o Javascript habilitado para ser redirecionado.</strong><br/>
Habilite o seu Javascript ou <a href="/">Volte para a página Inicial</a>.</p>
</noscript>

Marque “Ignorar linhas novas” e “Interpretar HTML Digitado”.

Salve e Crie um link para a página criada em qualquer lugar. Pronto.

Mas... Por que colocar o script dentro de uma página específica?
O script é pesado, pois trabalha carregando o feed com os últimos 500 artigos, por isso é melhor não colocar para carregar em todas as páginas. O Script só será carregado quando for solicitada a página.

O Script foi testado no Internet Explorer, Mozilla Firefox, Google Chrome e Opera. Bugs, Críticas ou Sugestões? Poste nos comentários.

[...]
Leia o Texto Completo »

Corrigindo o Estilo do Navegador do Blogger

Se você usa o hack do Compulsivo para o Pager do Blogger (barra com links para a página anterior / próxima página), deve ter percebido que de uns tempos para cá, ele mudou. O que era assim:

Tornou-se assim:

Hoje, vamos aprender como fazê-lo voltar para o seu estilo antigo:

 - Resumo para usuários mais experientes:

Basta trocar os IDs CSS do Pager e de seus elementos, que ele voltará a funcionar como antes.

- Passo-a-passo para usuários menos experientes:
O tutorial está dividido em duas etapas:

>> Primeira etapa

Vá em “Editar HTML” e marque “Expandir modelos de widgets”

Localize um código semelhante a esse:

#blog-pager a {
text-decoration: none;
padding: .2em 1em;
margin: .2em;
color: #000000; /* Cor do texto */
background-color: #FFFFFF; /* Cor de fundo */
border: 1px dotted #CCCCCC; /* Cor da borda */
}
#blog-pager a:hover {
color: #000000; /* Cor do texto */
background-color: #EEEEEE; /* Cor do destaque */
border: 1px dotted #CCCCCC; /* Cor da borda */
}
#blog-pager {padding:5px;text-align:right;float:right}
#blog-pager-older-link, #blog-pager-newer-link {text-align:right}

E substitua por:

#blogpager a {
text-decoration: none;
padding: .2em 1em;
margin: .2em;
color: #000000; /* Cor do texto */
background-color: #FFFFFF; /* Cor de fundo */
border: 1px dotted #CCCCCC; /* Cor da borda */
}
#blogpager a:hover {
color: #000000; /* Cor do texto */
background-color: #EEEEEE; /* Cor do destaque */
border: 1px dotted #CCCCCC; /* Cor da borda */
}
#blogpager {padding:5px;text-align:right;float:right}
#blogpager-older-link, #blogpager-newer-link {text-align:right}

OBS.: o código pode variar por causa da cor.

>> Segunda Etapa
 A primeira etapa resume-se a trocar o estilo CSS do Pager. Agora, vamos atualizar o Pager para ele corresponder às mudanças:

Procure por:

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' title='Página anterior'>&lt;&lt;</a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' title='Próxima página'>Seguinte &gt;&gt;</a>
</span>
</b:if>
</div>
<div class='clear'/>
</b:includable>

E substitua por:

<b:includable id='nextprev'>
<div id='blogpager'>
<b:if cond='data:newerPageUrl'>
<span id='blogpager-newer-link'>
<a expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' title='Página anterior'>&lt;&lt;</a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blogpager-older-link'>
<a expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' title='Próxima página'>Seguinte &gt;&gt;</a>
</span>
</b:if>
</div>
<div class='clear'/>
</b:includable>

Visualize para ver se está tudo certo e salve. Pronto! Seu Pager está normal como antes!

[...]
Leia o Texto Completo »

Reduzindo a Taxa de Rejeição do seu Blog

Taxa de Rejeição no Google Analytics (ilustrativo)

Você sabe o que é taxa de rejeição? Se você tem um blog/site, tem que saber. A Taxa de Rejeição é a porcentagem de visitantes que entraram no seu blog e visitaram apenas uma página. Ela pode ser acompanhada pelo Google Analytics e é muito importante para um blog.
Se sua taxa de rejeição estiver acima de 60%, significa que tem algo de errado no seu blog. Sendo assim, vamos aprender algumas técnicas para reduzi-la:

Itens que aumentam a Taxa de Rejeição de um site/blog

>> Template muito pesado

Na era da banda larga, se um blog demorar a abrir, o visitante impaciente sairá do blog sem nem ver o que procurava. Então, remova as coisas desnecessárias do template do seu blog e reduza o tempo de carregamento do seu blog.

>> Players de rádio online

Um visitante está no seu trabalho e abre um blog: começa a tocar uma música alta e todo mundo olha para ele. O que ele faz?
Além de contribuir com o fator anterior, ainda é a coisa que os visitantes mais odeiam em um blog.

>> Anúncios se misturando com o conteúdo

Se o seu visitante não consegue achar o conteúdo facilmente, ele sairá do seu blog. Isso também vale se ele não achar links para outras páginas do blog. Então, modere na quantidade de anúncios.

Reduzindo a Taxa de Rejeição

Além dos erros e suas respectivas correções citados anteriormente, temos também umas dicas:

>> Use widgets de posts relacionados

Indicando postagens que podem estar relacionadas com o conteúdo, o visitante poderá se interessar e visitar outros artigos.
Para Blogger/Blogspot, você pode usar A lista de postagens relacionadas do Compulsivo.
Para Wordpress, você pode usar o Plugin Related Posts.

>> Deixe listas de links na Sidebar

Com a mesma lógica do item anterior, se um visitante vê um link, ele pode se interessar e clicar. Então, use links para as suas páginas mais importantes.

>> Escreva complementos para postagens populares

Escreva postagens sobre o mesmo assunto dos seus artigos mais visitados e “linke” as postagens entre si. A sua taxa de rejeição dessas páginas cairá bruscamente.

>> Coloque links dentro de postagens

Links dentro de postagens chamam a atenção de visitantes e reduzem a taxa de rejeição.
Use o target="blank" em links para páginas de outros sites. Isso fará com que o seu blog continue aberto quando alguém clicar num link externo.

>> Crie séries de postagens

Escrevendo postagens grandes e dividindo-as em partes, além de reduzir a taxa de rejeição, você conseguirá mais leitores de Feed / seguidores para o seu blog.

Bem, são essas dicas que eu deixo para vocês. Eu já testei algumas dessas e elas me deram um bom resultado.
Leitura Recomendada: Compreendendo e diminuindo a taxa de rejeição do Google – Escola Dinheiro

[...]
Leia o Texto Completo »

Contador Twitter e Feedburner em Javascript

Depois que publiquei o Widget Feedburner + Twitter, percebi que ele tinha várias limitações quanto à personalização. Então, resolvi fazer um script que possa ser usado em qualquer widget, com suporte a uma maior personalização. Assim, saiu o novo contador de Seguidores do Twitter e Leitores do Feedburner!

Com esse novo contador, você pode colocar o número de seguidores/leitores não só em widgets, mas também no meio de textos! Por exemplo: no momento em que você está lendo esse texto, o Twitter do SemNome tem seguidores e o Feed, leitores.

Então, quer usar? Veja como:

1 - Inserindo o Script-mestre:
Esse passo precisa ser feito apenas uma vez. O código é esse:

<script type="text/javascript" src="http://semnomenet.googlecode.com/files/twitter-feedburner.js"></script>

Se você for usar mais de uma vez, você pode colocar essa linha antes de </head>. Caso contrário, você só precisa colocar antes do lugar onde você usará.

2 - Inserindo os números
A implantação do script não é nada difícil, basta chamar a função, determinando o pedido:

> Número de Seguidores do Twitter

<script type="text/javascript"> xtwitter("Nome-De-Usuario-do-Twitter") </script>

Lembrando que você deve substituir Nome-De-Usuario-do-Twitter pelo seu nome de usuário do Twitter. E ele deve ficar entre as aspas.

> Número de Leitores do FeedBurner

<script type="text/javascript"> xfeedburner("Nome-do-Seu-Feed-no-FeedBurner") </script>

E lembre-se de substituir Nome-do-Seu-Feed-no-FeedBurner pelo seu URI do Feedburner. Dentro das aspas!

Resumindo...

• A função xfeedburner(uri) imprime o número de leitores do FeedBurner;
• A função xtwitter(usuario) imprime o número de seguidores do Twitter;
• Você pode inserir isso em qualquer local do HTML, não só em widgets;
• O script-mestre só precisa ser inserido uma vez na página, antes de qualquer chamada das funções xfeedburner() ou xtwitter();
• Esse script não imprime créditos em sua página.

Termos de uso

• Você pode modificar o código-fonte do widget, mas deve dar os créditos ao SemNome.
• Você não pode divulgar esse widget como seu.

E uma espécie de “promoção”: Quem fizer skins para esse widget - e disponibilizá-las em seu blog - terá seu link publicado nesse post.

1. O 1º blog que fez um skin para esse widget foi o Gothic Darkness, e ficou bem legal. Confira!

Dúvidas, críticas ou sugestões? Poste nos comentários.

[...]
Leia o Texto Completo »