Dicas para Blogs

Monitorar e Contar Cliques em Links Externos - Eventos Google Analytics

2012-02-10T16:11:00.001-02:00

Você pode monitorar os links externos do seu site ou blog e saber quantos cliques cada link de parceiro ou banner de anúncios recebeu. Para ter essas informações só precisamos configurar o Google Analytics no blog e poderemos saber exatamente quantas pessoas clicaram em cada link do nosso blog ou site e assim poder planejar melhor o posicionamento de links ou preços de anúncios no blog.

Para começar a monitorar os links externos com o Google analytics é fácil de fazer e como esse é um contador de visitas grátis você não gastará nada para ter essas informações. Então vamos mostrar como instalar os códigos do analytics para analisar os links externos do blogspot.

O primeiro passo é saber se o código do seu Google Analytics está completo e atualizado ele deve ser assim:

<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();
</script>

Esse trecho é apenas para verificar você não precisa nem deve adicioná-lo novamente no seu blog se já tiver. Agora entre na pagina editar html, procure por </head> e coloque esse código antes dele:

<script type="text/javascript">
function recordOutboundLink(link, category, action) {
try {
var pageTracker=_gat._getTracker("UA-XXXXX-X");
pageTracker._trackEvent(category, action);
setTimeout('document.location = "' + link.href + '"', 100)
}catch(err){}
}
</script>

No lugar onde está UA-XXXXX-X é para colocar a ID do seu site no analytics que você pode ver no código do analytics como no exemplo inicial, se tiver duvidas sobre qual a numeração correta veja aqui Blogger Integra Contador Google Analytics. Esse código atrasa o link, ou seja, faz demorar um décimo de segundo para entrar no site quando clicar no link. A utilidade disso é garantir que o Google Analytics terá tempo para contar o clique naquele link especifico. Então depois que colocar o código clique para salvar as alterações do HTML.

Agora vamos colocar o código para monitorar e contar cliques nos links. Normalmente o link é deste jeito:
<a href='http://www.dicasparablogs.com.br'>Dicas para Blogs</a>

Então você deve adicionar alguns códigos e o link ficará deste jeito:

<a href="http://www.dicasparablogs.com.br" onClick="recordOutboundLink(this, 'Links Externos', 'Dicas para Blogs');return false;">

São apenas duas alterações que precisará fazer aqui:
Links Externos – é um titulo para agrupar os links e será desta forma você poderá separar os links por categorias, por exemplo: parceiros, publicidade e outros que precisar.

Dicas para Blogs – isso é o nome especifico deste link e será dessa forma que você o encontrará nas estatísticas do Google analytics. Portanto você pode escrever o nome do site ou o endereço dele isso só depende de como preferir ver nas estatísticas.

Dando outro exemplo para monitorar um link para o nosso site de frases curtas o código ficaria assim:

<a href="http://www.frasescurtas.com.br" onClick="recordOutboundLink(this, 'Links Externos', 'Frases Curtas');return false;">

Então faça as alterações em todos os links que deseja contar os cliques. Nós testamos e funcionou também em links com imagens.

Mas finalmente onde posso ver as estatísticas e saber quantos cliques em links para fora do meu blog foram feitos? Isso é na pagina do Google analytics entrando no menu conteúdo > eventos > principais eventos.

Veja que temos o evento links externos que é o marcador que usamos se você utilizar mais categorias elas aparecem aqui separadamente e clicando nela poderá ver os cliques de cada link.

E clicando no sub item paginas nos eventos você poderá saber de quais paginas do seu site ou blog partiram os links nesses links externos.

Veja aqui outras formas de aproveitar melhor os recursos do Google analytics:
Usar Informações do Contador de Visitas para Melhorar o Blog
Estatísticas Botões de Compartilhamento - Curtir, Retweet, +1 e Outros

E você já conhecia essa função do analytics? Esperamos que gostem e aproveitem para conseguir mais informações úteis para ajudar a melhorar o blog.

Solução de Problemas em Posts com mais de 200 Comentários

2012-02-08T15:16:00.000-02:00

Com as mudanças nos comentários do blogger para incluir a opção de responder aos comentários (threaded commenting) surgiram vários problemas nos comentarios do Blogger e procurando a solução para mostrar os links para ver os comentários mais recentes em postagens com mais de 200 comentários entrei um código bem interessante para fazer a paginação dos comentários, ou seja, nas postagens com muitos comentários aparece o numero de paginas e os links para os comentários mais recentes e mais antigos.

Esse código é feito para blogs que usam os comentários incorporados na pagina, ou seja, o formulário de comentários aparece depois da postagem se quiser alterar a forma que os comentários aparecem no seu blog veja aqui: Configurações das Postagens e Comentários

A solução do problema dos comentários do blogger em posts 200 ou mais comentários você deve entrar na pagina editar HTML (recomendamos fazer um backup do seu template), depois marque a opção expandir modelo de widgets e procure por uma dessas linhas:

<b:includable id='comments' var='post'>
ou
<p class='comment-footer'>

A diferença entre qual escolher é que a primeira os links de navegação entre as paginas dos comentários aparecem no inicio (antes do primeiro comentário) e se escolher a segunda opção os links aparecem entre o ultimo comentário da pagina e o formulário de comentários do blogger. Então coloque esse código:

<b:if cond='data:post.numComments >= 200'>
<script type='text/javascript'>
//<![CDATA[
function commentpagination(url,comment){
var posturl= url;
var comment = comment;
cmpage = Math.ceil(comment/200);
document.write('<a href="'+posturl+'?commentPage=1">Mais Antigos</a>');
for (var i = 1; i <= cmpage; i++) {
document.write('<a href="'+posturl+'?commentPage='+i+'">'+i+'</a>');
}
document.write('<a href="'+posturl+'?commentPage='+cmpage+'">Mais Recentes</a>');
}
//]]>
</script>
<span id='commentpaging'>Paginas de Comentários: <script type='text/javascript'>commentpagination("<data:post.url/>","<data:post.numComments/>");</script></span></b:if>

Depois procure por ]]></b:skin> e coloque esse outro código que é a formatação dos links:

#commentpaging {float:right;}
#commentpaging a {margin-right:5px;}

Aqui você pode alterar como quiser colocando outras cores ou tamanhos de letras vejam aqui:
Como Formatar o Texto do Blog
Alterar cores dos links - CSS

Agora é só clicar para salvar as alterações e já está tudo pronto. Claro isso será útil apenas para blogs que tem posts com 200 ou mais comentários. Encontramos esse código na postagem New comment pagination - solution for posts with 200+ comments do blog SimplexDesign, mas fizemos uma adaptação no código para que ele só apareça onde for necessário.

Se quiser ver uma demonstração entre aqui e veja nossas postagens com mais comentários então em qualquer uma delas poderá ver o código em funcionamento e visitando qualquer outro post com menos de 200 comentários você notará que não aparecem os links da paginação de comentários.

Como Colocar Enquete Personalizada no Blogger

2012-02-06T14:27:00.000-02:00

Colocar enquetes ou quizzes no blogger pode ser interessante para saber a opinião das pessoas sobre algum assunto e, além disso, serve para aumentar o envolvimento das pessoas com o seu site. Já falamos anteriormente sobre Criar uma enquete no blog, e hoje vamos mostrar mais uma opção para colocar pesquisas no seu blog e saber a opinião dos leitores.

O primeiro passo é fazer uma inscrição site http://polldaddy.com, veja que ele tem varias opções inclusive uma para criar enquetes grátis, mas naturalmente existem as opções pagas com mais recursos para suas enquetes, mas vamos criar uma enquete usando uma conta gratuita para demonstração.

Depois que concluir seu cadastro entre no painel do http://polldaddy.com e clique no botão create a new e escolha a opção poll (enquete) e na pagina seguinte preencha o formulário para criar sua enquete. O campo Poll Question é o titulo da enquete e abaixo tem as opções de resposta que você deseja, caso precise de mais opções clique no botão add new answer.

Depois disso temos:
Allow multiple selections – permite votar em mais de uma opção.
Allow users to enter their own answer - Permitir que os usuários insiram sua própria resposta.

Descendo a pagina temos as opções de layout da enquete portanto faça suas escolhas para deixar a enquete combinando com o template do seu blog. Veja que ao passar o mouse sobre as imagens das enquetes ela mostra como é exibido os resultados da pesquisa. Temos também a opção de tamanho (Select your poll widget size) ou seja a largura da enquete pois o comprimento dela na pagina dependerá do conteúdo.

