quarta-feira, 15 de setembro de 2010
quinta-feira, 9 de setembro de 2010
Criar Banner com Link-me
Uma coisa muita comum entre os blogueiros é a troca de banner's, você coloca o banner de um blog no seu layout e ele coloca o seu.
Bom para divulgar seu blog e o dele, e excelente para subir em alguns ranks por ai. =D
Mais não necessariamente você só deve colocar o banner de um blog no seu, se você gostou do blog e quer ajudar ele, um bom modo é colocar uma propagandinha dele.
Código:
<center>Copie o código acima, entre no seu blogger, clique em "Layout" -> "Elementos da página" e clique em adicionar um novo elemento. "HTML/Java Script".<img vspace="2" hspace="2" src="URL DA IMAGEM"/>
<textarea cols="15" rows="3" onfocus="this.select()" onmouseover="this.focus()" name="textarea">
<a href="URL DO BLOG"><img border="0" src="URL DA IMAGEM"/></a></textarea>
</center>
Agora cole o código, troque onde está URL DA IMAGEM pelo link da imagem (seu banner) sem esquecer o http://. E onde está URL DO BLOG coloque o link do seu blog!
Obs.: A maioria dos blogs fazem parceria com banner: 120px x 60px.
Criando Botão de link-me para blog
Faça um botão 80×15 para seu blog igual a esse:
Bom para usar como um banner de divulgação Para isso tem um site bom que faze isso para você, o Graphicsguru.
Depois se quiser utilizar como link-me hospede essa imagem (recomendo: Imageshack) e substitua no código onde necessário:
<center> <img vspace="2" hspace="2" src="URL DA IMAGEM"/>Copie o código acima, entre no seu blogger, clique em "Layout" -> "Elementos da página" e clique em adicionar um novo elemento. "HTML/Java Script".
<textarea
cols="15" rows="3" onfocus="this.select()" onmouseover="this.focus()" name="textarea"><a href="URL DO BLOG">
<img border="0" src="URL DA IMAGEM"/></a></textarea>
</center>
Agora cole o código, troque onde está URL DA IMAGEM pelo link da imagem (seu banner) sem esquecer o http://. E onde está URL DO BLOG coloque o link do seu blog!
Salve o código e pronto! Seu link-me está disponível no blog!
Criando um gif -Photoshop-
Para muitos que tem uma dúvida simples:
"Como fazer um banner animado ou gif?"
Muitos simples!
Existe vários e vários programas para isso, hoje vou mostrar através de uma vídeo aula que achei no youtube como fazer um gif no PhotoShop, um editor de imagens muito conhecido mais que poucos sabem fazer animação com ele.
Veja o vídeo:
Simples! Depois faço outras postagens para fazer um banner para seu blog em vários programas diferentes!
Fazendo animação no Adobe Image Ready
1º - Faça todos os quadros do gif antes de começá-lo no photoshop ou paint ou corew ou qualquer programa editor de imagem.
2º - Abra os quadros no Adobe Image Ready. Clique no segundo quadro.
3º - Na janela de animação clique na seta que se localiza ao canto superior à direita. Depois clique em copiar quadro dentro do menu que se abriu. Vide imagem abaixo:
4º - Clique na primeira imagem do seu gif. Vá à seta da janela de animação e clique em colar quadro dentro
do menu que se abriu. Vide imagem abaixo:
5º - Repita o quarto passo até que todos os quadros do gif estejam em uma só janela, a primeira. Depois selecione o tempo de cada quadro e clique no play para ver como ficou. Vide imagem abaixo:
6º - Para salvar o gif clique em Arquivo e depois em Salvar Otimizado Como. Escolha a extensão .gif e pronto, o gif está feito e salvo.
Vídeo Aula:
Gratis Botões das principais redes sociais
Esses ícones que encontrei no Dicas Blogger são perfeitos! Sou quase obrigado a postar aqui!
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
<div class='post-header-line-1'/>Escolha a forma do botão abaixo e insira o código ACIMA do lugar encontrado:
ou
<div class='post-header-line-1'>
ou
<div id='post-header-line-1'/>
ou
<div id='post-header-line-1/>
• 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
• Para botão compacto
<div style="float:right;padding:4px;">Agora edite a parte VERMELHA, colocando no lugar de Usuário_Twitter o nome de login do seu Twitter.
<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>
Exemplo: pauloestevao
Agora teste, se tudo estiver certo, salve.
- Segunda Opção: Botão abaixo da postagem
<div class='post-footer'>Cole o seguinte código DEPOIS:
ou
<div id='post-footer'>
• Para botão completo
<div style="float:right;padding:4px;">OU
<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>
• Para botão compacto
<div style="float:right;padding:4px;">Agora edite a parte VERMELHA, colocando no lugar de Usuário_Twitter o nome de login do seu Twitter.
<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>
Exemplo: pauloestevao
Teste e salve.
Widget contador de assinantes feed e seguidores do Twitter
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.
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">Substitua:
<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>
- NOME_DO_FEED pelo nome do feed do seu blog.
- SEU_USUÁRIO_TWITTER pelo nome de usuário do seu Twitter.
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.
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;}4º - Procure: </head> e cole o seguinte código ANTES:
#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}
<script type='text/javascript'>Encontre: http://LINK DO SEU BLOG.blogspot.com, e substitua pelo link do seu blog.
// 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>
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'>7º - Teste e veja se está tudo certo! Salve.
<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>
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.
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.
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.
Como criar um blog no Blogger Gratis
Para criar um blog gratuitamente acesse o Blogger e clique em Criar Blog, como na imagem abaixo. Agora vamos criar nossa conta do Google. Se você já possui uma conta no Gmail, nos grupos do Google ou no Orkut, clique em “acesse-a primeiro”. Agora faça seu login e clique em acessar. Se você ainda não possui uma conta em um desses serviços do Google, crie sua conta com qualquer e-mail que possuir, digitando os dados exigidos.
Dê um título ao blog (ex: Quero Criar um Blog), que tenha a ver com seu blog, com os posts que serão publicados nele, preencha o endereço do blog (ex: querocriarumblog – tudo junto, sem espaços), e clique em verificar disponibilidade, para saber se já existe algum blog com esse nome, senão houver clique em continuar, se houver escolha outro nome, mas não esqueça de colocar o título do blog de acordo com o novo nome para ficar melhor apresentável.
Agora escolha um modelo de Template e clique em continuar. Como na imagem abaixo clique em Começar a usar o blog e pronto, seu blog está criado. No próximo artigo irei ensinar algumas configurações básicas assim que se cria um blog no Blogger.
Como colocar o Tweet Button oficial do Twitter em seu blog
O Twitter lançou essa semana o seu Tweet Button oficial. O recurso é muito parecido com o botão curtir do Facebook. Como o Twitter é uma importante fonte de visitas e divulgação para blogs, vou ensinar como colocar o botão do Twitter no blog.
Basta seguir os passos e colocar o botão em seu blog:
- Acesse a página do Twitter em https://twitter.com/goodies/tweetbutton.
- Escolha o tipo de botão que deseja.
- Recomende um usuário do Twitter, basta colocar o nome de usuário dele, sem o @. Você pode sugerir até 2 usuários, entre eles você mesmo.
- Copie o código gerado.
- Abra a área administrativa de seu blog e procure o local que deseja colocar o botão.
- Cole o código nesse local.
Widgets Postagens Populares no seu blog
Recentemente o Blogger liberou um novo widget, onde são mostradas as postagens mais populares do seu blog de acordo com o número de acessos, disponível no painel em “Elementos da Página”.
Esse widget pode ser configurado para mostrar as postagens mais visualizadas no total, nos últimos 30 dias ou da última semana. Além de ser possível colocar miniaturas de imagem ou snippet (fragmentos da postagem).
O sistema como eu disse, mostra as postagens com o maior número de acessos únicos, não por número de comentários ou algo do tipo.
Como Retirar a barra do blogspot
Que tal você tirar essa bara de navegação que fica no topo do seu blog?
É bem fácil, entre na sua conta va até configurações, Modelo, Editar Html
procure pela linha
#header-wrapper
e cole o código logo acima
#navbar {
display:none;
margin:0;
padding:0;
}
É bem fácil, entre na sua conta va até configurações, Modelo, Editar Html
procure pela linha
#header-wrapper
e cole o código logo acima
#navbar {
display:none;
margin:0;
padding:0;
}
Dicas de Widget “assine os feeds”
Uma forma legal de aumentar o número de assinantes de feeds, é oferecendo várias formas de assinatura aos visitantes. Muita gente nem imagina o que seja um feed e muito menos um leitor RSS; então, não custa nada facilitarmos as coisas, né?
Pensando nisto, criei um widget bem simplezinho, usando os próprios recursos do FeedBurner. Apesar de simples, o widget é poderoso, pois reúne três formas de direcionamento para o FeedBurner: caixa de email, ícone e contador.
Se você não sabe o que é um Feed e nem o que é FeedBurner, acesse:
Nas imagens abaixo, temos um exemplo do widget já instalado no Blogger:
Como configurar e instalar o widget
Copie o código abaixo, cole no gadget HTML/javascript do Blogger e faça as seguintes substituições (preste bastante atenção agora):
Onde estiver escrito SEUBLOG, substitua pela parte final da url do Feed do blog.
Exemplo: http://feeds.feedburner.com/dicasblogger (dicasblogger é a parte final)
Escolha uma imagem com fundo transparente, em formato .PNG e de 120 x 120 px. Faça o upload da imagem no Picasa e cole a url dela em URL DA IMAGEM.
Recomendo o site Findicons para encontrar o ícone dos Feeds.
Para mudar a cor da borda do widget, substitua os números deste trecho:
As alterações também podem ser feitas no WordPad do Windows e depois coladas no gadget HTML/javascript do Blogger.
A exibição dos créditos (nome e link do Dicas Blogger), é opcional.
Recomendo que o título do gadget seja algo do tipo “Assine os feeds” :)
Pensando nisto, criei um widget bem simplezinho, usando os próprios recursos do FeedBurner. Apesar de simples, o widget é poderoso, pois reúne três formas de direcionamento para o FeedBurner: caixa de email, ícone e contador.
Se você não sabe o que é um Feed e nem o que é FeedBurner, acesse:
Nas imagens abaixo, temos um exemplo do widget já instalado no Blogger:
 |  |
