sábado, 12 de fevereiro de 2011

Mudar template do blog - Designer do modelo

Uma novidade no blogger tem sido muito comentada recentemente é o novo recurso Designer do modelo. Realmente isso torna muito mais simples modificar o blog,colocar imagens de fundo e muitas outras coisas, porém ele tem muitas funções então recomendamos que faça uma coisa por vez.

Criar um template para o blog
Primeiro entre no Blogger in Draft, clique em Layout depois em Designer do modelo, você verá a seguinte tela.

Pagina layout do blogspot
Nela já está seleciona da opção Modelos (menu do lado esquerdo) podemos trocar o modelo completo apenas clicando nos template no topo da pagina (Simple, Picture Window, Awesome Inc., Watermark) note sempre aparecerão algumas opções logo abaixo, então poderá selecionar qualquer uma delas.

Agora vamos falar sobre trocar o fundo do blog, clique no menu esquerdo em plano de fundo podemos trocar a cor de tema principal apenas clicando na caixinha (Change the color theme of your blog Go to the Advanced tab to customize colors for specific elements.) Ou num dos temas sugeridos que estão logo abaixo. Outra coisa muito útil é colocar uma imagem de plano de fundo repare que do lado esquerdo de onde mudamos a cor tem uma miniatura da imagem de fundo que estamos usando atualmente se clicar nela verá essa janela onde poderá escolher entre muitas imagens de fundo para o seu blog.


Então é só achar uma que goste clicar sobre ela, depois em concluído e aplicar ao blog (botão no canto direito, parte superior).

Não falamos de todas as opções desta nova pagina por serem coisas demais para um tutorial somente, portanto voltaremos ao assunto da pagina Designer de Modelo outras vezes, mas se explorar e fizer alguns testes sabemos que gostará muito desta novidade do blogger. Como por exemplo, o próximo item layout, ficou muito fácil colocar um blog de 3 colunas, dividir a sediar ou rodapé em duas partes, mas isso já é assunto para uma próxima vez... 

Trocar imagem de fundo no blog - Designer do modelo

Agora o blogger permite enviar imagens de fundo diretamente pela pagina designer do modelo, ficou muito mais simples usar uma imagem de fundo personalizada. Você pode achar ou editar uma imagem para usar como fundo do blog e depois enviar para o blogger sem se preocupar com hospedagem ou endereços de imagens de fundo.

Video Tutorial - Trocar imagem de fundo do seu blogVeja esse video tutorial: Trocar imagem de fundo do seu blog

Imagem de fundo no blogspot
Faça login no Blogger in Draft, clique em designer, depois em designer do modelo,plano de fundo e clique no link fazer upload da imagem, então é só achar a imagem que desejar uma com background(fundo do blog), depois salvar. E já está pronto, mas veja que temos algumas opções interessantes nesta pagina.

Alinhar imagem de fundoposicionamento da imagem de fundo ficou muito simples de fazer, isso é o mesmo que posicionar a imagem de fundo, veja na imagem abaixo e escolha o lugar onde a imagem aparecerá no seu blog.

Outra novidade muito legal é escolher se a imagem de fundo se repetirá ou não e também podemos deixar ofundo do blog fixo deixando apenas o conteúdo se mover e a imagem de fundo permanecendo fixa quando usar a barra de rolagem.

Posicionar imagem de fundo no bloggerVeja como funciona cada uma das opções:
Não dividir em blocos: a imagem aparece apenas uma vez
Bloco: a imagem se repete pela pagina toda
Dividir horizontalmente: ela aparece lado a lado
Dividir verticalmente: aparece uma embaixo da outra

A opção abaixo Rolar com a página faz a imagem do blog acompanhar a barra de rolagem, se desmarcar essa opção a imagem de fundo ficará fixa, somente o conteúdo (postagens, sidebar) irão se mover quando usar a barra de rolagem da pagina.

Vimos essa informação no blog do Blogger, para nós foi um pouco chato afinal faz pouco tempo fizemos um tutorial falando como colocar uma imagem de fundo no blog, o que agora ficou muito mais simples e rápido, mas tudo bem, não poderíamos adivinhar.
Related Posts with Thumbnails

Mais Opções Fontes no Blogger - Novos Tipos de Letras


Mais Opções Fontes no Blogger - Novos Tipos de Letras

Agora o Blogger in Draft (O que é o Blogger Draft? (Blogger em Rascunho)) tem novas fontes para você usar no seu blog, isso para quem já usa os templates novos, mas se não for seu caso você pode usar o Google fontes para adicionar novas fontes no seu blog. Esperamos que em breve esse recurso esteja também disponível no blogger para todos os blogueiros, afinal são poucos que usam o blogger in draft.

novas fontes no blog

Para usar esses novos tipos de letras no seu blog você só precisa entrar em designer,designer do modelo. Na janela seguinte clique em avançado e já poderá escolher as fontes que desejar usar no seu blog. Além disso, nesta pagina existem outras alterações possíveis para fazer no seu template, como por exemplo trocar imagem de fundo no blog.