E finalmente chegando ao final da pagina temos opções como Repeat Voters que impede votos duplicados, ou seja, que alguém entre na sua enquete e vote muitas vezes para isso seleciona uma das opções (Block by cookie (safest) ou Block by cookie & IP address). Além disso, tem a opção de permitir ou não comentários e algumas outras configurações da sua enquete. Quando terminar clique em create Poll e já está pronto você verá o código para colocar a enquete no seu blog e como pode ver eles permitem colocar a enquete no facebook ou twitter, mas isso não testamos.

Para colocar a enquete no blog podemos usar uma postagem, mas precisa marcar nas opções para executar o HTML digitado ou então pode usar um gadget (pagina layout > adicionar gadget > HTML/javascript).

Você poderá acompanhar os votos no site do Polldaddy clicando no titulo da sua enquete de forma bem simples e com gráficos das estatísticas.

Esperamos que gostem e aproveitem bem para saber mais informações sobre as pessoas que visitam o seu blog através de enquete ou como falamos em outros tutoriais:
Usar Informações do Contador de Visitas para Melhorar o Blog
Estatísticas Botões de Compartilhamento - Curtir, Retweet, +1 e Outros

Então pesquise um pouco e lembre-se que quanto mais entender o que as pessoas gostam mais chances de fazer sucsso com seu blog você terá. Abraços a todos e sucesso!

Avaliação de Postagens do Blog com Imagem de Mãozinha (Positivo e Negativo)

2012-02-03T16:03:00.006-02:00

Coloque um sistema de avaliação de postagens no seu blog com as imagens das mãozinhas com sinal de positivo e negativo isso é uma forma simples de saber a opinião das pessoas, além disso, pode ser um acessório legal que muitas pessoas gostam dessa forma simples e rápida de votar avaliar o post. Mas se quiser você pode usar também o gadget padrão do blogger para mostrar reações.

Antes de começar faça um backup do seu template embora esse código seja muito simples de colocar é melhor ter uma cópia de segurança.

Entre na pagina editar html, marque a opção expandir modelos de widgets, use o Crtl+F e procure por:

<data:post.body/>

Em alguns templates que usam o resumo da postagem tem mais de um então precisa testar para descobrir qual é o correto. E coloque esse código logo abaixo dele.

<b:if cond='data:blog.pageType == "item"'>
<div class='js-kit-rating' expr:path='data:post.url' expr:permalink='data:post.url' expr:title='data:post.title' view='score'>
</div>
</b:if>

Agora encontre </body> e coloque essa linha antes dele:

<script src="http://js-kit.com/ratings.js"></script>

Clique para salvar as alterações e já está tudo pronto, agora seu blog já tem um sistema de avaliação de postagens com as mãozinhas fazendo sinal de positivo e negativo.

Se quiser que apareça a avaliação com estrelinhas é só apagar o trecho view='score' na primeira parte do código, mas se quiser classificação dos posts com estrelas você pode usar também como mostramos em outros artigos:
OutBrain - Classificação com estrelas nas postagens
Google Friend Connect - Colocar Avaliação com Estrelinhas no Blog ou Posts

O único ponto negativo desse sistema é que ele é feito em inglês e não temos a opção de tradução, mas as pessoas normalmente apenas votam e olham os números ao lado dos ícones de positivo e negativo para ver a contagem, por isso achamos que o idioma do widget não atrapalhará em nada. Esperamos que gostem de mais esse acessório para usar no seu blog e digam sua opinião sobre ele.

Aumentar a Segurança da Senha e Proteger Melhor sua Conta Google

2012-02-01T15:05:00.002-02:00

Sua conta Google está segura? Veja o que você pode fazer para aumentar a segurança da sua conta e proteger melhor suas coisas na internet: Blogger, Adsense, Google Plus, Orkut, Youtube e outros serviços Google. Afinal para os blogueiros e donos de sites a conta Google representa bem mais que um perfil em alguma rede social. Por isso veja como proteger sua conta e evitar perder dinheiro ou até mesmo perder seus sites e blogs.

Se por acaso você já teve sua conta hackeada ou roubada por alguém veja aqui: Como Recuperar a Conta Google (Blogger, Orkut, Adsense). Lá tem um link e instruções sobre como recuperar sua senha e sua conta.

Mas vamos ao assunto de hoje: você já ouviu falar em fazer login em duas etapas ou verificação em duas etapas, isso é uma configuração da sua conta Google para deixar sua conta mais protegida através de uma segunda senha enviada para seu telefone celular ou aplicativo para Android, BlackBerry ou iPhone.

Clique para editar o entrar nas configurações da sua conta Google https://www.google.com/settings/ e clique para editar a verificação em 2 etapas.

Selecione o país (caso não esteja correto) e coloque o numero do seu telefone celular veja que aparece um sinal de confirmação indicando que o numero é valido então clique em enviar código. Marque a opção Mensagem de texto SMS e logo você receberá uma mensagem SMS com seu código.

Então coloque o código que recebeu por SMS no local indicado, clique em verificar e depois no botão próximo.

Agora você tem a opção de lembrar este computador por 30 dias, isso significa que essa senha não será pedida durante esse tempo, portanto só marque essa opção se for o computador da sua casa onde só pessoas que realmente confia terão acesso, agora clique no botão próximo.

Clique no botão ativar verificação em duas etapas e já está tudo pronto! Agora sua conta e senha do google estão mais protegidas.

Você verá uma tela dizendo que seu login em duas etapas está configurado e algumas opções para receber os códigos, por exemplo, aplicativos para iPhone, Android ou BlackBerry. Também temos a opção de cadastrar um segundo numero de celular (Número de telefone de backup) para caso perca o seu numero ou telefone atual, além disso, existe a opção de receber os Códigos de backup para impressão para usar se você estiver viajando ou não estiver com seu telefone, os códigos de backup podem ser usados para obter acesso a sua conta. Cada código permite que você faça login uma vez sem seu telefone. Esses códigos não expiram.

Veja mais algumas dicas sobre segurança na internet e para o seu blog também:
Dicas de Segurança na Internet
Denunciar conteúdo ilegal ao blogger
Proteja suas Contas, Senhas, Fotos na Internet

Essa dica para aumentar a segurança do seu email e senha do Google não impede um erro muito comum que já falamos em: Varias Pessoas Fazendo Postagens - Blog Compartilhado. Caso você queria que outra pessoa faça postagens no seu blog ela não precisa de direitos de administrador do blog porque o administrador pode fazer tudo até excluir você do seu blog (roubar o blog).

E você se preocupa com a segurança das suas senhas na internet, tem alguma sugestão sobre o que fazer ou sobre o que não fazer na web?

Enviar Resumo da Postagem com o Botão Curtir - Descrição nos Posts

2012-01-30T15:54:00.001-02:00

Alguns blogs têm problemas na hora de enviar seus posts para o facebook, pois quando clicamos no botão curtir ele não envia um resumo ou sinopse do post do blog junto para o facebook e o pior muitas vezes aparecem códigos variados em vez da descrição da postagem. Mas podemos corrigir isso colocando uma linha de código e fazer que o facebook receba automaticamente as primeiras linhas de cada post quando alguém clicar no botão curtir ou enviar.

Antes de fazer a alteração faça um teste no seu blog para ver se ele está enviando corretamente a descrição do post ao facebook, pois esse problema não é em todos os blogs.

Entre na pagina modelo e faça um backup do seu template por segurança antes de mexer no código HTML. Agora clique em editar HTML, marque a opção Expandir modelos de widgets e coloque esse código:

<meta expr:content='data:post.snippet' name='description'/>

O lugar pode variar um pouco, mas normalmente funciona normalmente antes do código do resumo da postagem (<b:if cond='data:post.hasJumpLink'>) ou depois do código dos botões de redes sociais.

Isso na verdade não é um código especifico para o facebook, mas ele gera uma descrição usando meta tags normais, ou seja, tem mais relação com técnicas de SEO do que propriamente com o facebook. Portanto pode ser útil para qualquer rede social ou até mesmo para o Google melhorar a posição do seu blog nos resultados das buscas. Veja outras informações sobre Mudanças nos Resultados das Buscas do Google.

Nós testamos esse código junto com as meta tags de descrição e palavras chaves no inicio do HTML dentro de head como falamos neste tutorial: Personalizar e Otimizar Título do Blog - Aparecer no Google, mas não deu certo por isso que achamos essa outra maneira de colocar a descrição das postagens no blogger.

