sexta-feira, 17 de dezembro de 2010
quinta-feira, 16 de dezembro de 2010
segunda-feira, 13 de dezembro de 2010
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.
Assinar:
Postagens (Atom)