Saiba mais: Sobre | Outros projetos: iTouchBrasil | #



Archive for the ‘hacks blogger’ Category

Como gerar meta-tags dinâmicas para blogger/blogspot

5 comments

Todos sabemos das deficiências do blogger, porém, sempre temos um ou outro hack para contornar isso, certo?

O problema aqui é que no blogger você até pode gerar suas meta-tags simples, no entanto, elas são usadas genericamente em TODAS as postagens, diminuindo sua relevância. Nossa dica serve para que o blogger possa gerar meta-tags dinâmicas para cada postagem.

blogger_meta_tags

Esta dica vem para incrementar o SEO do seu blog, ou seja, o hack a seguir fará com que seu blog seja melhor indexado pelo Google e outros mecanismos de busca.

ANTES, não se esqueça de implementar o hack para otimizar o título das postagens.

Depois, encontre (CTRL+F) este código no seu template:

<b:skin><![CDATA[

E imediatamente ANTES/ACIMA dele, cole este código abaixo:

<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<meta expr:content=’data:blog.pageName + &quot;, &quot; + data:blog.title + &quot;, &quot; +  data:blog.pageName’ name=’Description’/>
<meta expr:content=’data:blog.pageName + &quot;, &quot; + data:blog.title + &quot;, &quot; + data:blog.pageName’ name=’Keywords’/>
</b:if>

Agora, em cada página individual, o script gerará meta-tags específicas para cada uma delas utilizando-se do título dos posts e do nome do blog.

Usei esta dica e minhas visitas aumentaram em mais de 40%. Experimente, e qualquer dúvida, deixe um comentário.

via bloggerstop

Written by admin

novembro 10th, 2009 at 5:40 am

Posted in hacks blogger

Otimizando título postagens no blogger

5 comments

Otimizando o título das postagens do seu blog, você melhora sua indexação nos mecanismos de busca. Nosso objetivo é fazer o título mudar dessa maneira:

Antes:

Depois:

Para isso, siga esses passos:

1. Acesse sua conta do Blogger.
2. Selecione a opção Layout;
3. Acesse a aba Edit HTML.
4. Agora vá em Edit Template, e encontre este código:

<title><data:blog.pageTitle/></title>

SUBSTITUA-O por este:

<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title>

Visualize para ver se está tudo certo e pronto!

Written by admin

novembro 10th, 2009 at 5:35 am

Posted in hacks blogger

Anuncios adsense apenas nos artigos individuais

leave a comment

Neste post, ensinei à vocês como colocar o adsense nos posts do seu blog. Entretanto, havia o problema deles aparecerem na home, o que acabava limitando o número de anúncios (e consequentemente posts) à 3.

Para resolver este problema, fazemos uma pequena modificação que fará com que os anúncios sejam exibidos apenas nos artigos individuais.

Ao trabalho!

Antes de mais nada, faça um backup do seu template.

0- Obviamente, entendo que você JÁ aplicou este tutorial.

1- Como de costume,  vá até o Painel do Blogger e clique em “Layout”, depois em “Editar HTML” para poder editar o seu código-fonte. Em seguida, marque a opção “Expandir modelos de widgets”.

2- Procure por isto:

<div class=’ads’> 
SEU CÓDIGO ADSENSE
</div>

(Obviamente, procure apenas pela primeira linha, visto que o seu código do anúncio estará no lugar da segunda linha).

3- Insira os códigos abaixo antes:

<b:if cond=’data:blog.pageType == &quot;item&quot;’>

e depois do seu adsense:

</b:if>

4- Tudo ficará mais ou menos asism:

<div class=’ads’> 
<b:if cond=’data:blog.pageType == &quot;item&quot;’>

SEU CÓDIGO ADSENSE
</b:if>

</div>

5- Visualize, pra ver se o anúncio sumiu da home e Salve.

Está feito! Seus anúncios do adsense agora só aparecerão dentro dos posts individuais.

Dúvidas? Deixe nos comentários

Written by admin

abril 6th, 2009 at 4:05 am

Posted in adsense, hacks blogger

Lista de posts relacionados no blogger/blogspot

3 comments

Manter os leitores no seu blog por mais tempo é absolutamente essencial para seu sucesso. Muitas vezes os posts ficam esquecidos nos arquivos e o novo leitor não tem acesso direto à eles.

Para contornar esse problema, este hack mostrará uma lista de “Posts Relacionados”, logo abaixo de cada artigo seu.

Vamos lá?

Primeiro vá até o Painel do Blogger e clique em “Layout”, depois em “Editar HTML” para poder editar o seu código-fonte. Em seguida, marque a opção “Expandir modelos de widgets”.

ATENÇÃO: Antes de prosseguir, faça o backup do seu template pra evitar transtornos futuros!

1- Localize a tag:

</head>

2- ANTES dela, coloque o código abaixo:


<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- Agora, localize esta parte do código:

<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>

Atenção aqui, o código mostrado tem que ser exatamente como está no passo 3, pois existem muitos </b:loop>  no source do seu template, e você pode confundir.

4- 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&amp;callback=related_results_labels&amp;max-results=5″‘ type=’text/javascript’/>
</b:if>

5- O resultado desta parte ficará assim, confira:

<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&amp;callback=related_results_labels&amp;max-results=5″‘ type=’text/javascript’/>
</b:if>

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

6- Agora, pra finalizar o hack, localize esta parte do código:

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

7- Então, DEPOIS dele, cole a parte abaixo:

<b:if cond=’data:blog.pageType == “item”‘><h3>Posts Relacionados</h3></b:if>
<script type=’text/javascript’>
removeRelatedDuplicates();
printRelatedLabels();
</script>

A parte em azul pode ser alterada livremente por você. É interessante relacionar a frase ao tema do seu blog. Experimente!

8- Visualize pra ver se o blog abre normalmente e Salve (Não dá pra visualizar porque o resultado só aparece nas páginas dos artigos individuais).

9- Caso ocorra algum erro, desfaça (Limpar edições) e recomeçe.

10- Seguindo à risca este tutorial, será exibida uma lista com 5postagens relacionadas. Caso você queira modificar essa quantidade, localize esta parte do código:

max-results=5

e troque o valor em azul.

Boa sorte!

Written by admin

abril 4th, 2009 at 3:59 am

Posted in hacks blogger

Colocando adsense dentro de posts blogger/blogspot

leave a comment

Ganhar dinheiro com seu próprio blog é o sonho de muita gente que mantém blogs pela web afora. No entanto, pra ter um bom rendimento, os anúncios precisam estar bem posicionados, o que ocasionará uma taxa de cliques bem maior.

Neste tutorial, vou ensiná-los à posicionar o banner do adsense (ou qualquer outro, na verdade) entre o título e o conteúdo do seu post,com diversas formas de alinhamento. Esse tutorial foi testado tendo como base o template “Mínima” no blogger, então, caso não encontre o script exato, procure por algo semelhante.

Mãos à obra?

0- Lembre-se sempre que antes de qualquer modificação, faça o backup do seu template.

1- adicione o seguinte código de css antes da tag: ]]></b:skin>