Esperamos que gostem deste e aproveitei para testar e curtir esse post no facebook clicando no botão do facebook. Assim poderá ver que realmente o código é simples e funciona.

Como Resolver Problemas Respostas com os Comentarios do Blogger

2012-01-27T22:35:00.000-02:00

Uma das modificações recentes do blogger foi adicionar a opção de respostas nos comentários como já falamos em nosso outro artigo: Como Ativar a Opção Responder Comentarios no Blogger, porém existem alguns bugs (falhas) nesta nova funcionalidade do blogger como por exemplo a formatação do texto dos comentários, a pagina do blog rolar até o formulário de comentários ao entrar no blog e outras. Então vamos mostrar como corrigir esses problemas nos comentários do seu blog.

Você pode corrigir o problema do blog ir direto para o formulário de comentários usando um javascript. Então para impedir que o seu blog carregue a pagina diretamente no formulário de comentários entre na pagina editar html, e coloque esse código antes de </head>:

<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
document.body.onload = window.onload = function() {
var links = document.getElementsByTagName('a');
var h = window.location.hash.substring(1);
var cont = true;
for(var c=0;c<links.length && h && cont;c++){
if(links[c].name == h){
var x = links[c].offsetLeft,y = links[c].offsetTop,el=links[c].offsetParent;
while(el){
x += el.offsetLeft;
y += el.offsetTop;
el = el.offsetParent;
}
window.scrollTo(x, y);
cont = false;
break;
}
}
if(cont || !h){
window.scrollTo(0,0);
}
};
//]]>
</script>
</b:if>

Isso é uma solução temporária que encontramos no FerramentasBlog. Porém esperamos que o blogger faça uma atualização e resolva esse e outros problemas com as respostas dos comentários em breve e de forma definitiva. Se você prestar atenção ao carregamento da pagina poderá notar que a pagina vai até o formulário e depois volta ao topo e por causa disso ainda não ativamos essa opção de respostas dos comentários aqui no Dicas para Blogs.

Sobre o texto que podemos colocar como avisos ou regras dos comentários (veja Configurações do Blogger - Postagens e Comentários) infelizmente não acharamos uma solução o código HTML parece certo, mas por algum erro do blogger aparece o texto após o formulário de comentários.

O problema do texto dos comentários sem espaço entre as linhas pode ser resolvido apenas colocando line-height: normal, na formatação dos comentários que é esse código: #comments dl dd, mas caso não encontre esse trecho você pode adicionar.

#comments dl dd{padding: 0;margin: 0;line-height: normal;}

Se quiser um espaçamento maior entre as linhas em vez de escrever normal use um numero para configurar como quiser como neste exemplo: line-height: 120%, veja mais sobre Espaço entre linhas, letras e palavras.

Leia também:
Usar Comentários do Disqus no Blogger - Personalizar Caixa de Comentários
Página com os Comentários Recentes do Blogger

Esperamos que isso ajude a resolver alguns problemas no sistema de comentários do seu blog principalmente de quem usa templates personalizados que geralmente são mais difíceis de modificar e corrigir bugs embora mesmo os templates padrão do blogger estão com os mesmos erros, mas como já falamos esses códigos e alterações de CSS são apenas alguns ajustes enquanto aguardamos a solução definitiva do Blogger.

Blogger tem Contador do Botão +1 na Pagina de Postagens

2012-01-25T15:22:00.000-02:00

O blogger agora tem uma novidade que permite de forma rápida e fácil saber quais postagens tem mais cliques no botão +1 do Google, isso porque a pagina que mostra a lista com todas as suas postagens passou a ter um contador do +1. Se você ainda não usa o botão no seu blog veja aqui:Colocar Botão +1 do Google no Blog.

Isso é uma forma rápida e fácil de saber quais postagens foram mais recomendadas usando o botão do Google e pode servir para você ter uma idéia sobre quais postagens do blog fazem mais sucesso. Porém não é somente isso que devemos considerar na hora de avaliar o sucesso das postagens em redes sociais e quais posts mais agradam os visitantes, leia nos links abaixo outra forma de analisar e aproveitar essas informações:

Estatísticas Botões de Compartilhamento - Curtir, Retweet, +1 e Outros
Usar Informações do Contador de Visitas para Melhorar o Blog
Novas Ideias para Novos Posts

Outra curiosidade interessante é saber quem clicou no botão +1 em cada postagem e você poderá ver isso só clicando no numero que aparece com a contagem de cliques. Esperamos que gostem dessa novidade do blogger. E claro gostaria de sua opinião sobre ela ou sobre qualquer outra novidade do blogspot. Abraços a todos.

Recursos e Acessórios do Twitter para Blogs: Botões e Widgets

2012-01-24T15:40:00.000-02:00

Na pagina de recursos do Twitter (acessórios para sites e blogs) você pode encontrar muitas opções de botões e widgets para conseguir divulgar seu blog nesta rede social e conseguir mais visitas no blog através de retweets e outras maneiras. Nós já falamos anteriormente sobre os botões do Twitter e, mas é bom voltar ao assunto e mostrar mais algumas opções.

Na pagina de botões do Twitter, você encontra diversas opções como compartilhar um link, seguir no twitter, marcador (hashtag) e menção. Você encontrará em cada um deles varias opções conforme o tipo de botão do twitter que usar.

Por exemplo, o botão com marcador você pode incluir a hashtag que desejar e ainda o texto inicial no campo Tweetar texto. E o botão menção serve para envia um twit diretamente para uma pessoa, ou seja, você pode usar como uma forma de contato através do twitter no seu blog.

Outra coisa legal é que todos os botões têm a opção para usar o botão do twitter em tamanho grande que dependendo do seu template pode ser muito útil para dar mais destaque ao botão.

Além disso, a pagina de widgets do Twitter você encontrará vários acessórios do micro blog para usar em seu site como, por exemplo, exibir as suas atualizações mais recentes do Twitter.

Veja também:
7 Opções de Botões para Divulgar Blog e Conseguir visitas das Redes Sociais
Contador de seguidores para o twitter
Colocar o Pássaro do Twitter(ou Qualquer Imagem) Voando no Blog
Busca Google de Gadgets

Esperamos que gostem e consigam bons resultados usando o twitter na divulgação do seu blog. E você gosta do twitter? Ou então quais outros gadgets e acessórios interessantes usam para divulgar seu blog. Deixe um comentário e vamos conversar sobre esses e outros assuntos relacionados a blogs.

Fazer Apresentação de Slides no Blogger com as Postagens Recentes

2012-01-22T13:29:00.005-02:00

Encontramos um código para mostrar as postagens recentes do blog em forma de apresentação de slides. Isso pode ajudar a gerar mais pageviews fazendo seus visitantes conhecerem mais postagens do seu blog e assim dando mais chances das pessoas gostarem do seu blog ou recomendarem seu blog em redes sociais.

Esse código de slides é simples de usar, mas você precisa ter cuidado na hora de fazer as alterações para não apagar nada por engano no código. Entre na pagina modelo clique para adicionar um gadget e escolha a opção html/javascript então coloque esse código:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">

</style>

<script language='javascript'>
imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://www.frasescurtas.com.br/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/recentpostthumbspy-min.js' type='text/javascript'></script>
</div>

Agora veja aqui as alterações que pode fazer para personalizar os slides no seu blog:

Imagem para o thumbnail (miniatura da imagem) quando a postagem não tem imagem:
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";

Largura total do slide:
#spylist ul{
width:320px; altere o valor 320 neste trecho do estilo CSS.

Tempo para trocar cada slide: intervalspy=4000

Tamanho da imagem no slide:
thumbwidth = 70; - largura
thumbheight = 70; - altura

Se quando alterar o tamanho da imagem os slides aparecer cortados no seu blog então faça o ajuste no CSS do slide alterando o valor 350 neste trecho:
#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}

Mudar o tamanho da fonte do título da postagem no slide:
#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:16px; - altere o valor 16

Quantidade de postagens mostradas nos slides e endereço do seu blog:
numposts = 10;
home_page = "http://www.frasescurtas.com.br/";

Depois que terminar só precisa salvar as alterações no gadget e pronto já tem slides dos posts recentes no seu blog, veja nos links abaixo outras dicas relacionadas a postagens recentes e slides para seu blog:

Fazer Pagina com Atualizações mais Recentes do Blog
Lista aleatória das postagens recentes do blog
Colocar Slides ( Power Point) no blog
Como fazer Apresentação de Slides com Banners

