Dicas para Blogs

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

Editar e Colocar Efeitos em Fotos e Imagens Online

2011-12-14T17:21:00.002-02:00

Vamos falar sobre como criar efeitos em fotos ou imagens para usar no seu blog, redes sociais, enfim onde desejar. Os blogueiros sempre usam imagens para melhorar seus posts, mas colocar alguns efeitos, escrever sobre as fotos, colocar imagens de corações, opções de filtros, decorações, imagens animadas que piscam sobre as fotos e varias outras opções que podem deixar muito melhores as imagens que usa na internet.

O site http://fotoflexer.com é gratuito e achamos bem fácil de usar. Claro que no começo você pode ficar até meio perdido entre as opções do site, mas com a pratica isso melhora muito. Você poderá editar fotos do facebook, Picasa, flickr e outros, mas vamos mostrar a opção de enviar uma foto que tenha em seu computador, por isso clique no botão upload Photo e envie uma imagem para o site.

Aguarde até carregar e depois é só começar a fazer testes e modificações na sua imagem, veja no menu que existem muitas abas com ferramentas para edição de imagens: efeitos, decoração e muitas outras

Na guia effects você encontra, por exemplo, como fazer o efeito de corações sobre a sua imagem ou efeito retro para dar uma aparência antiga à foto. Na aba decorate você pode escrever sobre a imagem, pintar trechos e varias outras coisas.

Para enfeitar as imagens para o Natal e Ano Novo podemos usar alguns efeitos do menu animations que tem estrelas e outros enfeites que ficam piscando sobre as imagens. Inclusive corações para usar no dia dos namorados ou alguma outra ocasião que ache interessante.

Então ache os efeitos que mais gosta, clique no botão apply (para aplicar o efeito a imagem), mas caso faça alguma alteração que não goste clique no botão Undo que está do lado esquerdo, isso desfaz a ultima alteração na imagem. E quando terminar clique no tão save que abrirá uma janela perguntando se quer salvar no seu computador ou já enviar para alguma rede social.

Veja também:
Colocar Efeitos em Fotos e Imagens: Bordas, Desenhos, Texto, Editar Cores
Editor de Imagens, Fotos e Banners Online
Achar e baixar imagens, fotos, icones para Blog

Claro que o uso disso depende muito do tipo de publico que seu blog, leia aqui sobre: Quais os Melhores Gadgets e Acessórios para Blogs, lá falamos sobre gadgets para blogs, mas a idéia vale para qualquer coisa que pretenda usar em seu site. Esperamos que gostem de mais essa opção de edição de imagens online e faça bonitas imagens para usar no seu blog. Abraços a todos.

Mostrar ou Ocultar as Letras de Confirmação nos Comentários do Blogger

2011-12-12T14:41:00.002-02:00

Recentemente recebi vários comentários de spam aqui no Dicas para Blogs e por isso resolvi ativar as letras de confirmação dos comentários, mas quando fui procurar isso não encontrei na Interface Atualizada do Blogger. Não sei se é uma falha ou esqueceram-se desta parte ou qual a razão, mas se você quiser ativar ou desativar aquelas letras distorcidas que aparecem antes de postar um comentário no seu blog precisará usar o painel antigo do blogger.

Entre na pagina inicial do blogger e clique no ícone da ferramenta que fica no canto direito, então verá uma lista de opções, escolha interface antiga do blogger.

Depois disso é bem simples, clique em configurações do blog que deseja mostrar as letras de confirmação

Escolha a guia comentários, procure na pagina (fica quase no final) até achar exibir uma confirmação de palavras para os comentários e escolha a opção sim para mostrar essa palavra de confirmação nos comentários do seu blog.

Agora só precisa clicar no botão salvar que está no fim da pagina e pronto. Se quiser voltar à interface atualizada do blog é só clicar no link que fica no topo da pagina (experimente a interface atualizada do blogger). Veja mais dicas úteis sobre comentários no blog:

Configurações do Blogger - Postagens e Comentários
Como Comentar Blogs e Conseguir mais Visitas
Página com os Comentários Recentes do Blogger
Como Colocar Responder Comentários no Blogger

Sabemos que muita gente não gosta dessa confirmação, mas utilizamos por alguns dias por causa do spam e pretendemos retirar em breve, mas cada um deve decidir o que é melhor para o seu blog, portanto como tudo na internet precisamos fazer testes para saber o que é melhor para nós. E você tem problemas com os comentários do seu blog? E como faz pra lidar com isso?

Proteja suas Contas, Senhas, Fotos na Internet - Evite Erros Comuns

2011-12-10T14:54:00.001-02:00

