Link "Recomende esse blog!" Em todas postagens

Montei hoje um tutorial de como colocar um link de "Recomende esse blog" em cada post do seu blogger.

1º - Faça login do seu blog, entre em: "Layout" -> "Editar HTML".

2º - Clique em "Baixar Modelo Completo" e salve seu template, caso as mudanças não ficarem como quer, basta voltar o que você salvou.

3º - Ative a janela: "Expandir modelos de widgets".

4º - Procure (Ctrl + F) o seguinte código:

<p class='post-footer-line post-footer-line-2'/>

5º - Cole o seguinte código ANTES de "<p class='post-footer-line post-footer-line-2'/>":

<a href="http://www.recomenda.com.br/recomenda.asp?modo=0" target="_blank">Recomende esse blog!</a>

6º - Teste, se ficou como queria, salve.

- O site Recomenda é o responsável pelo formulário que permite recomendar o seu blog.
- Caso tenha algum problema, mande a pergunta por email, não por comentários.

Botão enviar postagem para o Twitter

O Twitter se tornou uma grande fonte de divulgação de um blog/site. O comum agora é surgir novos gadgets para interar ainda mais esse serviço aos blogs.

O botão enviar para o twitter é um desses serviços. Ele fica disponível a todos os visitantes, assim se a pessoa gostar da matéria e quiser divulgar pelo twitter, o botão organiza tudo!

Antes de começar, recomendo que faça backup de seu template. Por segurança.

Vamos ao que interessa!

1º - Faça login no Blogger. Entre em “Layout” -> “Editar HTML”. Depois marque a caixa: “Expandir modelos de widgets”.

2º - Agora você deve escolher a opção de local onde vai ficar o widget e o tipo (completo ou compacto).

• Primeira Opção: Botão ao lado direito do título do post

Procure (Ctrl + f) por:

<div class='post-header-line-1'/>

ou

<div class='post-header-line-1'>

ou

<div id='post-header-line-1'/>

ou

<div id='post-header-line-1/>

Escolha a forma do botão abaixo e insira o código ACIMA do lugar encontrado:

• Para botão completo

<div style="float:right;padding:4px;">
<script type="text/javascript">
tweetmeme_url = '<data:post.url/>';
tweetmeme_source = 'Usuario_ Twitter';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</div>

OU

• Para botão compacto

<div style="float:right;padding:4px;">
<script type="text/javascript">
tweetmeme_style = 'compact';
tweetmeme_url = '<data:post.url/>';
tweetmeme_source = 'Usuario_ Twitter';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</div>

Agora edite a parte VERMELHA, colocando no lugar de Usuário_Twitter o nome de login do seu Twitter.

Exemplo: pauloestevao

Agora teste, se tudo estiver certo, salve.

• Segunda Opção: Botão abaixo da postagem

Procure por:

<div class='post-footer'>

ou

<div id='post-footer'>

Cole o seguinte código DEPOIS:



• Para botão completo

<div style="float:right;padding:4px;">
<script type="text/javascript">
tweetmeme_url = '<data:post.url/>';
tweetmeme_source = 'Usuario_ Twitter';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</div>

OU

• Para botão compacto

<div style="float:right;padding:4px;">
<script type="text/javascript">
tweetmeme_style = 'compact';
tweetmeme_url = '<data:post.url/>';
tweetmeme_source = 'Usuario_ Twitter';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</div>

Agora edite a parte VERMELHA, colocando no lugar de Usuário_Twitter o nome de login do seu Twitter.

Exemplo: pauloestevao

Teste e salve.

Widget contador de assinantes feed e seguidores do Twitter

Atualizado! 05/02/2010 Atualizado! 25/03/2010



Alguns dias atrás publiquei aqui no Códigos Blog um script que mostra em forma de texto o número de assinantes feed de qualquer blog e fiquei devendo o contador de seguidores do Twitter. Pois é, não consegui desenvolver um contador de seguidores como prometi, no entanto o Marcos Lemos do Ferramentas Blog conseguiu arrumar o tal script.

O Marcos está com alguns problemas no servidor do widget e com minhas artimanhas e algumas dicas do Fernando, consegui criar o código para ler o número de seguidores do Twitter e com isso o widget está completo e funcionando.

Obs.: O contador de seguidores do Twitter foi programado para ser atualizado de 2 em 2 horas. Além disso vou ter acesso aos usuários desse widget, então pense antes de retirar os créditos. ;D


Com esse post, vou divulgar o widget de assinantes feed + seguidores Twitter. Siga os passos abaixo:



1º- Faça login no Blogger, entre em “Layout” -> “Elementos da página”, clique em “Adicionar um Gadget” -> “HTML/Java Script”

2º - Ao abrir uma janela cole o seguinte código abaixo:

<div align="center">

  <div style='width: 170px; height: 112px; border: 4px #EFEFEF solid;   margin: 0; padding: 0; background: #fff; font-family: "Times New Roman",   Times, serif;'>

  <div style='width: 170px; height: 40px; float: left; padding:   8px;'><img   src="http://codigosblog.net/servidor/widget_twitter+feed/feed-icon.png"   width="40" height="40" style="margin-right: 8px; float: left;"/>   <a href="http://feeds.feedburner.com/NOME_DO_FEED" target="_blank" ><span style="float: left;   margin-top: 2px; padding: 0; font-size: 17px; color: #000066;   font-family: "Times New Roman", Times, serif;">

  <script language='javascript' type='text/javascript'   src='http://www.codigosblog.net/servidor/contadorfeed.php?uri=NOME_DO_FEED'></script>   leitores</span><br/>

  <span style="float: left; margin: 0px; padding: 0px; font-size: 12px;   color: #000066; font-family: "Times New Roman", Times,   serif;">assine o feed</span></a>
  </div>
  <div style='width: 170px; height: 40px; float: left; padding:   8px;'>
  <img   src="http://codigosblog.net/servidor/widget_twitter+feed/twitter-icon.gif"     width="40" height="40" style="margin-right: 8px; float: left;" />
  <a href="http://www.twitter.com/SEU_USUÁRIO_TWITTER"   target="_blank" ><span style="float: left; margin-top: 2px;   padding: 0; font-size: 17px; color: #000066; font-family: "Times New   Roman", Times, serif;">

  <script type='text/javascript'   src="http://www.codigosblog.net/servidor/contadorTwitter/seguidores.php?usuario=SEU_USUÁRIO_TWITTER"></script>   followers</span><br/>

  <span style="float: left; margin: 0px; padding: 0px; font-size: 12px;   color: #000066; font-family: "Times New Roman", Times, serif;">siga   no twitter</span></a>
  </div>
  </div>

  <span style="font-size: 10px; font-family:Arial, Helvetica,   sans-serif; padding: 2px 0px 0px 0px; margin:   0;"><small><script language='javascript'   type='text/javascript'   src='http://www.codigosblog.net/servidor/widget_twitter+feed/widget+codigosblog.js'></script></small></span>
  </div>

Substitua:

• NOME_DO_FEED pelo nome do feed do seu blog.

Exemplo: http://feeds.feedburner.com/codigosblog (no caso o NOME_DO_FEED é: codigosblog)

• SEU_USUÁRIO_TWITTER pelo nome de usuário do seu Twitter.

Exemplo: http://twitter.com/pauloestevao (no caso o SEU_USUÁRIO_TWITTER é: pauloestevao)

Obs.: Coloque o nome de usuário do Twitter todo em letras minúsculas! Se colocar alguma letra maiúscula o widget não vai funcionar.


Lembre-se: Existem quatro modificações a serem feitas.

3º - Depois que modificar é só salvar. Não tem problema algum em modificar o widget, basta não retirar os créditos.

4º - Para o contador de assinantes feed funcionar, você deve liberar a funcionalidade diretamente no FeedBurner.

Entre no site http://www.feedburner.com/ , faça seu login, acesse a conta desejada.

Acesse a aba: “Publicize” (Publicar) e clique em “FeedCount” (FeedCount) localizado no menu lateral. Após isso clique em “Activate” (Ativar).

Pronto! O contador está ativado.

Nuvem de Tags usando os Marcadores

Um recurso interessante para destacar os assuntos mais vistos no seu blog é colocar os marcadores do blog em forma de nuvens de tags. Assim os assuntos mais vistos no seu blog vão ficar em destaque. Veja a imagem abaixo:

Antes de tudo, para esse widget funcionar é necessário que você coloque marcadores nas postagens do seu blog, dessa forma o Blogger vai organizar em categorias todos os posts.

Vamos ao trabalho... (recomendo que faça backup sempre antes de começar qualquer modificação)


1º - Entre em “Layout” -> “Elementos da Página”. Clique em “Adicionar um Gadget”, escolha adicionar “Marcadores”.


No título coloque: “Nuvem de Tags”.

Obs.: Deixe apenas um widget de marcadores!


2º - Entre em “Layout” -> “Editar HTML”, procure (Ctrl + f) por:

]]></b:skin>

3º - Cole o seguinte código ANTES:

#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a:hover{text-decoration:underline;}
#labelCloud a, #labelCloud li a{text-decoration:none;}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color: #000;} /*para mudar a cor da letra de preto para branco substitua #000 por #FFF*/
#labelCloud .label-cloud li:before{content:"" !important}

4º - Procure: </head> e cole o seguinte código ANTES:

<script type='text/javascript'>
// Label Cloud User Variables
var lcBlogURL = 'http://LINK DO SEU BLOG.blogspot.com';
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>

Encontre: http://LINK DO SEU BLOG.blogspot.com, e substitua pelo link do seu blog.

Exemplo: http://meublog.blogspot.com



5º - Deixe a caixa de: “Expandir modelos de widgets” DESMARCADA! E procure:

<b:widget id='Label1' locked='false' title='Nuvem de Tags' type='Label'/>