Lembramos que você não precisa alterar todos esses itens antes de usar os slides, alias nós sugerimos que altere somente o endereço do seu blog e faça um teste para ver os slides com suas postagens recentes funcionando no seu blog e depois personalize como quiser aos poucos, ou seja, faça uma alteração, salve e visualize o blog, pois desta forma que cometer algum erro será fácil identificar qual foi o trecho que errou.

Achar e Resolver Problemas com Códigos HTML no Blog

2012-01-19T17:17:00.002-02:00

Quando queremos mudar o template ou mesmo fazer pequenas alterações no modelo do blog quase sempre precisamos achar algum código HTML para resolver um problema, por exemplo: retirar um espaço em vazio, descobrir o código de uma cor de fundo ou borda(Código das Cores) ou simplesmente localizar algum trecho do código para poder fazer qualquer outra edição. Mas nem sempre é fácil por isso vamos mostrar como visualizar trechos do HTML diretamente no seu blog como ela é visualizada na internet.

Vamos mostrar como achar códigos HTML usando o navegador Google chrome, mas outros navegadores como internet Explorer e Firefox tem funções parecidas e recomendamos que façam testes para descobrir qual você mais gosta.

No chrome entre na pagina do seu blog depois entre em ferramentas (do chrome) > ferramentas para desenvolvedor e você verá uma janela que mostra o HTML do seu blog e ao passar o mouse sobre o código HTML você notará que destaca partes do seu blog mostrando o que cada trecho do HTML faz no seu site.

Mas podemos fazer o contrario também, ou seja, clicar diretamente no blog e ver o código HTML daquele trecho. Para fazer isso clique na ferramenta que parece uma lupa no rodapé da pagina e depois clique no seu blog para ver o HTML daquela parte da pagina e não se preocupe enquanto estiver usando a lupa o clique não vai para o link da pagina só mostra o HTML.

Nas janelas laterais você pode ver o estilo CSS utilizado naquela parte do seu blog e assim descobrir como retirar bordas, trocar cor de fundo ou qualquer outra alteração na formatação do seu template.