Após alterar os tipos de letras do seu texto(veja também: Como Formatar o Texto do Blog), títulos das postagens, títulos dos gadgets e tudo mais que desejar só precisa clicar em aplicar ao blog, mas sugerimos fazer isso (salvar) varias vezes ao longo do trabalho, sempre que chegar a um resultado que goste então salve, assim não vai perder caso faça alterações que não lhe agradem posteriormente. 

Contador de visitas

O código abaixo mostra quantas vezes uma pessoa visitou seu blog, ele funciona com base nos cookies, ou seja, quando os cookies do navegador(Internet Explorer, Firefox, Opera) forem excluidos a contagem será perdida, mas isso não é um problema pois quase ninguém faz isso.Se quiser contadores de visitas como sitemeter, analytics e outros veja neste link:Usando Melhor os Contadores de Visitas.

Para usar esse código é bom simples basta copiar e colocar no lugar que você deseja que apareça no seu blog. No começo do código tem a frase "Obrigado por sua visita! Você já esteve aqui", você pode alterar para qualquer frase.

Obrigado por sua visita! Você já esteve aqui
<script language=JavaScript>
function getCookieSlsv (offset) {
var endstr = document.cookie.indexOf (";", offset);
if (endstr == -1)
endstr = document.cookie.length;
return unescape(document.cookie.substring(offset, endstr));
}
function GetCookie (name) {
var arg = name + "=";
var alen = arg.length;
var clen = document.cookie.length;
var i = 0;
while (i < clen) {
var j = i + alen;
if (document.cookie.substring(i, j) == arg)
return getCookieSlsv (j);
i = document.cookie.indexOf(" ", i) + 1;
if (i == 0)
break;
}
return null;
}
function SetCookie (name, value) {
var argv = SetCookie.arguments;
var argc = SetCookie.arguments.length;
var expires = (argc > 2) ? argv[2] : null;
var path = (argc > 3) ? argv[3] : null;
var domain = (argc > 4) ? argv[4] : null;
var secure = (argc > 5) ? argv[5] : false;
document.cookie = name + "=" + escape (value) +
((expires == null) ? "" : ("; expires=" + expires.toGMTString()))
+
((path == null) ? "" : ("; path=" + path)) +
((domain == null) ? "" : ("; domain=" + domain)) +
((secure == true) ? "; secure" : "");
}
function DeleteCookie(name) {
var exp = new Date();
FixCookieDate (exp); // Correct for Mac bug
exp.setTime (exp.getTime() - 1); // This cookie is history
var cval = GetCookie (name);
if (cval != null)
document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();
}

var expdate = new Date();
var num_visits;
expdate.setTime(expdate.getTime() + (365*24*60*60*1000));
if (!(num_visits = GetCookie("num_visits")))
num_visits = 0;
num_visits++;
SetCookie("num_visits",num_visits,expdate);
document.writeln(num_visits+" vezes!");
</script>


Para mostrar visitantes online, ou seja, quantas pessoas estão visitando seu blog naquele momento você pode pegar o código aqui. Outra coisa bem interessante é saber o total de visitas e também saber de onde vieram seus visitantes para isso oSitemeter é muito bom, ele fornece estatística detalhadas informa de que site vieram suas visitas, de que cidade ou país, resolução de tela, navegador que seus visitantes usaram e outras coisas. 

Usando Melhor os Contadores de Visitas

Colocar um contador de visitas é bem simples, existem vários sites que fornecem o serviço gratuitamente, aqui tem uma lista de vários contadores de visita grátis, alguns recomendados pela própria pagina de ajuda do blogspot:

Google Analytics
Site Meter
TrendCounter
FreeStats
Easy Hit Counters
StatCounter
Feedjit
Who's amung
BlogUtils

Os últimos 3 da lista mostram visitantes online, ou seja, que estão no seu site naquele momento. Alguns desses sites é necessário fazer cadastro para pegar o código, mas eles são grátis, depois que pegar o código entre na pagina layout, adicionar gadget, html/javascript e coloque o código do contador, clique para salvar e pronto.

Mas para que serve um contador de visitas? Parece uma pergunta boba, mas não é somente para enfeitar o blog ou apenas mostrar quantas visitas já tivemos. Existem varias estatísticas e informações úteis nesses contadores, como por exemplo:
Qual a resolução (tamanho) de tela de nossos visitantes?

Eles usam qual navegador (Internet Explorer, Firefox, Opera...)?
Essas perguntam vão ajudar na hora de modificar o layout ou colocar algumas coisas no blog, quando escrevi esse texto a maioria dos visitantes deste blog usava Internet Explorer e tem uma resolução de tela 1024x768, então devemos deixar o blog da melhor forma possível para esta configuração e não para a do nosso computador, afinal o objetivo de todo blog é agradar seus visitantes e se não é possível deixar ele perfeito em todas as configurações e navegadores, devemos dar prioridade para a maioria..

