Coloque banner em flash no blogger

Como colocar conteúdo para download no Blogger

Como colocar um xat no blogger/blogspot

Como colocar .SWF no Blogger

Aprenda a colocar arquivos em Flash no Blogspot/Blogger.

Crie um site no blogspot

Você usa o blogspot para criar um blog, certo?
Mas, o que poucas pessoas sabem é que com um pouco de jeito e prática dá para idealizar um site nele.

Antes de tudo Vá em Configurações:

Vá na aba Permissões:

• Marque "Somente autores do blog" (quando o site estiver pronto, você volta aqui e marque "Qualquer pessoa").

Vá na aba Comentários:

• Em "Comentários" marque "Ocultar".
• Em "Padrão de comentários para posts" marque "Novas postagens não terão comentários".
• Salve.

Vá na aba Formatação:

• Em "Exibir" marque 1 post.
• Salve.
  

Retire os "Marcadores" de debaixo das postagens (eles continuarão aparecendo na widget Marcadores).

Vá em Layout - Editar HTML - Expandir Widgets.
Localize e delete:

<div class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>
</div>

Salve.

Retirando a data dos posts:

Procure e delete:

<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

Salve.

Criar um post de página inicial:
Faça sua postagem normalmente, em "Opção de Postagem" configure uma data bem adiantada (ex. 20/10/211).

Preparando o conteúdo.

Agora é a hora de colocar a mão na massa e preparar o conteúdo de seu site(textos, fotos, vídeos, jogos, músicas), lembrando que você deve colocar em Marcadores a tag onde ficará esse post.

Dica:

• Um site com domínio blogspot convenhamos fica muito ruim, certo?
  Então antes de tudo invista em um domínio próprio!!!
• Use um template personalizado, se possível, único.
• Sempre salve e visualize cada passo para ver se está do jeito que você imaginou.

Pronto?

Oficialmente sim, mas você pode colocar esses marcadores em uma Linkbar, em um menu flash, colocar widgets, formulários enfim, tudo que um site profissional contém.

Só não esqueça de atualizá-lo e divulgá-lo, tá.

Como colocar uma linkbar no blogger

Gostaram da mudança de visual?
Agora, como já deu para reparar o blog possui uma linkbar mas, para que serve e como colocá-la?

Para que serve:
Ter uma linkbar é útil para colocar nossos principais links a disposição de nossos leitores.
Nele você coloca um botão de retorno ao ínicio, links para redes de relacionamentos, outros blogs...

Como colocá-la:

Agora, há duas possibilidades.
A primeira: seu template já fornece a possibilidade de colocar uma widget no header.
Aí é só acrescentá-la e configurar seu CSS.
A segunda (e mais provável): você vai ter que colocá-la manualmente.

Procure no html do seu blog:

<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
<b:widget id='HTML2' locked='false' title='' type='HTML'/>
<b:widget id='Header1' locked='false' title='Informática Desvendada (Cabeçalho)' type='Header'/>
</b:section>

Atenção se o seu maxwidgets for só '1' mude para '2' e em showddelement se estiver 'no' mude para 'yes'.

Agora logo após </b:section> cole:

<div id='linkbar-wrapper'>
<b:section class='linkbar' id='linkbar' showaddelement='no'>
<b:widget id='LinkList1' locked='true' title='Linkbar' type='LinkList'/>
</b:section></div>

Salve.

Configurando o CSS:

Procure: /*Outer-Wrapper

Acima dela, cole:

/* ----- LINKBAR ----- */
#linkbar {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 100%;
position: relative;
background: #000080;
border: 0px solid #000;
border-bottom: 0;
}

#linkbar ul {
margin: 0px 0px 0px 0px;
padding: 3px 3px 3px 3px;
text-align: center;
list-style-type:none;
}

#linkbar li {
display: inline;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

#linkbar h2 {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
display: none;
visibility: hidden;
}

