Ferramentas Para Blogger

Redirecionando Blogs

2010-05-18T09:44:00.000-07:00

Essa e uma ferramenta bem objetiva e simples de instalar, com um código pequeno. Não vai dar trabalho e vai tomar menos de 1 minuto pra fazer.

* Abra o editor do antigo blog q será redirecionado. Vá em “Layout” e depois “Elementos de página”.
* Agora crie um novo gadget do tipo “HTML/JavaScript” e lá cole o código que vem aqui com a devida alteração:

<script language="javascript" type="text/javascript">
location.replace("URL do BLOG")
</script>

* Salve e abra o seu antigo endereço para ver se funcionou.

Recomenda-se tirar todas as postagens do antigo blog e os elementos q lá estavam, deixando ele bem simples, pois isso agiliza o redirecionamento.

Colocar Imagem no Titulo do Post

2010-05-18T09:43:00.000-07:00

Se você quiser dar um melhor estilo aos titulos de suas postagem e acrescentar uma imagem ao titulo, você terá que fazer alteração no HTML do seu blog e para isso,vá em 'Layout' >> 'Editar HTML'.
Procure no corpo do HTML do seu blog, o código de comando do Título do Post, que geralmente é .post h3 ou .post-title.
(Você pode utilizar ctrl+f para encontrar o código)

.post h3 {
background:transparent url("URL da IMAGEM") no-repeat left top;
margin:.25em 0 0;
padding:10px 0 8px 50px;
font-size:140%;
line-height:1.4em;
color:$titlecolor;
}

A Linha 'Background' determina o fundo do título do post, é lá que você coloca a imagem que você quer , conforme está configurado no código acima.
No exemplo acima a imagem não não repete e se apresenta no topo à esquerda.

A linha 'Padding' determina as margens internas do título do post. Você deve configura-la para que o título não fique em cima da imagem.

Os outros comandos da linha significam:

no-repeat → a imagem não deve repetir;
left → imagem alinhada à esquerda;
top → imagem alinhada no topo.

No exemplo acima as medidas são:
padding:10px(margem superior) 0(margen direita) 8px(margem inferior) 50px(margem esquerda);
Mas você pode alterá=las de acordo com a configuração de seu template.

Paginação Numerada

2010-05-18T09:42:00.000-07:00

Editar HTML e procure por ]]></b:skin> Antes dela adicione:

.showpageArea {
font-family:verdana,arial,helvetica;
color: #000;
font-size:11px;
margin:10px;
}

.showpageArea a {
color: #000;
text-shadow:0 1px 2px #fff;
font-weight: 700;
}

.showpageNum a {
padding: 3px 8px;
margin:0 4px;
text-decoration: none;
border:1px solid #919106;
-webkit-border-radius:3px;-moz-border-radius:3px;
background: #ddd url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp2.jpg) 0 -50px repeat-x;
}

.showpageNum a:hover {
border:1px solid #aeae0a;
background: #ccc url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp2.jpg) 0 -25px repeat-x;
}

.showpageOf{
margin:0 8px 0 0;
}

.showpagePoint {
color:#fff;
text-shadow:0 1px 2px #333;
padding: 3px 8px;
margin: 2px;
font-weight: 700;
-webkit-border-radius:3px;-moz-border-radius:3px;
border:1px solid #919106;
background: #666 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp2.jpg) 0 0 repeat-x;
text-decoration: none;
}

E Salva!

Depois

Vai em editar html e procure por </body> Antes dele coloque:


<b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord ='';
var downPageWord ='';
</script>
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
</b:if>


Inportante alterar o valor var pageCount=5; com o numero de postagens que vc tenha na home para fica ajusta sem erros.

Mais Formatos de Numeração Aqui

Removendo a mensagem “Mostrando postagens com marcador…” do seu Blog

2010-05-18T09:39:00.000-07:00

Encontre o seguinte código (utilizando o Ctrl+F do seu navegador):

]]></b:skin>

Então cole o seguinte código ANTES:

.status-msg-wrap{display:none;}

Deixe seu blog perfeito

2010-05-18T09:37:00.001-07:00

Não deixe seu blog demorar muito tempo para abrir, pois quem tem conexão discada pode desistir de esperar. Para isso existem itens que carregam o blog:
- Scripts - Colocar um excesso de scripts incha o blog. Se você não sabe, scripts são: efeitos no mouse, texto na barra de status, cursores, mensagem que abre...
- Imagens - No template não deixe com imagens grandes e também não encha com milhões de mini-imagens. Coloque no Maximo umas 20 pequenas. As imagens NUNCa devem ser em formato .bmp, pois são mais de 10 vezes maiores que o .jpg com a mesma qualidade.
- Nas configurações de seu blog, não deixe que ultrapasse o limite de 7 posts publicados pois quanto mais posts no seu blog, mais tempo para carregar.

Templates
Procure um template legal, recomendo não usar os templates padrões dos servidores de blogs pois são muito comuns.
Se for escolher um template ou fazer um, veja se ele possui comentários, arquivos, lugar para você colocar seu perfil (com seus dados)
- O template também não deve chamar mais atenção que seus posts, pois afinal você quer um blog, ou a exibição do template?
- A fonte dos posts não devem ser muito grande para não poluir todo o visual. Também recomendo não colocar todo o post em negrito (apenas as partes que quiser), idem para itálico.
- O template não deve ter muitas cores chamativas, desde que sejam apenas nos detalhes.
- Muitas pessoas recomendam não utilizar o fundo preto, não acho problema neste ponto, porém tenha atenção com as imagens que vá incluir, pois quando elas tem um grande fundo branco o contraste fica tão grande que não fica bom.
- Barras de Rolagem (Scroll) - Devem ser coloridas, já viu coisa mais linda do que estas setinhas configuradas de acordo com o template?

Posts
- Escrever antes o post no bloco de notas para que você possa corrigir com paciência e antes da página expirar.
- Não escreva confuso, pois o visitante pode as vezes não compreender o que você queria. Organize suas idéias. Porque não separa por assuntos, horas ou acontecimentos?
- Nunca escreva todo o post com letras MAIÚSCULAS ou AlTeRnAdAs. Uma parece estar gritando e a outra é difícil de se ler respectivamente.
- Tente escrever mais de 2 linhas para que seu blog não seja feito apenas de imagens, tenha criatividade.
- Poste apenas o que tem a ver com o que você sente, não coloque qualquer coisa para agradar aos visitantes. O blog é seu, portanto quem não gostar que feche.

Perfil
- Escreva sobre você
- Coloque dados como seu nome, cidade, icq, e-mail
- Acrescente um contador, para ver como estão as visitas a seu blog
- Inclua imagens que você acha que combina com você e com seu blog
- Linke suas Home Pages preferidas (É uma forma de agradecer a elas)
- Linke Blogs Amigos (Seus amigos vão adorar ver que você os linkou!)

Geral
- Dê preferências a coisas originais. O ideal é que o seu blog tenha um conteúdo totalmente criado por você, como imagens, posts, mensagens. Sei que fazer tudo é impossível, então, coloque o que você sente ou gosta. Copie a musica que combina com o que esta sentindo, uma imagem que recebeu de um amigo, uma foto engraçada que você nem agüentou de tanto rir, uma home page que você adorou ter descoberto.... Portanto, foque tudo em você! Blog é isso: Personalidade!

Visite outros Blogs
- Visitando outros blogs, você também aprende como melhorar o seu. Aproveite e deixe um comentário, pois assim, você tem uma grande chance de aumentar as visitas aos seu!

Mostrar quantas postagens e comentários tem seu blog

2009-10-24T20:51:00.000-07:00

Mostre a seus visitantes quantas postagens você já publicou em seu blog e oo número de comentários. Copie o código abaixo e ole no HTML/Javascript em seu Blogger. Coloque o nome de seu blog e salve.

Este blog tem: <script style="text/javascript">
function showpostcount(json) {
document.write(parseInt(json.feed.openSearch$totalResults.$t,10));
}</script>
<script src="http://NOME DO SEU BLOG.blogspot.com/feeds/posts/default?alt=json-in-script&callback=showpostcount"></script> postagens e
<script src="http://NOME DO SEU BLOG.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showpostcount"></script>comentários

Botões de avaliação das postagens

2009-10-24T20:37:00.000-07:00

Agora no Blogger poderemos colocar botões para avaliação abaixo de cada postagem. Mas este recurso só está disponível no Blogger Draft.Para obter este recurso clique AQUI e entre no Blogger Draft.

Clique em "Layout"

Agora clique em "Editar" em POSTAGENS NO BLOG

Agora ao abrir essa janela você verá "Reações", selecione a caixinha.

Salve !

Agora vá até o HTML do seu blog, clique em "Expandir modelos de widget" e procure pelo código:

<div class='post-footer-line post-footer-line-3'/>

Cole então depois dele o seguinte código:

<span class='reaction-buttons'>
<b:if cond='data:top.showReactions'>
<table border='0' cellpadding='0' width='100%'><tr>
<td valign='center'><span class='reactions-label'>
<data:top.reactionsLabel/></span>
</td>
<td><iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/></td>
</tr></table>
</b:if>
</span>

Bloqueando Ctrl+U

2009-10-24T20:26:00.001-07:00

Neste tópico estou trazendo uma maneira simples e fácil de se bloquear o botão direito em sites apenas utilizando HTML.

- Bloqueando Botão Direito

Substitua a tag <body> do seu site por essa abaixo:

Citação:

Claro que existe uma maneira de burlar essa técnica, mas não vou citar neste tópico.

- Bloqueando Teclado para que o usuário não use o famoso CTRL + U

Substitua a tag <body> do seu site por essa abaixo:

Citação:

Espero ter ajudado.

Como criar um script para criar um popunder em todos os links da home de sites.

2009-07-25T19:50:00.000-07:00

Primeiro pegue esse codigo clik aqui para ver o codigo

depois é so troca o link aonde esta http://www.startgamesonline.com e por o seu

e salva com o nome popunder.js

Depois voce tera que hospedar!!!existi alguns sites para hospeda graituitos que não me recordo agora,soh pesquisa na net que vc encontra.

depois de ter hospedado vc pega o link da hospedagem e coloque aqui:

<script src='COLOQUE O LINK QUE VC HOSPEDOU AQUI'></script>

é so pega o script acima e ir ate seu layout e add e salva

LEMBRANDO QUE ESSE JS É PARA ABRIR A CADA CLIQUE UNICO DE CADA USUARIO!!!
SE VC DESEJA QUE SEU JS ABRE TODA HORA EM TODOS OS CLIQUES É SO FAZER O MSM PROCESSO COM ESSE LINK
AI É A MSM COISA SO TROCAR OS 2 ENDEREÇOS PELO O SEU.
Pedido Por caio.

Classificação de estrelas nos posts do seu blog

2009-07-17T19:24:00.000-07:00

Estava navegando pela net quando encontrei este widget muito legal, ate já coloquei no blogtools,ele permite aos visitantes dar uma nota de 1 a 5 para os posts do blog, Basta um clique para que o usuário possa manifestar a sua opinião sobre a postagem,esta ferramenta funciona no blogger antigo, no novo blogger e também no wordpress.

Para cadastrar-se clique aqui

1° Preencha os campos:

username:seu nome se usuário
Password:sua senha
repeat password:Repita a senha
email:digite um e-mail válido
Enter numbers:Coloque os números que aparecem na imagem

clique em register

2°Em seguida escolha uma imagem para o seu avatar.
Para quem usa o novo blogger como nós copie o código da janela new blogger.
Va até editar HTML e marque a caixa expandir modelos de Widget
Localize a frase div class='post-footer (use ctrl+f para fica mais fácil)cole o código logo abaixo da frase e clique em salvar.

Para que o widget fique no início da postagem cole o código abaixo desta frase
div class='post-body

Saiba o número de visitas de qualquer site

2009-07-17T08:08:00.000-07:00

Saiba o numero de visitantes de qualquer site, de graça!

Quer saber a média de visitas diárias que aquele blog ou site do mesmo segmento que o seu (a.k.a. Concorrente) deve ter? Com o Statbrain.com você pode e o melhor, sem gastar nada!

O serviço, que é gratuito e dispensa cadastro, calcula a média de visitantes diários de qualquer site levando em conta esteatíticas matemáticas combinadas com informações públicas de serviços como Alexa Rank, Google e Yahoo!

Segundo o Statbrain.com o UsuárioCompulsivo tem uma média de 2,144 visitas diárias. Um número impressionantemente preciso, tratando-se de um serviço que não tem acesso aos nossos dados estatísticos reais.

Blog Spams

2009-07-10T11:51:00.000-07:00

um amigo meu acaba de ler isso no painel do blogger dele:
Este blog foi bloqueado devido à possíveis violações dos Termos de Serviço do Blogger. Não será possível publicar novas postagens até que o blog seja analisado e desbloqueado.

Este blog será excluído em 20 dias caso você não solicite uma análise.

++++

Será que passaram os 20 dias?

++++

Update!

Quando cliquei novamente em Solicitar análise de desbloqueio abriu uma janela com mensagem:

Seu blog está marcado como spam

Os robôs de prevenção contra spam do Blogger detectaram que seu blog possui características de um blog de spams. (O que é um blog de spams?) Uma vez que você está lendo esta seção, seu blog provavelmente não é um blog de spams. A detecção automática de spams é inerentemente confusa. Pedimos desculpas por este falso sinal positivo.

Recebemos sua solicitação de desbloqueio em 27 de Janeiro de 2009. Em nome dos robôs, desculpamo-nos por bloquear seu blog, que não é de spams. Aguarde enquanto analisamos seu blog e verificamos se ele não é um blog de spams.

Saiba mais sobre como o Blogger está lutando contra os blogs de spams.

+++

É a vida...

PS: Ô povo pra responder rápido!
PS2: O mais interessante é que ele diz que o blog não é de spams e pede para que eu aguarde enquanto analisam meu blog e verificam se não é de spams. Pelo menos estou postando normalmente. Estava procurando um mote para um post de retorno e ele veio!

Olá!

Alguém denunciou o Blog! O Google que tem sede no Brasil somente analisa blog quando se é denunciado.

Spans são aquelas coisas que você recebe no seu e-mail, orkut, etc.. sem querer. São links que são enviados as caixas de e-mails das pessoas sem que elas solicitem!
Se vc habilitou a opção notificar membros sobre as postagens no blog? pode ser que um próprio membro tenha denuciado, agora o correto é vc ir em configurações, e desabilitar a opção notificar sobre novas postagens!
Essas coisas assim!Isso pode ajudar!
Mas a medida q o google analisar seu blog e perceber que não se trata disso não irão deletar(espero)! mas por segurança salva suas postagens, e todo conteúdo do blog e tbm faça uma lista de seguidores do blog, assim vc poderá criar outro blog com outra conta caso esse seja deletado!
Boa Sorte!
Ferramentas para blogger

Menu muda de cor e link aumenta, on mouse(Super Pedido)

2009-05-28T10:09:00.000-07:00

Esse menu é fácil, muda de cor e a fonte aumenta ao passar o mouse, os dois efeitos são opcionais assim como pode ser adicionado outros efeitos, esse é feito usando css mas vou deixar um link para outro menu usando DHTML(tags JavaScript) nesse segundo menu não requer o uso de um script, apenas as tags onmouseover, e poucas outras, todas elas vão diretamente no link o que o torna muito simples,(Bom para usar em poucos locais) só que tem um porém esse segundo menu que está em outro post não tem seus efeitos de mudança de cor se o navegador do usuário não tiver JavaScript ativado.
Menu muda de cor com DHTML
Aumenta link ao passar o mouse(rato) a:hover {font-weight:bold;} no css.
Aumenta bastante o link ao passar o mouse a:hover {font-weight:bolder;} no css.

Menu muda de cor com css

O menu usa estilo css e div mais se quiser pode ser feito com table apesar de estar meio ultrapassado e se for observar poucos sites e blogs novos as utilizam.
Vou começar com o style css que deve ir entre as tags <head></head> ou arquivo.css externo:


<head>
<style type="text/css">

.lateral {border:1px solid #ccc;
position:relative;
width:270px;
text-decoration:none;}