Muita gente usa a internet, mas nem todos se preocupam como deveriam com a sua segurança. Você entre outras coisas precisa de um antivírus atualizado, mas isso é somente o básico achamos que o mais importante é o seu comportamento em frente o computador. Há algum tempo fiz um curso de hardware e uma frase que circula muito entre os técnicos de informática é dizer que a peça que mais dá problema no computador é a que fica entre a tela e a cadeira, ou seja, quem usa o computador. Apesar de isso ser uma piada tem muita verdade nele por isso pense melhor no que você faz em frente ao seu PC.

Cuidados com a segurança do e-mail e senha
Não coloque seu e-mail, MSN, Skype ou qualquer outro nos comentários de um blog porque nem você nem o dono do blog fazem idéia de quem vai ler aquele comentário, ou seja, você pode ser vitima de brincadeiras de mau gosto ou até mesmo de golpes virtuais principalmente se está pedindo ajuda ou informações sobre algo porque pessoas que se oferecem para ajudar pode na verdade querer tirar alguma vantagem nisso.

Proteja as fotos e imagens do seu blog
Existem muitos códigos para impedir copias de textos e imagens e combater o plagio, mas infelizmente sempre tem uma maneira de burlar esses códigos e copiar o conteúdo do seu blog por isso o melhor a fazer é denunciar plagio e achamos que deveria escrever sobre as suas fotos fazendo uma marca d’agua (Escrever sobre Fotos e Imagens - Criar Marca d'agua) pelo menos identifica o seu site. Além de imagens de tutoriais como as nossas achamos que essa dica de escrever sobre fotos deve ser feita principalmente em fotos pessoais porque não sabemos o que as pessoas farão com essas imagens.

Já li diversas vezes casos de fotos de mulheres famosas que foram plagiadas e pararam em sites de acompanhantes (prostituição) agora imagine se gente famosa tem esse problema é bom cuidar das fotos que publica. Isso vale não somente para fotos publicadas em blogs ou sites, mas também para as fotos que coloca nos seus álbuns de redes sociais.

Cuidado ao Fazer Login em Sites
Aqui existem dois problemas um é ter certeza que está mesmo no site que imagina, portanto não faça login a partir de links recebidos por email ou sites que não confie, por exemplo, se receber um email com link para ver uma novidade do facebook é muito melhor você digitar no navegador o endereço do facebook do que clicar no link recebido. Claro que isso é muito mais importante quando envolve contas em bancos e cartões de credito, mas o problema com falsificação de sites de bancos deve melhorar agora que foi lançado um domino exclusivo para bancos o .b.br, porém ainda não vi nenhum banco utilizando isso.

Outro erro que acontece é quando você faz login em algum site (Orkut, twitter, facebook, blogger, adsense e outros) e não clica para sair ou fazer logoff você pode permanecer logado mesmo se desligar o computador. Portanto quando usar um computador que outras pessoas têm acesso não marque a opção Continuar conectado, Lembrar-me, permanecer conectado ou algo similar principalmente se está em um computador publico, ou seja, numa lanhouse, escola, trabalho e outros.

Veja um vídeo de 2 minutos com Marcelo Tas falando sobre segurança e regras da internet.

Essas dicas são para todos que usam a internet e não somente para os blogueiros, mas certamente os blogueiros têm mais a perder, por exemplo, se o roubo de uma senha pode fazer alguém perder o Orkut quando falamos de blogueiros o roubo da senha pode significar anos de trabalho à dedicação ao seu blog e muito dinheiro que ganha na internet.

Leia também:
Como Recuperar a Conta Google (Blogger, Orkut, Adsense)
Como Recuperar Blog Excluído
Dicas de Segurança na Internet - Erros mais Comuns
Denunciar conteúdo ilegal ao blogger

Claro que, além disso, existem muitas outras coisas para aumentar nossa segurança na internet por isso ajude-nos dando sua sugestão: quais outras dicas de segurança usam no seu dia a dia para proteger suas contas em sites e sua identidade virtual. Já acontece algo com você ou algum conhecido que possa servir de alerta para outros internautas? Abraços e cuide-se.

Mostrar Link Curto das Postagens - Encurtador de Links no Blog

2011-12-07T14:17:00.001-02:00

Sempre é importante criar novas formas de divulgar seu blog e atrair mais visitantes para suas paginas. Você pode mostrar o link encurtado no final de suas postagens o que pode facilitar as pessoas copiarem o link e postarem no Twitter ou alguma outra rede social. Concordamos que na divulgação do blog em redes sociais existem muitos tipos de botões de compartilhamento que já fazem o envio automático, mas sempre é bom dar mais uma opção principalmente porque ocupa pouco espaço na pagina do blog e serve como mais um incentivo a divulgação.

Entre na pagina editar HTML, nós sugerimos fazer um backup do template antes de alterar o HTML do blogger. Marque para expandir o modelo de widgets e procure por <data:post.body/> e coloque esse código logo depois.

<b:if cond='data:blog.pageType == "item"'><form onsubmit='return false;'>Link Curto
<input id='shorturl' onmouseover='javascript:this.select();void(0);' readonly='readonly' size='20' type='text'>
<script language='javascript' type='text/javascript'>
//<![CDATA[
function encurtaURL(json){
document.getElementById("shorturl").value = json.short_url;
}
document.body.onload = function(){
if(document.getElementById("shorturl").value==''){
var el = document.createElement("script");
el.language='javascript';
el.src = 'http://bitw.in/api/link/create.json?url='+encodeURIComponent(window.location.href)+'&callback=encurtaURL&apikey=74231e775e05ca3fe3387eaf0c1c7be61da2bd23';
document.body.appendChild(el);
}
}
if(document.body.addEventListener){
document.body.addEventListener("load",document.body.onload,true);
}
//]]>
</script></input></form></b:if>

Outro posicionamento interessante pode ser mostrar o link no inicio da postagem e para fazer isso só precisa colocar o código que mostramos antes de <data:post.body/> ao invés de depois dele.

Além disso se quiser você pode colocar o código depois de <div class='post-footer-line post-footer-line-3'/>, isso faz o link aparecer mais para baixo depois do nome do autor da postagem, marcadores e link de comentários do blog. O html div class='post-footer-line post-footer-line-3 varia um pouco em cada template, mas o importante é achar post-footer-line-3 e também esse numero pode ser 1 ou 2, se colocar nesses outros trechos o link encurtado do seu post parecerá numa linha entre os marcadores ou nome do autor do blog dependendo de como está o seu layout de postagem.

Veja também:
5 Dicas para Ajudar na Divulgação de Blogs
Botões das Redes Sociais na Vertical - Compartilhar Posts
Erros que Fazem Perder Visitas no Blog
Como Comentar Blogs e Conseguir mais Visitas

Alguns blogueiros pediram ajuda sobre isso em comentários por isso fizemos esse tutorial, mas claro que nem todos gostam deste tipo de acessório usar no blog, então acho que cada um deve pensar se isso pode ajudar seu blog ou combinará com o seu template atual e assim decidir se deve ou não utilizar.

Painel Ganhos do Blogger – Integrar Google Adsense com o Blog

2011-12-05T13:39:00.001-02:00

Uma das formas mais usadas para ganhar dinheiro com blogs é o Google Adsense isso pode ser feito principalmente na forma de anúncios e pesquisas dentro do seu site, mas você pode integrar o seu blogger com o Adsense utilizando o painel ganhos que fica no menu do blogger (Mudanças no Painel do Blogger ). Essa é uma maneira mais rápida de saber o quanto está ganhando na internet com cada um de seus blogs.

Uma outra forma de saber quando ganha com seu blog é utilizando os Relatórios do Google Adsense que além de mostrar o quando você ganha ainda permite saber com quais blocos de anuncios você ganha mais dinheiro com seu blog.

Para ativar esse painel é muito simples entre na pagina inicial do blogger e clique para ver no menu para entrar em ganhos. Então clique no botão inscrever-se no Adsense não faz mal se já tem uma conta no Google Adsense, apenas clique neste botão.

Agora você verá uma tela que pergunta se você que vincular a sua conta Google do adsense ao blogger (caso a sua conta do adsense seja com o mesmo email que usa no blogger). Senão ao lado tem a opção de utilizar outra conta Google, portanto é só ver qual opção é o seu caso em um dos botões (vincular conta do adsense ou vincular essa conta)

Depois disso você já está tudo pronto e sua conta Google adsense está vinculada ao blogger e você poderá ver quanto dinheiro ganha no blog diretamente pela pagina do blogger entrando no menu ganhos.

Veja abaixo dos relatórios de ganhos podemos ver as configurações do AdSense no blog, você deve deixar a opção mostrar anúncios em sim, mas a próxima configuração Exibir se você já tem os anúncios no seu blog recomendamos escolher a opção: não adicionar novos anúncios, apenas ativar relatórios do adsense.

Senão aparecerão novos blocos de anúncios no seu blog, mas claro isso é uma questão de escolha pessoal. Então quando terminar clique no botão salvar configurações (canto superior esquerdo) e veja seu blog para ter certeza que não colocou algum novo anuncio onde não queria.

Sobre ganhar dinheiro com blogs leia também:
Busca dentro do blog - AdSense para pesquisas
Quais os melhores formatos de Anúncios - Relatórios do Google Adsense
Como Funciona o Google Adsense - Ganhar mais Dinheiro
Regras do Adsense: Evite Punições, Cliques Inválidos

Não se assuste por aparecer o valor 0 (zero) em tudo, isso é normal, pois o painel começa a funcionar no momento que você ativa, por isso só verá algum valor depois de um dia. E agora que já está tudo pronto é só aguardar e ver as informações sobre seus lucros na internet com o blogger.

Estatísticas Botões de Compartilhamento - Curtir, Retweet, +1 e Outros

2011-12-01T16:34:00.001-02:00

Nós já falamos varias vezes sobre colocar botões de compartilhamento no blog para facilitar que seus visitantes divulguem seu blog nas redes sociais e com isso conseguir mais visitas, porém como saber quantas pessoas compartilham nossas postagens e em quais redes sociais? Isso pode ser feito no AddThis fazendo um cadastro ou colocando um código do Google analytics no seu blog.

Para acompanhar as estatísticas dos cliques no botão de compartilhar diretamente no addthis é muito simples quando você entra no site e clique para pegar o código do botão ele já oferece a opção de se cadastrar que na maioria das vezes ignoramos, mas vale à pena fazer o cadastro, assim você terá acesso a pagina com as informações sobre em quais redes sociais seu blog foi compartilhado, quais as postagens que foram divulgadas e muito mais.

Depois que fizer o cadastro faça login e pegue o código dos botões do AddThis para colocar no seu blog e adicione normalmente como um gadget de html/javascript. Se você já tem os botões no seu blog só precisa trocar o código e pronto, caso tenha usando um de nossos tutoriais como, por exemplo:

<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4ddd61d97d52fbbc"></script>

Você nem precisa trocar o código inteiro a única coisa que modifica é a ultima linha que contem sua ID do AddThis:
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4ddd61d97d52fbbc"></script>

Veja que só é diferente o trecho #pubid=xa-4ddd61d97d52fbbc, então se achar mais fácil apenas altere essa linha usando o código que pegou após fazer o seu cadastrado.

Depois para ver as informações sobre quantas pessoas clicaram para compartilhar suas postagens é só entrar no site do Addthis, fazer login e verá as estatísticas de compartilhamento.

Outra forma de acompanhar o numero de cliques em botões de redes sociais como Facebook (curtir) e Twitter (retweet) entre outras é usar o próprio Google Analytics e também o procedimento é simples você só precisa colocar um código junto com os botões do addthis, veja um exemplo abaixo:

<a class="addthis_button" href="http://addthis.com/bookmark.php?v=250">
<img src="http://s7.addthis.com/static/btn/v2/lg-share-en.gif" width="125" height="16" alt="Bookmark and Share" style="border:0"/>
</a>
<script type="text/javascript">
var addthis_config = {
data_ga_property: 'UA-xxxxxx-x',
data_ga_social: true
};
</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script>

Se entrar no seu blog onde estão os códigos dos botões verá que praticamente tudo é igual apenas esse trecho abaixo é diferente:

<script type="text/javascript">
var addthis_config = {
data_ga_property: 'UA-xxxxxx-x',
data_ga_social: true
};
</script>

Então coloque essas linhas de código junto com o código do seu botão de compartilhamento, mas você deve colocar o seu numero de ID do Google analytics nesta linha do código data_ga_property: 'UA-xxxxxx-x', se tiver duvidas veja nosso outro tutorial Blogger Integra Contador Google Analytics no Painel de Configurações, lá você poderá ver com mais detalhes como achar o id do analytics.

Depois é só aguardar e nos próximos dias conferir os dados na pagina do Google analytics entrando na pagina Visitantes > Social > Ação e ver em quais redes suas postagens foram divulgadas e no link Paginas para saber quais foram as paginas do seu blog foram recomendadas.

Essas informações podem ajudar você a entender o que acontece no seu blog e saber em quais redes sociais faz mais sucesso, quais são suas melhores postagens e a partir disso ter novas idéias para melhorar seu blog e conseguir mais visitas e sucesso com o blog. E para terminar veja aqui mais algumas dicas interessantes sobre redes sociais, blogs e estatisticas:
Novas Ideias para Novos Posts
Botões das Redes Sociais na Vertical - Compartilhar Posts
Usar Informações do Contador de Visitas para Melhorar o Blog

Abraços e sucesso nos blogs de vocês!