Então depois que tiver uma idéia de qual código quer modificar entre na pagina editar HTML do blogger e use o Ctrl+F para achar o HTML no seu blog. Porém o blogger usa tags próprias no HTML então os trechos podem não ser exatamente iguais. Portanto procure pelo nome dos estilos, por exemplo: body{ e não pelo conteúdo deles: font: normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif; color: #222. Isso porque no html do seu blog tem tags do blogger e pode ser diferente de quando visualizamos a pagina.

Sobre modificar templates e alterar códigos html veja também:
Onde colocar os códigos no blog
Designer de modelo - Layout e Configurações Avançadas
Mudar template do blog - Designer do modelo
Erros no Blogger - Códigos Duplicados

Sabemos que isso não resolverá todos os problemas justamente por isso recomendamos testar as ferramentas para desenvolvedores de outros navegadores também, pois são um pouco diferentes e assim você poderá descobrir com qual delas consegue trabalhar melhor, mas certamente esse método para localizar partes do HTML do blog é muito útil para fazer alterações de template e localizar códigos de maneira rápida e bem mais simples.

As imagens que usamos neste tutorial foram feitas em nosso outro blog: Frases Curtas.

Fazer Pagina com Atualizações mais Recentes do Blog

2012-01-17T15:05:00.000-02:00

Criar uma pagina mostrando as postagens mais recentes do seu blog podem ser muito úteis principalmente se você fez uma pagina inicial somente com uma imagem ou mensagem de boas vindas no seu blog como mostramos aqui: Fazer Pagina de Boas Vindas no Blog - Criar Pagina de Abertura, alias estamos fazendo esse tutorial por causa de comentários recebidos falando sobre qual pagina usar como link na abertura do blog então o melhor a fazer é uma pagina com as suas atualizações mais recentes do seu blog.

Você pode usar esse código em uma pagina extra do blogger ou em uma postagem normal. Então se quiser você pode colocar um texto curto e depois a lista com seus posts recentes ou usar somente o código das postagens recentes:

<script type="text/javascript">
numposts = 10
imgr = new Array();
imgr[0] = "http://img185.imageshack.us/img185/6717/dicasg.gif";
showRandomImg = true;
aBold = true;
icon = " ";
text = "no";
showPostDate = false;
icon2 = " ";
label = "";
function removeHtmlTag(strx,chop){
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
s =s.join("");
s = s.substring(0,chop-1);
return s;
}
function showrecentposts(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img= new Array();
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var pcm;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
pcm = entry.link[k].title.split(" ")[0];
break;
}
}
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
postdate = entry.published.$t;
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];
for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}
posttitle = (aBold) ? "<b>"+posttitle+"</b>" : posttitle;
document.write('<a title="Leia mais..." style="display:block; text-decoration:none" href="'+posturl+'"><img style="float:left;border:none;margin-right:10px;border: dashed 1px #000" src="'+img[i]+'" width="140" height="110"/><p align="center"><font style="font-size:110%"'+posttitle+' '+cmtext+ '</font></p></a><p>'+icon2+removeHtmlTag(postcontent,200)+'...</p><div style="padding:25px;clear:both"><hr /></div>');
j++;
}
}
document.write("<script src=\"http://frasecurta.blogspot.com/feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script>

São poucas as alterações no código das postagens recentes que precisará fazer veja aqui os trechos que precisa alterar:

imgr[0] = http://img185.imageshack.us/img185/6717/dicasg.gif : imagem que aparece caso seja uma postagem sem imagens, veja aqui:

numposts = 10 quantidade de postagens que aparecem na pagina de postagens recentes.

img style="float:left;border:none;margin-right:10px;border: dashed 1px #000": posicionamento da miniatura da imagem do post. Se quiser do lado direito troque as palavras left e right de lugar isso muda a imagem de lado e deixa uma pequena margem para o texto não ficar encostado na imagem. O trecho border: dashed 1px #000 é a borda e se quiser pode apagar esse trecho ou veja outras opções para alterar as bordas.

width="140" height="110": tamanho da imagem: 140 largura e 110 altura, então altere como desejar.

+icon2+removeHtmlTag(postcontent,200): o numero 200 é a quantidade de caracteres do resumo da postagem que aparece.

script src=\"http://frasecurta.blogspot.com/feeds/posts/default?... endereço do seu blog no código. Altere somente o endereço do blog: http://frasecurta.blogspot.com o restante continua igual.

<div style="padding:25px;clear:both"><hr /></div>: esse trecho faz o espaço entre as postagens do blog portanto altere o numero 25 como desejar. A barra que aparece entre os posts é o código <hr /> se não gostou pode apagar e a barra desaparece.

E finalmente está tudo pronto apenas verifica nas opções da postagem se está marcada a opção Interpretar HTML digitado e agora é só publicar sua pagina de assuntos recentes. Este código funciona também em gadgets de html/javascript mas se utilizar em um gadget faça o teste a velocidade do seu blog: Medir a Velocidade de Blogs e Sites - Contador Google Analytics para saber se não deixou seu blog muito lento.

Queremos pedir atenção nos detalhes na hora de alterar os códigos muitas vezes apagamos um sinal qualquer por engano e isso faz o código não funcionar (Porque os códigos não funcionam no blog) portanto cuidado com aspas e outros sinais.

Como Ativar a Opção Responder Comentarios no Blogger

2012-01-15T16:22:00.002-02:00

O blogger agora tem a opção responder aos comentários nos seus templates padrão. Isso deixou mais fácil conversar com as pessoas que comentam o blog, mas nem todos os templates isso funcionou corretamente. Vamos mostrar agora como ativar o recurso responder aos comentários do seu blogger.

Normalmente para aparecer o recurso de resposta aos comentários você só precisa configurar o feed do seu blog para publicação completa e usar a configuração dos comentários incorporados a pagina, veja aqui Configurações do Blogger - Postagens e Comentários.

Mas alguns templates isso não deu certo e vamos mostrar como resolver os problemas com o “responder aos comentários no blog” para ativar essa novidade no seu site. Entre na pagina modelo mas antes de fazer alterações recomendamos fazer um backup do template. Agora marque a opção Expandir modelos de widgets e procure por:

<b:if cond='data:blog.pageType == "static_page"'>
<b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
</b:if>

E substitua por esse outro código:

<b:if cond='data:blog.pageType == "static_page"'>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>

Clique para salvar as alterações e veja se apareceu o link responder aos comentários no seu blog e teste se abre o formulário para comentar no lugar certo.

Caso não encontre o trecho do código então procure pela linha: <b:include data='post' name='post'/> e cole esse código que falamos logo depois dela. Salve as alterações do template, veja se funcionou corretamente e já está tudo pronto.

Leia sobre outras opções de comentários para usar no blog:
Colocar Comentários do IntenseDebate no Blogger
Usar Comentários do Disqus no Blogger - Personalizar Caixa de Comentários

Queremos deixar bem claro que são duas opções diferentes para ativar o responder aos comentários no blogger, portanto você não deve fazer as duas alterações que falamos ao mesmo tempo. Nós mostramos as duas porque os códigos HTML variam conforme o modelo do template do seu blog. Mas esse recurso ainda apresenta algumas falhas mesmo nos blogs onde ele aparecer, por isso achamos que o próprio blogger deve fazer alguma atualização interna desses códigos.

Como Colocar Música no Tumblr ou Blogger

2012-01-13T14:47:00.000-02:00

Vamos falar sobre como colocar musica no Tumblr e também em outros blogs utilizando até musicas de vídeos do youtube. Isso pode parecer complicado, mas é fácil de fazer e em poucos minutos você colocar uma musica ou lista de musicas no seu Tumblr ou Blogger.

O primeiro passo para inserir musicas no blog é entrar no site http://scmplayer.net e escolher uma aparência (cor) para a barra do player de musica.

Depois clique em edit Playlist e coloque o endereço das musicas ou vídeos do youtube e escreva o titulo para cada uma delas. Esse site não faz a hospedagem das musicas ele apenas gera o player, então poderá usar arquivos de musicas hospedadas em outros sites.

Agora clique em configure settings e escolha algumas opções sobre como o playlist de musica funcionará no seu Tumblr ou Blogger. As principais opções são:
Autostart serve para fazer a musica iniciar automaticamente ao entrar no blog
Placement of the Player: lugar onde aparece a barra de musica no seu blog bottom (embaixo) ou top (em cima).

Quando terminar clique em done para gerar o código da lista de musicas e copie no bloco de notas. E vamos colocar esse código no blog.

Para colocar a musica no Tumblr entre no painel e clique para personalizar seu Tumblr (customize appearance).

Depois em editar html (edit html), procure por <body> e cole o código logo abaixo dele e clique em update preview, depois em appearance e no botão save e já está pronto agora o seu Tumblr já tem uma lista de musicas.

Veja outras maneiras para inserir musicas no seu blog:
Fazer Podcast - Colocar MP3 no Blog
Criar Widget de Musica - Colocar Musicas no Site ou Blog

Para usar esse código de musica no blogspot é mais fácil ainda você só precisa entrar na pagina modelo > adicionar um gadget > html/javascript e colar o código. Não precisa se preocupar com o lugar que o gadget fica na sua pagina o player de musica aparecerá conforme a configuração que fez, ou seja, no topo ou final da pagina do seu blog.

Mas sobre se deve ou não usar musicas no seu blog recomendamos que leiam esse artigo sobre Quais os Melhores Gadgets e Acessórios para Blogs e também a enquete: O que você não gosta em um blog? que já recebeu mais de 11 mil votos. Afinal cada blogueiro deve pensar no que os seus visitantes procuram ou gostariam de encontrar quando visitam o seu blog.

Como Configurar Anuncios Google Adsense nos Videos do Youtube

2012-01-11T15:57:00.000-02:00

Para colocar os anúncios do Adsense nos vídeos do youtube e ganhar dinheiro com seu canal de vídeos você precisa configurar em quais vídeos quer gerar receita e enviá-los para avaliação, mas antes de fazer isso você já deve ter ativado sua conta google no youtube, então se ainda não fez isso clique no link e veja como inscrever seus vídeos no adsense.

Depois que tiver sua conta aprovada entre no gerenciador de vídeos no youtube, veja que ao lado de cada vídeo aparece um ícone com a letra S então clique nela.

Na tela seguinte marque a opção gerar receita com anúncios e verá varias opções para preencher marquem: Ativar sobreposição em anúncios em vídeos e Ativar anúncios TrueView In-stream que são os anúncios que aparecem sobre os vídeos e o restante do formulário preencha dependendo do conteúdo do seu vídeo.

Quase no final da pagina tem um campo para escrever uma descrição sobre o vídeo e isso é obrigatório preencher para ter seu vídeo aprovado pelo Youtube e Adsense. Depois que completar tudo é só clicar em salvar alterações e pronto. Você verá uma mensagem dizendo que seu vídeo foi enviado para avaliação.

Isso concluiu a colocação de anúncios no vídeo do youtube, mas a pergunta quanto tempo demora para os anúncios do adsense aparecerem nos meus vídeos não tem um resposta exata a pagina de ajuda do youtube diz que isso varia conforme a quantidade de vídeos a serem analisados, ou seja, é uma espécie de fila de avaliação de vídeos, portanto só podemos aguardar.

Veja também:
Novidades no Google Adsense
Regras do Adsense: Evite Punições, Cliques Inválidos
Como melhorar os lucros com anúncios Adsense
Você já gastou dinheiro ou ganhou com seu blog?

Veja também na pagina do youtube as noções básicas sobre publicidade isso pode ajudar a tirar duvidas sobre como ganhar dinheiro com seus vídeos com o Google Adsense.

Ganhar dinheiro com Videos - Usar Anuncios Adsense no Youtube

2012-01-09T14:27:00.002-02:00

Você pode ganhar dinheiro com vídeos do Youtube usando o Google Adsense só precisa fazer a configuração para ativar os anúncios Adsense nos seus vídeos e isso pode ser feito mesmo que você use contas Google diferentes no Youtube e Adsense. Claro que existem regras sobre o conteúdo dos vídeos, mas isso também existe para qualquer conteúdo no adsense, veja: Regras do Adsense: Evite Punições, Cliques Inválidos.

Para vincular sua conta do Google Adsense e seus vídeos no Youtube entre nas configurações da sua conta no youtube clique no ultimo item do menu é monetização ou entre diretamente neste endereço: http://www.youtube.com/account_monetization

Você verá uma lista de explicações sobre as condições e regras do youtube sobre os vídeos com diversas informações como, por exemplo: Como gerar receita com seus vídeos, quais tipos de vídeo estão qualificados para o programa do adsense no youtube e alguns exemplos de vídeos que não estão qualificados. Então depois que ler as informações clique para continuar.

Agora vemos a pagina onde vamos vincular a conta do adsense com o Youtube, marque a opção Usar uma conta existente do Google AdSense e preencha as informações pedidas, lembre-se tem que ser igual ao que está na sua conta do adsense, por isso veja se as informações estão atualizadas e corretas em ambos os sites. Note que no caso do telefone o site pede os 5 últimos números.

Quando clicar para continuar a inscrição você verá uma tela falando sobre os termos do serviço e precisará marcar as opções dizendo que concorda com ele e depois clicar no botão aceitar.

Agora já está pronto veja que na tela de confirmação diz que os anúncios podem levar 48 horas para aparecer nos seus vídeos. E também que você receberá um email falando sobre a ativação dos anúncios.

Mais informações sobre ganhar dinheiro com blogs:
Integrar AdSense com Analytics - Analise seus Lucros
Usar Informações do Contador de Visitas
Integrar Blogger e Google Analytics
Como Funciona o Google Adsense

Caso apareça uma mensagem na pagina do adsense falando sobre permitir o acesso do youtube a sua conta você deve permitir, pois isso é necessário para usar seus anúncios. Depois que fez essas configurações é só aguardar e quando sua conta for aprovada veja aqui como Configurar Anuncios Google Adsense nos Videos do Youtube e assim aumentar seus lucros na internet.

Fazer Pagina de Boas Vindas no Blog - Criar Pagina de Abertura

2012-01-06T12:50:00.002-02:00

Vamos mostrar como criar uma pagina de abertura no blogger porque muitos blogueiros querem colocar uma imagem como fazer uma pagina de boas vindas no blog e não sabem como fazer e isso é mais simples do que parece só precisa criar uma imagem e depois alterar algumas linhas de código HTML no seu blog e seu blog terá uma pagina de abertura com imagens ou textos que desejar.

O primeiro passo é criar e hospedar uma imagem para usar como abertura do seu blog sobre esses assuntos você pode ver nestes links:

Editar e Colocar Efeitos em Fotos e Imagens Online
Criar Banners Online
Hospedar Imagens no Blogger

Depois que já tiver a imagem de abertura do seu blog pronta então escolha uma pagina do seu blog que abrirá ao clicar no link da sua pagina de abertura e copie o endereço dela. Agora coloque o endereço da imagem e o endereço pagina do blog neste código:

<b:if cond='data:blog.homepageUrl == data:blog.url'><center><a href='http://www.dicasparablogs.com.br/p/lista-de-tutoriais.html' title='Bem Vindo ao nosso Site !!!'><img border='0' src='http://www.google.com/logos/2011/brazil_day-2011-hp.jpg'/></a></center><b:else/>

Entre na pagina modelo, sugerimos fazer um backup do seu template, antes de fazer qualquer alteração, clique para editar HTML, use o ctrl F para encontrar <body .... > e coloque o código depois dele. Esse trecho varia um pouco, mas o importante é colocar o código após fechar a tag body, ou seja, depois do sinal >.

Agora procure por </body> e coloque </b:if> antes dele. Salve as alterações feitas e já está tudo pronto. Veja aqui sobre Retirar a barra do blogspot.

Testamos o código em templates padrão do blogger, ou seja, se você baixou algum template da internet pode ser que use tags diferentes e o código não funcione corretamente. Veja aqui como Fazer Pagina com Atualizações mais Recentes do Blog para usar como link na imagem da pagina de abertura do blog.

Fizemos esse tutorial por causa de vários pedidos que recebessem e cada blogueiro deve decidir e deve ou não fazer uma pagina de abertura para o blog como já falamos no tutorial Quais os Melhores Gadgets e Acessórios para Blogs existem muitos tipos de blogs e visitantes então cada um deve sabe o que é melhor para seu blog.

Acertar Hora das Postagens no Blogger - Configurar Fuso Horário e Idioma

2012-01-04T16:56:00.000-02:00

Como acertar a hora das postagens do blog ou como alterar a forma que a data e hora aparecem no seu blog? Isso são configurações fáceis de fazer no blogger, mas depois da mudança para o novo painel algumas coisas ficaram meio fora de lugar então hoje vamos falar sobre onde encontrar a configuração de data e hora do seu blog.

Entre no painel do blogger clique em configurações depois em idioma e formatação. A parte do idioma não tem nada a ver com traduzir o blog se estiver procurando por ferramentas de tradução no blog veja aqui: Tradução do Blog com Bandeiras ou Links - Escolha os Idiomas, mas voltando ao assunto isso apenas identifica em qual língua é escrito seu blog.

Você pode resolver o problema da hora das postagens e comentários estarem erradas ajustando o fuso horário do seu blog nas formações como mostramos na imagem abaixo.

Agora temos 3 linhas de configuração de data e hora no seu blog veja o que faz cada uma delas:

Formato da data: aparência da data no inicio da postagem do blog.
Formato da data e hora: data e hora da postagem no final da postagem.
Formato de data e hora do comentário: como aparece a data e hora dos comentários do seu blog.

Depois que terminar de fazer as configurações apenas clique no botão salvar configurações e já está tudo pronto, veja outras configurações do painel do blogger atualizado:
Fazer Backup ou Colocar Template no Blogger (Novo Painel)
Blogger Integra Contador Google Analytics no Painel de Configurações
Configurações do Blogger - Postagens e Comentários

Esses detalhes das configurações são muito úteis por isso estamos já fizemos vários posts sobre o assunto para evitar que as pessoas percam tempo procurando em lugares errados ou em códigos coisas simples de resolver apenas com poucos cliques.

Postagens Populares no Blogger: Gadget Posts mais Visitados

2012-01-02T13:59:00.000-02:00

Alguns gadgets e acessórios são simples de usar no blogger e podem ajudar a conseguir mais seguidores e fãs para seu site. Um deles é o gadget para mostrar as postagens mais populares do seu blog assim de maneira fácil você poderá mostrar uma lista com seus textos mais visitados, isto é feito com base nas estáticas Pagina de estatísticas no blogger. Isso pode ser uma maneira de fazer as pessoas que visitam seu blog pela primeira vez terem uma boa impressão afinal se essas são as postagens do seu blog que mais receberam visitas devem ter algo interessante nelas.

Para instalar o gadget de posts mais visitados é muito simples: entre na pagina layout > adicionar gadget e procure por Postagens populares.

Então verá uma janela de configuração do gadget e precisa fazer algumas escolhas simples como definir qual o período quer utilizar (Tudo, Últimos 30 dias, Última semana) e também o que deseja exibir além do titulo da postagem: miniatura de imagem e snippet (primeiras linhas do post). Também selecione quantas postagens quer mostrar (Exibir até ... postagens) você poderá escolher entre 1 e 10 postagens populares para mostrar neste gadget.

Veja também:
5 Dicas para Ajudar na Divulgação de Blogs
Como Comentar Blogs e Conseguir mais Visitas
Blogueiros: Os Novos Micro Empresários

Existe outro código que mostra as Postagens mais comentadas que muita gente usa como postagens populares, mas como falamos esse código avalia o numero de comentários e não de visitas daquela postagem. Não estamos dizendo que esse código dos posts mais comentados seja pior, ou melhor, apenas que é outra forma de avaliar quais os melhores posts do seu blog. Portanto veja qual deles você acha mais interessante usar para conquistar a fidelidade de seus visitantes.

Resolver Problemas de Atualizações do Blog por Email ou Listas de Blogs

2011-12-29T15:08:00.001-02:00

Às vezes as postagens mais recentes do blog não aparecem na lista de blogs ou as atualizações não são enviadas por email ou as postagens mais recentes não aparecem atualizadas no blog dos meus seguidores. Isso tudo e alguns outros problemas são causados pela mesma coisa: erro na configuração do feed do seu blog, mas não se preocupe isso é fácil arrumar isso no seu blog e vamos mostrar com detalhes como fazer seu blog voltar a atualizar corretamente.

Antes de mexer em qualquer configuração do seu blog faça um teste simples no blog tente entrar no endereço http://seublog.blogspot.com/feeds/posts/default e veja se aparecem as suas postagens mais recentes se não funcionar então provavelmente tem algo errado nas configurações do seu feed, então entre na pagina de configurações do blog > clique em outro no final do menu e aparecerá a pagina Ferramentas do blog. Procure por URL de redirecionamento de feed se você usar o feedburner terá um endereço neste campo então será necessário verificar as configurações também no site do FeedBuner veja aqui:Como usar o FeedBurner – RSS, mas se não usar o feedburner essa linha deve ficar vazia.

Além deste problema do blog desatualizado você deve verificar se as configurações do seu feed no trecho Permitir feed de blog estão na opção completa isso porque se usar algum gadget de assuntos relacionados como, por exemplo, o outbrain ou linkwithin no seu blog ele precisará do feed completo para mostrar as miniaturas das imagens. Veja abaixo algumas dicas sobre como usar melhor o feedburner:

Mostrar postagens recentes com o BuzzBoost (FeedBurner)
Configurações do Feedburner - Personalizar as Atualizações por E-mail
Mais Leitores, Assinantes de Feed e Visitas para Blog
Gadget do Blogger: Enviar Atualizações por Email

Talvez alguns achem esse um erro simples de corrigir, mas varias pessoas perguntam sobre o assunto e o pior quase sempre procuramos o erro em lugares errados e acabamos por criar mais problemas no blog ainda. E lembre-se que muitos códigos usam o feed do blog para funcionar por isso sempre vale à pena conferir se está tudo certo aqui antes de mexer em códigos mais complicados e sem necessidade.

Feliz Ano Novo aos Blogueiros: Avaliar o Passado e Planejar o Futuro

2011-12-27T13:59:00.001-02:00

Mais um ano está terminando e chega a hora de repensar sobre o que fizemos ou deixamos de fazer durante o ano, mas principalmente planejar o que faremos em 2012 para que tenhamos realmente um feliz ano novo. A blogosfera cresceu muito em 2011, porém como muitos já sabem blogs são parecidos com micro empresas(Blogueiros: Os Novos Micro Empresários), ou seja, a maioria resiste pouco tempo no mercado ou na internet e justamente por isso devemos pensar por quais caminhos vamos seguir no próximo ano.

Hoje não vamos falar de nenhum assunto especifico essa postagem é para desejar um feliz ano novo para nossos leitores e amigos que visitam nosso blog e também citar algumas frases que podem ajudar na hora de avaliar o que estamos fazendo na internet e na vida (Analisar, Testar e Melhorar o Blog).

Fizemos alguns banners de Feliz Ano Novo para colocar nos blogs, copie o código da caixinha abaixo do banner e coloque no seu blog pela pagina layout > adicionar gadget > html/javascript. Se quiser ver outros modelos e tamanho de banners de ano novo é só clicar no próprio banner.

O importante é o que você faz entre o Dia de Ano e o Natal e não o que faz na semana entre o Natal e o Ano Novo – Muita gente começa a pensar nas coisas que deveria fazer e quer colocar tudo em pratica agora, mas esse período não é bom para grandes mudanças como falamos na postagem, essa época do ano muita gente vai para festas ou fazem viagens no final de ano, portanto a sua quantidade de visitas ou reações das pessoas ao que você faz no blog estão um pouco distorcidas. Além disso, fazer muitas coisas ao mesmo tempo torna difícil saber se os bons ou maus resultados vieram de qual mudança.

Outra estória interessante é um trecho de uma entrevista que assisti há muito tempo e a pessoa dizia que conseguiu fazer sucesso indo aonde seus concorrentes não chegavam, ou seja, se quiser ter destaque e sucesso como blogueiro precisa fazer algo a mais ou melhor que os outros blogs. Contudo isso não quer dizer ser louco e correr atrás de tudo afinal existem coisas que não valem à pena. Isso é apenas uma coisa que deve pensar para não ser acomodado achando que é só criar um blog e logo terá milhares de visitas e ganhará muito dinheiro na internet de maneira fácil e rápida. Lembre-se o sucesso só vem antes do trabalho no dicionário (Mais Visitas para seu Blog).

A principal mensagem de final de ano para os blogueiros é que trabalhar na internet é como qualquer outro lugar com dedicação é possível ter sucesso. Queremos também aproveitar para agradecer a todos que nos ajudaram durante esse ano a fazer nosso blog através de comentários e email, dando sugestões, fazendo criticas enfim interagindo de alguma forma. Desejamos muita saúde e felicidade a todos e que 2012 seja realmente um ano novo e melhor para todos. Abraços e Feliz Ano Novo!

Opções e Formatos do Botão Google +1

2011-12-26T12:38:00.000-02:00

Já faz alguns meses que o Google lançou seu botão +1 para recomendar sites utilizando como base a sua própria rede social Google Plus, mas recentemente encontramos uma nova opção para utilizar o botão Google+1 no blog. Ou melhor, dizendo em vez demonstrar o numero de cliques no botão +1 dentro de um balão você pode mostrar em formato de texto: você e 200 outras pessoas marcaram isso com o +1. Claro que o numero 200 é apenas um exemplo.

Nós já mostramos anteriormente como colocar botão +1 do Google no blog então não vamos repetir isso nesta postagem, mas você poderá ver no link anterior e também como pegar e colocar o botão do Google mais no seu blog.

Se já tem o botão +1 na sua pagina apenas adicione o trecho annotation="inline" no código do botão deste jeito:
<g:plusone annotation="inline"></g:plusone>

Porém se quiser mostrar apenas o botão sem contador de indicações ao Google, altere desta maneira:

<g:plusone annotation="none"></g:plusone>

Para completar o assunto botões de compartilhamento e maneiras de divulgar seu blog, nós sugerimos que leiam também:

Personalizar Gadget Seguidores do Blog: Contador em Forma de Texto
Botões das Redes Sociais na Vertical - Compartilhar Posts
5 Dicas para Ajudar na Divulgação de Blogs
7 opções de botões para divulgar blog e conseguir visitas das redes sociais

A razão de falarmos dessas pequenas alterações é que elas são simples de fazer e podem servir para chamar atenção dos seus visitantes para esse botão e assim conseguir mais recomendações de suas paginas ou então ajuda a escolher qual tipo de botão combina melhor com o seu template. Afinal com tanta competição na internet os detalhes podem fazer toda a diferença.

Modificar Menu Suspenso do Gadget Arquivo do Blogspot

2011-12-22T14:50:00.001-02:00

No Blogger muitos blogueiros que usam o gadget Arquivo do blog no formato de menu suspenso (menu jump) mas quase ninguém faz modificações neste menu porém isso é bem simples de fazer, apenas precisa de cuidado na hora de alterar o código para não apagar coisas por engano, veja Porque os códigos não funcionam no blog. Então vamos mostrar como aumentar a largura, utilizar outras fontes ou mudar o tamanho da letra no gadget do arquivo do blog utilizando com o menu suspenso.

Entre na pagina Modelo (sugerimos , clique no botão editar html e marque a opção expandir modelo de widget. Agora procure pelo titulo do seu arquivo do blog, você deve encontrar uma linha semelhante a essa:
b:widget id='BlogArchive1' locked='false' title='Arquivo do blog' type='BlogArchive'

E algumas linhas mais abaixo você encontrará esse trecho que é o original do blogger:

<select expr:id='data:widget.instanceId + "_ArchiveMenu"'>
<option value=''><data:title/></option>
<b:loop values='data:data' var='i'>
<option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>
</b:loop>
</select>

Para deixar o menu do Arquivo do Blog personalizado como está o nosso agora (22/12/2011) devemos modificar o código e deixar deste jeito:

<select expr:id='data:widget.instanceId + "_ArchiveMenu"' style='width: 200px;font-size:12pt'>
<option value=''>Histórico deste Site</option>
<b:loop values='data:data' var='i'>
<option expr:value='data:i.url'><data:i.name/></option>
</b:loop>
</select>

Veja as alterações que fizemos no código do menu suspenso do arquivo:

Adicionamos essa linha: <option value=''>Histórico deste Site</option> isso permite mostrar um titulo somente no menu sem precisar mostrar o titulo no gadget. Repare que na maioria dos blogs tem escrito arquivo do blog como titulo e depois arquivo do blog no menu jump também o que não é o nosso caso. Quando clicamos para adicionar o gadget ele fica sem titulo.

Formatação do menu suspenso: style='width: 200px;font-size:12pt' é neste trecho que modificamos o tamanho e tipo da letra ou definimos uma largura especifica para o menu. Esses são códigos simples de CSS como você usaria em qualquer outro tipo de texto, veja aqui: Como Formatar o Texto do Blog. O valor 200 é a largura do menu e 12 o tamanho da fonte. Anteriormente já falamos em como Alterar cores, tamanho, letra do menu jump e o principio é o mesmo, inclusive no link você pode ver até como trocar a cor de fundo deste tipo de menu.

Em nossa alteração de código apagamos o trecho (<data:i.post-count/>) isso é o que mostra o numero de postagens feitas em cada mês no menu, portanto você escolhe se quer ou não mostrar isso.

Apesar de ser uma alteração simples pode ajudar a dar algum destaque para esse gadget e gerar mais algumas pageviews no seu blog dando a oportunidade dos visitantes conhecerem melhor seu trabalho e quem sabe voltarem mais vezes no seu blog. Esperemos que gostem de mais essa opção de personalizar seu blog. Abraços e Feliz Natal a todos !!!

Personalizar Gadget Seguidores do Blog: Contador em Forma de Texto

2011-12-20T13:18:00.001-02:00

Crie um botão personalizado em vez de usar o gadget de seguidores no seu blog. Isso pode ser feito misturando alguns códigos e imagens de fundo no seu blog. Assim você poderá criar um botão com contador de seguidores do seu blog com a imagem que desejar e poderá ficar com um tamanho que seja mais adequado ao layout do seu blog.

O código do botão personalizado para seguir o blog no Google Friend Connect (gadget de seguidores do blog) é relativamente fácil de fazer. Você apenas precisa pegar o numero de ID do seu blog e alterar esse código:

<a href="http://www.blogger.com/follow-blog.g?blogID=11111111111111111111" title="Siga o Dicas para Blogs" style="text-align:center;display:block;background-image:url(endereço da imagem);font-size:14pt; width:260px; height:70px">
<script type='text/javascript'>function contadorFriendConnect(obj) {var
link=obj.totalResults;document.write(link);}</script>
<script type="text/javascript" src="https://www.google.com/friendconnect/api/people/22222222222222222222/@friends?fields=profileExtensions&callback=contadorFriendConnect&id=22222222222222222222"></script></a>

Agora veja o que precisa alterar no código do botão seguir blog:

11111111111111111111 esse numero é o ID do seu blog veja que toda vez que entra na pagina layout, estatísticas, configurações ou qualquer outra no seu blog na barra de endereços tem uma numeração grande: blogger.com/blogger.g?blogID=.... Copie esses números e coloque no lugar indicado no código, se tiver duvidas veja esse outro tutorial: Botão personalizado para seguir o blog, lá tem uma imagem demonstrando qual é a id do blogger.

22222222222222222222 veja que isso apareceu duas vezes no script acima, você deve pegar o numero do seu blog no site Google Friend Connect. Quando entrar no site clique no nome do seu blog e copie a numeração que aparece na barra de endereço: google.com/friendconnect/admin/site/overview?id=

Para colocar Imagem personalizada no botão seguir blog veja que esse trecho do código é uma formatação em CSS utilizando apenas uma imagem de fundo para fazer o botão, mas caso queira mostrar apenas o numero pode apagar esse trecho:

style="text-align:center;display:block;background-image:url(endereço da imagem);font-size:14pt; width:260px; height:70px"

Se precisar de ajuda sobre hospedar ou posicionar imagens de fundo veja os links abaixo:
Hospedar Imagens no Blogger
Posicionar imagem de fundo

O restante do código é apenas o alinhamento (text-align:center) do numero de seguidores; também temos o tamanho da imagem width:260px; height:70px que você deve ajustar. E finalmente o tamanho fonte(Como Formatar o Texto do Blog) do numero(font-size:14pt) de seguidores que seu blog tem. Depois que acertar todos esses detalhes você deve colocar o código no seu blog através da pagina layout >> adicionar gadget >> html/javascript.

Sobre seguidores do blogger você pode achar veja também essas dicas:
Parar de Seguir um Blog
Como Bloquear ou Excluir Seguidores do Blog

Pegamos o código para mostrar a quantidade de seguidores do blog num tutorial do site Códigos Blog.

E já que falamos tanto sobre seguidores do blog não poderiamos perder a oportunidade de convida-lo a seguir o Dicas para Blogs.
Para concluir queremos avisar que isso nada tem a ver com o erro que o gadget dos seguidores apresentou recentemente, pois nos testes que fizemos em nossos blogs a contagem do numero de seguidores mostrado no gadget ou com o código foi o mesmo.

Como Fazer um Menu Vertical Fixo no Blogger

2011-12-16T14:55:00.000-02:00

Vamos mostrar como colocar um menu vertical fixo na lateral do seu blog, mas esse menu tem o estilo expansível, ou seja, quando passa o mouse sobre o menu o ícone expande e mostra o título do menu dando uma melhor aparência e atraindo atenção dos visitantes. Caso esteja procurando um menu com links lado a lado veja como fazer um menu horizontal.

O código é muito simples de colocar no blog você só precisa entrar na pagina layout, adicionar gadget, escolher a opção HTML/javascript e colar o seguinte código:

<style type="text/css">
/* CSS Style for Horizontal Menu - info @ http://www.spiceupyourblog.com*/
#hor {
list-style:none;
padding:0;
margin:0;
}
#hor li {
float:left;
padding:5px;
}
#hor a {
display:block;
height: 12px;
text-indent:-999em;
}
#hor a.home {
width:46px;
background:url(vHome.gif) no-repeat 0 0;
}
#hor a.download {
width:94px;
background:url(vDownload.gif) no-repeat 0 0;
}
#hor a.contact {
width:74px;
background:url(vContact.gif) no-repeat 0 0;
}
/* CSS Style for Vertical Menu */
#ver {
list-style:none;
padding:0;
margin:0;
}
#ver li {
padding:2px;
}
#ver li a {
display:block;
height:12px;
text-indent:-999em;
}
#ver a.home {
width:47px;
background:url(hHome.gif) no-repeat 0 0;
}
#ver a.download {
width:95px;
background:url(hDownload.gif) no-repeat 0 0;
}
#ver a.contact {
width:74px;
background:url(hContact.gif) no-repeat 0 0;
}
.clear {
clear:both;
}
*{
/* A universal CSS reset */
margin:0;
padding:0;
}
#navigationMenu body{
font-size:14px;
color:#666;
background:#111 no-repeat;
/* CSS3 Radial Gradients */
background-image:-moz-radial-gradient(center -100px 45deg, circle farthest-corner, #444 150px, #111 300px);
background-image:-webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111));
font-family:Arial, Helvetica, sans-serif;
}
#navigationMenu li{
list-style:none;
height:39px;
padding:2px;
width:40px;
}
#navigationMenu span{
/* Container properties */
width:0;
left:38px;
padding:0;
position:absolute;
overflow:hidden;
/* Text properties */
font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
letter-spacing:0.6px;
white-space:nowrap;
line-height:39px;
/* CSS3 Transition: */
-webkit-transition: 0.25s;
/* Future proofing (these do not work yet): */
-moz-transition: 0.25s;
transition: 0.25s;
}
#navigationMenu a{
background:url('http://1.bp.blogspot.com/-jwOb6rML3W0/TrWP2WBsvaI/AAAAAAAAFFg/NK2hIQSRO-E/s1600/navigation.jpg') no-repeat;
height:39px;
width:38px;
display:block;
position:relative;
}
/* General hover styles */
#navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }
#navigationMenu a:hover{
text-decoration:none;
/* CSS outer glow with the box-shadow property */
-moz-box-shadow:0 0 5px #9ddff5;
-webkit-box-shadow:0 0 5px #9ddff5;
box-shadow:0 0 5px #9ddff5;
}
/* Green Button */
#navigationMenu .home { background-position:0 0;}
#navigationMenu .home:hover { background-position:0 -39px;}
#navigationMenu .home span{
background-color:#7da315;
color:#3d4f0c;
text-shadow:1px 1px 0 #99bf31;
}
/* Blue Button */
#navigationMenu .about { background-position:-38px 0;}
#navigationMenu .about:hover { background-position:-38px -39px;}
#navigationMenu .about span{
background-color:#1e8bb4;
color:#223a44;
text-shadow:1px 1px 0 #44a8d0;
}
/* Orange Button */
#navigationMenu .services { background-position:-76px 0;}
#navigationMenu .services:hover { background-position:-76px -39px;}
#navigationMenu .services span{
background-color:#c86c1f;
color:#5a3517;
text-shadow:1px 1px 0 #d28344;
}
/* Yellow Button */
#navigationMenu .portfolio { background-position:-114px 0;}
#navigationMenu .portfolio:hover{ background-position:-114px -39px;}
#navigationMenu .portfolio span{
background-color:#d0a525;
color:#604e18;
text-shadow:1px 1px 0 #d8b54b;
}
/* Purple Button */
#navigationMenu .contact { background-position:-152px 0;}
#navigationMenu .contact:hover { background-position:-152px -39px;}
#navigationMenu .contact span{
background-color:#af1e83;
color:#460f35;
text-shadow:1px 1px 0 #d244a6;
}
/*End menu css - info @ http://www.spiceupyourblog.com */
</style>
<div style='position: fixed; top: 40%; left: 10px;'/>
<ul id="navigationMenu">
<li>
<a class="Home" href="endereço da pagina">
<span>Home</span>
</a>
</li>
<li>
<a class="about" href="endereço da pagina">
<span>Sobre</span>
</a>
</li>
<li>
<a class="services" href="endereço da pagina">
<span>Serviços</span>
</a>
</li>
<li>
<a class="portfolio" href="endereço da pagina">
<span>Portfolio</span>
</a>
</li>
<li>
<a class="contact" href="endereço da pagina">
<span>Contato</span>
</a>
</li>
</ul>
</div><a href="http://www.spiceupyourblog.com/" target="_blank"><small>Get The Fixed Menu Gadget</small></a>

Você apenas precisa trocar os links e texto do menu, mas cuidado, por exemplo, no trecho: <a class="contact" href="endereço da pagina">
<span>Contato</span> a parte class="contact" é o estilo CSS e você não deve mexer nele. O que podemos alterar é o texto Contato que aparece no final: <span>Contato</span>

Caso o menu fica muito perto da lateral da pagina você pode aumentar a margem mudando o valor 10 nesta linha:<div style='position: fixed; top: 40%; left: 10px;'/>

Para usar outras imagens você precisará fazer uma imagem igual a essa logo abaixo e neste mesmo tamanho 190×78 pixels e posicionando os ícones da mesma forma. A razão do tamanho exato da imagem é o mesmo que falamos em outro tutorial sobre: Colocar o Pássaro do Twitter(ou Qualquer Imagem) Voando no Blog

Seria possível usar imagens de outros tamanhos, mas seria necessário alterar o código CSS totalmente fazendo o posicionamento correto da imagem que fundo.

Esse código foi publicado pelo site Spice Up Your Blog (A Stylish Css3 Fixed Position Vertical Side Menu For Blogger) e achamos bem interessante por isso resolvemos publicar também apenas fazendo algumas alterações e sugestões de personalização.