a.menu {border:1px solid #ccc;
position:relative;
font: 12px Arial, Helvetica, sans-serif;
color:blue;
text-decoration:none;
display:block;
background-color:#CCFFFF;}

a.menu:hover {font-weight:bolder;
color:red;
background-color:#CCC;
text-decoration:none;
}
</style>
</head>

Agora a parte que vai no <body>corpo</body> do html, no caso do blogspot é mais aconselhável inserir em layout, add elemento, HTML/JavaScript(apesar de não usar JavaScript):

Link imagem blogger Link favoritos Passa o mouse muda imagem

Eu vou explicar algumas tags mais fáceis de mudar e que fazem modificações na apresentação do menu:
Uma explicação sobre o código css(não use esses):

DIV que "segura" os links do menu
.lateral { pode ser mudado as configurações da DIV onde fica os liks width:270px;(largura) deve ser maior que o tamanho do link}

configuração do link antes de passar o rato(mouse)
a.menu {
font: 12px Arial, Helvetica, sans-serif;(tamanho e tipo de fonte do link)
color:blue;(cor azul da fonte do link, poderia ser #0066CC)
text-decoration:none;(não permite que o link fique com um traço embaixo...)
display:block; (vai fazer o link se estender lateralmente até a largura total da div)
background-color:#CCFFFF;(cor de fundo do link)}

configuração do link ao passar o rato
a.menu:hover {
font-weight:bolder;(faz a fonte "aumentar" muito, negrito)
color:red;(cor vermelha da fonte do link)
background-color:#CCC;(cor cinza, fundo do link)}

Para a fonte aumentar(negrito) um pouco font-weight:bold;
font: 14px Arial, Helvetica, sans-serif; (poderia ser adicionado, para aumentar o link ao passar o mouse uma fonte maior) no css para a.menu:hover{ }

Se for usar no blogspot e mexer no HTML faça uma cópia dele antes se vc não está muito habituado, o próprio css de um blog ou site pode influenciar, mas dificilmente da grande diferença, faça testes o pior que pode acontecer é aprender com algum erro.
Se usar folha de estilo externa e existir estilização css no seu html(in line)essa terá prioridade. Para saber tudo de css visite o site do maujor.
Agora vou colocar o css no HTML, fazer o teste no blog e ver como funciona.

Agora sem usar a div lateral na volta dos links, e, sem o display:block;(no css) que tem a função de ocupar espaço lateral total. Se tiver espaço os links do menu ficarão lado a lado:

CSS aumentar Fazer menu Css Subir

<a class="menu" href="#">Link imagem blogger</a>
<a class="menu" href="#">Link favoritos</a>
<a class="menu" href="#">Menu dhtml</a>

Usando Domínio Próprio no Blogger - .com, .net. etc

2009-05-12T14:15:00.000-07:00

Nesse tutorial você irá saber como usar um domínio próprio no Blogger, ou seja, www.seublog.com, ao invez de .blogspot.com.

Usaremos o Locaweb para registar o domínio, pois o serviço é conhecido e eu uso sem problemas.

Sumário:

1º - Escolhendo um nome de domínio;
2º - Comprando o Domínio;
3º - Configurando o Domínio;
4º - Configurando o Blogger;
5º - Testando o novo Domínio.

1º - Escolhendo o nome de domínio

Caso seu blog ja tenha uma certa fama pelo nome, ou ja tenha algum tempo de vida, melhor continuar com o nome atual. Mas caso ele seja novo ainda, você deve escolher um nome fácil de memorizar, de preferência pequeno. Seria bom também se não tivesse acentuação no nome, Um nome Original seria ótimo, pois ao buscar pelo nome do blog, ele viria nas primeiras posições do buscador.

Obs.: Não é fácil escolher um nome.

2º - Comprando o Domínio

Para comprar o domínio visite o Site da Locaweb, na parte:

• REGISTRE JÁ O SEU DOMÍNIO NA LOCAWEB:

Passe o mouse sobre a opção que você deseja:

Nacional ou Internacional

Lembrando que nacional é R$ 30 e internacional é R$ 15.

Digite o nome de domínio que você escolheu, e depois clique em Procurar, caso o domínio não estiver disponível tente outros, quando achar um clique em “Registre Já“.

Se você ainda não for cliente locaweb, marque a 2ª Opção, e depois clique em adicionar.

PAGAMENTO COM CARTÃO DE CRÉDITO LIBERA O DOMÍNIO NA HORA, COM BOLETO É PRECISO ESPERAR CONFIRMAR O PAGAMENTO.

Faça o cadastro e finalize.

3º - Configurando o Domínio

Bom não lembro ao certo pra onde você vai quando você se cadastra e faz um registro junto, então volte a página inicial do Locaweb e faça o login.

Você entrará no painel da locaweb. Em serviços contratados você verá o domínio que você acabou de registrar, caso você tenha feito o pagamento via cartão de crédito, já estará liberado para configurar, caso não, você terá que esperar processar o pagamento do boleto.

Clique em um Papel com um Lápis, ao lado direito do domínio.

Na parte DOMÍNIOS, clique em um sinal de mais [+] ao lado esquerdo do domínio, depois em edição de DNS, e logo em seguida em Edição da Zona de DNS.

Agora insira um registro “CNAME” sendo que em “Entrada” você coloca www e em “conteúdo” você preenche com ghs.google.com, Salve.

4º - Configurando o Blogger

Agora vem a parte mais fácil.

Faça o login no painel do Blogger, e clique em Configurações do seu blog.

Clique na aba Publicação, e depois clique em Domínio Personalizado.

O Blogger irá te perguntar: “Já tem um domínio? Ir para configurações avançadas“, Faça o que ele manda.

Em Seu domínio preencha com o domínio que você registrou na locaweb, Ex.: www.nome.com. Depois Salve as Configurações

5º - Testando o novo Domínio

Talves não de resultados ainda, pois tem que esperar que a configuração se propague na internet. Então você deve esperar algum tempo, para entrar no ar.

É isso ai, qualquer dúvida ou correção, comente ai.

Personalizar o Widget dos Seguidores

2009-05-08T07:10:00.000-07:00

Não faz muito tempo que os Seguidores (Followers) está disponível no Blogger/blogspot .

Eu vi alguns tutoriais que ensinavam a personalizar o widget (remover ou alterar alguns links como Acompanhar, Pare de Acompanhar e etc.

O código abaixo, personaliza as imagens do widget. Veja:

.follower a img {

opacity:0.5;filter:

alpha(Opacity=50);

border:3px solid #ffffff;

display:block;

}

.follower a img:hover {

opacity:1.0;

filter:alpha(Opacity=100, FinishedOpacity=100);

border:3px solid #99cc00;

display:block;

}

Em que:

A parte em verde faz com que a imagem fique desbotada, e quando passar o mouse a sua cor volta ao normal. Eu recomendo que ela não seja modificada, se você preferir, apenas remova-a.

O trecho que está em vermelho, indica como será a borda da imagem normal. Onde, 3px indica a largura da borda, solid o tipo de borda, e #ffffff.

Esses valores podem ser modificados da seguinte maneira:

3px pode ser alterado para qualquer valor maior que 0px;

Solid pode ser alterado para:

none

hidden

dotted

dashed

solid

double

groove

ridge

inset

outset

#ffffff indica a cor da borda (no caso branca), para ver mais cores clique < a href="http://downloadmediacenter.googlepages.com/tabeladecores.htm" target="_blank">AQUI

A outra parte do código que está em azul, indica como vai ficar a borda da imagem quando passar o mouse sobre ela. As modificações dessa parte podem ser feitas do mesmo jeito que você modificou a parte em vermelho.

Depois de modificar o código: vá para Layout > Editar HTML, faça um backup do seu template (clique em baixar modelo completo).

Cole o código antes de ]]></b:skin> (CTRL + F para procurar).

Salve.

Esse foi o primeiro tutorial sobre como personalizar o widget dos seguidores.

O segundo eu já estou preparando.

E, por enquanto é só!

Valeu!

Como Instalar Estatisticas do Google Analytics no Blogger ou Qualquer Site

2009-04-22T20:47:00.000-07:00

Google Analytics é a ferramenta do Google para gerenciar o tráfego do seu site/blog. Depois de instalar você pode ver relatórios de quem acessou seu site, como chegou lá, qual página foi visualizada e muitos outros relatórios que ajudam a identificar pontos positivos e negativos.

Instalar o Google Analytics no seu site é fácil, vamos aos passos:

1) Crie uma conta no site Google Analytics, se você já tem um Gmail basta usar seu login e senha.

2) Na página de configuração do Analytics adicione um perfil de site. Basta entrar o endereço (URL) do seu site. www.meusite.com. Deixe a opção “adicionar um perfil a um novo domínio”.

3) Quando você clicar em “continuar” o Analytics gera um código que deve ser inserido em uma página que é sempre visualizada no seu site, algo como o cabeçalho ou rodapé, onde qualquer página que um visitante chegue executará o código do Google. Para obter o código você deve clicar em “Verificar o site” na página principal do Analytics. O código começa com algo como:

<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> </script> <script type="text/javascript"> _uacct = "UA-77777-1"; urchinTracker(); </script>

o UA-77777-1 é o identificador da sua conta.

4) Vou dividir este item em categorias:

Blogger: Entre no seu Blogger e vá nas suas configuraçõs (Manage - “aba” - Layout). Dentro de “page elements” adicione um “page element” (add a page element).

Wordpress: Entre nas opções Presentation - Theme Editor. Encontre na esquerda o arquivo footer.php e edite ele (continue lendo).

Para qualquer blog ou página: No arquivo html, procure pelo texto: </body> e cole o código do analytics antes dele.

5) (somente blogger) Na janela que abre, clique “add to blog” na caixa “HTML/Javascript”.

6) (somente blogger) Cole o código que você pegou da página do Google Analytics dentro da caixa de texto. Deixe o título em branco.

Após algumas horas seus relatórios de tráfego estarão disponíveis no Google Analytics. Demora assim pela característica do serviço de não colocar as estatísticas em tempo real. Se você precisa de algo mais rápido utilize o Sitemeter.

Blogger Backup

2009-04-10T19:46:00.000-07:00

Blogger Backup é um utilitário para backup e restauração de todas as postagens de seu blog hospedado no Blogger.
Utilizando a biblioteca GData C#, o programa salva cada postagem, da mais recente à mais antiga, em arquivos com extensão XML.

Roda em Windows 98, NT, 2000, Millenium, XP

Disponível nos idiomas Inglês

Blogger Backup

Texto deslizando

2009-04-10T03:33:00.000-07:00

Coloque aqui seu texto! ! !

Texto rolante, texto deslizando, texto móvel, subindo, fazer uma faixa de texto... Existem dezenas de modos de descrever o texto que se move na pagina, mas o código para fazer isso é o marquee.
O texto acima foi feito com o seguinte código:

Agora vamos entender como isso funciona:

behavior="alternate" o texto fica indo e voltando.
behavior="scroll" é o modo normal, o texto entra por um lado e sai pelo outro
behavior="slide" o texto entra e para quando chega ao final da linha.

scrolldelay="2"
scrollamount="2"

direction="left" é a direção que o texto se desloca, pode ser left(esquerda), right(direita), up(para cima) down(para baixo)

width="400" isso é a largura que o texto percorerá. Pode ser qualquer valor e para que ocupe tudo o espaço disponivel simplesmente apague essa parte do código.
height="50" o mesmo que width, mas esse controla a largura.

onMouseOver=this.stop() onMouseOut=this.start() e finalmente esta parte do código que faz com que o texto pare de movimentar quando o mouse está sobre ele.

Blog com 3 Colunas

2009-04-10T03:30:00.001-07:00

Antes de começar a mudar seu template para 3 colunas você deve salvar uma cópia do seu template original, pois essa mudança é um pouco complicada de fazer e caso você não consiga deixar seu blog do jeito que deseja será fácil voltar tudo ao normal tendo uma cópia salva no seu computador. Então vá até a página editar html e clique em Baixar modelo completo, então salve o arquivo e se tiverem problemas é só colocar esse modelo novamente nesta mesma página onde está escrito Faça upload de um modelo de um arquivo no seu computador.
Na explicação usarei varias vezes {..........} isso quer dizer que tem alguns códigos que não teria utilidade colocar aqui pois isso muda para cada modelo de blog, mas o procedimento para alterar qualquer um deles é o mesmo, clique e veja um exemplo de sidebar na pagina editar html.
Depois que salvar uma cópia do modelo vamos colocar a terceira coluna no blog, na página editar html procure onde está #sidebar{.........} e logo abaixo coloque:

#newsidebar-wrapper {
background-color: #cccccc;
width: 170px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

A linha background-color:#cccccc; serve para colocar um fundo cinza na nova coluna, isso é somente para ficar mais fácil visualizar e acertar a largura dela, depois apague essa linha e a cor cinza desaparece. Quando falei acertar a largura estou me referindo a largura de cada coluna(essa que estamos criando e a que já existia), a largura das postagens também a largura total do blog. Para acertar isso olhe os seguintes códigos, o primeiro (760px) é a largura total do blog, 400px(largura das postagens) e 150px(largura da coluna que já existia no blog):

#content-wrapper {
width: 760px;

#main-wrapper {
width: 400px;

#sidebar-wrapper {
width: 150px;

Você precisa ajustar os valores para que a soma das duas colunas(sidebar-wrapper, e a que estamos fazendo agora) e da postagem(main-wrapper) seja menor que a largura total do blog(content-wrapper). Não deixe uma conta exata pois existem padding e margin que são espaços vazios nas margens e não estão incluídos nos valores. Portanto se quando visualizar seu blog as 2 colunas e a postagem não ficarem uma do lado da outra diminua um pouco o valor das colunas e postagem ou aumente a largura do blog. Mas antes de visualizar o blog precisamos colocar a segunda parte do código.
Agora procure por:

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Postagens no blog' type='Blog'/>
</b:section>
</div>

Então copie a segunda parte<div id='sidebar-wrapper'> fazendo as alterações para a nova coluna

<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='novabarra' preferred='yes'>
<b:widget id='HTML2' locked='false' title='' type='HTML'/>
</b:section>
</div>

Note que alterei as partes em negrito(newsidebar e novabarra). Depois de fazer essas mudanças coloque isso antes do techo acima. Outra coisa indispensável para isso funcionar é colocar alguma coisa que já existia no seu blog nesta nova coluna, foi o que fiz com a linha <b:widget id="HTML2" locked="false" title=""
type="HTML">, mas lembre-se de apagar essa linha na coluna antiga. Mas não se preocupe esta linha não for exatamente igual pois à parte HTML2 depende de quantas coisas você tem no blog, o importante é copiar uma linha para a nova coluna senão criaremos uma coluna vazia e ficará difícil visualizar.
Portanto esse trecho ficará assim:
<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='novabarra' preferred='yes'>
<b:widget id='HTML2' locked='false' title='' type='HTML'/>
</b:section>
</div>

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Postagens no blog' type='Blog'/>
</b:section>
</div>

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Arquivo' type='BlogArchive'/>
</b:section>
</div>

Depois de feito tudo isto é só salvar e pronto já conseguimos adicionar uma nova coluna ao blog. Se você agora remova a linha background-color: #cccccc; para tirar o fundo cinza da nova coluna pois como falei no inicio ela só servia para ficar mais fácil a visualização. As outras alterações como colocar mais coisas na nova coluna pode ser feito pela página modelo adicionando elementos de pagina do mesmo modo que da outra coluna que já existia no blog.

Bloquear teclado e botao direito

2009-04-10T03:23:00.000-07:00

Encontrei um novo código para bloquear o botão direito do mouse e o teclado, assim impedindo o uso do crtl+C (copiar), testei esse código no Internet Explorer e Firefox e funcionou perfeitamente em ambos. Porém se você colocar esse código no seu blog ele também impedirá que seus visitantes digitem qualquer coisa no seu blog. Então se você usa pesquisas, recados ou qualquer outra coisa que precise ser digitada diretamente no seu blog não use esse código porque impossibilitará o uso desses acessórios do seu site.
No blogspot adicione esse código pela pagina editar layout >> adicionar gadget >> html/javascript, não importa lugar do código na página. Veja o código abaixo:

<script language="JavaScript">
function click() {
if (event.button==2||event.button==3) {
oncontextmenu='return false'; alert ('Todos os direitos reservados');
}
}
function keypresed() {
alert(' Teclado Desabilitado ');
}
document.onkeydown=keypresed;
document.onmousedown=click
document.oncontextmenu = new Function("return false;")
</script>

As frases “Todos os direitos reservados” e “Teclado Desabilitado” podem ser substituídas por qualquer outra. Apenas preciso avisar que a frase “Todos os direitos reservados” não é exibida no Firefox embora o botão direito do mouse seja bloqueado.

Link para Página Layout

2009-04-10T03:15:00.000-07:00

Algumas pessoas disseram que a palavra layout sumiu do painel do blogspot e não conseguem editar mais seu modelo. Imagino que isso seja uma falha momentânea e logo voltará ao normal. Porém enquanto isso existe alguns meio de chegar até a página layout sem clicar nesse link do painel.

Depois que fizer login entre no seu blog e na barra do blogspot aparece a palavra personalizar, clicando nela vamos para a página layout. Outra maneira de chegar lá é copiando o numero do nosso blog da barra de endereço, ela aparece assim:

http://www.blogger.com/post-create.g?blogID=..............

No lugar dos pontinhos tem um monte de números isso é a identificação do seu blog. Então copie esses números e cole nesse aqui:

http://www.blogger.com/rearrange?blogID=.......

Isso também levará você até a página layout, ou ainda no painel clicando em configurações ou editar postagens aparece uma janela com varias guias e também podemos usar esse caminho.

Seja qual for a maneira utilizada depois que conseguir chegar onde quer pode adicionar a pagina layout aos favoritos do seu blog, então passará a entrar diretamente nela em vez do painel. Essa idéia a pagina nos favoritos também é útil para quem tem vários blogs pode adicionar a pagina de postagem de cada um deles nos favoritos e deste modo vai diretamente para a página de nova postagem do blog que deseja sem ter que passar por nenhuma outra antes.

Domínio Grátis

2009-04-10T03:13:00.000-07:00

Muitas pessoas que tem um blog ou um site não gostam do endereço do blog e até pensam em registrar um domínio, mas não querem gastar dinheiro com isso, embora os serviços pagos sejam melhores ou terão alguns recursos a mais, existem vários que fazem isso de graça.Então se gostou da idéia de ter um domínio sem gastar nada entre no site e faça seu cadastro: quando entrar no site em cima tem Chance Language e uma caixinha para selecionar então fica mais fácil mudar para português se não estiver assim.Mais ou menos no meio da tela, terá um lugar para escrever o domínio que pretende registrar, então digite o nome que quiser e clique verificar, não precisa colocar http://.

Se o que você escolheu estiver disponível e escrito gratuito em "continue to registration" ou continuar registro, às vezes aparece em português.

Irá aparecer uma pagina de loggin. Clique em “Create an account now” ou crie uma conta, você será direcionado para uma pagina de cadastro, preencha, obs: não se esqueça de marcar o quadradinho "I accept the Terms of Service".

Depois de preenchido clique em "create an account now" criar conta agora.
Na nova página que aparecer clique em "Set up" configurar.
Agora clique no "3. URL Forwarding". E preencha os dados do seu site:

Redirect To : http:// (www.seusite.blogspot.com)
Page Title : (O titulo da seu site )
Frame URL Hiding(Hide real address) já aparece nesta opção.
Meta Description: (Descrição do seu site)
Meta Keywords: (palavras chaves do seu site para sites de busca. ex: humor, piadas... etc)

Clique em "Set up", botão abaixo e pronto, agora você já tem mais um domínio e não gastou nada. Nem todas as partes são exatamente as mesmas palavras, pois fiz o cadastro com o site em português. O único cuidado é escolher um domínio que seja gratuito (free), pois às vezes aparecem alguns que já são registrados e você poderia comprar ou usar outros serviços no site.

Lista de Blogs

2009-04-10T03:11:00.000-07:00

Um gadget que achei interessante e oferece várias opções é o adicionar lista de blogs, ele permite você mostrar uma lista das últimas atualizações de outros blogs e tem várias opções do que mostrar desses blogs inclusive exibir uma miniatura das imagens publicadas destes outros blogs.

Entre na página layout, adicionar gadget, lista de blogs e aparecerá essa janela. O primeiro passo é adicionar o endereço dos blogs que vamos usar em nossa lista, clique em adicione um blog à sua lista, coloque o endereço de um blog na janela que abre e clique no botão adicionar. Repita esse procedimento até adicionar todos os blogs que deseja.

Agora veja na parte de cima dessa tela tem várias opções uma delas é Snippet do item mais recente isso são as primeiras linhas do texto da postagem. Os demais itens da lista são fáceis de identificar qual a função. Se quiser mude o titulo e a forma de classificar que pode ser ordem alfabética ou postagem mais recente, sugerimos deixar nesta segunda classificação por ordem de postagem.

Quando terminar clique no botão salvar e veja o resultado, e claro depois de visualizar pode fazer alterações até chegar ao estilo que mais goste e combine com seu blog.

Código das Cores

2009-04-10T03:09:00.000-07:00

Quando vamos mudar a cor de alguma coisa no blog ou site precisamos saber qual o código HTML da cor que vamos usar, porque o template é feito em CSS usando códigos para definir as cores de tudo menos as imagens é claro. Então aqui está uma lista com o código de muitas cores para você usar como quiser no seu blog.

Apesar do blogspot ter uma página de cores com algumas opções elas são limitadas então procure a cor que gostar na lista abaixo e copie o código para usar no blog, esses códigos serem para mudar a cor de tudo: fundo do blog, cores das letras, fundo das postagens ou sidebar, cores das bordas, enfim qualquer cor que veja num blog é definido através desses códigos. Então é só usar a lista de cores e deixar seu blog mais bonito e com cores diferentes. Essa lista foi adaptada apartir de uma página do site MXStudio.

Snow -#FFFAFA

GhostWhite#F8F8FF

WhiteSmoke #F5F5F5

Gainsboro #DCDCDC

FloralWhite #FFFAF0

OldLace #FDF5E6

Linen #FAF0E6

AntiqueWhite #FAEBD7

PapayaWhip #FFEFD5

BlanchedAlmond #FFEBCD

Bisque #FFE4C4

PeachPuff #FFDAB9

NavajoWhite #FFDEAD

Moccasin #FFE4B5

Cornsilk #FFF8DC

Ivory #FFFFF0

LemonChiffon #FFFACD

Seashell #FFF5EE

Honeydew #F0FFF0

MintCream #F5FFFA

Azure #F0FFFF

AliceBlue #F0F8FF

lavender #E6E6FA

LavenderBlush #FFF0F5

MistyRose #FFE4E1

White #FFFFFF

Black #000000

DarkSlateGray #2F4F4F

DimGrey #696969

SlateGrey #708090

LightSlateGray #778899

Grey #BEBEBE

LightGray #D3D3D3

MidnightBlue #191970

NavyBlue #000080

CornflowerBlue #6495ED

DarkSlateBlue #483D8B

SlateBlue #6A5ACD

MediumSlateBlue #7B68EE

LightSlateBlue #8470FF

MediumBlue #0000CD

RoyalBlue #4169E1

Blue #0000FF

DodgerBlue #1E90FF

DeepSkyBlue #00BFFF

SkyBlue #87CEEB

LightSkyBlue #87CEFA

SteelBlue #4682B4

LightSteelBlue #B0C4DE

LightBlue #ADD8E6

PowderBlue #B0E0E6

PaleTurquoise #AFEEEE

DarkTurquoise #00CED1

MediumTurquoise #48D1CC

Turquoise #40E0D0

Cyan #00FFFF

LightCyan #E0FFFF

CadetBlue #5F9EA0

MediumAquamarine #66CDAA

Aquamarine #7FFFD4

DarkGreen #006400

DarkOliveGreen #556B2F

DarkSeaGreen #8FBC8F

SeaGreen #2E8B57

MediumSeaGreen #3CB371

LightSeaGreen #20B2AA

PaleGreen #98FB98

SpringGreen #00FF7F

LawnGreen #7CFC00

Green #00FF00

Chartreuse #7FFF00

MedSpringGreen #00FA9A

GreenYellow #ADFF2F

LimeGreen #32CD32

YellowGreen #9ACD32

ForestGreen #228B22

OliveDrab #6B8E23

DarkKhaki #BDB76B

PaleGoldenrod #EEE8AA

LtGoldenrodYello #FAFAD2

LightYellow #FFFFE0

Yellow #FFFF00

Gold #FFD700

LightGoldenrod #EEDD82

goldenrod #DAA520

DarkGoldenrod #B8860B

RosyBrown #BC8F8F

IndianRed #CD5C5C

SaddleBrown #8B4513

Sienna #A0522D

Peru #CD853F

Burlywood #DEB887

Beige #F5F5DC

Wheat #F5DEB3

SandyBrown #F4A460

Tan #D2B48C

Chocolate #D2691E

Firebrick #B22222

Brown #A52A2A

DarkSalmon #E9967A

Salmon #FA8072

LightSalmon #FFA07A

Orange #FFA500

DarkOrange #FF8C00

Coral #FF7F50

LightCoral #F08080

Tomato #FF6347

OrangeRed #FF4500

Red #FF0000

HotPink #FF69B4

DeepPink #FF1493

Pink #FFC0CB

LightPink #FFB6C1

PaleVioletRed #DB7093

Maroon #B03060

MediumVioletRed #C71585

VioletRed #D02090

Magenta #FF00FF

Violet #EE82EE

Plum #DDA0DD

Orchid #DA70D6

MediumOrchid #BA55D3

DarkOrchid #9932CC

DarkViolet #9400D3

BlueViolet #8A2BE2

Purple #A020F0

MediumPurple #9370DB

Thistle #D8BFD8

Snow1 #FFFAFA

Snow2 #EEE9E9

Snow3 #CDC9C9

Snow4 #8B8989

Seashell1 #FFF5EE

Seashell2 #EEE5DE

Seashell3 #CDC5BF

Seashell4 #8B8682

AntiqueWhite1 #FFEFDB

AntiqueWhite2 #EEDFCC

AntiqueWhite3 #CDC0B0

AntiqueWhite4 #8B8378

Bisque1 #FFE4C4

Bisque2 #EED5B7

Bisque3 #CDB79E

Bisque4 #8B7D6B

PeachPuff1 #FFDAB9

PeachPuff2 #EECBAD

PeachPuff3 #CDAF95

PeachPuff4 #8B7765

NavajoWhite1 #FFDEAD

NavajoWhite2 #EECFA1

NavajoWhite3 #CDB38B

NavajoWhite4 #8B795E

LemonChiffon1 #FFFACD

LemonChiffon2 #EEE9BF

LemonChiffon3 #CDC9A5

LemonChiffon4 #8B8970

Cornsilk1 #FFF8DC

Cornsilk2 #EEE8CD

Cornsilk3 #CDC8B1

Cornsilk4 #8B8878

Ivory1 #FFFFF0

Ivory2 #EEEEE0

Ivory3 #CDCDC1

Ivory4 #8B8B83

Honeydew1 #F0FFF0

Honeydew2 #E0EEE0

Honeydew3 #C1CDC1

Honeydew4 #838B83

LavenderBlush1 #FFF0F5

LavenderBlush2 #EEE0E5

LavenderBlush3 #CDC1C5

LavenderBlush4 #8B8386

SlateGray4 #6C7B8B

LightSteelBlue1 #CAE1FF

LightSteelBlue2 #BCD2EE

LightSteelBlue3 #A2B5CD

LightSteelBlue4 #6E7B8B

LightBlue1 #BFEFFF

LightBlue2 #B2DFEE

LightBlue3 #9AC0CD

LightBlue4 #68838B

LightCyan1 #E0FFFF

LightCyan2 #D1EEEE

LightCyan3 #B4CDCD

LightCyan4 #7A8B8B

PaleTurquoise1 #BBFFFF

PaleTurquoise2 #AEEEEE

PaleTurquoise3 #96CDCD

PaleTurquoise4 #668B8B

CadetBlue1 #98F5FF

CadetBlue2 #8EE5EE

CadetBlue3 #7AC5CD

CadetBlue4 #53868B

Turquoise1 #00F5FF

Turquoise2 #00E5EE

Turquoise3 #00C5CD

Turquoise4 #00868B

Cyan1 #00FFFF

Cyan2 #00EEEE

Cyan3 #00CDCD

Cyan4 #008B8B

DarkSlateGray1 #97FFFF

DarkSlateGray2 #8DEEEE

DarkSlateGray3 #79CDCD

DarkSlateGray4 #528B8B

Aquamarine1 #7FFFD4

Aquamarine2 #76EEC6

Aquamarine3 #66CDAA

Aquamarine4 #458B74

DarkSeaGreen1 #C1FFC1

DarkSeaGreen2 #B4EEB4

DarkSeaGreen3 #9BCD9B

DarkSeaGreen4 #698B69

SeaGreen1 #54FF9F

SeaGreen2 #4EEE94

MistyRose1 #FFE4E1

MistyRose2 #EED5D2

MistyRose3 #CDB7B5

MistyRose4 #8B7D7B

Azure1 #F0FFFF

Azure2 #E0EEEE

Azure3 #C1CDCD

Azure4 #838B8B

SlateBlue1 #836FFF

SlateBlue2 #7A67EE

SlateBlue3 #6959CD

SlateBlue4 #473C8B

RoyalBlue1 #4876FF

RoyalBlue2 #436EEE

RoyalBlue3 #3A5FCD

RoyalBlue4 #27408B

Blue1 #0000FF

Blue2 #0000EE

Blue3 #0000CD

Blue4 #00008B

DodgerBlue1 #1E90FF

DodgerBlue2 #1C86EE

DodgerBlue3 #1874CD

DodgerBlue4 #104E8B

SteelBlue1 #63B8FF

SteelBlue2 #5CACEE

SteelBlue3 #4F94CD

SteelBlue4 #36648B

DeepSkyBlue1 #00BFFF

DeepSkyBlue2 #00B2EE

DeepSkyBlue3 #009ACD

DeepSkyBlue4 #00688B

SkyBlue1 #87CEFF

SkyBlue2 #7EC0EE

SkyBlue3 #6CA6CD

SkyBlue4 #4A708B

LightSkyBlue1 #B0E2FF

LightSkyBlue2 #A4D3EE

LightSkyBlue3 #8DB6CD

LightSkyBlue4 #607B8B

SlateGray1 #C6E2FF

SlateGray2 #B9D3EE

SlateGray3 #9FB6CD

Firebrick4 #8B1A1A

Brown1 #FF4040

Brown2 #EE3B3B

Brown3 #CD3333

Brown4 #8B2323

Salmon1 #FF8C69

Salmon2 #EE8262

Salmon3 #CD7054

Salmon4 #8B4C39

LightSalmon1 #FFA07A

LightSalmon2 #EE9572

LightSalmon3 #CD8162

LightSalmon4 #8B5742

Orange1 #FFA500

Orange2 #EE9A00

Orange3 #CD8500

Orange4 #8B5A00

DarkOrange1 #FF7F00

DarkOrange2 #EE7600

DarkOrange3 #CD6600

DarkOrange4 #8B4500

Coral1 #FF7256

Coral2 #EE6A50

Coral3 #CD5B45

Coral4 #8B3E2F

Tomato1 #FF6347

Tomato2 #EE5C42

Tomato3 #CD4F39

Tomato4 #8B3626

OrangeRed1 #FF4500

OrangeRed2 #EE4000

OrangeRed3 #CD3700

OrangeRed4 #8B2500

Red1 #FF0000

Red2 #EE0000

Red3 #CD0000

Red4 #8B0000

DeepPink1 #FF1493

DeepPink2 #EE1289

DeepPink3 #CD1076

DeepPink4 #8B0A50

HotPink1 #FF6EB4

HotPink2 #EE6AA7

Gold2 #EEC900

HotPink3 #CD6090

HotPink4 #8B3A62

Pink1 #FFB5C5

Pink2 #EEA9B8

Pink3 #CD919E

Pink4 #8B636C

LightPink1 #FFAEB9

LightPink2 #EEA2AD

LightPink3 #CD8C95

LightPink4 #8B5F65

PaleVioletRed1 #FF82AB

PaleVioletRed2 #EE799F

PaleVioletRed3 #CD6889

PaleVioletRed4 #8B475D

Maroon1 #FF34B3

Maroon2 #EE30A7

Maroon3 #CD2990

Maroon4 #8B1C62

VioletRed1 #FF3E96

VioletRed2 #EE3A8C

VioletRed3 #CD3278

VioletRed4 #8B2252

Magenta1 #FF00FF

Magenta2 #EE00EE

Magenta3 #CD00CD

Magenta4 #8B008B

Orchid1 #FF83FA

Orchid2 #EE7AE9

Orchid3 #CD69C9

Orchid4 #8B4789

Plum1 #FFBBFF

Plum2 #EEAEEE

Plum3 #CD96CD

Plum4 #8B668B

MediumOrchid1 #E066FF

MediumOrchid2 #D15FEE

MediumOrchid3 #B452CD

MediumOrchid4 #7A378B

DarkOrchid1 #BF3EFF

DarkOrchid2 #B23AEE

DarkOrchid3 #9A32CD

DarkOrchid4 #68228B

Purple1 #9B30FF

Purple2 #912CEE

SeaGreen3 #43CD80

SeaGreen4 #2E8B57

PaleGreen1 #9AFF9A

PaleGreen2 #90EE90

PaleGreen3 #7CCD7C

PaleGreen4 #548B54

SpringGreen1 #00FF7F

SpringGreen2 #00EE76

SpringGreen3 #00CD66

SpringGreen4 #008B45

Green1 #00FF00

Green2 #00EE00

Green3 #00CD00

Green4 #008B00

Chartreuse1 #7FFF00

Chartreuse2 #76EE00

Chartreuse3 #66CD00

Chartreuse4 #458B00

OliveDrab1 #C0FF3E

OliveDrab2 #B3EE3A

OliveDrab3 #9ACD32

OliveDrab4 #698B22

DarkOliveGreen1 #CAFF70