6º - Substitua todo o código por:

<b:widget id='Label1' locked='false' title='Nuvem de Tags' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='labelCloud'/>
<script type='text/javascript'>
function s(a,b,i,x){
if(a>b){
var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
}
else{
var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
}
return v
}
var ta=0
var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = "<data:label.name/>";
ts[theName] = <data:label.count/>;
</b:loop>
for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
tz = labelCount.length-1;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
for (var i=0;3 > i;i++) {
c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
}
var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
li = document.createElement('li');
li.style.fontSize = fs+'px';
li.style.lineHeight = '1';
a = document.createElement('a');
a.title = ts[t]+' Posts in '+t;
a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
a.href = lcBlogURL+'/search/label/'+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement('span');
span.innerHTML = '('+ts[t]+') ';
span.className = 'label-count';
a.appendChild(document.createTextNode(t));
li.appendChild(a);
li.appendChild(span);
}
else {
a.appendChild(document.createTextNode(t));
li.appendChild(a);
}
ul.appendChild(li);
abnk = document.createTextNode(' ');
ul.appendChild(abnk);
}
lc2.appendChild(ul);
</script>
<noscript>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
</noscript>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

7º - Teste e veja se está tudo certo! Salve.

Personalizando link postagens "Anterior", "Próxima", "Início"

Encontrei um tutorial super legal no blog Blog Fácil, ensinando a trocar os links que ficam no fim da página, que possibilita a navegação entre os posts por imagens.

Já estou usando aqui no Códigos Blog e agora vou fazer ensinar a você fazer isso também, a diferença é que vou fazer tudo, passo por passo para você fazer também no seu template.


1º - Salve o template como sempre, caso tenha problemas você tem o template salvo;


2º - Entre no blogger, e siga: "Layout", "Editar HTML", marque a janela: "Expandir modelos de widgets";

3º - Procure (Ctrl + F):

<data:newerPageTitle/>

 Substitua por:

<img alt='Página Anterior' border='0' src='http://img169.imageshack.us/img169/9415/anteriorhi3.gif'/>

4º - Procure (Ctrl +F):

<data:olderPageTitle/>

  Substitua por:

<img alt='Próxima Página' border='0' src='http://img140.imageshack.us/img140/3741/postagens.jpg'/>

 5º -  Procure (Ctrl +F):

 <data:homeMsg/> 

 Substitua por:

<img alt='Home' border='0' src='http://img524.imageshack.us/img524/8104/iniciocf8.gif'/>

6º - Teste, se tudo está como deveria, salve!



Pronto! Se quiser usar imagens diferentes, faça a sua, hospede e substitua os links das imagens pelas novas.

Como mudar Postagens mais recentes e Postagens mais antigas do blog

Muitas pessoas estavam me cobrando um post ensinando como modificar o texto de navegação interna das postagens, então aqui estou!

Recomendo antes de tudo, como eu qualquer modificação: Faça backup do seu template.

1º - Faça login no Blogger e entre em “Layout” -> “Editar HTML”;
2º - Marque a caixa “Expandir modelos de widgets”;
3º - Procure (Ctrl + f):
<data:newerpagetitle/>

Essa tag é usada para nomear o botão que volta para as postagens mais recentes, ou seja, que busca postagens mais novas (Postagens mais recentes).
Para modificar o texto, basta apagar essa tag é escrever o que quiser.

4º - Procure (Ctrl + f):

<data:olderpagetitle/>

Essa tag é usada para nomear o botão que vai para as postagens mais antigas, ou seja, que busca arquivos passados (Postagens mais antigas).

Para modificar o texto, basta apagar essa tag é escrever o que quiser.

5º - Procure (Ctrl + f):

<data:homemsg/>

Você vai encontrar duas tags dessa, as duas levam ao início do blog (Home).

Para modificar o texto, basta apagar as duas tag iguais é escrever o que quiser.

Obs.: Não é obrigatório modificar toda. Você pode modificar apenas um ou até todas.

Se você prefere colocar uma imagem no local, leia: Personalizando link postagens "Anterior", "Próxima", "Início".

Como adicionar legenda em imagens Do blog

O Blogger liberou mais um recurso em sua plataforma, agora você pode colocar legendas em baixo de cada imagem usada em suas postagens sem dificuldade alguma.


Esse recurso no momento só é liberado para o Blogger in Draft (painel de testes do Blogger), mas para quem conhece o Códigos Blog sabe como é indispensável o uso desse painel.

Para adicionar legendas de forma rápida siga os passos abaixo:

1º - Faça login no Blogger in Draft e clique em “Nova Postagem”;

2º - Escreva sua postagem normalmente e ao adicionar uma imagem, clique sobre ela (a imagem).

3º - Repare que você terá uma opção com o nome: “Adicionar legenda”. Clique sobre ela e escreva sua legenda no local disponível.

4º - Pronto! Legendas de forma simples e organizada em todas as imagens.

Tags: Legenda em imagens Blogger, legenda Blogger, imagens postagens.