#linkbar a {
clear: both;
margin: 0px 0px 0px 0px;
padding: 6px 6px 6px 6px;
width:50%;
text-decoration:none;
font-family: arial, sans-serif;
font-weight: bold;
font-size: 24px;
color: #fff;
border-right: 1px solid #fff;
}

#linkbar a:hover {
color: #000;
background: #fff;
}

#header img {
margin-$startSide: auto;
margin-$endSide: auto;
}


Essa configuração é a da minha linkbar, portanto não esqueça de mudar a cor em background, width, height, o tipo de fonte e seu tamanho.

Agora vá em "Elementos da Página".
Provavelmente apareceu uma caixinha de linkbar embaixo do cabeçalho.
Clique em Editar.
Agora basta inserir os links, nomeá-los e escolher a ordem.
Salve e visualise.

Lembrete:
Para acessar o html do seu blog, clique em layout e depois em editar HTML.
Para localizar algo no código use CTRL + F.

Coloque uma caixinha "Assine nosso feed" em seu blog

Que tal assinar o Informática Desvendada por e-mail?
É só cadastrarem-se na caixinha ao lado e pronto!

Agora vou explicar como colocar uma dessas no blog:

• Entre em sua conta do Feed Burner.
• Clique no blog que deseja colocá-la.
• Clique na aba Publicize.
• No menu do lado direito escolha: Email Subscriptions.
• Escolha a linguagem utilizada.
• Em "Use as widget in" escolha Blogger e clique em Go.
• Será aberto uma janela do seu blog.
• Selecione o blog onde irá colocá-la (caso tenha mais de um).
• Clique em Adicionar widget e pronto!
  

Agora você pode arrastá-la para onde desejar no template.
Salve e visualise.

Coloque uma animação em flash no seu blog:

Você criou um excelente header em flash ou aquela maravilhosa widget agora, como colocá-los no site?

Primeiro: armazene seu arquivo em um site que suporte flash, como:
Imageaddicts

Agora, utilize o seguinte código:

<embed src="http://endereçodasuafoto/nome_do_arquivo.swf"
quality="high" height="250" width="600"> < /embed>

Lembrando que:
src: é o endereço da sua imagem (que você pegou no site acima).
Height: altura de sua imagem
width: largura de sua imagem
Coloque o tamanho correto!

Você pode utilizar esse código em um post, em uma widget ou no header.

Para colocar no header:
Procure no html de seu blog:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Template (Cabeçalho)' type='Header'/>
</b:section>
</div>

Cole o código entre </b:section> e </div>

Salve e visualise.
Pronto!

Uma dica:
Cuidado ao utilizar arquivos em flash, não caia na tentação de criar seu template inteiro com ele, o blog ficará muito pesado!
Use-o apenas no header e em algumas widgets.

Colocando um favicon no blog

Favicon, são pequenas imagens que está ligada a um site.
Quando acessamos ele, essa imagem aparece na aba de navegação e ao lado do endereço do site (que nem o B do Blogger acima).

Como colocar:
Primeiro escolha a imagem que você quer utilizar.
Acesse o site FavIcon, acesse sua imagem nele e clique em Generate FavIcon.ico
Fça o download do arquivo e descompacte-o no seu computador.

Hospedando as imagens:
O arquivo é dividido em duas partes, então a imagem "normal" .gif, .png ou .jpg hospede-a no Imageshack, anote o endereço.
O arquivo ico você hospeda no IconJ (é que nem o Imageshack), anote o endereço.

Inserindo o código no Html do blog:

Procure:
</head>

Acima dele, cole:

<link href='endereçodaimagem.ico' rel='shortcut icon'/>
<link href='endereçodaimagemnormal' rel='shortcut icon'/>

Veja como fica: Crepúsculo Filme

Coloque imagens rotativas no header do blog rapidamente com gifs animadas

Bem, no post anterior aprendemos como criar uma gif transparente no fireworks, certo?
Hoje vamos colocá-la no Header do blog.