DarkOliveGreen2 #BCEE68

DarkOliveGreen3 #A2CD5A

DarkOliveGreen4 #6E8B3D

Khaki1 #FFF68F

Khaki2 #EEE685

Khaki3 #CDC673

Khaki4 #8B864E

LightGoldenrod1 #FFEC8B

LightGoldenrod2 #EEDC82

LightGoldenrod3 #CDBE70

LightGoldenrod4 #8B814C

LightYellow1 #FFFFE0

LightYellow2 #EEEED1

LightYellow3 #CDCDB4

LightYellow4 #8B8B7A

Yellow1 #FFFF00

Yellow2 #EEEE00

Yellow3 #CDCD00

Yellow4 #8B8B00

Gold1 #FFD700

Gold3 #CDAD00

Gold4 #8B7500

Goldenrod1 #FFC125

Goldenrod2 #EEB422

Goldenrod3 #CD9B1D

Goldenrod4 #8B6914

DarkGoldenrod1 #FFB90F

DarkGoldenrod2 #EEAD0E

DarkGoldenrod3 #CD950C

DarkGoldenrod4 #8B658B

RosyBrown1 #FFC1C1

RosyBrown2 #EEB4B4

RosyBrown3 #CD9B9B

RosyBrown4 #8B6969

IndianRed1 #FF6A6A

IndianRed2 #EE6363

IndianRed3 #CD5555

IndianRed4 #8B3A3A

Sienna1 #FF8247

Sienna2 #EE7942

Sienna3 #CD6839

Sienna4 #8B4726

Burlywood1 #FFD39B

Burlywood2 #EEC591

Burlywood3 #CDAA7D

Burlywood4 #8B7355

Wheat1 #FFE7BA

Wheat2 #EED8AE

Wheat3 #CDBA96

Wheat4 #8B7E66

Tan1 #FFA54F

Purple3 #7D26CD

Purple4 #551A8B

MediumPurple1 #AB82FF

MediumPurple2 #9F79EE

MediumPurple3 #8968CD

MediumPurple4 #5D478B

Thistle1 #FFE1FF

Thistle2 #EED2EE

Thistle3 #CDB5CD

Thistle4 #8B7B8B

grey11 #1C1C1C

grey21 #363636

grey31 #4F4F4F

grey41 #696969

grey51 #828282

grey61 #9C9C9C

grey71 #B5B5B5

gray81 #CFCFCF

gray91 #E8E8E8

DarkGrey #A9A9A9

DarkBlue #00008B

DarkCyan #008B8B

DarkMagenta #8B008B

DarkRed #8B0000

LightGreen #90EE90

Chocolate3 #CD661D

Chocolate4 #8B4513

Firebrick1 #FF3030

Firebrick2 #EE2C2C

Firebrick3 #CD2626

Gold4 #8B7500

Goldenrod1 #FFC125

Goldenrod2 #EEB422

Goldenrod3 #CD9B1D

Goldenrod4 #8B6914

DarkGoldenrod1 #FFB90F

DarkGoldenrod2 #EEAD0E

DarkGoldenrod3 #CD950C

DarkGoldenrod4 #8B658B

RosyBrown1 #FFC1C1

RosyBrown2 #EEB4B4

RosyBrown3 #CD9B9B

RosyBrown4 #8B6969

IndianRed1 #FF6A6A

IndianRed2 #EE6363

IndianRed3 #CD5555

IndianRed4 #8B3A3A

Sienna1 #FF8247

Sienna2 #EE7942

Sienna3 #CD6839

Sienna4 #8B4726

Burlywood1 #FFD39B

Burlywood2 #EEC591

Burlywood3 #CDAA7D

Burlywood4 #8B7355

Tan2 #EE9A49

Tan3 #CD853F

Tan4 #8B5A2B

Chocolate1 #FF7F24

Chocolate2 #EE7621

Formulário de Contato

2009-04-10T03:08:00.000-07:00

Umas das coisas mais importantes em um blog é saber a opinião das pessoas que visitam o blog. Afinal só assim podemos saber o que devemos colocar ou tirar do blog conforme a procura ou reações de nossos visitantes. Para fazer isso você pode deixar seu e-mail no blog, mas também pode colocar um formulário para contato, afinal é bem mais fácil os visitantes preencherem algumas linhas de um formulário do que enviar um email.

Existem vários sites que fazem esses formulários de contado grátis, você só precisa fazer um cadastro, copiar o código e colocar no seu blog, entre na página layout, clique em adicionar gadget, escolha a opção html/javascript e cole o código

e pronto, quando alguém usar o formulário no seu blog você receberá a mensagem no seu e-mail e alguns sites ainda tem outros serviços relacionados a envio e recebimento de mensagens através do site. Logo abaixo com uma lista com sites que fazem gratuitamente esse tipo de serviço.

Formulário Pro
Wufoo
Contactify
Email Me Form

Caso você use ou conheça algum outro site que faça esse serviço de contato direito através do site, e tenha boa qualidade nos serviços deixe um comentário e vamos colocá-lo nesta lista Afinal sempre é bom ter mais opções.

Botão do diHITT

2009-04-10T03:07:00.000-07:00

Para publicar algo entre o texto de cada postagem e os comentários é relativamente simples de fazer. Entre na pagina editar html e salve uma cópia do seu modelo por uma questão de segurança, assim se tiver algum problema poderá facilmente voltar ao modelo antigo. Depois disso clique para expandir modelos de widgets e procure por:

<data:post.body/>

<div style='clear: both;'/>

Agora é só colocar o que desejar entre essas linhas e pronto, esse conteúdo aparecerá no final de cada postagem, antes dos comentários. Você pode colocar imagem, link, enfim o que quiser inserir entre o texto e os comentários do blog. Isso serve até para colocar o botão votar do Dihitt. Depois que terminar de fazer as alterações o trecho acima ficará assim:

<data:post.body/>

Código que você quiser

<div style='clear: both;'/>

Clique para visualizar seu blog e se estiver tudo do jeito que você quer clique para salvar e pronto.

Ícone na barra de endereço e favoritos

2009-04-10T03:04:00.000-07:00

Para colocar uma imagem no lugar do ícone do blogspot na barra de endereços do navegador, primeiro você precisa converter e hospedar uma imagem no formato .ico, então vamos começar convertendo uma imagem normal(.jpg, .gif ou .png) em .ico para isso vamos usar o site Converticon 2.1, quando entrar no site clique no botão Get Started, vai abrir uma janela para você procurar a imagem no seu computador, veja embaixo da linha aonde vai o nome do arquivo caso o tipo de arquivo estiver em icon(ico) troque para image(png, gif, jpeg) e encontre a imagem. Quando você clicar na imagem ela já aparecerá na tela, então clique em Export sugerimos escolher 32 x 32 ou 16 x16 e clique em save as. Esta parte já está pronta, convertemos uma imagem normal em uma imagem para ícone da barra de endereços.

Agora vamos hospedar esse ícone, um site que faz o serviço de hospedagem de arquivo .ico gratuitamente é o MerryPic, clique em arquivo e encontre onde a imagem que vamos usar como ícone, depois clique em upload, na tela seguinte copie o código que está na ultima linha (direct) e coloque no trecho abaixo:

<link href='endereço da imagem' rel='shortcut icon'/>
<link href='endereçod a imagem' rel='shortcut icon'/>

Agora vamos até a página editar html do blogspot e procuramos por:

]]></b:skin>
</head>

E colocamos o código antes de </head> , ficará assim:

]]></b:skin>
<link href='endereço da imagem' rel='shortcut icon'/>
<link href='endereço da imagem' rel='shortcut icon'/>
</head>

Claro que com o endereço do ícone que hospedamos no lugar indicado. Fizemos os testes e funcionou perfeitamente no Internet Explorer, Firefox e Opera. Além de aparecer a imagem na barra de endereços do navegador o ícone ainda aparece ao lado do nome do blog quando alguém adiciona seu site aos favoritos.

Coluna ao lado do Título

2009-04-10T03:03:00.000-07:00

Nós mexemos tanto com códigos CSS que algumas coisas nos passam despercebidas, e por incrível que possa parecer são justamente as coisas mais simples que não conseguimos ver.
Um exemplo disso é usar valor negativo na margem superior de uma das colunas para fazê-la aparecer mais no alto da pagina do que a outra coluna e as postagens, podendo até ficar como se a coluna se iniciasse ao lado do titulo do blog, mas claro que se fizer isso tem que arrumar o titulo do blog ou a imagem que usa no lugar do titulo para não sobrepor a coluna na imagem. Isso dá um efeito muito legal. Veja na imagem como as colunas estão mais para cima que as postagens.

O código para fazer isso é simples basta colocar junto com o código da coluna margin-top:-320px; então o código da coluna (sidebar) ficará mais ou menos assim:

#sidebar-wrapper {margin-left:20px;margin-top:-320px;
width: 250px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Claro que a largura (250) e float (right) serão diferentes no seu blog, mas o importante para deixar uma coluna mais para cima que as outras é o trecho margin-top:-320px; depois é só ajustar os valores para o seu blog. Isso pode ser feito em qualquer coluna ou nas postagens. A imagem que usei como exemplo é de um blog que ajudei a modificar há pouco tempo, ele pertence à Graça de Oliveira.

Colocar um template

2009-04-10T03:02:00.000-07:00

Antes de começar a trocar um template saiba que isso é um pouco complicado e leva algum tempo, portanto não comece a fazer isso se não puder ficar pelo menos uma hora no computador mexendo no seu blog, se não houver problemas em 20 minutos será tudo terminado, mas não é bom arriscar porque os ajustes finais às vezes levam bastante tempo. Para achar um template para o blogspot até que é fácil, difícil e chato é na hora de instalar no blog, porque quase sempre aparece alguma falha ou sobram ou faltam gadgets, isso acontece porque cada gadget que você adiciona no seu blog também modifica o html, e a maioria desses sites que fornecem template para adaptar seu template para download colocam muitos gadgets, mas não podem adivinhar todos que cada blog usa. Abaixo segue uma lista de sites com templates grátis que achamos no Orkut.

http://templatesforyou.blogspot.com/
http://templatesparanovoblogger.blogspot.com/
http://fantasytemplates.weblogger.terra.com.br/
http://freetemplates.blogspot.com/
http://thrbrtemplates.blogspot.com/
http://blogger-templates.blogspot.com/
http://www.bloggertemplates.org/
http://blogspottemplates.blogspot.com/
http://www.templates4free.blogger.com.br/galeria1.htm
http://blogtemplates.noipo.org/
http://wired-gadget.blogspot.com/
http://www.finalsense.com/services/blog_templates/index.htm
http://freeblogspottemplates.blogspot.com/
http://www.blogskins.com/browse.php
http://www.templatepanic.com/

Até aqui falamos do problema, agora vamos falar da solução, como fazer para colocar um template no blogspot sem dar tantos erros. Antes de começar a instalação vamos garantir que não perderemos nada em caso de algum problema. Então entre na página layout e copie os códigos dos acessórios que colocou no seu blog: contador de visitas, previsão do tempo, relógios, banners e links de parceiros e tudo mais que puder. Quando as coisas que não podemos salvar o código como, por exemplo, lista de blog ou feeds, salve os endereços dos blogs destas listas, assim ficará mais fácil recolocar caso esse gadget desapareça.

Depois disso vá até a página editar html, clique em Baixar modelo completo e salve uma cópia no seu computador, assim em caso de problemas será fácil retornar ao modelo que está usando atualmente.
Agora vamos começar a instalação do novo template. Na linha abaixo clique no botão arquivo e encontre onde salvou o template que deseja instalar e depois aperte o botão upload. Provavelmente aparecerá uma mensagem desse tipo “Os widgets serão excluídos Confirme a exclusão dos itens a seguir. Toda a configuração dos itens será perdida.” Isso quer dizer que alguns gadgets do seu blog vão sumir, mas não temos opção porque se não aceitarmos o template não será instalado, mas já que salvamos o que tínhamos no blog não há problemas, pois será fácil recolocar depois, portanto clique em confirmar e salvar.

Clique para visualizar o blog, deve aparecer com o novo template, então vamos até a página layout para adicionar novamente os gadgets que foram excluídos, isso é do mesmo jeito que fez para colocar da primeira vez no template antigo a maioria é adicionar gadget, html/javascript. Você notará que existem muitos gadgets vazios que você deve excluir isso acontece porque os sites de template colocam muitos gadgets para fazer você perder o menos possível durante a instalação do template. Como já dissemos agora é só adicionar os acessórios que sumiram e remover os gadgets que não queremos ou estão vazios.

Enviar Atualizações por Email

2009-04-10T02:53:00.000-07:00

Alguns blogs inclusive esse tem um serviço que envia um email avisando sobre nossas atualizações, isso é bem útil e aumenta o numero de visitas do blog. E fazer o mesmo com o seu blog é mais fácil do parece, você só precisa fazer um cadastro no Feedburner e configurar seu blog nele.
Primeiro vamos deixar o site em português, pois assim é mais fácil, no topo da pagina tem a palavra language, clique nela e na próxima pagina clique na palavra português, está certo que não é uma tradução perfeita, pois ele usa a expressão Queime um feed agora mesmo. Mas é melhor do que usar o site em inglês.

Depois que fizer o cadastro coloque o feed do seu blog no campo Queime um feed agora mesmo, se não souber seu feed vá até seu blog e copie o link que está no final da pagina na “Assinar: Postagens (Atom)”, seu feed é assim:
http://SEUBLOG.blogspot.com/feeds/posts/default
Então é só clicar em avançar, e avançar novamente, o site já vai mostrar o endereço do seu feed gerado pelo Feedburner, é o link abaixo disso: Congrats! Your FeedBurner feed is now live. Want to dress it up a little?Subscribe to your feed (and share with others!) at.

Clique no botão próximo no final da pagina e clique novamente. Agora clique na guia publicar e no menu da esquerda em Email Subscriptions, agora aperto o botão ativar e aparecerá a tela Gerenciamento de Cadastros, troque a language para Português e pronto. Agora é só copiar um dos códigos abaixo. O primeiro código mostrará no seu blog um campo de texto para a pessoa digitar o email e assinar o feed, para receber as suas atualizações no email que ela indicou.

O segundo código que tem nesta pagina mostra apenas um link para assinar o feed e o processo é o mesmo, então se quiser usar alguma imagem como link para receber suas atualizações por email é só copiar esse código da segunda caixa e colocar uma imagem nele. O código com imagem fica assim:

<a href="http://www.feedburner.com/fb/a/emailverifySubmit?feedId=2104814&loc=pt_BR"
target="_blank" title="Receba nossas mensagens por e-mail"><img
border="0" src="http://img6.imageshack.us/img6/2467/emaillw8.jpg"/></a>

Como saber quem copiou meu blog

2009-04-10T02:49:00.000-07:00

Todos nós publicamos muitos textos, imagens nos blogs e sempre aparece algum espertinho para copiar e usar como se fosse criação dele. Um jeito de achar essas cópias do texto de nossos blogs é usando o site Copyscape , você só precisa digitar o endereço do seu blog e o site mostrará uma lista de sites ou blogs que tenham o mesmo texto. Esse é um modo bem simples e fácil de encontrar quem copiou as postagens do blog.

Mostrar comentários recentes

2009-04-10T02:46:00.000-07:00

Colocar uma lista dos últimos comentários recebidos no blog é muito simples, é igual adicionar qualquer feed. Entre na página layout, clique para adicionar um gadget e na pagina surgir escolha a opção feed.

Na tela que aparece coloque esse endereço, mas colocando o nome do seu blog nele:
http://NOMEDOSEUBLOG.blogspot.com/feeds/comments/default

Depois clique em continuar e escolha as opções que vai mostrar junto com o link dos últimos comentários (numero de itens, autores do item, datas do item), agora é só apertar o botão salvar e já está pronto. Visualize seu blog e aparecerá a lista dos últimos comentários recebidos pelo seu blog.

Retirar numero dos marcadores

2009-04-09T09:49:00.000-07:00

Quando colocamos marcadores no blog sempre aparece o numero de postagens ao lado de cada item, mas é possível retirar esse numero e deixar somente o marcador que colocamos, ou seja, em vez de aparecer, por exemplo, Musica (10) aparecerá somente Musica.
Para fazer isso entre na página editar HTML e clique para Expandir modelos de widgets e procure pelo trecho abaixo, queremos lembrar que logo no começo você encontra <b:widget id='Label1' locked='false' title='Marcadores' type='Label'> a palavra Marcadores aqui é o titulo que você usa nos seus marcadores, portanto talvez no seu blog não esteja exatamente igual:

<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Label1' locked='false' title='Marcadores' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>
</li>
</b:loop>

Quando encontrar o trecho apague:

<span dir='ltr'>(<data:label.count/>)</span>