De qual site eles vieram? Outro blog? Site de busca?
O que pesquisaram para chegar em nosso blog?
Com essas informações podemos melhorar nosso conteúdo, por exemplo, publicando coisas que as pessoas procuram. Ainda podemos saber de quais sites recebemos mais visitas isso pode ser útil na hora de fazer parcerias e outras coisas.

Enfim seja qual for o contador que usar, tente explorar melhor as informações que tem nele e aproveitar da melhor forma possível e certamente acharam muitas coisas interessantes e úteis. 

Como usar o Google Analytics no blog

Um dos melhores contadores de visitas que existem para colocar no seu blog ou site é o Google Analytics, ele é invisível no blog isso muitas vezes pode ser uma vantagem, mas se quiser mostrar o numero de visitas pode usar além do Google Analytics outro contador de visitas no seu blog.
Para instalar o Google Analytics no blog primeiro precisa ter uma conta Google, portanto sugerimos usar a mesma que usa no blogger. Na pagina inicial do Analytics clique em: Adicionar perfil de website»
Google Analytics
Marque a opção Adicionar um perfil a um novo domínio e digite o endereço do seu blog no campo Forneça o URL do site que deseja acompanhar, lembre-se o blogspot não tem www no endereço. Depois veja está estão corretas as informações abaixo sobre usa localização e fuso horário.
Contador de Visitas
Se estiver tudo certo clique no botão concluir logo abaixo, na tela seguinte aparecerá o código que deve colocar no seu blog ele está em Novo Código de acompanhamento (ga.js), copie esse código entre no seu blog na pagina layout, adicionar gadget, html/javascript e cole o código do contador e clique para salvar. Quando visualizar seu blog não verá nada de diferente, esse contador é invisível no blog ou site.

Depois de colocar o código do contador no blog clique no botão concluir na pagina do analytics, o site voltará a pagina inicial e provavelmente verá um símbolo assim na frente do endereço do seu blog, isto é normal, pois acabou de colocar o contador no blog ele levará um dia(24 horas) para começar mostrar as informações. Se clicar para visualizar relatórios irá para a pagina de estatísticas que está somente com números zeros por toda parte, afinal o contador foi colocado agora e está pagina é atualizada uma vez por dia por isso não adianta entrar no site do analytics varias vezes por dia para ver as visitas.

Painel do AnalyticsMas é nesta pagina que futuramente vamos ver muitas coisas preste atenção no menu que tem no lado esquerdo, o item fontes de trafego vai mostrar de quais sites vieram suas visitas isso é muito útil, é através dele que sabemos quais sites enviaram mais visitas para nosso blog e assim organizamos nossa lista de top parceiros e abaixo dele tem conteúdo se clicar nele poderá ver quais paginas do seu blog são as mais visitadas. Claro que tudo isso depois que começarem aparecer às estatísticas desse novo contador que colocamos agora no blog. Como já dissemos demora mais ou menos um dia para você receber as primeiras estatísticas sobre seu blog.

Veja também:
Contadores de visitas grátis
Aparecer nos resultados das pesquisas Google e Yahoo
Como divulgar seu blog
Formulário de contato 

Contador de visitas para blog

Coloque no seu blog um contador de visitas online que ainda mostra nas estatísticas o total de visitantes, países de origem, sistema operacional e navegador utilizado. Além disso, esse contador de visitas pode ser facilmente personalizado com as cores que desejar para ficar com o jeito do seu blog. Além deste existem muitos outros contadores de visitas para blogs, veja aqui: Usando Melhor os Contadores de Visitas

Contador onlineEntre no site TrendCounter e clique no botão Get your own Counter

Então é só escolher as cores clicando nos quadrinhos que estão em branco e preto aguardar alguns segundos e ver como ficou o contador na imagem logo abaixo (preview).

Configurar contador de visitas

Quando chegar num estilo que gostar clique em create counter-code, copie o código e coloque no seu blog pela pagina layout, adicionar gadget, html/javascript.

Contador de visitasOutra coisa interessante que podemos dizer é que mesmo após colocar o contador no seu blog é possível editá-lo, trocar suas cores sem perder o histórico do contador. Para modificar o contador após instalar-lo primeiro copie o código do contador que colocou no seu blog, depois entre no site do TrendCounter, no menu clique na opção Adjust Widget
Iamgem

Na tela seguinte você verá Adjust Widget, Your current HTML-Code: então coloque o código do seu contador atual neste campo de texto e clique em submit form. Agora é só escolher as novas cores ou aparência, clicar em create counter-code, pegar o código e colocar no blog novamente igual fez da primeira vez.

Veja também

Contadores de visitas grátis
Quem está visitando o blog agora?
Contador de visitas invisível 

Personalizar Contador de Visitas - Contador com Outra Imagem

Como colocar um contador de visitas dentro de outra imagem, essa foi uma pergunta que recebemos por e-mail e achei bem interessante a idéia. No site que enviaram como exemplo ele colocou o contador de visitantes online dentro de outro banner e o efeito visual ficou muito bom como podem ver na imagem mais abaixo.