.ads
{
float:left;
padding-right:10px;
}

2- Clique na opção “Expandir modelos de widgets” e procure por isto:

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

3- Vá agora até este site, cole o seu código adsense lá e clique em “Parse”.

Isto fará com que as tags: <!– e //–> serão substituídas por &lt;!– e //–&gt; respectivamente. Caso contrário, o blogger NÃO exibirá seu adsense.

4- Entre as tags <p> e <data:post.body/> coloque a linha abaixo em vermelho, com seu código do anúncio JÁ MODIFICADO no passo anterior, como no exemplo a seguir:

<p>
<div class=’ads’>COLOQUE AQUI O SEU CÓDIGO ADSENSE MODIFICADO</div><data:post.body/>
</p>


5- Visualize pra ver se está tudo no lugar e salve. Está pronto.

ATENÇÃO: Desta maneira, o anúncio será posicionado à esquerda na coluna do post, e o texto aparecerá abaixo. Pra posicioná-lo à direita, coloque float:right; onde você vê float:left; ficando assim:


.ads
{
float:right;
padding-right:10px;
}


Pra colocar o texto AO LADO dos anúncios, retire o float, ficando desta forma:

.ads { padding-right:10px; }


Lembrando que os anúncios aparecerão na home também, e como o Google só permite a exibição de 3 blocos de anúncios Adsense por página, sugiro que você reduza a quantidade de posts na home pra três. No próximo post, vou ensinar como exibir os anúncios apenas nas páginas individuais.

Aguarde

Written by admin

abril 3rd, 2009 at 4:57 pm

Posted in adsense, hacks blogger

Customizando a data nos posts blogger

2 comments

Olá, deixar o seu blog mais atraente para o leitor inclui ter uma boa aparência. Hoje ensinarei como customizar a data que aparece junto aos posts pra algo mais cool do que o que geralmente vem como padrão nos templates.

Pra personalizar a data do seu blog, assim como você vê aqui, siga atentamente os passos abaixo e boa sorte.

0- SEMPRE faça um backup do seu template antes de qualquer modificação, ok? Este tutorial é feito baseado no source do template “Mínima”.

1- Vá até o painel de configuração do seu blogger, acesse ‘Configurações’ &gt; ‘Formatação’, depois deixe como na imagem abaixo:

2- Agora, encontre a tag: </head> e cole o script abaixo imediatamente acima dele.

<script type=’text/javascript’>
function novadata(d){
var d = d.replace(/\,/g,&#39;&#39;);
var da = d.split(&#39; &#39;);
diaSemana = &quot;<p class=’diaSemana’>&quot;+da[0]+&quot;</p>&quot;;
mes = &quot;<p class=’mes’>&quot;+da[1]+&quot;</p>&quot;;
dia = &quot;<p class=’dia’>&quot;+da[2]+&quot;</p>&quot;;
ano = &quot;<p class=’ano’>&quot;+da[3]+&quot;</p>&quot;;
  document.write(dia+mes+ano);
}
</script>

3- Neste passo, antes de ]]></b:skin> cole as linhas abaixo:

.data{padding:0 0 10px 0;color:#2a2a2a}.post-title{margin:0 0 0 50px;padding:0}.dia,.mes,.ano{color:#132e70;text-align:center;display:block;font-family:’Arial’}.dia{font-size:18px;letter-spacing:-1px;line-height:16px}.mes{font-size:10px;line-height:9px;text-transform:uppercase}.ano{font-size:9px;line-height:8px}.ndata{float:left;width:45px}.ndata p{margin:0;padding:0;color:#4a5976}

4- Em seguida, visualize pra ver se está tudo certinho e salve. Clique agora em “Expandir modelos de widgets” e localize uma parte semelhante a essa:

<b:if cond=’data:post.dateHeader’>
        <h2 class=’date-header’><data:post.dateHeader/></h2>
      </b:if>

5- Agora, SUBSTITUA essas três linhas acima por estas:

<div class=’ndata’><script type=’text/javascript’>novadata(&#39;<data:post.timestamp/>&#39;);</script></div>

Visualize mais uma vez pra ver se funcionou. Caso esteja tudo perfeito, salve e faça um link pra cá. ^.~

Written by admin

abril 2nd, 2009 at 9:34 pm

Posted in hacks blogger