Depois é só clicar para salvar e pronto, não aparecerá mais o numero de postagens que tem cada marcador.

Ganhar Dinheiro com o Blog

2009-04-09T09:43:00.000-07:00

Existem vários modos de ganhar dinheiro com o blog, abaixo tem alguns links de sites que fornecem anúncios para você exibir no seu blog e você ganha algum dinheiro quando seus visitantes clicam nestes anúncios.

Uma idéia que pode surgir é colocar um sistema de anúncios no blog e ficar clicando neles para ganhar mais ou pedir para amigos fazerem o mesmo, embora isso aparente ser uma ótima maneira de aumentar seus lucros rapidamente, essa é uma péssima idéia porque esses sites que fornecem anúncios sabem de qual computador vieram os cliques nos anúncios, portanto saberam que um grande número de cliques vindos do mesmo lugar só pode significar uma tentativa de fraude, isso pode fazer você ser expulso do site de anúncios.

O ultimo link da lista é da comunidade adsense no orkut considero esse um bom lugar para ler sobre como ganhar dinheiro com blogs ou sites, pois tem muita gente lá que trabalha com isso e tem bastante experiência no assunto.

Buscapé
HotWords
Mercado Livre
Uol
Adsense
Comunidade Adsense

Além de exibir anúncios ainda podemos vender publicidade direta, ou seja, receber de alguém para mostrar um banner de um determinado site em nosso blog, isso é um pouco mais difícil e ainda fica a questão de saber o quanto cobrar, mas sobre valores fica a critério de cada um. Se você conhece ou usa algum outro sistema que considere um bom jeito de ganhar dinheiro com o blog deixe o link em nossos comentários.

Um tipo de publicidade que vi em alguns blogs e acho que não deveriam usar é aquelas do tipo que quando clicamos em qualquer coisa no blog abre uma janela de propaganda automaticamente, quero dizer clicamos para ver outra coisa e somos obrigados a ver a publicidade, isso irrita o visitante, isso faz as pessoas não gostarem de seu site e conseqüentemente não voltam mais nele, por isso considero esse tipo de publicidade um mau negócio.

Vendas Online

2009-04-09T09:42:00.000-07:00

Para quem pretende montar uma loja ou prestar algum tipo de serviço pela internet uma boa opção para receber os pagamentos é o PagSeguro da UOL, você precisa fazer um cadastro no site. O site permite você que seus clientes façam compras à vista (transferências bancárias e boletos) e a prazo (cartões de crédito), sobre o parcelamento encontramos essa informação na pagina de ajuda do PagSeguro: Quem compra pode parcelar as compras em até 12 vezes nos cartões Diners, Hipercard, MasterCard e Visa, 15 vezes no cartão American Express e 18 vezes no cartão Aura. A taxa de parcelamento é de 1,99% ao mês, e é acrescentada ao valor total da compra. Para utilizar a opção de parcelamento, basta que o comprador selecione a quantidade de parcelas no momento da compra. Os valores são calculados automaticamente.

Terminado o cadastro clique na Guia Meus Dados, na pagina que abre tem varias opções, clique em Tipo de Conta PagSeguro e configure sua conta como vendedor ou empresarial, isso vai depender da quantidade de negócios que pretende fazer. Enfim nesta página você vai alterar suas configurações e ajustar da melhor maneira possível o serviço do site para o que você pretende fazer, é um site fácil de navegar e com boas explicações.

Depois clique na guia ferramentas e você pode escolher algumas formas de botões para as pessoas clicarem para fazer os pagamentos, ainda existem botões para doações. No final da página das ferramentas encontramos: Integrações avançadas de pagamentos online PagSeguro isso faz um carrinho de compras quer dizer seus visitantes vão poder escolher múltiplos itens em sua loja virtual.

Como usar o Gerar Receita no Blogspot

2009-04-09T09:41:00.000-07:00

Uma novidade do Blogspot e Adsense vai facilitar a vida dos blogueiros é o gerar receita, essa é a nova função que aparece entre as guias do Blogspot e também na tela inicial(painel) ao junto com Editar postagens – Configurações – Layout - Gerar Receita. Ela serve para colocar os anúncios Google no seu blog de uma maneira muito fácil de fazer, com apenas alguns cliques os anúncios do Adsense já estarão no seu blog e você pode como o próprio nome diz você vai gerar receita (ganhar dinheiro) com o seu blog.

Vamos ver como funciona, clique em gerar receita aparecerá uma tela assim, então escolha uma das opções e clique próxima, você verá essa mensagem: O AdSense foi ativado para o seu blog. Então você pode visualizar o blog (se for usar essa opção escolha em nova janela, pois assim será mais fácil, continuar editando caso queira). E já está pronto.

Quando entrar na janela layout, clique para editar o Adsense ou o quadro das postagens e poderá fazer varias mudanças no anúncio caso quiser, é possível mudar o formato (tamanho), conteúdo (imagens, texto ou misturado) e as cores, então é só escolher a maneira que os anúncios combinem melhor com seu blog e pronto, já tem anúncios do Google no seu blog e você já pode ganhar algum dinheiro extra com isso.

Retirar a barra do blogspot

2009-04-09T06:38:00.000-07:00

Para retirar a barra do blogspot basta colocar este código:

<style>
#navbar-iframe { height:0px; visibility:hidden; display:none }
</style>

Para fazer isso vá em layout e escolha a guia editar html, quando aparecer o código do seu blog procure por: <head>(isso está bem no começo do html) e cole o código acima depois é só clicar para salvar e pronto a barra na parte superior do blogspot já desapareu.

Aparecer no Google ou Yahoo

2009-04-09T06:37:00.001-07:00

Quando você cria um site ou blog um dos primeiros passos é adiciona-lo nos mecanismos de buscas, os mais conhecidos e usados são Google e Yahoo, ao menos são esses que enviam mais visitas para esse blog. Abaixo estão os links para enviar o endereço do seu blog ou site para esses serviços de busca, a inclusão é grátis.

Yahoo
Google

Esses mecanismos encontram os novos sites e blog automaticamente sem necessitar inscreve-los por esses links porém eles levam algum tempo para isso, portanto a melhor coisa a fazer para quem criou um site a pouco tempo é fazer a inclusão por esses links afinal isso aumentará suas visitas. Porque existem mais chances que seu blog ou site apareça nos resultados das pesquisas que as pessoas fazem no Google e Yahoo. Além desses existem muitos outros sites de busca na internet e fica a critério da cada um em qual deles vale a pena se cadastrar ou não.

Como configurar um menu do Flash Vortex no seu blog

2009-04-09T05:28:00.000-07:00

Estava tentando criar alguns Banners e menus em flash, e achei o site do Flash Vortex que tem vários tipos de menus e banners prontos, podendo ainda configurá-los ao seu gosto, até ai tudo bem, mas quando fui fazer um banner, depois de configurá-lo, me deparei com um problema, como botar o banner no meu blog, se o site do Flash Vortex não gera o código na hora para copiar e colar no Gadget do blog. Então pesquisei na internet e vi que tinha bastante gente com esse problema, daí resolvi escrever esse pequeno tutorial para ajudar, espero que seja útil.

1º Passo - Criando espaço para hospedar o arquivo .swf

O blogger não faz upload, então você pode criar uma conta em um desse sites que oferecem hospedagem gratuita. Eu criei uma conta no GeoCities:

Criar Conta

2º Passo - Criando o menu

2.1 Acesse o site da Flash Vortex, escolha se você vai fazer, um banner, menu, textos ou Buttons. Aqui vou fazer a demontração com menu, mas lembre-se o processo para publicá-lo é igual para todos.

2.2 - Após clicar na opção menu, irá aparecer diversas opções de menus para escolher, escolha um e clique na opção CLICK HERE TO EDIT THIS, para editá-lo.

2.3 - Nesta primeira configuração você pode escolher o estilo do botão. Clique em "View All", para visualizar todos estilos. Lembrando que o Flash Vortex oferece alguns serviços gratuitos, mas para incrementar mais seu menu somente por meio de pagamento.

2.4 - Na segunda configuração você vai botar no primeiro quadro os nomes que vai aparecer dentro dos botões do menu, no segundo quadro você irá colocar os endereços de destino, de cada link que você criou no primeiro quadro.

2.5 - o Step 3 e 4 são as configurações do tamanho do menu e dos botões, não é necessário modificá-los. Lembrando que dependendo do menu que você escolher, pode acontecer de ter mais ou menos etapas.

2.6 - Após terminar toda a configuração, clique no botão "Generate Animation", marque a caixa "check to open download page in a new window", para que o menu seja gerado em uma nova página da internet, pois se ficar algo errado é só modificar e mandar gerar novamente.

2.7 - Aqui esta seu menu, mas nosso trabalho não para por aí, agora uma parte muito importante, vamos fazer o download do nosso menu, mas antes marque a caixa "Include an installation help file with my download", não esqueça de marcá-la, clique para fazer o download e salve o arquivo onde desejar.

3 Passo - Baixando e descompactando o arquivo

3.1 - O arquivo que você vai baixar está no formato .zip, assim você precisa de um programa para descompacta-lo. Ex: Winzip, Winrar, etc..

3.2 - Após descompactar, note que aparecerá dois arquivos, um .swf, e outro .html.

4º Passo - Hospedando o arquivo .swf

4.1 - Para que o menu apareça no seu site você tem que hospedar o arquivo .swf na internet, então vamos usar agora a conta criada no GeoCities, no primeiro passo, faça o login no GeoCities, ou em outro site que você escolheu para hospedagem. No GeoCities você terá uma opção "Gerenciador de Arquivo", clique nessa opção.

4.2 - Dentro do gerenciador você terá uma opção chamada "Carregamento fácil", e um botão "carregar para",

clicando nessa opção, aparecerá a seguinte tela:

clique em procurar, e localize o arquivo .swf, que você salvou anteriormente,

depois clique no botão carregar, note que na proxima tela, aparecerá no canto superior direito o arquivo que você carregou e a opção "Ir para o Gerenciador de Arquivos", clique para voltar para o gerenciador.

Depois o arquivo aparecerá no gerenciador, se não aparecer tente apertar no botão "atualizar diretório"

Aqui encerramos o passo da hospedagem, mas deixe esta tela aberta em seu computador que vamos utilizá-la mais adiante.

5º Passo - Publicando o menu

5.1 - Primeiramente vamos utilizar aquele arquivo .html (installation.html) que baixamos junto com o menu. Abra o arquivo, irá abrir uma página da internet com o menu e um código html,

na própria página que está aberta você pode editar este código, preste atenção na linha -

agora você vai entrar no GeoCities novamente, no gerenciador, ao lado do arquivo tem um link chamado "Exibir".

clicando nesse link irá exibir a imagem do seu menu, copie a URL (endereço da página) dessa página,

agora e só colar na linha que foi apagado do código HTML.

Agora é só copiar todo esse código e colar no seu site, para quem tem blogspot como eu, é so adicionar um novo Gadget, adicionar HTML/JavaScript e salvar.

Banners deslizando pelo site.

2009-04-09T05:05:00.001-07:00

Aqui está novamente o mesmo código:

</marquee>

Codigo Imagem no cursor

2009-04-09T05:01:00.001-07:00

Este código serve para colocar uma imagem acompanhando
o cursor do mouse. Logo no começo do código você encontra:

var trailLength = 7

var path = "http://i205.photobucket.com/albums/bb145/cidadeweb/dicas2.jpg"

Aqui você coloca o endereço da imagem no lugar indicado
no código e outra coisa que pode ser alterada facilmente é
mudar a quantidade de vezes que a imagem se repete alterando o numero
7, mas não aumente muito pois deixa o site.

Coloque esse código depois da tag <body> e no caso do Blogspot
na página layout, adicionar elemento de página, html/javascript.

Código Completo

var trailLength
= 7

var path = "http://i205.photobucket.com/albums/bb145/cidadeweb/dicas2.jpg"

var standardbody=(document.compatMode=="CSS1Compat")? document.documentElement
: document.body

var i,d = 0

initTrail()

document.onmousemove = processEvent

//-->

</script>

Imagens Aleatórias

2009-04-09T04:53:00.000-07:00

Este código serve para colocar frases ou imagens aleatórias no site ou blog. Ele faz aparecer somente uma das frases ou imagem por vez. Vamos começar explicando sobre as frases, você só precisa copiar o código e colocar as frases que desejar onde está escrito frase um, frase dois.... e assim por diante. Para mudar a quantidade de frases aleatórias você deve repetir quantas vezes forem necessárias esse trecho do código:

if (numero == 5){
frase = "Frase Seis"
}

Mas não esqueça de continuar a seqüência da numeração, portanto cuidado para não repetir os números senão o script não funcionará corretamente. Outra coisa que precisa ser alterada é o numero 6 nesta linha numero_de_imagens = 6, isto significa que temos 6 opções portanto se adicionar ou remover opções altere esse numero também.
Este código funciona também para imagens aleatórias para fazer isso basta colocar no lugar das frases o código das imagens, e funcionará normalmente, aparecendo uma imagem diferente cada vez que o blog for visitado.

Para usar esse código com imagens, no lugar das frases coloque a url das imagens, e troque document.write(frase), por:
document.write('<img src="' + frase + '" border=0>')

Mostrar adicionar elemento de Página

2009-04-09T04:51:00.000-07:00

Essa postagem já tem algum tempo e o que chamamos aqui de elemento de Página é conhecido hoje como gadget, mas as explicações a seguir funcionam do mesmo modo.

Alguns modelos do Blogspot quando entramos na página layout ele não mostra a opção adicionar elemento de pagina embaixo do título e alguns nem permitem arrastar algum elemento para esse local.

Para resolver isso vá até a pagina editar html e procure esse trecho:

Na parte showaddelement='yes' se no lugar de yes, estiver à palavra “no”, troque por yes, isso faz que na página layout apareça àquela barra adicionar elemento de pagina embaixo do título. Após fazer essas alterações clique para salvar e vá até a página layout, onde já deverá aparecer um quadro adicionar elemento de página embaixo do título, então você poderá adicionar elementos que ocuparão a largura total do blog do mesmo modo que adiciona na coluna (sidebar).

Se você precisar mostrar o adicionar gadget no final do blog ou seja embaixo das postagens, olhe no fim do código html do seu blog se está assim:

Provavelmente essa linha do meio não existe ou está diferente, então é só deixar igual está no exemplo acima.

Copiar Postagem

2009-04-08T12:08:00.000-07:00

Estava vendo que em alguns blogs existe a opção "Copiar postagem para seu blog" abaixo de cada postagem.
Fiquei curioso e resolvi correr atrás do código fonte desta opção. Acabei achando um que muitos blogs utilizam.
Eis o código abaixo. Acho que não tem muita necessidade pra quem tem blogs comuns, mas é ideal pra blogs que servem downloads, dicas e outras finalidades.
1 - Vá até seu tema e marque a caixinha "Expandir modelos de widgets"
2 - Pressione CTRL+F para localizar mais rápido e Digite: data:post.body
3 - em seguida cole o código logo abaixo.

<div align='center'><form><span>Copie essa postagem para seu
Blog:</span>
<textarea cols='30' name='yourForm' onfocus='this.select()' onmouseover='this.focus()'
rows='3' style='border: 1px solid silver' wrap='virtual'><data:post.body/><br/><a
href='http://dicasparablogs.blogspot.com' style='padding-top: 20px;display: block;text-align:
center;'>Postagem retida do Dicas para Blogs</a></textarea>
</form></div>

4 - Pronto Agora de um "Visualizar" e se ficar legal Salve
Alguns valores podem ser modificados, como cols='30' e rows='3' que é a largura e altura da caixa do texto, e no final altere o link dizendo de onde foi retiro o texto:<a href='http://dicasparablogs.blogspot.com' style='padding-top: 20px;display:
block;text-align: center;'>Postagem retida do Dicas para Blogs</a>

Que naturalmente você colocará o link do seu blog e o texto que desejar.

Banner Rotativo

2009-04-08T11:54:00.001-07:00

Para fazer aparecer banners diferentes cada vez que o blog é exibido, você terá um pouco de trabalho, não com o código pois esse é simples mas para ocultar o titulo do blog exibido normalmente e caso no seu modelo não apareça adicionar gadget entre o cabeçalho e as postagens.

Primeiro passo precisamos ocultar o título do blog. Então procure na página editar HTML por algo parecido com o trecho abaixo, não será igual porque cada blog tem a próprio estilo do titulo, mas o importante é #header h1:

#header h1 {
text-align: left;
font-size: 200%;
color: $pageHeaderColor;
margin: 0;
padding: 15px 20px 0 20px;
}

E coloque isso display: none; (inclusive o ponto e vírgula) entre as chaves { }, não importa em qual linha, mas tem que ser dentro das chaves. E clique para salvar.
Isso faz ocultar o título do blog, você não precisa mudar mais nada, ele só vai ocultar, caso resolva mostrar novamente o título basta retirar essa linha que colocamos agora.