Fazer isso não é tão difícil apenas precisa de um código CSS simples para posicionar a imagem de fundo e o contador no lugar certo. O primeiro passo é criar e hospedar uma imagem, depois pegue o endereço da imagem (....). E também criar ou copiar o código do contador que deseja incluir nesta imagem, isso pode ser feito com qualquer contador ou imagem.


Imagem do site GeraLigado

Agora veja esse código e substitua o endereço da imagem pela aquela que hospedou e o código do contador:

<div style="background:url(endereço da imagem) left no-repeat; height: 100px; width: 256px;"><div style='float:left; padding-top:68px; padding-left:155px;'>código do contador de visitas</div></div>


Vamos ver os outros ajustes necessários no código:

height: 100px; width: 256px; nesta parte coloque a altura (height) e largura (width) da imagem que hospedou, tem que ser os valores exatos.

Em outra parte temos: padding-top:68px; padding-left:155px; isso é o posicionamento do contador então altere os valores até conseguir a posição desejada, os números são margens na seguinte ordem: 68(acima), 155(esquerda).

Sabemos que acertar o posicionamento é uma coisa meio chata de fazer, mas não tem outro jeito só fazendo testes com os valores até chegar ao local correto. 

Hospedar Arquivos Grátis no Google Sites

Além das imagens muitas vezes precisamos ou queremos hospedar outros tipos de arquivos para usar no blog, mas nem sempre é fácil achar uma boahospedagem grátis de arquivos e preferencialmente que seja simples de usar e confiável.

Hospedar Arquivos para Download
Hospedagem de sites gratis
Hospedagem de Imagens

Contudo podemos resolver isso utilizando o Google Sites, eles permitem muitos tipos de arquivos, inclusive mp3(musica), js(códigos javascript), e outros.

O primeiro passo é entrar no Google sites e criar um site se não tiver um (use a mesma conta Google que usa no seu blog), depois que entrar na pagina inicial do seu novo site, clique em mais opção que está do lado direito da pagina.

upload de imagens no google sites
Depois disso na próxima janela no clique no item anexos e depois no botão upload para enviar seu arquivo

google sites - hospedagem gratis
Após enviar o arquivo você só precisa copiar o link de download (Clique com o botão direito do mouse e copie o link)

hospedar arquivos gratis
Entrar nesta pagina pode parecer desnecessário, pois se reparou na pagina anterior já tínhamos os links dos arquivos, mas depois que começar colocar mais arquivos ficará mais difícil encontrar o que deseja, por isso falamos desta pagina.

Agora cole no navegador o link que copiou será algo mais ou mesmos assim:

https://sites.google.com/site/tutoriaisblogger/aviao.mp3?attredirects=0&d=1

Neste exemplo nosso arquivo chama aviao.mp3, então tudo que está depois dele você pode apagar e usar somente o endereço do arquivo:

https://sites.google.com/site/tutoriaisblogger/aviao.mp3

Aqui usamos um som como exemplo que poderia ser utilizado em um player parafazer podcast, mas você pode usar o mesmo procedimento para códigos javascripts e outros tipos de arquivos aceitos pelo site. 

Colocar Aviso de Blog em Manutenção

Muitos blogueiros perguntam sobre como colocar um aviso de blog em manutenção, isso é algo bem simples de fazer, você só precisa colocar algumas linhas de código nos lugares certos na pagina editar HTML e pronto. Claro que além deste código seria possível fazer uma postagem com o aviso de manutenção do site ou mesmo adicionar um gadget no inicio da pagina do seu blog. Em caso de duvidas veja os tutoriais abaixo:
Porque os códigos não funcionam no blog
Problemas para mover ou adicionar gadgets do blog

Mas vamos explicar como deixar somente um texto ou imagem no seu blog dizendo que está em manutenção. Entre na pagina editar HTML e procure por <body.....> aqui pode variar um pouco o que aparece mas o importante é achar <body e logo após essa linha coloque esse código:

<div style='text-align: center;'>sua mensagem</div><div style='display:none'>

No trecho sua mensagem, você pode usar um texto com qualquer formatação ou uma imagem, se tiver duvidas veja:
Como Formatar o Texto do Blog
Como fazer um banner

aviso de blog em manutenção
Agora procure por </body> e antes dele coloque </div>, então ficará deste jeito:

</div>
</body>


Quando quiser retirar essa mensagem de blog em manutenção só precisa apagar esses códigos, portanto preste atenção na hora de colocar para não ter dificuldades na hora de voltar seu blog ao normal.

Caso queira editar seu template será necessário retirar esses códigos para poder visualizar seu blog.

Estamos publicando isso devido a diversos pedidos de nossos visitantes, mas achamos que fazer uma postagem ou colocar uma imagem no inicio do blog são melhores maneiras do que esta para avisar que o blog passará algum tempo sem atualizações ou está em reforma. 

Mudar template do blog - Designer do modelo