Porque?
Bem, acho que muitos já viram aqueles blogs com imagens rotativas no topo, e ficaram imaginando como são feitos.
Primeiro: a diversas maneiras de criá-las: flash, javascript, css, gifs.
Depois de testar algumas delas, ficou bem claro que o modo mais fácil é criá-las como gifs animadas (como ensinado no post anterior) com cerca de 4 imagens e utilizá-las.

Hospedar a imagem:
Antes do mais nada pegue sua gif animada e hospede-a na internet (recomendo o ImageShack).
Anote o endereço.

Agora vamos utilizá-los:
Acesse o código .xml do seu template (layout - Editar HTML).

Procure:
#header-wrapper {
Adicione:
background-color: #000000;
widht: coloque a largura total do header;
height: coloque a altura total do header;

Background-color indica a cor do fundo de seu header, já que como explicado anteriormente o fundo das imagens são transparentes sendo que, #000000 é a cor preta, utilize uma tabela de cores para escolher a mais apropriada para você.

Procure:
#header {
Adicione:
background-image: url(o endereço da imagem salvo anteriormente);
widht: coloque a largura da imagem;
height: coloque a altura da imagem;
Pronto!

Agora alguns lembretes:

• Faça a imagem do tamanho que desejar contanto que respeite o do header.
• Recomendo que o header-wrapper tenha o mesmo tamanho do outer-wrapper.
• Faça a gif com, no máximo, metade da largura do header-wrapper para poder incluir outros elementos de página depois.
• A altura, se possível, deve ser a mesma.
• Por fim, tente não criar um header muito largo, use uma altura de, no máximo, 300px.

Salve e visualize seu blog.

Colocando música de fundo no blogger

Já há bastante tempo eu vinha procurando um modo de como colocar uma música de fundo em um blog mas, sem alterar seu código HTML.
Sabe: simplesmente uma música que comece a tocar quando a gente entra no blog desde claro, que permita aos leitores pararem ela.
Encontrei uma solução bem simples: Top Músicas

O que é:
Um site com uma boa seleção de músicas.
Basta você localizar a que deseja e pegar o código (para orkut).

Ajustando-a para o blog:
Delete a parte de descrição da música (onde está escrito: Mais de 1 milhão de músicas para ORKUT!) e diminui o tamanho de widht e height.
Copie e cole em uma widget HTMK/JavaScript (layout - inserir gadget).

Conselho:
Escute a música que escolheu até o fim antes de utilizá-la, pois às vezes clicamos em uma e é outra que toca no lugar.

Na prática:
Vejam como ficou no meu blog, com as devidas modificações realizadas:
Crepúsculo Filme

Conheça: Google Webmaster

Muitos, por incrível que pareça, ainda não o conhecem.
Google Webmaster é um conjunto de ferramentas para webmaster otimizarem e analizarem seus sites (blogs) ao máximo.

Acesse a página do Google Webmaster clique em "Ferramentas do Webmaster" e faça seu login.
Se é a primeira vez que o utiliza: clique em "adicionar site" e cadastre-o.
Confirma que você é o dono inserindo a metatag fornecida por eles dentro da tag <head> do seu blog.
Confirme no Google Webmaster.
Agora sim, vamos analisar suas ferramentas:

No Painel inicial, temos:

• Termos de pesquisas mais comuns: palavras pesquisadas no google que indicam seu blog e em que posição este se encontra.
• Links para seu site: número total de links recebidos e quais posts tem mais links.
• Erros de rastreamento: erros que seu site apresenta, lembrando que o google criou o roobot e não rastreia mais depois de seach (leia mais).
• Sitemaps: mostra seu sitemap (via feed) e se este está sendo indexado corretamente.

Configurações do site:

• Sitemap: clique em enviar para que o google possa indexar seu blog melhor.
• Acesso do rastreador: mostra seu roobot txt.
• Links para o site: são links para as páginas dentro de um site mas, nem todos os sites têm links para o site.
• Mudança de endereço: caso mude seu domínio redirecione-o para não perder seus dados.
• Configurações: selecione o país predominante e como deseja que o google mostre seus urls.

Seu site na web:

• Termos de pesquisa mais comum: mostra as palavras pesquisadas que resultaram em seu blog e a taxa de cliques nela.
• Links para seu site: mostra em ordem descrescente os posts que receberam mais links (clique no número para ver quais são estes).
• Palavras-chaves: palavras que resultam ao seu blog.
• Links internos: para de seu site que redirecionam para outras dentro de seu site.
• Estatísticas de assinantes: mostra quantos assinam seu feed.

Diagnóstico:

• Erros de rastreamento: mostra se o google encontrou algum problema ao rastrear seu site.
• Códigos de status http: esse código também fornece ao Googlebot informações sobre o seu site e sobre a página solicitada, clicando no link é aberta uma página com todos os códigos utilizados e suas descrições.
• Como verificar o arquivo roboot txt: utilize-o para ver se algum artigo seu está sendo barrado por engano.
• Links quebrados: ensina a fazer uma página 404 personalizada.

Então, vale ou não a pena utilizá-los?

Bloqueie o botão direito do mouse:

Quer evitar que os outros selecionem seu texto com o botão direito do mouse?

Use esse código antes de </head>

<script language="JavaScript">
<!-- function click() { if (event.button==2) {
alert('Você não pode selecionar essa página!')
alert('Não copie ou será denunciado as devidas autoridades') }
} document.onmousedown=click
// --><br />
</script>

Mas, será que vale realmente a pena?

Acho que você já viu esse código em vários blogs/sites que ensinam html/javascript?
Então, porque será que quase ninguém o utiliza?
Simples, porque é fácil burlar o código e quem realmente deseja copiar seu conteúdo dará um jeito (conhece a tecla PrintScreen?).
Se considera seu conteúdo realmente importante e que não pode ser copiado utilize-o mas, o melhor mesmo, é fazer uso da licença Creative Commons (nosso próximo post!).

ScribeFire: post em seu blog direto do navegador

ScribeFire é uma extensão para FireFox de apenas 372 kb que vale ouro.
Para quem escreve em vários blogs por dia, está sempre atualizando o conteúdo ele é, com certeza, o plugin ideal.

Como instalar:

• Baixe a extensão (no Baixaki).
• Instale e reinicie o navegador.
• Pronto.

Note que apareceu uma barrinha de ferramentas:

Como utilizá-la:
Na primeira vez que for utilizá-la terá que informar o nome de seu blog, onde está hospedado (wordpress, blogger...), login e senha.
Depois é só postar:

• ScribeFire: abre o painel de postagem e configurações.
  
  
• Adicionar imagem: para quando você encontra alguma imagem legal e quer postá-la (cuidado com os direitos autorais!).
  
  
• Adicionar vídeo: coloque vídeos do youtube rapidamente em seu blog.
  
  
• Upload de imagens: transfira fotos do seu computador para o blog.
  
  
• Adicionar link: links seus posts para outros blogs, sites ou artigos do seu blog.
  
  
• Adicionar citação: coloque citações rapidamente no post.

Aí é só escolher o título e publicar o post!

Colocando um blog dentro de um site:

Muito bem, depois de muito trabalho duro, você criou o seu site.
Agora como transferir seu blog para ele?
Precisa instalar wordpress?
Como redirecionar o blogspot para um subdomínio?
Muitas dúvidas, não?
Vamos a elas:

Como transferir?
Cada um tem um jeito diferente de criar sites.
O mais prático e rápido: Colocar seu blog hospedado na plataforma blogger/blogspot abrindo em um frame no blog.

Precisa instalar wordpress?
Claro que não!
Se você gosta do blogspot, está acostumado com ele, tem um bom tráfego de visitas, pagerank, alexa então, para que mudar?

Redirecionar blogspot para um subdomínio:

• Abra o painel de onde adquiriu seu domínio e clique em "Gerenciar Zonas DNS".
• Clique na opção adicionar CNAME.
• Em entrada crie um nome para ele (http://blog.nomedeseusite.com).
• Em valor coloque ghs.google.com
• Clique em criar.

Configurando o blog no blogspot:
Com o subdomínio criado, faça:

• Entre no painel de seu blog.
• Clique em configurações.
• Clique na aba "Publicação".
• Clique em "Domínio personalizado".
• Clique em "Ir para configurações avançadas".
• Digite o endereço que você criou acima.
• Digite as letras de segurança.
• Clique em "Salvar Configurações".
• Visualize seu blog e veja o endereço como ficou.
• Coloque o endereço no frame desejado.
• Pronto!
  

Fiz isso com meu novo blog, que será colocado em meu futuro site:
http://blog.crepusculofilme.net
Sei que não tem nada a ver com informática e o enfoque será para outros leitores mas, serve como exemplo.

Instalando menu em flash no Blogger/Blogspot

Sabe aqueles belos menus em flash que muitos blogs andam utilizando atualmente?
Aprenda a criar um e instalá-lo em seu blog rapidamente:

Criando:
Acesse o site Flash Vortex.
Clique na aba menus.
Escolha um dos modelos.

Step 1:
Você muda de modelo, caso queira, e configura as cores dos botões ao seu gosto.

Step 2:
Button label: Coloque o nome de seus botões
Buttons should link to: Coloque os links das páginas que serão abertas pelos botões.

Step 3:
Configure o tamanho de seu menu e sua borda.

Step 4:
Configure a velocidade de sua animação.

Clique em Generate Animation.

Será gerado dois tipos de código: Easy e Advanced.
Para colocar em uma widget do blogger/blogspot você utiliza a opção Easy.
Copie o código e cole-o em uma widget (não faça nenhuma modificação).
Pronto!
Seu menu fica armazenado no próprio site, polpando lhe o tempo de ter que hospedá-lo em sites que fornecem o famoso código embed.

Tranferindo um blog:

Não sei quanto a vocês mas, eu possuo um número até grande de blogs.
No começo achei que seria melhor manter cada um em uma conta do gmail, por questões de segurança.
Até que apareceu um "pequeno" problema: Google Adsense.
Para colocarmos seus anúncios entre os posts o blog tem que estar armazenado na mesma conta que o Adsense ou utilizar uma hack para isso.
Bem, eu não concordo muito em fazer uso de uma hack com os códigos primeiro, que o próprio Adsense diz que não é permitido e segundo porque dificilmente você conseguirá deixar os anúncios centralizados e formatados como fica em um "normal".

Aí cheguei a uma simples comclusão: Transferí-los para uma conta só.

Antes do mais nada: cuidado com a sua senha, nunca a digite em computadores estranhos e faça uma senha forte com número e letras aleatórios.

Como transferir:

• Abra o painel do blog a ser transferido.
• Vá em Configurações - Básico - Exportar Blog
• Clique em fazer Download do blog (será feito em .xml).
• Espere salvar.
• Vá em Layout - Editar HTML e baixe o modelo completo de seu template (não esqueça de salvar as widgets!).
  
• Vá em Configurações - Publicação, anote o endereço de seu blog (ele será mantido na outra conta) e mude o endereço para qualquer nome.
• Volte em Configurações - Básico e clique em Excluir blog (no painel central terá a opção de excluir permanentemente, mas por hora não clique nela ainda já que, você pode querer fazer algumas modificações).
  
• Saia dessa conta
  
• Abra a conta onde será transferido o blog.
• Crie um novo blog (use o nome e o endereço antigo).
• Escolha um template qualquer.
• Salve.
• Vá em Layout - Editar HTML e transfira o template.
• Vá em Configurações - Básico - Importar Blog
• Selecione o .xml salvo anteriormente, digite as letras de segurança, marque a opção "Publique automaticamente as postagens importadas".
• Clique em Importar blog e espere aparecer o painel de editar postagens.
  
• Pronto!

Vantagens:
Desse modo você não perderá seu pagerank nem seus backlinks.

Alt e title: tags para imagens

Você usa muitas imagens em seus posts?
Então saiba que para elas serem indexadas na pesquisa google (lê-se: mais visitas) elas precisam pussuir determinadas tags.

Para que tudo isso?
Bem mais uma vez chegamos aos robôs de pesquisas.
Acredite ou não, na era da internet 2.0 eles ainda não são capazes de "ler" imagens e só indexa textos em suas buscas.

Como indexá-las então?
Utilizando [alt] e [title] dentro da tag [img id=]

Como utilizá-las?
Depois de definir o endereço da foto e o tamanho coloque esses comandos e suas descrições antes de fechar a tag:
ex:
[img id="endereço da imagem" widht="" height="" align"" alt"" title""]

Para que serve cada uma:
alt: uma pequena descrição da imagem para ser colocada caso o navegador não consiga visualisar a foto.
Title: um titúlo para a foto.

Ok.
Todos os navegadores abrem as fotos mas, somente com as descrições acima os robôs de pesquisa a interpretarão.

Muito bem, agora que já entende o mecanismo de buscas que tal reeditar as imagens utilizadas em seu blog e torná-lo mais amigável aos "temidos" buscadores?

Você faz uso da tag Nofollow

A Tag nofollow foi desenvolvida pelo google para informar que determinado link de seu site ou blog não deve contar ao mecanismo de busca para indexá-lo.

Na prática:
Serve para evitar os milhares de Spam que existe por aí, compra de links, manipulação de pagerank...
Para quem não sabe: todos os links da Wikipedia possuem nofollow e não fornecem pagerank para eles (o que considero uma injustiça, afinal é os usuários que editam o site).

Como tirar proveito dele:

• Em casos de links pagos, como do Hotords, assim os robôs irão ignorar aquele link, não contando para aumentar o pagerank do site.
• Em caso de páginas de download (como o 4shared).
• Os da própria Wikipédia afinal, se eles não indexam para que vamos indexar eles?

Trará algum benefício?
Não irá melhorar a posição de seu site nos mecanismos de buscas (yahoo! e msn também fazem uso dele) mas, impedirá que seu site seja punido caso os robôs dele considere que você seja um spammers.

Vale a pena?
Uma vez considerado spammer, seu site - ou blog - cairá nos mecanismos de buscas e para conseguir indexá-lo de novo poderá levar mais de 3 semanas (tempo e dinheiro perdido).
Quer linkar para sites, digamos, suspeitos ou colocar bastante links de propagandas?
Ok.
Utilize a tag e evite dores de cabeça futuras.

Como utilizar?
No código HTML do seu post (no blogspot clique em Editar HTML, na área de postagem) procure seus links.
Eles são assim: [a href= "o linkdosite"] o texto a ser linkado [/a]
Com o nofollow: [a href= "o linkdosite" rel="nofollow"] o texto a ser linkado [/a]

Simples, não?

Mudando o template

Hoje vou ensinar duas dicas fáceis de mexer mas que muda totalmente a cara de qualquer blog.

Tirando a Navibar do Blogger:

Todos sabem como eu gosto da plataforma blogger/blogspot mas, convenhamos, aquela barra em cima do blog não combina estéticamente com quase nenhum blog que vemos por aí, certo?

Para removê-la:
Vá em Layout - Editar HTML e procure no código (ctrl + F):
#header-wrapper

Cole esse código acima dessa linha:
#navbar {
display:none;
margin:0;
padding:0;
}

Visualize e se estiver ok salve.

Colocando uma imagem fixa no fundo:

Depois de tanto procurar (ou desenhar) você finalmente conseguir a imagem perfeita para seu blog. Veja como colocá-la como fundo e fixa, ou seja, seus textos rolarão mas imagem não se moverá.

Colocar a imagem:
Antes do mais nada: armazene sua imagem em um site que lhe oferecem um link para ela (ex. Flicker ou Picasa).
Copie esse link.
Procure no template:
Body {
Embaixo coloque:
background-image: url(Url da Imagem);
attachment: fixed;
(não se esqueça de colocar o ; ele faz parte do código)

Pronto!