Criando um Link para Post Aleatório no Blogger

| 5 Comentários

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:

Como criar 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”.

Criando a página - Clique para ampliar

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

| 1 Comentário

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

| 5 Comentários

Taxa de RejeiçãoTaxa 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 »