Uma novidade no blogger tem sido muito comentada recentemente é o novo recurso Designer do modelo. Realmente isso torna muito mais simples modificar o blog,colocar imagens de fundo e muitas outras coisas, porém ele tem muitas funções então recomendamos que faça uma coisa por vez.

Criar um template para o blog
Primeiro entre no Blogger in Draft, clique em Layout depois em Designer do modelo, você verá a seguinte tela.

Pagina layout do blogspot
Nela já está seleciona da opção Modelos (menu do lado esquerdo) podemos trocar o modelo completo apenas clicando nos template no topo da pagina (Simple, Picture Window, Awesome Inc., Watermark) note sempre aparecerão algumas opções logo abaixo, então poderá selecionar qualquer uma delas.

Agora vamos falar sobre trocar o fundo do blog, clique no menu esquerdo em plano de fundo podemos trocar a cor de tema principal apenas clicando na caixinha (Change the color theme of your blog Go to the Advanced tab to customize colors for specific elements.) Ou num dos temas sugeridos que estão logo abaixo. Outra coisa muito útil é colocar uma imagem de plano de fundo repare que do lado esquerdo de onde mudamos a cor tem uma miniatura da imagem de fundo que estamos usando atualmente se clicar nela verá essa janela onde poderá escolher entre muitas imagens de fundo para o seu blog.


Então é só achar uma que goste clicar sobre ela, depois em concluído e aplicar ao blog (botão no canto direito, parte superior).

Não falamos de todas as opções desta nova pagina por serem coisas demais para um tutorial somente, portanto voltaremos ao assunto da pagina Designer de Modelo outras vezes, mas se explorar e fizer alguns testes sabemos que gostará muito desta novidade do blogger. Como por exemplo, o próximo item layout, ficou muito fácil colocar um blog de 3 colunas, dividir a sediar ou rodapé em duas partes, mas isso já é assunto para uma próxima vez... 

Trocar imagem de fundo no blog - Designer do modelo

Agora o blogger permite enviar imagens de fundo diretamente pela pagina designer do modelo, ficou muito mais simples usar uma imagem de fundo personalizada. Você pode achar ou editar uma imagem para usar como fundo do blog e depois enviar para o blogger sem se preocupar com hospedagem ou endereços de imagens de fundo.

Video Tutorial - Trocar imagem de fundo do seu blogVeja esse video tutorial: Trocar imagem de fundo do seu blog

Imagem de fundo no blogspot
Faça login no Blogger in Draft, clique em designer, depois em designer do modelo,plano de fundo e clique no link fazer upload da imagem, então é só achar a imagem que desejar uma com background(fundo do blog), depois salvar. E já está pronto, mas veja que temos algumas opções interessantes nesta pagina.

Alinhar imagem de fundoposicionamento da imagem de fundo ficou muito simples de fazer, isso é o mesmo que posicionar a imagem de fundo, veja na imagem abaixo e escolha o lugar onde a imagem aparecerá no seu blog.

Outra novidade muito legal é escolher se a imagem de fundo se repetirá ou não e também podemos deixar ofundo do blog fixo deixando apenas o conteúdo se mover e a imagem de fundo permanecendo fixa quando usar a barra de rolagem.

Posicionar imagem de fundo no bloggerVeja como funciona cada uma das opções:
Não dividir em blocos: a imagem aparece apenas uma vez
Bloco: a imagem se repete pela pagina toda
Dividir horizontalmente: ela aparece lado a lado
Dividir verticalmente: aparece uma embaixo da outra

A opção abaixo Rolar com a página faz a imagem do blog acompanhar a barra de rolagem, se desmarcar essa opção a imagem de fundo ficará fixa, somente o conteúdo (postagens, sidebar) irão se mover quando usar a barra de rolagem da pagina.

Vimos essa informação no blog do Blogger, para nós foi um pouco chato afinal faz pouco tempo fizemos um tutorial falando como colocar uma imagem de fundo no blog, o que agora ficou muito mais simples e rápido, mas tudo bem, não poderíamos adivinhar.
Related Posts with Thumbnails

Mais Opções Fontes no Blogger - Novos Tipos de Letras


Mais Opções Fontes no Blogger - Novos Tipos de Letras

Agora o Blogger in Draft (O que é o Blogger Draft? (Blogger em Rascunho)) tem novas fontes para você usar no seu blog, isso para quem já usa os templates novos, mas se não for seu caso você pode usar o Google fontes para adicionar novas fontes no seu blog. Esperamos que em breve esse recurso esteja também disponível no blogger para todos os blogueiros, afinal são poucos que usam o blogger in draft.

novas fontes no blog

Para usar esses novos tipos de letras no seu blog você só precisa entrar em designer,designer do modelo. Na janela seguinte clique em avançado e já poderá escolher as fontes que desejar usar no seu blog. Além disso, nesta pagina existem outras alterações possíveis para fazer no seu template, como por exemplo trocar imagem de fundo no blog.