Agora veja na pagina layout se aparece o quadro adicionar gadget entre o cabeçalho e as postagens, pois será lá que iremos colocar o código do banner rotativo caso não esteja visível, veja nossa explicação de como fazer isso aparecer essa postagem fala em adicionar elemento de página, pois quando fui publicada era assim que os gadgets eram chamados no blogspot, mas a explicação funciona normalmente. Outra coisa se usar uma imagem no titulo precisa tirar clicando para editar o cabeçalho. Depois disso clique para adicionar um gadget embaixo do cabeçalho, na página que aparece escolha a opção HTML/javascritp e cole o código abaixo:

<script language="JavaScript">
hoje = new Date()
numero_de_imagens = 5
segundos = hoje.getSeconds()
numero = segundos % numero_de_imagens
if (numero == 0){
banner = "URL DA IMAGEM"
}
if (numero == 1){
banner = "URL DA IMAGEM"
}
if (numero == 2){
banner = "URL DA IMAGEM"
}
if (numero == 3){
banner = "URL DA IMAGEM"
}
if (numero == 4){
banner = "URL DA IMAGEM"
}
document.write('<div align="center"><img src="' + banner + '" border=0></div>')
</script>

E já está pronto, mas não se esqueça de colocar os endereços corretos das imagens no código, para alterar esse código aqui tem explicado como alterar o código e adicionar imagens, nessa explicação está dizendo sobre colocar frases, mas o código é idêntico a este que usamos aqui para imagens.

Imagem na barra de endereço

2009-04-08T11:53:00.002-07:00

Algum tempo atrás já publicamos a explicação de como colocar uma imagem na barra de endereços do blog e quando seu site é adicionado nos favoritos essa imagem aparece como ícone no menu favoritos ao lado do nome do seu blog. Entretanto com algumas mudanças recentes no blogspot fizeram aquela explicação dar alguns problemas então aqui vai o procedimento atualizado.
Entre na página editar layout e procure por ]]></b:skin>
, clique ctrl+F isso abre uma janela para procurar o texto na página assim é bem mais fácil do que ler tudo e coloque esse código logo após o trecho acima:

<link href='endereço da imagem' rel='icon' type='image/x-icon'/>

Quanto ao formato da imagem deve ser .ico, tem programas que fazem esse tipo de imagem. Mas versões mais novas dos navegadores Firefox, Internet Explorer, Opera já aceitam o formato .jpg ou .gif que funcionam normalmente e são bem mais fáceis de fazer e hospedar.

Para hospedar imagens use o ImageShack ou Photobucket, são dois bons sites grátis de hospedagem de imagem.

Site abrindo sozinho

2009-04-08T11:53:00.001-07:00

Alguma vez quando estava num site sem saber o porquê abriu outra pagina sem que você tivesse clicado em nada? Ou acontece isso no seu blog, então procure por esse código nos banners ou link que adicionou nele:

<a onmouseover="parent.location='URL DO SITE'" href="URL DO SITE" target="_blank"><img border="0" src="URL DA IMAGEM"/></a>

Acho que as pessoas estão fazendo links usando este código a fim de forçar visitas afinal ninguém sabe que somente ao passar o mouse sobre uma imagem abrirá outra pagina. E claro isso prejudica o seu blog, pois tira as pessoas dele sem que elas imaginem o que aconteceu e ninguém quer voltar num site que faz coisas aparentemente sem explicação.
Portanto tenha cuidado com os códigos que adiciona no seu blog e verifique se algum deles tem a parte onmouseover="parent.location='URL DO SITE'", se encontrar isso você já sabe que ao passar o mouse sobre essa imagem irá para outro site, então cabe a cada um decidir se vale à pena usar ou deixar esse tipo de coisa no blog ou não. Queremos dizer que não aconselhamos o uso disso pois apenas irrita as pessoas e quando abre uma pagina inesperadamente a reação mais natural é simplesmente fechar tudo.

Redirecionamento

2009-04-08T11:52:00.003-07:00

As pessoas que tem mais de um blog às vezes depois de algum tempo querem parar de postar em um dos blogs, mas não querem deixar seus leitores abandonados, então alguns fazem uma postagem de despedida e deixam o link de seu novo blog, com isso alguns dos visitantes vão para esse novo blog, mas certamente perdemos visitas com isso. Tem um código de redirecionamento que transfere todas as visitas desse blog antigo para o novo blog. Você só precisa colocar o endereço da sua página onde está escrito seu site no código abaixo:

<script language="javascript" type="text/javascript">
location.replace("SEU SITE")
</script>

Para usar é só colocar o código pela página layout, adicionar gadget, html/javascript, e colocar em qualquer parte da página. E já está pronto, quando você entrar no blog será enviado automaticamente para o endereço que especificou no script acima. Uma sugestão se for usar essa idéia é modificar seu blog antigo para mostrar apenas uma postagem e retirar tudo mais que tiver nele, pois o código só funciona depois que for carregado e quando mais coisas tiverem no blog mais tempo irá demorar o redirecionamento.

Essa foi uma sugestão sobre o que fazer com esse código que envia os visitantes para outra página, mas é claro que você pode usar para outras coisas que imagine.

Contagem de tempo

2009-04-08T11:52:00.001-07:00

Esse mostra quandos dias passaram entre a data que você colocou nele e o dia atual, podemos encontrar varias utilidades, mas a acredito que a principal delas seja mostrar a quando tempo seu blog ou site está em funcionamento. Você só precisa alterar a data e o texto que está no final do código:

document.write("Já tem "+difference+" desde que o meu site entrou no ar.")
countup(2008,11,10)

Essa data é no formato ano/dia/mes, portanto o numero 10 é o dia, depois que fizer as alterações é só colocar no seu blog através da página layout, adicionar gadget, html/javascript, então é só colar o código abaixo.

<script>
montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")
function countup(yr,m,d){
today=new Date()
todayy=today.getYear()
if (todayy < 1000)
todayy+=1900
todaym=today.getMonth()
todayd=today.getDate()
todaystring=montharray[todaym]+" "+todayd+", "+todayy
paststring=montharray[m-1]+" "+d+", "+yr
difference=(Math.round((Date.parse(todaystring)-Date.parse(paststring))/(24*60*60*1000))*1)
difference+=" dias"
document.write("Já tem "+difference+" desde que o meu site entrou no ar.")
}
countup(2008,11,10)
</script>

Mensagem ao entrar no blog

2009-04-08T11:51:00.001-07:00

Embora não seja recomendável algumas pessoas gostam e procuram como colocar uma mensagem ao entrar no blog, aquela caixinha de texto escrito bem vindo ou algo parecido com isso.
O código para fazer isso é:

<script>alert('texto do alerta');</script>

Primeiro altere o texto da mensagem(texto do alerta) para o que deseja depois entre na página editar HTML e coloque esse código antes de</body> , e já está pronto é só clicar para salvar.

Apagar Gadget

2009-04-08T11:49:00.002-07:00

Quando queremos apagar alguma coisa que colocamos no blog é bem simples entre na página layout clique sobre o gadget então clique no botão excluir na janela que abre e já está pronto o gadget sumiu.

Porém algumas vezes isso apresenta um erro e quando clicamos no botão excluir nada acontece em certas ocasiões parece que trava a janela outras ela fecha, mas o gadget não desaparece do blog. Para resolver esse problema temos que apagar esse gadget pela pagina editar HTML.

O primeiro passo é identificar o que vamos apagar então troque o titulo desse gadget que deseja excluir coloque um titulo diferente, fácil de achar, por exemplo: apagar esse, excluir ou qualquer outra coisa e clique para salvar. Agora entre na pagina editar HTML e procure por algo desse tipo:

<b:section class='sidebar' id='novabarra' preferred='yes'>
<b:widget id='LinkList1' locked='false' title='amigos' type='LinkList'/>
<b:widget id='Followers1' locked='false' title='Seguidores' type='Followers'/>
<b:widget id='HTML3' locked='false' title='publicidade' type='HTML'/>

No seu blog não será exatamente igual, mas repare que aparece nas linhas acima title='amigos' e title='publicidade', esses são os títulos dos gadgets, então é só achar aquele que vamos excluir procurando pelo titulo (apagar esse, excluir) e apague a linha inteira. No caso acima se quiser tirar o gadget amigos, apague:
<b:widget id='LinkList1' locked='false' title='amigos' type='LinkList'/>

Sugerimos clicar primeiro para visualizar o blog antes de salvar as alterações apenas para ter a certeza que apagou realmente o gadget certo, se tudo estiver certo clique para salvar modelo e pronto.

Impedir Seleção de texto e imagens

2009-04-08T11:49:00.001-07:00

Impedir totalmente alguém de copiar seus textos ou imagens é praticamente impossível, pois sempre acabam achando um jeito de copiar....
Mas aqui tem um código para impedir que seus visitantes selecionem suas imagens e textos:

Coloque esse código antes da tag </head> do seu site e não será possível selecionar seus textos e imagens.

Ícone na barra de endereço

2009-04-08T11:48:00.002-07:00

Para alterar o ícone na barra de endereços use esse código:
<link rel="icon" href="icone.ico" type="image/x-icon"/ >

<link rel="shortcut icon" href="icone.ico" type="image/x-icon"/ >

Onde está icone.ico, você deve colocar a url da imagem que deseja que apareça, mas tem que ser uma imagem com o tamanho 16x16 pixels. Imagens maiores também funcionam mas serão encolhidas para esse tamanho portanto se usar outro tamanho faça uma imagem quadrada(30x30, 100x100...).
Quanto ao formato da imagem deve ser .ico, tem programas que fazem esse tipo de imagem, as versões mais novas dos navegadores(Firefox 2, Internet Explorer 7, Opera 9.2) já aceitam o formato .jpg ou .gif.
Coloque o código antes da tag </head>e pronto. Além de aparecer a imagem na barra de endereço quando alguém adicionar seu site aos favoritos essa imagem também aparecerá no menu favoritos. No site Dynamic Drive você encontrará um gerador de icone(.ico) é só enviar uma imagem e o site converte para o formato .ico e então use o código acima.

Imagem no cursor do mouse

2009-04-08T11:48:00.001-07:00

Este código serve para colocar uma imagem acompanhando o cursor do mouse. Logo no começo do código você encontra:

var trailLength = 7
var path = "endereço da imagem"

Aqui você coloca o endereço da imagem no lugar indicado no código e outra coisa que pode ser alterada facilmente é mudar a quantidade de vezes que a imagem se repete alterando o numero 7, mas não aumente muito pois deixa o site. Tentei postar o código aqui, mas o Blogspot modifica os caracteres e faz que o código não funcione, por isso postei o código completo no meu outro site, clique aqui para ver o código para colocar uma imagem no cursor do mouse.

Para colocar no Blogspot esse efeito do mouse vá até a página layout >>> adicionar um gadget >>> html/javascript, então é só colocar o código, não se preocupe com o lugar onde isso vai ficar no seu blog pois terá efeito na pagina toda não importando se está no começo ou final da pagina.

Barra de Endereço Animada

2009-04-08T11:47:00.001-07:00

Código para colocar animação no titulo do blog:

<script>
var repeat=1
var title=document.title
var leng=title.length
var start=1
function titlemove() {
titl=title.substring(start, leng) + title.substring(0, start)
document.title=titl
start++
if (start==leng+1) {
start=0
if (repeat==0)
return
}
setTimeout("titlemove()",150)
}
if (document.title)
titlemove()
</script>

Coloque esse código pela página editar html antes da tag </head> e após isso coloque o titulo que desejar e verá que ele ficará passando na barra do Internet Explorer ou Firefox (testei somente nesses navegadores), num efeito semelhante ao texto deslizante. Esse script deixará a página um pouco lenta, por isso algumas pessoas não gostam de sites que usam isso.

Imagem ao lado do texto ou link

2009-04-08T11:44:00.000-07:00

Alguns blogs tem uma pequena imagem ao lado dos links ou titulos, para colocar um seta ou qualquer outra imagem ao lado de um texto ou link o código é:

.seta a{background-image: url(URL DA IMAGEM);
background-repeat: no-repeat;
background-position: left center;
padding-left: 40px;
}

Isso pode ser usado em qualquer tipo de texto sendo um link ou não, apenas tenha o cuidado de quando usar isso num link colocar o código da outra imagem para quando o mouse estiver sobre o link, desse jeito:

.seta a:hover{background-image: url(URL DA IMAGEM);
}

O nome .seta é apenas um exemplo no caso do Blogspot para colocar isso nos links da sidebar, você deve colocar esse código nessa parte:

.sidebar ul li {.....

Mas caso o seu blog não tenha especificado o link(a, a:hover) da sidebar precisamos colocar e o código com a imagem ficará assim:

.sidebar ul li a{background-image: url(URL DA IMAGEM);
background-repeat: no-repeat;
background-position: left center;
padding-left: 40px;
}

.sidebar ul li a:hover{background-image: url(URL DA IMAGEM);
}

Isso porque se colocar no começo do código onde tem: a:link, a:visited isso colocará essa imagem ao lado de todos os links do seu site.

Status do MSN no Blog

2009-04-08T11:41:00.001-07:00

Para mostrar seu status do MSN no seu blog entre no link:

http://settings.messenger.live.com/Applications/WebSettings.aspx

Isso vai levar você para uma página onde encontrará algumas opções de como mostrar seu status do MSN no seu blog, inclusive se todos ou não poderão ver quando você estiver on-line.

Você pode escolher se quer mostrar somente o ícone de status, um botão que aparece seu nome quando você está conectado(isso porque mesmo quando estiver com o status de ocupado e outros, seu nome ainda aparecerá) e ainda outra coisa que interessante para colocar no blog é uma janela para mensagens instantâneas para que seus visitantes possam escrever para você através do seu blog quando você estiver on-line e você recebe a mensagem numa janela de conversa normal como se fosse um dos seus contatos do MSN.

Colocar ou alterar as bordas

2009-04-08T11:40:00.000-07:00

Existem vários modos de mudar o visual do blog somente utilizando o estilo CSS um deles é colocar ou alterar as bordas. Esse código é bem simples e pode se usado em qualquer lugar, serve inclusive para fazer botões quando combinados com uma cor de fundo, além disso podemos usar para colocar bordas nas postagens, menus e qualquer outra coisa no blog. O código das bordas deve ser moficado pela página editar HTML, agora vamos entender melhor esse código:

border: 1px solid #0000FF

1px é a largura

solid é o estilo

#0000FF é a cor

Por exemplo para colocar bordas nos link procure por:

a:link, a:visited {
color:#0000ff;
text-decoration:none;
}

e coloque border: 1px solid #0000FF, dentro das chaves, deixando o código assim:

a:link, a:visited {
border: 1px solid #0000FF;
color:#0000ff;
text-decoration:none;
}

border: 2px dotted #000000

border: 2px dashed #000000

border: 1px solid #0000FF

border: 4px double #FF0000

border: 3px groove #6666FF

border: 4px ridge #FFFFCC

border: 3px inset #FFFF99

border: 2px outset #6699FF

Mensagem conforme a hora do dia

2009-04-08T11:39:00.000-07:00

Para mostrar no seu blog uma frase ou imagem dependendo da hora do dia, use o código abaixo:

<SCRIPT language="JavaScript">

</SCRIPT>

Agora vamos aprender a modificar esse script para você colocar as mensagens que desejar nele conforme o horário. O trecho que vamos alterar se resume em apenas uma linha:

if ((hr==13)
|| ((hr==14) || (hr==15) || (hr==16)) || (hr==17)) document.write("Boa Tarde")

Se você observar notará que os números (13, 14, 15, 16, 17) são as horas do dia e caso seja uma dessas horas a mensagem será Boa tarde, então precisamos deixar cada hora com a mensagem que desejamos e claro no caso de usar a mesma coisa para varias horas pode ser feito com o código como está acima, veja o trecho || ((hr==14), ele se repete cada vez que adicionamos mais uma hora para a mesma mensagem. Para deixar uma mensagem somente em uma hora usamos o como está na linha com a mensagem vamos almoçar que aparece apenas quando a hora for 12, e seguindo esses exemplos podemos modificar o código colocando nossas mensagens. Trocar as frases é bem simples é só apagar e escrever outra no lugar, mas cuidado para não apagar as aspas “”, pois sem elas o código não funciona.
Além disso, é possível usar esse script para mostrar imagens apenas trocando as frases pelo código das imagens, porém nesse caso apagamos as aspas. E o código fica assim:

if ((hr==20) || (hr==21) || (hr==22)) document.write('<img src="URL DA IMAGEM" border=”0”>')

Imagens Transparentes

2009-04-08T11:33:00.002-07:00

Um efeito legal de usar é deixar as imagens meio transparentes quando colocamos o mouse sobre elas, e o código para fazer isso pode ser usado em cada imagem separadamente ou em todas as imagens das postagens ou das colunas de menu do blog e ainda no blog inteiro se preferir.

O código pra deixar a imagem transparente você deve colocar na página editar html, depois de body{...}, mas cuidado para não colocar dentro das chaves do body porque tudo que estiver entre elas modifica a página inteira, veja na imagem:

no exemplo modificamos todas as imagens das postagens, caso esteja ruim de ver o código na imagem ele está aqui:

.post img{filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);-moz-opacity:
1}

.post a:hover img{filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);-moz-opacity:
0.5}