Copie o código abaixo, cole no gadget HTML/javascript do Blogger e faça as seguintes substituições (preste bastante atenção agora):
Onde estiver escrito SEUBLOG, substitua pela parte final da url do Feed do blog.
Exemplo: http://feeds.feedburner.com/dicasblogger (dicasblogger é a parte final)
Escolha uma imagem com fundo transparente, em formato .PNG e de 120 x 120 px. Faça o upload da imagem no Picasa e cole a url dela em URL DA IMAGEM.
Recomendo o site Findicons para encontrar o ícone dos Feeds.
<table cellpadding="2" cellspacing="2" style="border: 1px solid rgb(236, 236, 236); background:transparent;text-align: left; width: 100%;">Se você quiser mudar as cores do contador, altere os números que aparecem em verde e azul, onde bg é o background (plano de fundo do contador) e fg é a cor do texto. Veja aqui uma tabela de correspondência de cores.
<tbody><tr><td align="undefined"
valign="undefined"><a
href="http://feeds.feedburner.com/SEUBLOG"><img
alt="RSS" title="Assine os feeds"
src="URL DA IMAGEM"
border="0" height="120" width="120"></a></td><td
align="undefined" valign="undefined"><form
style="padding: 3px; text-align: center;"
action="http://feedburner.google.com/fb/a/mailverify"
method="post" target="popupwindow"
onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=SEUBLOG', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Receba os posts por email:</p><p><input style="width: 140px;"
name="email" type="text"></p><input
value="SEUBLOG" name="uri" type="hidden"><input
name="loc" value="pt_BR" type="hidden"><input
value="Assinar" type="submit"><p>Delivered by <a
href="http://feedburner.google.com/" target="_blank">FeedBurner</a></p></form>
<p align="center"><a
href="http://feeds.feedburner.com/SEUBLOG"><img
src="http://feeds.feedburner.com/%7Efc/SEUBLOG?bg=FF9900&fg=0000000&anim=1&label=leitores"
style="border: 0pt none ;" alt="" height="26"
width="88"></a></p></td></tr></tbody></table><div style="text-align: center;"> Widget by <a href="http://www.dicasblogger.com.br/2010/09/widget-assine-os-feeds.html”>Dicas Blogger </a> </div>
Para mudar a cor da borda do widget, substitua os números deste trecho:
border: 1px solid rgb(236, 236, 236);Depois de fazer todas as modificações, clique em SALVAR.
Exemplo: border: 1px solid rgb(255, 255, 255);
As alterações também podem ser feitas no WordPad do Windows e depois coladas no gadget HTML/javascript do Blogger.
A exibição dos créditos (nome e link do Dicas Blogger), é opcional.
Recomendo que o título do gadget seja algo do tipo “Assine os feeds” :)
Código das Cores Para Sites E blogs
Quando vamos mudar a cor de alguma coisa no blog ou site precisamos saber qual o código HTML da cor que vamos usar, porque o template é feito em CSS usando códigos para definir as cores de tudo menos as imagens é claro. Então aqui está uma lista com o código de muitas cores para você usar como quiser no seu blog.
Apesar do blogspot ter uma página de cores com algumas opções elas são limitadas então procure a cor que gostar na lista abaixo e copie o código para usar no blog, esses códigos serem para mudar a cor de tudo: fundo do blog, cores das letras, fundo das postagens ou sidebar, cores das bordas, enfim qualquer cor que veja num blog é definido através desses códigos. Então é só usar a lista de cores e deixar seu blog mais bonito e com cores diferentes. Essa lista foi adaptada apartir de uma página do site MXStudio.
Apesar do blogspot ter uma página de cores com algumas opções elas são limitadas então procure a cor que gostar na lista abaixo e copie o código para usar no blog, esses códigos serem para mudar a cor de tudo: fundo do blog, cores das letras, fundo das postagens ou sidebar, cores das bordas, enfim qualquer cor que veja num blog é definido através desses códigos. Então é só usar a lista de cores e deixar seu blog mais bonito e com cores diferentes. Essa lista foi adaptada apartir de uma página do site MXStudio.
Snow -#FFFAFA
GhostWhite#F8F8FF
WhiteSmoke #F5F5F5
Gainsboro #DCDCDC
FloralWhite #FFFAF0
OldLace #FDF5E6
Linen #FAF0E6
AntiqueWhite #FAEBD7
PapayaWhip #FFEFD5
BlanchedAlmond #FFEBCD
Bisque #FFE4C4
PeachPuff #FFDAB9
NavajoWhite #FFDEAD
Moccasin #FFE4B5
Cornsilk #FFF8DC
Ivory #FFFFF0
LemonChiffon #FFFACD
Seashell #FFF5EE
Honeydew #F0FFF0
MintCream #F5FFFA
Azure #F0FFFF
AliceBlue #F0F8FF
lavender #E6E6FA
LavenderBlush #FFF0F5
MistyRose #FFE4E1
White #FFFFFF
Black #000000
DarkSlateGray #2F4F4F
DimGrey #696969
SlateGrey #708090
LightSlateGray #778899
Grey #BEBEBE
LightGray #D3D3D3
MidnightBlue #191970
NavyBlue #000080
CornflowerBlue #6495ED
DarkSlateBlue #483D8B
SlateBlue #6A5ACD
MediumSlateBlue #7B68EE
LightSlateBlue #8470FF
MediumBlue #0000CD
RoyalBlue #4169E1
Blue #0000FF
DodgerBlue #1E90FF
DeepSkyBlue #00BFFF
SkyBlue #87CEEB
LightSkyBlue #87CEFA
SteelBlue #4682B4
LightSteelBlue #B0C4DE
LightBlue #ADD8E6
PowderBlue #B0E0E6
PaleTurquoise #AFEEEE
DarkTurquoise #00CED1
MediumTurquoise #48D1CC
Turquoise #40E0D0
Cyan #00FFFF
LightCyan #E0FFFF
CadetBlue #5F9EA0
MediumAquamarine #66CDAA
Aquamarine #7FFFD4
DarkGreen #006400
DarkOliveGreen #556B2F
DarkSeaGreen #8FBC8F
SeaGreen #2E8B57
MediumSeaGreen #3CB371
LightSeaGreen #20B2AA
PaleGreen #98FB98
SpringGreen #00FF7F
LawnGreen #7CFC00
Green #00FF00
Chartreuse #7FFF00
MedSpringGreen #00FA9A
GreenYellow #ADFF2F
LimeGreen #32CD32
YellowGreen #9ACD32
ForestGreen #228B22
OliveDrab #6B8E23
DarkKhaki #BDB76B
PaleGoldenrod #EEE8AA
LtGoldenrodYello #FAFAD2
LightYellow #FFFFE0
Yellow #FFFF00
Gold #FFD700
LightGoldenrod #EEDD82
goldenrod #DAA520
DarkGoldenrod #B8860B
RosyBrown #BC8F8F
IndianRed #CD5C5C
SaddleBrown #8B4513
Sienna #A0522D
Peru #CD853F
Burlywood #DEB887
Beige #F5F5DC
Wheat #F5DEB3
SandyBrown #F4A460
Tan #D2B48C
Chocolate #D2691E
Firebrick #B22222
Brown #A52A2A
DarkSalmon #E9967A
Salmon #FA8072
LightSalmon #FFA07A
Orange #FFA500
DarkOrange #FF8C00
Coral #FF7F50
LightCoral #F08080
Tomato #FF6347
OrangeRed #FF4500
Red #FF0000
HotPink #FF69B4
DeepPink #FF1493
Pink #FFC0CB
LightPink #FFB6C1
PaleVioletRed #DB7093
Maroon #B03060
MediumVioletRed #C71585
VioletRed #D02090
Magenta #FF00FF
Violet #EE82EE
Plum #DDA0DD
Orchid #DA70D6
MediumOrchid #BA55D3
DarkOrchid #9932CC
DarkViolet #9400D3
BlueViolet #8A2BE2
Purple #A020F0
MediumPurple #9370DB
Thistle #D8BFD8
Snow1 #FFFAFA
Snow2 #EEE9E9
Snow3 #CDC9C9
Snow4 #8B8989
Seashell1 #FFF5EE
Seashell2 #EEE5DE
Seashell3 #CDC5BF
Seashell4 #8B8682
AntiqueWhite1 #FFEFDB
AntiqueWhite2 #EEDFCC
AntiqueWhite3 #CDC0B0
AntiqueWhite4 #8B8378
Bisque1 #FFE4C4
Bisque2 #EED5B7
Bisque3 #CDB79E
Bisque4 #8B7D6B
PeachPuff1 #FFDAB9
PeachPuff2 #EECBAD
PeachPuff3 #CDAF95
PeachPuff4 #8B7765
NavajoWhite1 #FFDEAD
NavajoWhite2 #EECFA1
NavajoWhite3 #CDB38B
NavajoWhite4 #8B795E
LemonChiffon1 #FFFACD
LemonChiffon2 #EEE9BF
LemonChiffon3 #CDC9A5
LemonChiffon4 #8B8970
Cornsilk1 #FFF8DC
Cornsilk2 #EEE8CD
Cornsilk3 #CDC8B1
Cornsilk4 #8B8878
Ivory1 #FFFFF0
Ivory2 #EEEEE0
Ivory3 #CDCDC1
Ivory4 #8B8B83
Honeydew1 #F0FFF0
Honeydew2 #E0EEE0
Honeydew3 #C1CDC1
Honeydew4 #838B83
LavenderBlush1 #FFF0F5
LavenderBlush2 #EEE0E5
LavenderBlush3 #CDC1C5
LavenderBlush4 #8B8386
SlateGray4 #6C7B8B
LightSteelBlue1 #CAE1FF
LightSteelBlue2 #BCD2EE
LightSteelBlue3 #A2B5CD
LightSteelBlue4 #6E7B8B
LightBlue1 #BFEFFF
LightBlue2 #B2DFEE
LightBlue3 #9AC0CD
LightBlue4 #68838B
LightCyan1 #E0FFFF
LightCyan2 #D1EEEE
LightCyan3 #B4CDCD
LightCyan4 #7A8B8B
PaleTurquoise1 #BBFFFF
PaleTurquoise2 #AEEEEE
PaleTurquoise3 #96CDCD
PaleTurquoise4 #668B8B
CadetBlue1 #98F5FF
CadetBlue2 #8EE5EE
CadetBlue3 #7AC5CD
CadetBlue4 #53868B
Turquoise1 #00F5FF
Turquoise2 #00E5EE
Turquoise3 #00C5CD
Turquoise4 #00868B
Cyan1 #00FFFF
Cyan2 #00EEEE
Cyan3 #00CDCD
Cyan4 #008B8B
DarkSlateGray1 #97FFFF
DarkSlateGray2 #8DEEEE
DarkSlateGray3 #79CDCD
DarkSlateGray4 #528B8B
Aquamarine1 #7FFFD4
Aquamarine2 #76EEC6
Aquamarine3 #66CDAA
Aquamarine4 #458B74
DarkSeaGreen1 #C1FFC1
DarkSeaGreen2 #B4EEB4
DarkSeaGreen3 #9BCD9B
DarkSeaGreen4 #698B69
SeaGreen1 #54FF9F
SeaGreen2 #4EEE94
MistyRose1 #FFE4E1
MistyRose2 #EED5D2
MistyRose3 #CDB7B5
MistyRose4 #8B7D7B
Azure1 #F0FFFF
Azure2 #E0EEEE
Azure3 #C1CDCD
Azure4 #838B8B
SlateBlue1 #836FFF
SlateBlue2 #7A67EE
SlateBlue3 #6959CD
SlateBlue4 #473C8B
RoyalBlue1 #4876FF
RoyalBlue2 #436EEE
RoyalBlue3 #3A5FCD
RoyalBlue4 #27408B
Blue1 #0000FF
Blue2 #0000EE
Blue3 #0000CD
Blue4 #00008B
DodgerBlue1 #1E90FF
DodgerBlue2 #1C86EE
DodgerBlue3 #1874CD
DodgerBlue4 #104E8B
SteelBlue1 #63B8FF
SteelBlue2 #5CACEE
SteelBlue3 #4F94CD
SteelBlue4 #36648B
DeepSkyBlue1 #00BFFF
DeepSkyBlue2 #00B2EE
DeepSkyBlue3 #009ACD
DeepSkyBlue4 #00688B
SkyBlue1 #87CEFF
SkyBlue2 #7EC0EE
SkyBlue3 #6CA6CD
SkyBlue4 #4A708B
LightSkyBlue1 #B0E2FF
LightSkyBlue2 #A4D3EE
LightSkyBlue3 #8DB6CD
LightSkyBlue4 #607B8B
SlateGray1 #C6E2FF
SlateGray2 #B9D3EE
SlateGray3 #9FB6CD
Firebrick4 #8B1A1A
Brown1 #FF4040
Brown2 #EE3B3B
Brown3 #CD3333
Brown4 #8B2323
Salmon1 #FF8C69
Salmon2 #EE8262
Salmon3 #CD7054
Salmon4 #8B4C39
LightSalmon1 #FFA07A
LightSalmon2 #EE9572
LightSalmon3 #CD8162
LightSalmon4 #8B5742
Orange1 #FFA500
Orange2 #EE9A00
Orange3 #CD8500
Orange4 #8B5A00
DarkOrange1 #FF7F00
DarkOrange2 #EE7600
DarkOrange3 #CD6600
DarkOrange4 #8B4500
Coral1 #FF7256
Coral2 #EE6A50
Coral3 #CD5B45
Coral4 #8B3E2F
Tomato1 #FF6347
Tomato2 #EE5C42
Tomato3 #CD4F39
Tomato4 #8B3626
OrangeRed1 #FF4500
OrangeRed2 #EE4000
OrangeRed3 #CD3700
OrangeRed4 #8B2500
Red1 #FF0000
Red2 #EE0000
Red3 #CD0000
Red4 #8B0000
DeepPink1 #FF1493
DeepPink2 #EE1289
DeepPink3 #CD1076
DeepPink4 #8B0A50
HotPink1 #FF6EB4
HotPink2 #EE6AA7
Gold2 #EEC900
HotPink3 #CD6090
HotPink4 #8B3A62
Pink1 #FFB5C5
Pink2 #EEA9B8
Pink3 #CD919E
Pink4 #8B636C
LightPink1 #FFAEB9
LightPink2 #EEA2AD
LightPink3 #CD8C95
LightPink4 #8B5F65
PaleVioletRed1 #FF82AB
PaleVioletRed2 #EE799F
PaleVioletRed3 #CD6889
PaleVioletRed4 #8B475D
Maroon1 #FF34B3
Maroon2 #EE30A7
Maroon3 #CD2990
Maroon4 #8B1C62
VioletRed1 #FF3E96
VioletRed2 #EE3A8C
VioletRed3 #CD3278
VioletRed4 #8B2252
Magenta1 #FF00FF
Magenta2 #EE00EE
Magenta3 #CD00CD
Magenta4 #8B008B
Orchid1 #FF83FA
Orchid2 #EE7AE9
Orchid3 #CD69C9
Orchid4 #8B4789
Plum1 #FFBBFF
Plum2 #EEAEEE
Plum3 #CD96CD
Plum4 #8B668B
MediumOrchid1 #E066FF
MediumOrchid2 #D15FEE
MediumOrchid3 #B452CD
MediumOrchid4 #7A378B
DarkOrchid1 #BF3EFF
DarkOrchid2 #B23AEE
DarkOrchid3 #9A32CD
DarkOrchid4 #68228B
Purple1 #9B30FF
Purple2 #912CEE
SeaGreen3 #43CD80
SeaGreen4 #2E8B57
PaleGreen1 #9AFF9A
PaleGreen2 #90EE90
PaleGreen3 #7CCD7C
PaleGreen4 #548B54
SpringGreen1 #00FF7F
SpringGreen2 #00EE76
SpringGreen3 #00CD66
SpringGreen4 #008B45
Green1 #00FF00
Green2 #00EE00
Green3 #00CD00
Green4 #008B00
Chartreuse1 #7FFF00
Chartreuse2 #76EE00
Chartreuse3 #66CD00
Chartreuse4 #458B00
OliveDrab1 #C0FF3E
OliveDrab2 #B3EE3A
OliveDrab3 #9ACD32
OliveDrab4 #698B22
DarkOliveGreen1 #CAFF70
DarkOliveGreen2 #BCEE68
DarkOliveGreen3 #A2CD5A
DarkOliveGreen4 #6E8B3D
Khaki1 #FFF68F
Khaki2 #EEE685
Khaki3 #CDC673
Khaki4 #8B864E
LightGoldenrod1 #FFEC8B
LightGoldenrod2 #EEDC82
LightGoldenrod3 #CDBE70
LightGoldenrod4 #8B814C
LightYellow1 #FFFFE0
LightYellow2 #EEEED1
LightYellow3 #CDCDB4
LightYellow4 #8B8B7A
Yellow1 #FFFF00
Yellow2 #EEEE00
Yellow3 #CDCD00
Yellow4 #8B8B00
Gold1 #FFD700
Gold3 #CDAD00
Gold4 #8B7500
Goldenrod1 #FFC125
Goldenrod2 #EEB422
Goldenrod3 #CD9B1D
Goldenrod4 #8B6914
DarkGoldenrod1 #FFB90F
DarkGoldenrod2 #EEAD0E
DarkGoldenrod3 #CD950C
DarkGoldenrod4 #8B658B
RosyBrown1 #FFC1C1
RosyBrown2 #EEB4B4
RosyBrown3 #CD9B9B
RosyBrown4 #8B6969
IndianRed1 #FF6A6A
IndianRed2 #EE6363
IndianRed3 #CD5555
IndianRed4 #8B3A3A
Sienna1 #FF8247
Sienna2 #EE7942
Sienna3 #CD6839
Sienna4 #8B4726
Burlywood1 #FFD39B
Burlywood2 #EEC591
Burlywood3 #CDAA7D
Burlywood4 #8B7355
Wheat1 #FFE7BA
Wheat2 #EED8AE
Wheat3 #CDBA96
Wheat4 #8B7E66
Tan1 #FFA54F
Purple3 #7D26CD
Purple4 #551A8B
MediumPurple1 #AB82FF
MediumPurple2 #9F79EE
MediumPurple3 #8968CD
MediumPurple4 #5D478B
Thistle1 #FFE1FF
Thistle2 #EED2EE
Thistle3 #CDB5CD
Thistle4 #8B7B8B
grey11 #1C1C1C
grey21 #363636
grey31 #4F4F4F
grey41 #696969
grey51 #828282
grey61 #9C9C9C
grey71 #B5B5B5
gray81 #CFCFCF
gray91 #E8E8E8
DarkGrey #A9A9A9
DarkBlue #00008B
DarkCyan #008B8B
DarkMagenta #8B008B
DarkRed #8B0000
LightGreen #90EE90
Chocolate3 #CD661D
Chocolate4 #8B4513
Firebrick1 #FF3030
Firebrick2 #EE2C2C
Firebrick3 #CD2626
Gold4 #8B7500
Goldenrod1 #FFC125
Goldenrod2 #EEB422
Goldenrod3 #CD9B1D
Goldenrod4 #8B6914
DarkGoldenrod1 #FFB90F
DarkGoldenrod2 #EEAD0E
DarkGoldenrod3 #CD950C
DarkGoldenrod4 #8B658B
RosyBrown1 #FFC1C1
RosyBrown2 #EEB4B4
RosyBrown3 #CD9B9B
RosyBrown4 #8B6969
IndianRed1 #FF6A6A
IndianRed2 #EE6363
IndianRed3 #CD5555
IndianRed4 #8B3A3A
Sienna1 #FF8247
Sienna2 #EE7942
Sienna3 #CD6839
Sienna4 #8B4726
Burlywood1 #FFD39B
Burlywood2 #EEC591
Burlywood3 #CDAA7D
Burlywood4 #8B7355
Tan2 #EE9A49
Tan3 #CD853F
Tan4 #8B5A2B
Chocolate1 #FF7F24
Chocolate2 #EE7621
Assinar:
Postagens (Atom)