Após alterar os tipos de letras do seu texto(veja também: Como Formatar o Texto do Blog), títulos das postagens, títulos dos gadgets e tudo mais que desejar só precisa clicar em aplicar ao blog, mas sugerimos fazer isso (salvar) varias vezes ao longo do trabalho, sempre que chegar a um resultado que goste então salve, assim não vai perder caso faça alterações que não lhe agradem posteriormente. 

Contador de visitas

O código abaixo mostra quantas vezes uma pessoa visitou seu blog, ele funciona com base nos cookies, ou seja, quando os cookies do navegador(Internet Explorer, Firefox, Opera) forem excluidos a contagem será perdida, mas isso não é um problema pois quase ninguém faz isso.Se quiser contadores de visitas como sitemeter, analytics e outros veja neste link:Usando Melhor os Contadores de Visitas.

Para usar esse código é bom simples basta copiar e colocar no lugar que você deseja que apareça no seu blog. No começo do código tem a frase "Obrigado por sua visita! Você já esteve aqui", você pode alterar para qualquer frase.

Obrigado por sua visita! Você já esteve aqui
<script language=JavaScript>
function getCookieSlsv (offset) {
var endstr = document.cookie.indexOf (";", offset);
if (endstr == -1)
endstr = document.cookie.length;
return unescape(document.cookie.substring(offset, endstr));
}
function GetCookie (name) {
var arg = name + "=";
var alen = arg.length;
var clen = document.cookie.length;
var i = 0;
while (i < clen) {
var j = i + alen;
if (document.cookie.substring(i, j) == arg)
return getCookieSlsv (j);
i = document.cookie.indexOf(" ", i) + 1;
if (i == 0)
break;
}
return null;
}
function SetCookie (name, value) {
var argv = SetCookie.arguments;
var argc = SetCookie.arguments.length;
var expires = (argc > 2) ? argv[2] : null;
var path = (argc > 3) ? argv[3] : null;
var domain = (argc > 4) ? argv[4] : null;
var secure = (argc > 5) ? argv[5] : false;
document.cookie = name + "=" + escape (value) +
((expires == null) ? "" : ("; expires=" + expires.toGMTString()))
+
((path == null) ? "" : ("; path=" + path)) +
((domain == null) ? "" : ("; domain=" + domain)) +
((secure == true) ? "; secure" : "");
}
function DeleteCookie(name) {
var exp = new Date();
FixCookieDate (exp); // Correct for Mac bug
exp.setTime (exp.getTime() - 1); // This cookie is history
var cval = GetCookie (name);
if (cval != null)
document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();
}

var expdate = new Date();
var num_visits;
expdate.setTime(expdate.getTime() + (365*24*60*60*1000));
if (!(num_visits = GetCookie("num_visits")))
num_visits = 0;
num_visits++;
SetCookie("num_visits",num_visits,expdate);
document.writeln(num_visits+" vezes!");
</script>


Para mostrar visitantes online, ou seja, quantas pessoas estão visitando seu blog naquele momento você pode pegar o código aqui. Outra coisa bem interessante é saber o total de visitas e também saber de onde vieram seus visitantes para isso oSitemeter é muito bom, ele fornece estatística detalhadas informa de que site vieram suas visitas, de que cidade ou país, resolução de tela, navegador que seus visitantes usaram e outras coisas. 

Usando Melhor os Contadores de Visitas

Colocar um contador de visitas é bem simples, existem vários sites que fornecem o serviço gratuitamente, aqui tem uma lista de vários contadores de visita grátis, alguns recomendados pela própria pagina de ajuda do blogspot:

Google Analytics
Site Meter
TrendCounter
FreeStats
Easy Hit Counters
StatCounter
Feedjit
Who's amung
BlogUtils

Os últimos 3 da lista mostram visitantes online, ou seja, que estão no seu site naquele momento. Alguns desses sites é necessário fazer cadastro para pegar o código, mas eles são grátis, depois que pegar o código entre na pagina layout, adicionar gadget, html/javascript e coloque o código do contador, clique para salvar e pronto.

Mas para que serve um contador de visitas? Parece uma pergunta boba, mas não é somente para enfeitar o blog ou apenas mostrar quantas visitas já tivemos. Existem varias estatísticas e informações úteis nesses contadores, como por exemplo:
Qual a resolução (tamanho) de tela de nossos visitantes?

Eles usam qual navegador (Internet Explorer, Firefox, Opera...)?
Essas perguntam vão ajudar na hora de modificar o layout ou colocar algumas coisas no blog, quando escrevi esse texto a maioria dos visitantes deste blog usava Internet Explorer e tem uma resolução de tela 1024x768, então devemos deixar o blog da melhor forma possível para esta configuração e não para a do nosso computador, afinal o objetivo de todo blog é agradar seus visitantes e se não é possível deixar ele perfeito em todas as configurações e navegadores, devemos dar prioridade para a maioria..