Da mesma maneira que fizemos isso com as postagens poderíamos fazer com a coluna lateral de menu, apenas trocando a palavra post por sidebar ou o nome que tiver a coluna do seu blog. Porém se quiser colocar esse efeito em apenas algumas imagens por exemplo nos banners que mostra no seu blog, faça da seguinte forma em vez da palavra post coloque no código banner, isso é apenas um exemplo poderia ser quaisquer outras palavras desde que você não tenha usado a mesma para nenhum outro estilo CSS. Isso também na página editar html. Então o código ficará assim:

.banner img{filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);-moz-opacity:
1}

.banner a:hover img{filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);-moz-opacity:
0.5}

Depois entre na página layout, clique em adicionar gadget, html/javascript e coloque o código das imagens (neste caso os banners), porém o código das imagens tem que estar entre divs (podem ser quantas imagens quiser), deste modo:

<div class="banner">Código das Imagens</div>

Isso fará que apenas as imagens que estiverem neste trecho fiquem semitransparentes quando colocar o mouse sobre elas.

Navegar Dentro da Página

2009-04-08T11:33:00.001-07:00

Quando temos uma pagina com muitas coisas ela acaba ficando longa demais e alguns usuários se atrapalham na hora de encontrar alguma coisa, uma solução para isso é colocar links que facilitem a navegação dentro de nosso blog.

Para fazer isso é bem simples você pode colocar um link no começo do blog que levará até o código do seu banner (caixinha link-me), então faça da seguinte forma: vá até a pagina layout, adicionar gadget, html/javascript e coloque esse código:

<a href="#banner">Caixinha Link-me</a>

Deixe isso no começo do blog, pois esse é o link que aparecerá para clicar e ir até a caixinha link-me do seu blog. Depois clique para editar onde colocou a caixinha link-me e coloque esse código no começo:

<a name="banner"></a>

Pois quando alguém clicar essa linha que irá para o topo da página e não se preocupe esse código não aparece no blog. Agora é só salvar e testar.

Para fazer outros links apenas altere no código o texto e nome dos links: a palavra banner deve ser troca por qualquer outra, mas nas duas partes do código e Caixinha Link-me é o texto que vai aparecer no topo da sua pagina onde está montando uma espécie de guia de rápido acesso para facilitar a navegação. Quando colocar mais de um link acrescente no final de cada um
isso faz mudar de linha assim cada link ficará numa linha sozinho, então para vários links fica assim a primeira parte do código:

<a href="#banner">Caixinha Link-me</a><br/>
<a href="#banner">Caixinha Link-me</a><br/>
<a href="#banner">Caixinha Link-me</a><br/>

E não se esqueça de colocar a segunda parte do código em cada um dos destinos que criar.

Editar imagens online

2009-04-08T11:32:00.001-07:00

Um site bem interessante para editar imagens online é o PiZap, fiz um teste e gostei do resultado e além disso é divertido ficar mexendo nas fotos. Se quiser fazer um teste antes de mexer nas suas imagens o site fornece algumas fotos, basta clicar numa das três imagens abaixo, mas se quiser fazer com uma imagem ou foto que esteja no seu computador é só clicar em Upload Photo e encontre a foto que deseja.

Quando clicar para carregar a imagem ela automaticamente aparece na sua tela e com um menu com varias ferramentas do lado direito text, stickers, face, paint, note que ao clicar em qualquer um deles aparecerão novas opções logo abaixo, então é só usar a criatividade e fazer o que quiser com sua imagem. Depois de terminar clique no botão save image e escolha public ou private se deixar public ela vai para a galeria de imagens, portanto é uma escolha que depende da sua vontade, então escolha e clique no botão save image.

Agora vai aparecer uma tela para você copiar o código da sua imagem a primeira linha (embed) é o código pronto para colocar a imagem no blog e a segunda é um link para a página que você estava vendo no PiZap. Ainda se quiser pode fazer o download da imagem, mas o site altera o tamanho, clique no botão download embaixo da imagem e escolha o tamanho.

Topo da Página

2009-04-08T11:31:00.000-07:00

Algum tempo atrás publicamos um texto falando sobre criar um link para voltar ao inicio da página, isso é útil no caso de páginas longas e o visitante pode voltar para o topo apenas num clique.
Com este código você pode fazer isso usando texto ou imagem (pode ser parecida com um botão), neste exemplo usamos uma imagem, porém se quiser apenas texto é só apagar o código da imagem <img src="URL DA IMAGEM" border="0"> e escrever o que desejar (voltar ao topo, inicio...).

<div style="position:fixed; bottom:0px; right:0px;"><a href="#"><img src="URL DA IMAGEM" border="0"></a></div>

Esse link ou botão para voltar ao topo ficará sempre visível na parte inferior direita do seu site, mesmo rolando a página, ele não sairá de lá, ou seja, fica sempre fixo no mesmo lugar.

Uma alteração que podemos fazer é trocar o canto que ele vai aparecer, se em vez de aparecer embaixo você quiser que apareça no canto superior, apague bottom:0px; e coloque top:0px; isso faz aparecer no alto da página, ou se quiser trocar de lado tire right:0px; e coloque left:0px; mudará para o lado esquerdo. Ainda podemos escolher se ficará encostado nas margens da página ou deixaremos uma pequena distancia caso queira deixar alguma distancia da margem é só alterar os valores 0px para o numero que desejar.

Para colocar esse acessório no seu blog, entre na página layout, adicionar gadget, html/javascript e cole o código, não se preocupe em qual parte ou coluna vai colocar porque isso não importa, pois sempre aparecerá fixo no lugar definido no código(canto da página).

Barra de rolagem nos marcadores

2009-04-08T11:30:00.000-07:00

Para modificar a aparência (cor da letra, itálico, cor de fundo ou colocar uma barra de rolagem) somente dos marcadores do blog precisamos criar um novo estilo CSS e aplicar aos marcadores somente. Isso é feito em duas partes, primeiro entre na pagina editar HTML e clique para Expandir modelos de widgets, então procure os marcadores do seu blog.

No caso deste blog (imagem acima) o nome dos nossos marcadores é guia rápido, então encontre os marcadores do seu blog na pagina editar HTML, é claro será com o nome (titulo) que você usa nos marcadores. Quando achar umas linhas abaixo tem <ul>, modifique para ficar igual dessa imagem <ul class='guiarapido'>, a palavra guiarapido será o novo estilo CSS que vamos criar então pode ser qualquer palavra, mas cuidado para não apagar os sinais ao lado ‘ porque sem eles não vai funcionar.

Depois que fizer isso vá até o começo do html, onde estão os estilos do seu blog (body, main, sidebar...) e coloque isso aqui:

.guiarapido { font-style: italic;
height: 200px;
overflow: auto;
}

A parte fonte-style: italic; é o efeito itálico, as outras linhas são a barra de rolagem, o valor 200 é a altura, isso você pode modificar como quiser. Se quiser colocar estilos diferentes para quando o mouse está sobre os links, faça desse jeito:

.guiarapido {height: 200px;
overflow: auto;
}

.guiarapido a{font-weight: bold;
}

.guiarapido a:hover{ font-style: italic;
}