De qual site eles vieram? Outro blog? Site de busca?
O que pesquisaram para chegar em nosso blog?
Com essas informações podemos melhorar nosso conteúdo, por exemplo, publicando coisas que as pessoas procuram. Ainda podemos saber de quais sites recebemos mais visitas isso pode ser útil na hora de fazer parcerias e outras coisas.

Enfim seja qual for o contador que usar, tente explorar melhor as informações que tem nele e aproveitar da melhor forma possível e certamente acharam muitas coisas interessantes e úteis. 

Como usar o Google Analytics no blog

Um dos melhores contadores de visitas que existem para colocar no seu blog ou site é o Google Analytics, ele é invisível no blog isso muitas vezes pode ser uma vantagem, mas se quiser mostrar o numero de visitas pode usar além do Google Analytics outro contador de visitas no seu blog.
Para instalar o Google Analytics no blog primeiro precisa ter uma conta Google, portanto sugerimos usar a mesma que usa no blogger. Na pagina inicial do Analytics clique em: Adicionar perfil de website»
Google Analytics
Marque a opção Adicionar um perfil a um novo domínio e digite o endereço do seu blog no campo Forneça o URL do site que deseja acompanhar, lembre-se o blogspot não tem www no endereço. Depois veja está estão corretas as informações abaixo sobre usa localização e fuso horário.
Contador de Visitas
Se estiver tudo certo clique no botão concluir logo abaixo, na tela seguinte aparecerá o código que deve colocar no seu blog ele está em Novo Código de acompanhamento (ga.js), copie esse código entre no seu blog na pagina layout, adicionar gadget, html/javascript e cole o código do contador e clique para salvar. Quando visualizar seu blog não verá nada de diferente, esse contador é invisível no blog ou site.

Depois de colocar o código do contador no blog clique no botão concluir na pagina do analytics, o site voltará a pagina inicial e provavelmente verá um símbolo assim na frente do endereço do seu blog, isto é normal, pois acabou de colocar o contador no blog ele levará um dia(24 horas) para começar mostrar as informações. Se clicar para visualizar relatórios irá para a pagina de estatísticas que está somente com números zeros por toda parte, afinal o contador foi colocado agora e está pagina é atualizada uma vez por dia por isso não adianta entrar no site do analytics varias vezes por dia para ver as visitas.

Painel do AnalyticsMas é nesta pagina que futuramente vamos ver muitas coisas preste atenção no menu que tem no lado esquerdo, o item fontes de trafego vai mostrar de quais sites vieram suas visitas isso é muito útil, é através dele que sabemos quais sites enviaram mais visitas para nosso blog e assim organizamos nossa lista de top parceiros e abaixo dele tem conteúdo se clicar nele poderá ver quais paginas do seu blog são as mais visitadas. Claro que tudo isso depois que começarem aparecer às estatísticas desse novo contador que colocamos agora no blog. Como já dissemos demora mais ou menos um dia para você receber as primeiras estatísticas sobre seu blog.

Veja também:
Contadores de visitas grátis
Aparecer nos resultados das pesquisas Google e Yahoo
Como divulgar seu blog
Formulário de contato 

Contador de visitas para blog

Coloque no seu blog um contador de visitas online que ainda mostra nas estatísticas o total de visitantes, países de origem, sistema operacional e navegador utilizado. Além disso, esse contador de visitas pode ser facilmente personalizado com as cores que desejar para ficar com o jeito do seu blog. Além deste existem muitos outros contadores de visitas para blogs, veja aqui: Usando Melhor os Contadores de Visitas

Contador onlineEntre no site TrendCounter e clique no botão Get your own Counter

Então é só escolher as cores clicando nos quadrinhos que estão em branco e preto aguardar alguns segundos e ver como ficou o contador na imagem logo abaixo (preview).

Configurar contador de visitas

Quando chegar num estilo que gostar clique em create counter-code, copie o código e coloque no seu blog pela pagina layout, adicionar gadget, html/javascript.

Contador de visitasOutra coisa interessante que podemos dizer é que mesmo após colocar o contador no seu blog é possível editá-lo, trocar suas cores sem perder o histórico do contador. Para modificar o contador após instalar-lo primeiro copie o código do contador que colocou no seu blog, depois entre no site do TrendCounter, no menu clique na opção Adjust Widget
Iamgem

Na tela seguinte você verá Adjust Widget, Your current HTML-Code: então coloque o código do seu contador atual neste campo de texto e clique em submit form. Agora é só escolher as novas cores ou aparência, clicar em create counter-code, pegar o código e colocar no blog novamente igual fez da primeira vez.

Veja também

Contadores de visitas grátis
Quem está visitando o blog agora?
Contador de visitas invisível 

Personalizar Contador de Visitas - Contador com Outra Imagem

Como colocar um contador de visitas dentro de outra imagem, essa foi uma pergunta que recebemos por e-mail e achei bem interessante a idéia. No site que enviaram como exemplo ele colocou o contador de visitantes online dentro de outro banner e o efeito visual ficou muito bom como podem ver na imagem mais abaixo.

Fazer isso não é tão difícil apenas precisa de um código CSS simples para posicionar a imagem de fundo e o contador no lugar certo. O primeiro passo é criar e hospedar uma imagem, depois pegue o endereço da imagem (....). E também criar ou copiar o código do contador que deseja incluir nesta imagem, isso pode ser feito com qualquer contador ou imagem.


Imagem do site GeraLigado

Agora veja esse código e substitua o endereço da imagem pela aquela que hospedou e o código do contador:

<div style="background:url(endereço da imagem) left no-repeat; height: 100px; width: 256px;"><div style='float:left; padding-top:68px; padding-left:155px;'>código do contador de visitas</div></div>


Vamos ver os outros ajustes necessários no código:

height: 100px; width: 256px; nesta parte coloque a altura (height) e largura (width) da imagem que hospedou, tem que ser os valores exatos.

Em outra parte temos: padding-top:68px; padding-left:155px; isso é o posicionamento do contador então altere os valores até conseguir a posição desejada, os números são margens na seguinte ordem: 68(acima), 155(esquerda).

Sabemos que acertar o posicionamento é uma coisa meio chata de fazer, mas não tem outro jeito só fazendo testes com os valores até chegar ao local correto. 

Hospedar Arquivos Grátis no Google Sites

Além das imagens muitas vezes precisamos ou queremos hospedar outros tipos de arquivos para usar no blog, mas nem sempre é fácil achar uma boahospedagem grátis de arquivos e preferencialmente que seja simples de usar e confiável.

Hospedar Arquivos para Download
Hospedagem de sites gratis
Hospedagem de Imagens

Contudo podemos resolver isso utilizando o Google Sites, eles permitem muitos tipos de arquivos, inclusive mp3(musica), js(códigos javascript), e outros.

O primeiro passo é entrar no Google sites e criar um site se não tiver um (use a mesma conta Google que usa no seu blog), depois que entrar na pagina inicial do seu novo site, clique em mais opção que está do lado direito da pagina.

upload de imagens no google sites
Depois disso na próxima janela no clique no item anexos e depois no botão upload para enviar seu arquivo

google sites - hospedagem gratis
Após enviar o arquivo você só precisa copiar o link de download (Clique com o botão direito do mouse e copie o link)

hospedar arquivos gratis
Entrar nesta pagina pode parecer desnecessário, pois se reparou na pagina anterior já tínhamos os links dos arquivos, mas depois que começar colocar mais arquivos ficará mais difícil encontrar o que deseja, por isso falamos desta pagina.

Agora cole no navegador o link que copiou será algo mais ou mesmos assim:

https://sites.google.com/site/tutoriaisblogger/aviao.mp3?attredirects=0&d=1

Neste exemplo nosso arquivo chama aviao.mp3, então tudo que está depois dele você pode apagar e usar somente o endereço do arquivo:

https://sites.google.com/site/tutoriaisblogger/aviao.mp3

Aqui usamos um som como exemplo que poderia ser utilizado em um player parafazer podcast, mas você pode usar o mesmo procedimento para códigos javascripts e outros tipos de arquivos aceitos pelo site. 

Colocar Aviso de Blog em Manutenção

Muitos blogueiros perguntam sobre como colocar um aviso de blog em manutenção, isso é algo bem simples de fazer, você só precisa colocar algumas linhas de código nos lugares certos na pagina editar HTML e pronto. Claro que além deste código seria possível fazer uma postagem com o aviso de manutenção do site ou mesmo adicionar um gadget no inicio da pagina do seu blog. Em caso de duvidas veja os tutoriais abaixo:
Porque os códigos não funcionam no blog
Problemas para mover ou adicionar gadgets do blog

Mas vamos explicar como deixar somente um texto ou imagem no seu blog dizendo que está em manutenção. Entre na pagina editar HTML e procure por <body.....> aqui pode variar um pouco o que aparece mas o importante é achar <body e logo após essa linha coloque esse código:

<div style='text-align: center;'>sua mensagem</div><div style='display:none'>

No trecho sua mensagem, você pode usar um texto com qualquer formatação ou uma imagem, se tiver duvidas veja:
Como Formatar o Texto do Blog
Como fazer um banner

aviso de blog em manutenção
Agora procure por </body> e antes dele coloque </div>, então ficará deste jeito:

</div>
</body>


Quando quiser retirar essa mensagem de blog em manutenção só precisa apagar esses códigos, portanto preste atenção na hora de colocar para não ter dificuldades na hora de voltar seu blog ao normal.

Caso queira editar seu template será necessário retirar esses códigos para poder visualizar seu blog.

Estamos publicando isso devido a diversos pedidos de nossos visitantes, mas achamos que fazer uma postagem ou colocar uma imagem no inicio do blog são melhores maneiras do que esta para avisar que o blog passará algum tempo sem atualizações ou está em reforma. 
 
DICAS DO BLOGUEIRO. Blogger-SB template es una adaptación del template de Blogger, adaptada por SebaKito, disponible en Somos Blogger.