Se não quiser a barra de rolagem nos marcadores é só não colocar a primeira parte do código. Nas duas partes seguintes coloque os estilos que desejar: tipo de letra, tamanho... (lembrando que a parte que tem o “a” são os links e “a:hover” é quando colocamos o mouse sobre o link, assim podemos editar somente os marcadores do blog sem alterar o restante dos links ou textos. Vamos lembrar mais uma vez que fizemos tudo isso usando o estilo com o nome de guiarapido apenas como exemplo, você pode usar qualquer palavra, mas tem que ser exatamente igual em todas as partes do código.

Passar o mouse sobre

2009-04-08T11:29:00.001-07:00

<a href="http://jornaljd.blogspot.com"
onmouseover="this.innerHTML = 'Primeiro Blog'"
onmouseout="this.innerHTML = 'Meu Jornal'">Meu Jornal</a>

A finalidade deste código é trocar o texto quando o mouse está sobre ele. O funcionamento é bem simples e fácil de alterar. Você deve colocar a url da pagina que desejar e escolher o texto que aparecerá. Um detalhe que não pode ser esquecido é repetir duas vezes o texto normal (aquele que aparece quando não estava com o mouse sobre ele) no exemplo Meu Jornal, pois se colocar apenas uma vez quando passar o mouse sobre ele o texto mudará mas não voltará ao original quando tirar o mouse.
Outro cuidado que precisamos ter é usar textos com numero parecido de letras pois se o texto que aparece quando o mouse não está sobre ele tiver 10 letras e quando passar o mouse aparecer um texto de 20 letras talvez não tenha espaço na mesma linha então o texto ocupará duas linhas e isto faz todo o layout do blog dar um “pulo”, ou seja quando aparece o texto maior e passa a ocupar duas linhas tudo que estiver abaixo dele vai descer um pouco para dar espaço. Então tenha cuidado de verificar se quando passa o mouse o texto continua ocupando o mesmo numero de linhas.

Colocar música no blog

2009-04-08T11:27:00.001-07:00

Colocar música no blog é mais fácil do que parece. Isso é verdade pois nunca tinha me interessado por isso, mas revolvi pesquisar para escrever essa dica e para minha surpresa em menos de 10 minutos eu estava ouvindo música no meu blog.

Usei uma música do site http://www.mp3tube.net, você só precisa pesquisar pela música que deseja, quando você clica no nome da música aparece uma tela que você ouve a música e fornece o código para colocar no seu site, mas não é a url, é o código que está na frente do embed.

Esse site ainda fornece a opção de você fazer um cadastro e colocar a música que quiser, caso você não encontre a música desejada. Caso não gostem do MP3tube, aqui tem outros sites de hospedagem:

http://www.myfabrik.com

http://boomp3.com

Enfim o modo de colocar música é simples e basicamente o mesmo de colocar qualquer outra coisa, procure um site que tenha o que deseja e procure pelo código para colocar no seu blog.

Esses códigos devem ser colocados pela pagina editar layout >>> adicionar um gadget >>> html/javascript, então é só colar o código (isto no Blogspot), para outros blogs procure onde você edita o html ou modelo, enfim onde você pode colocar o código da música.

Cópia de texto

2009-04-08T11:26:00.001-07:00

Há algum tempo publicamos um script que não deixa selecionar texto,
mas ele apresentou alguns problemas então encontramos esse que parece funcionar
adequadamente. Mas tenha a certeza que nenhum código protegerá completamente
o conteúdo do seu site, pois existem muitas formas de copiar um site.

Na página editar html coloque esse código antes da tag</head>,
e isso impedirá a seleção de textos.

Seu Widgets

2009-04-08T11:22:00.000-07:00

Uma maneira legal de divulgar seu site é fazer um Widgets, pois além de colocar no seu site, você ainda pode disponibilizar o código numa caixinha link-me do mesmo jeito que faz com seu banner, achei dois sites que fazem esse serviço:

Widgetbox

Spring Widgets

Naturalmente devem existir outros sites que façam esse serviço, mas o que vale é a idéia, portanto se não gostar desses, fica a sugestão que vale a pena pesquisar. Estes sites precisam fazer cadastro, mas não é difícil. Depois na hora de criar o seu widgets coloque a url do seu feed(RSS), que no caso do blogspot é http:// S E U B L O G .blogspot.com/atom.xml, e após isso é só escolher alguns detalhes sobre tamanho e aparência. O exemplo abaixo é o widget do nosso outro blog Frases Curtas que foi feito no site Spring Widgets

Quase esquecemos de dizer, caso você queria colocar isso numa caixinha link-me, é só colocar o código do widget e colocar no lugar do código do banner na caixinha, isso fica desse jeito:

<p align="center">Código do Widget
<br /><textarea rows="3" cols="12" onFocus="this.select()"
onMouseOver="this.focus()" name="textarea">Código
do Widget</a></textarea></p>

Tradução

2009-04-08T11:21:00.002-07:00

Um tradutor simples e eficiente para colocar no seu blog. Testei do português para o espanhol e ficou perfeito.Basta copiar este código e inserir através da página layout nos elementos de página>html/javascript. Não esqueçam na parte final do código de substituir http://SEUBLOG.blogspot.com pelo endereço do seu blog.

<div align="center"><img src="http://img176.imageshack.us/img176/6091/84056383at1.png"/>
<br /> <form id="translateForm" action="http://www.worldlingo.com/S1790.5/translation"
target="_blank">
<input value="PT" name="wl_srclang" type="hidden"/>
<select style="font-size: 70%; width: 160px;" name="wl_trglang">
<option value="EN"/>Português - Inglês
<option value="FR"/>Português -Francês
<option value="DE"/>Português -Alemão
<option value="IT"/>Português - Italiano
<option value="PT"/>Português -Português
<option value="RU"/>Português - Russo
<option value="ES"/>Português - Espanhol
</select>
<input value="http://SEUBLOG.blogspot.com/" name="wl_url"
type="hidden"/>
<input name="submit" type="submit" style="font-size:
70%; width: 50px;" value="Traduza"/>
</form>
</div>

Status do MSN no Blog

2009-04-08T11:21:00.001-07:00

Para mostrar seu status do MSN no seu blog entre no link:

http://settings.messenger.live.com/Applications/WebSettings.aspx

Isso vai levar você para uma página onde encontrará algumas opções de como mostrar seu status do MSN no seu blog, inclusive se todos ou não poderão ver quando você estiver on-line.

Voltar ao topo da Página

2009-04-08T11:20:00.002-07:00

Para voltar ao topo da página é bem simples, faça da seguinte forma:

Inserir o link: Entre na página layout, clique para adicionar um gadget, escolha a opção HTML/JavaScript, e coloque esse código (esse será o lugar onde aparecerá o link para voltar do topo da página):
<a href="#topo">Topo da Página</a>
Clique para salvar e está parte está pronta.

Inserir o Marcador: agora vamos marcar para onde o link deve levar, na pagina editar HTML, procure por <body> e logo depois dela coloque esse código:
<a name="topo"></a>

E já está tudo pronto é só salvar e ver o resultado. Esse mesmo sistema funciona para linkar qualquer outra parte do seu blog. Por exemplo, você quer colocar no inicio da página um link que leve para o seu banner ou setor de parcerias, coloque o link no inicio do jeito que explicamos acima (inserir link) e em vez de inserir o marcador pela pagina HTML vamos colocar junto com os parceiros, por exemplo, então coloque o código <a name="topo"></a> junto com o código dos seus parceiros e pronto. Mas lembrem-se quando for usar mais de uma vez esse código troque a palavra topo que está nele, pois se usar duas vezes a com a mesma palavra não funciona, pode ser qualquer palavra (parceiros, banner, imagem...) e quando for modificar o código cuidado para não pagar nenhum outro sinal “por engano.

Dia do mês e da semana

2009-04-08T11:20:00.001-07:00

Para mostrar o dia do mês e da semana no seu blog coloque o código abaixo. Entre na pagina editar layout, adicionar gadget, html/javascript, e cole esse código:

<script language="JavaScript">

</script>

Para escolher a cor, tipo e tamanho que a data aparecerá no seu blog, troque a linha document.write(day+", "+myweekday+" de "+month+" de 2008"); por essa aqui:

document.write("<font color='#CC0066' size='30pt' face='Comic Sans MS'>"
+day+", "+myweekday+" de "+month+" de 2008</font>");

E altere como desejar: 30pt é o tamanho, Comic Sans é o tipo de letra e #CC0066 é a cor, não esqueça de alterar o ano pois esse código estava dando uma falha no Firefox por isso não foi possível colocar o ano para atualizar automaticamente, se precisar aqui tem uma tabela com o código das cores.

Imagem para fundo do blog

2009-04-08T11:19:00.001-07:00

Quando temos que fazer uma imagem para usar como textura no fundo do blog geralmente enfrentamos muitos problemas, pois é difícil fazer uma imagem que encaixe perfeitamente. Logo abaixo você tem imagens para usar como plano de fundo no seu site, você apenas precisa salvar e hospedar em algum lugar, sugerimos o http://imageshack.us

No site All Free Backgrounds e Free Backgrounds você encontra muitas outras imagens de fundo, e o procedimento é o mesmo, salvar e hospedar a imagem e depois você entra na pagina editar html do seu blog e coloca a linha de código background-image: url(endereço da imagem); junto com :
body{................
...........
..........}
E já está pronto, se você quiser testar essas imagens antes de colocar no seu blog copie esse código:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

</style></head>
<body>
</body>
</html>

Cole no bloco de notas, altere onde está escrito fundo4.gif para o nome da imagem que você quer testar, mas não se esqueça de colocar .jpg ou .gif no nome da imagem porque isso também faz parte do nome da imagem. E salve no seu computador na mesma pasta onde salvou a imagem, com o nome planodefundo.htm, desse mesmo jeito o nome do arquivo precisa ter o .htm no final pois assim será como se fosse uma pagina de internet. Agora é só ir até a pasta e clicar sobre esse arquivo que ele abrirá em seu navegador de internet e você poderá ver como fica a imagem de fundo sem precisar hospedar e mexer no seu blog. Isso poupa muito trabalho, afinal somente irá mexer no seu blog depois de visualizar a imagem de fundo que escolheu e já tem certeza que deseja usar-la.

Compactar e Descompactar Arquivos (Zip)

2009-04-08T11:16:00.000-07:00

Um programa muito usado e que ainda deixa algumas duvidas é o WinZip ou como é mais conhecido Zip. Então vamos mostrar como usá-lo.
Começaremos falando sobre descompactar arquivos para isso, vamos usar o exemplo de baixar um arquivo da internet que esteja no formato .zip, depois de terminado o download vamos até a pasta onde salvamos o arquivo e clique com o botão direito do mouse sobre ele, escolha a opção: WinZip e depois Extract here.Depois de clicar em Extract to here, aparecerá um arquivo com o mesmo nome, mas com o formato original, e podem ser vários formatos: .xml, .pdf, e muito outros, geralmente é só clicar sobre esse novo arquivo e seu computador abrirá no programa mais adequado.
Antes de clicar para abrir esse arquivo que baixou, é preciso ter alguns cuidados como passar um antivírus nele e prestar atenção se não é um arquivo com final .exe, pois isso é um programa que será instalado no seu computador, portanto somente abra um arquivo .exe se confiar no site de onde baixou o arquivo.

Agora faremos o caminho inverso, ou seja compactar e colocar na internet um arquivo: Isso é útil em duas ocasiões: quando vamos enviar um arquivo por email, pois fica mais rápido a transmissão ou quando precisamos hospedar um arquivo para outras pessoas fazerem download dele, porque é muito mais fácil achar onde hospedar um arquivo .zip do que outros formatos. Aqui estão alguns sites de hospedagem:

http://rapidshare.de
http://www.mediafire.com
http://www.4shared.com

Isso faz abrir uma janela para você escolher onde vai salvar o arquivo compactado, sugerimos salvar na mesma pasta e com o mesmo nome, isso já aparece pronto na janela, portanto só precisamos clicar no botão Add.

Colocar Rádio no Blog

2009-04-08T11:15:00.000-07:00

Muitos blogueiros pergunta como fazer para colocar uma radio ou suas músicas favoritas no blog isso não é difícil, isto não é difícil, você precisa pegar um código em uma das rádios existentes na internet e colocar no seu blog pela pagina layout, adicionar gadget, html/javascript. Aqui temos links de alguns sites que fornecem essas rádios para colocar no blog:

Last FM
Radio Fusion
Deezer

Além desses encontramos nesse site um script que pode ser modificado para varias rádios diferente, testamos com duas delas e já deixamos o código pronto para colocar no seu blog:

Rádio Web Rock
Jovem Pan

Contudo você precisa avaliar bem se realmente deveria colocar uma radio ou música no blog principalmente se esta iniciar automaticamente, por que muitas vezes seus visitantes podem estar ouvindo outra música ou estão em silencio e de repente levam um susto com uma música começando sem ele saber de onde vem. Outro problema é o gosto músical de cada pessoa, certamente a música que você acha maravilhosa, outros não suportam, talvez se esse blog tivesse música você estaria achando ela ridícula e procurando feito louco onde parar com a música. Isso se não perdesse a paciência e saísse do blog sem nem olhar direito.

Por essas razões pense bem se colocará músicas no seu blog e quais colocará. Uma opção para colocar apenas uma música no blog é o MP3tube, mas o visitante vai precisar clicar no play para iniciar a música.

Usando Melhor os Contadores de Visitas

2009-04-08T11:14:00.001-07:00

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
Bravenet Hit Counter
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.

Topo da Página

2009-04-08T11:12:00.000-07:00

Algum tempo atrás publicamos um texto falando sobre criar um link para voltar ao inicio da página, isso é útil no caso de páginas longas e o visitante pode voltar para o topo apenas num clique.

Com este código você pode fazer isso usando texto ou imagem (pode ser parecida com um botão), neste exemplo usamos uma imagem, porém se quiser apenas texto é só apagar o código da imagem <img src="URL DA IMAGEM" border="0"> e escrever o que desejar (voltar ao topo, inicio...).

<div style="position:fixed; bottom:0px; right:0px;"><a href="#"><img src="URL DA IMAGEM" border="0"></a></div>

Esse link ou botão para voltar ao topo ficará sempre visível na parte inferior direita do seu site, mesmo rolando a página, ele não sairá de lá, ou seja, fica sempre fixo no mesmo lugar.

Uma alteração que podemos fazer é trocar o canto que ele vai aparecer, se em vez de aparecer embaixo você quiser que apareça no canto superior, apague bottom:0px; e coloque top:0px; isso faz aparecer no alto da página, ou se quiser trocar de lado tire right:0px; e coloque left:0px; mudará para o lado esquerdo. Ainda podemos escolher se ficará encostado nas margens da página ou deixaremos uma pequena distancia caso queira deixar alguma distancia da margem é só alterar os valores 0px para o numero que desejar.

Para colocar esse acessório no seu blog, entre na página layout, adicionar gadget, html/javascript e cole o código, não se preocupe em qual parte ou coluna vai colocar porque isso não importa, pois sempre aparecerá fixo no lugar definido no código(canto da página).

Mostrar Reações

2009-04-08T11:11:00.000-07:00

Algumas pessoas perguntaram sobre como mostrar as reações dos visitantes sobre as postagens do blog, isso é muito fácil de fazer é só entrar na pagina layout, clicar para editar as postagens do blog e marcar a opção reações. Se quiser modificar as palavras engraçado, interessante, legal, é só clicar no link editar ao lado delas e escrever o que você quiser.

E se quiser pode mudar a própria palavra reações, é só escrever outra coisa no lugar como, por exemplo, “essa postagem é:” no caso de usar palavras para classificar como bom, regular e ótimo. Enfim use sua criatividade e use esse recurso do blog da maneira que quiser, essa é um jeito simples de incrementar o blog em poucos minutos.

Fazer Playlist para Colocar no Blog

2009-04-08T11:10:00.000-07:00

Devido à grande procura por musica para colocar no blog, aqui estão mais alguns links úteis que mostram sites que fazem playlists, aceitam fotos e até vídeos, quer dizer você pode fazer uma seleção de musicas para colocar no seu blog.

O Imeem faz todos esses serviços, mas infelizmente o site é em inglês o que dificulta um pouco sua utilização, mas já recebi varias vezes emails elogiando esses sites e dizendo que deveria falar sobre eles aqui no Dicas para Blogs, pois são bem úteis.
Sobre os Imeem achei essa descrição na Comunidade do Imeem no Orkut, resolvi publicar, pois eles sabem mais do que eu sobre o site:
Imagine um YouTube onde, além de você fazer upload de seus vídeos, também poder fazer upload de suas músicas favoritas e suas fotos...
Imagine ainda você poder colocar todo esse conteúdo em seu site ou blog, devido ao maravilhoso "embed player"...
Imagine você poder montar seu perfil (quase igual ao orkut) e fazer amigos e entrar em grupos...
Imagine você ter o poder de fazer a sua playlist e mandar para seus amigos...

Outro site com serviços parecidos é o SplashCast é possível criar seus canais online com musica, video, fotos e ainda é possivel fazer edições e mixar(adicionar narração as fotos ou videos) no próprio site, porém é em inglês também.

Se alguém conhecer ou usar algum site que faça esse tipo de serviço deixe um comentário falando sobre ele, ou se preferir envie para nosso email um texto descrevendo como usar o site, se for uma boa dica faremos uma postagem com ela, mas é claro vamos colocar seu link dizendo que já recebemos isso pronto como fazemos em todas as matérias que recebemos(veja o item colaboradores no guia rápido ao lado).

Bloquear o botão direito do mouse

2009-04-08T10:13:00.000-07:00

Algumas pessoas tentam evitar que copiem coisas do seu site ou blog bloqueando o botão direito do mouse, esse código abaixo bloqueia o botão direito do mouse no Internet Explorer e Firefox.

<script>
function click() {
if (event.button==2||event.button==3) {
oncontextmenu='return false';
}
}
document.onmousedown=click
document.oncontextmenu = new Function("return false;")
</script>

Você deve colocar esse código antes da tag </head> no seu site e pronto o botão direito não funcionará mais em nenhuma parte do seu site nem nas imagens nem nos textos. No Blogspot você coloca esse código pela pagina editar html, nos outros blogs deve ser parecido com isso afinal todos permitem algumas alterações no código html do blog.
Mas lembre-se que apesar de usar esse ou qualquer outro código de bloqueio de botão direito, impedir selecionar texto e outras coisas, nenhum deles é 100% seguro, portanto dependendo do conhecimento de código da pessoa que está querendo copiar algo ela sempre dará um jeito de conseguir.

Mecanismo de Busca Para seu Blog da blogger

2009-02-16T19:12:00.001-08:00

Instale esse mecanismo de busca no seu blog para facilita a vida de seus visitantes,ele Funciona direitinho.
Clique aqui para pegar o codigo
Como eu faço para instalar?
1 Va em Modelo;
2 clique em adicionar um elemento a página;
3 depois em adicionar html/javascript;
4 copie o codigo fazendo as seguintes alterações:
a) Substitua URL DO SEU BLOG pelo endereço do seu blog ex: http://blogtools2.blogspot.com
b) Você pode criar uma imagem para o fundo do sistema de busca,a imagem deve ter 20x20 pixels e tem que estar hospedada na internet,e so você pegar a URL da imagem e substituir"URL DA IMAGEM DO FUNDO" pela endereço da sua.
Aqui temos algumas cores
LARANJA http://ezbrasil.com.br/var/ezbrasil/storage/images/media/images/degrade/419-1-eng-GB/degrade.png
CINZA
http://rtmblog.wordpress.com/files/2007/08/degradecinza.png
VERDE
http://rtmblog.wordpress.com/files/2007/08/degrade20x20-verde.png
AZUL
http://rtmblog.wordpress.com/files/2007/08/degrade-blue.png
c) Você pode personalizar o texto do botão, eu coloquei GO! voce pode colocar o texto da sua preferência como buscar ou procurar
5 Depois e so clicar em salvar.

Remover a Navybar do Blogger

2009-02-16T19:11:00.000-08:00

A navybar e um elemento que não agrada a todos,muitas vezes ela não combina com o layout do blog e se acaba se tornando indesejada,por isso vou ensinar como retira-la do seu layout,

CLIQUE AQUI para pegar o codigo para remover navybar

O codigo deve ser iserido no começo do html antes dessa frase

/* Variable definitions
====================

Cbox Caixa de mensagem

2009-02-16T19:09:00.000-08:00

&amp;lt;br&amp;gt;&amp;lt;a href="http://www5.shoutmix.com/?startgamesonline"&amp;gt;View shoutbox&amp;lt;/a&amp;gt;&amp;lt;br&amp;gt;

ShoutMix chat widget

A cbox e uma caixa de mensagems que Permite a você interagir com os seus visitantes. Ela e de facil utilização e possui opções de personalização para que fique combinando com o estilo do seu blog
Para se cadastrar acesse o site http://www.cbox.ws/

clique em Sign up

username:Nome de usuario
Password: Sua senha
Confirm Password:confirme sua senha
Email: Seu Email
Website:endereço do seu blog incluindo http://
Language:potuguese
Skin:selecione um estilo

Clique em continue>>
Em seguida faça o login
Para finalizar pegue o codigo e insira no seu blog

Crie um letreiro digital para o seu blog

2009-02-16T19:08:00.000-08:00

Com signbot você pode criar um letreiro digital animado para inserir no seu blog ou site,Você tem a opção de salvar a imagem no seu computador ou hospedar em imageshack podendo utilizar a URL em seu blog

1° Escreva a frase que desejar no campo em branco
2° Clique em Generate sing
3° Se você quiser baixar a imagem para o seu pc clique em Download Your Sign
Caso queira hospedar no imageshack clique em Host to ImageShack

Relógio em Flash para seu blog

2009-02-16T19:07:00.000-08:00

São vários opções de modelos para você colocar no seu blog/site,Fácil de instalar apenas escolha o relógio e pegue o código

Acesse o Site http://www.relojesflash.com/

Favoritos

2009-02-16T19:06:00.002-08:00

Adicione a estrela para favoritos no seu blog:
1° Insira o código abaixo substituindo "URL DO SEU BLOG" pelo endereço da sua página
CÓDIGO
2°coloque este outro codigo separado do 1°
CÓDIGO

Blogblogs o maior site de indexação de blogs do Brasil

2009-02-16T19:06:00.001-08:00

Faça parte da maior comunidade de blogueiros do Brasil o blogblogs:

O BlogBlogs é um serviço gratuito de indexação e busca de blogs (fotologs, videologs, videocasts, podcasts e qualquer outro conteúdo disponível via algum tipo de feed). No BlogBlogs você pode divulgar o seu blog e aprender mais sobre a blogosfera, além de conhecer outros blogueiros, troque experiências faça amigos cadastre-se e amplie os horizontes para seu blog.

Widget muito legal Classificação de estrelas nos posts do seu blog

2009-02-16T19:05:00.000-08:00

Quarta-feira, 30 de Janeiro de 2008 News Icon Feed, RSS... É muito difícil achar algum ícone legal para colocar no seu blog, no google você tem que p

2009-02-16T19:04:00.000-08:00

O e-referrer e uma ferramenta que mostra a origem dos visitantes do seu blog,ele informa a quantidade de visitas que um determinado site lhe enviou, essa ferramenta e muito útil para determinar a posição dos banner de sites e blogs que você fez parceria.

para cadastrar-se clique aqui

Role a página ate em baixo e clique em sign up now

Preencha os campos

name:Seu nome
user name :seu nome de usuário
e-mail:digite um email valido
password:sua senha
confirm password Confirme sua senha

Clique em SUBMIT

Após esta etapa vai aparecer uma mensagem dizendo que sua conta foi ativada clique em "click here"

Na página seguinte clique em Generate Code copie o código e insira no seu blog (adicionar elemento a página HTML/java script)

Adicionando um menu em baixo do cabeçalho

2009-02-16T19:03:00.000-08:00

Olá blogueiros! Neste post vou ensinar como coloquei aquele menu em baixo do cabeçalho no Silver Theme. Essa é uma tarefa meio chata, não difícil, o problema é que pode dar errado algumas vezes seguidas, então peço que vocês tenham paciência, se não der certo na primeira vez tente na segunda e assim por diante... Eu tive que colocar o tutorial no bloco de notas, pois se eu colocasse aqui neste post, os códigos entrariam em ação e vocês acabariam não vendo o código, mas sim o resultado de alguns deles. Peço novamente para que tenham atenção na instalação, visualizem antes de salvar e depois de ter adicionado os links testem no IE e no Firefox para ver se ficou bom, pois o firefox pode ser mais leve, mas o IE é o mais usado. Enfim, boa sorte com a instalação, sigua as instruções com atenção. Para trocar a imagem do menu, se ela tiver o mesmo desenho.

O tamanho é 200X40, pois ela irá se repetir, assim dando a impressão de que é uma imagem só, agora se ela tiver algum desenho ou algo parecido.
Ficou estranho não é?
Para não ficar desse jeito é só você criar uma imagem com a mesma largura do cabeçalho do seu blog. A largura do Silver Theme é de 997px e a imagem ficaria 997X40. Depois é só hospedar a imagem e substituir o endereço.

Download

Easy share

Chat Para o Blog

2009-02-16T19:02:00.002-08:00

Crie um chat para seu blog legal e fácil de instalar

Acessem o site http://xat.com

Clique no botão "make a chat box"
Em seguida selecione um plano de fundo que mais lhe agrada e siga para o próximo passo

Configurações do chat

"Width" Nesta opção coloque a largura do chat, ela deve ficar com uma largura certa para o
blog.
"Height"Coloque o comprimento

Clique em "Update & Getcode".

Pra finalizar insira o código gerado em um elemento html e deixe em cima ou abaixo dos posts.

No final da página do Xat.com ainda temos outras opçoes "Other Options"

Uma opçao que eu recomendo e desligar o som do chat.
" Default chat box sounds to OFF"