Blog de Testes 2

Twitter vale US$250 milhões

2009-01-29T15:45:00.000-08:00

O Twitter é uma rede social e serviço de microblogging que obteve muito sucesso em 2008, provocando o encerramento de alguns fortes concorentes, como Jaiku e Pownce. Criado em 2006, o serviço permite postagens com o máximo 140 caracteres, e é base para dezenas de outros serviços da internet.

Devido ao seu ganho de popularidade e a alta possibilidade de crescimento neste ano, o Twitter assinou um contrato com a empresa de investimentos IVP, fazendo com que seu valor chegasse a US$ 250 milhões.

De acordo com o site TechCrunch, o Twitter recusou recentemente uma oferta de compra no valor de US$ 500 milhões, oferecidos pela rede social Facebook.

Com um fundo atual de US$ 20 milhões e o novo acordo, o Twitter espera agora cooptar mais investimentos em breve, noticiou o site TG Daily

Veja outras notícias sobre o Twitter que encontrei no Terra:

» Jesus, Lennon e Marilyn escrevem em "twitter histórico"

» Twitter aproxima internautas de astros do esporte

» Passageiro narra acidente de avião pelo Twitter

» Veja o tweet de Gates para Jobs

» Hackers usam falha no Twitter para invadir conta de Obama

Fonte: Terra - Tecnologia

IncrediMail - Um Editor que dá Vida aos seus E-mails

2009-01-29T01:32:00.000-08:00

Olá a todos! Recebi umas mensagens de e-mail personalizadas com imagens e emoticons muito bonitas, então, resolvi ver como fiazia. Aí, eu descobri o IncrediMail. Talvez, alguns ja saibam o que é o IncrediMail mas, para os que não sabem, resolvi fazer esse post.

O que é o IncrediMail?

O IncrediMail é um programa de email gratuito que gerencia todas as suas mensagens de email, comunicações, detalhes de contato e transações de email. O IncrediMail tem tudo a ver com diversão em suas mensagens. É bem parecido com o Windows Live Mail, só que com os recursos visuais que o WLMail não tem.

Com o IncrediMail você tem os seguintes recursos:

Escolher dentre centenas de segundo planos de email
Acrescentar a seus emails emoticons e animações divertidas
Dar vida a seus emails com efeitos 3D animados
Ser avisado das mensagens de entrada com personagens animados especiais (chamados de Notificadores, por exemplo, o mordomo da imagem acima)
Gerenciar todos os seus emails de contas diferentes (como Yahoo e Gmail) em um único lugar

Muito legal, não? Eu achei bem interessante, baixei e estou usando.

Download IncredMail

Além, disso, você pode ir a Galeria Online e baixar centenas de outras animações, efeitos e emoticons e planos de fundo para decorar o seus e-mails e impresionar o seu, hãnnnn, digamos... destinatário.

Widget Atualizações do Twitter no Blog

2009-01-26T18:00:00.000-08:00

Esta semana eu me associei ao Twitter. Então, estava procurando um widget de como fazer as minhas atualizações aparecerem aqui no blog. Encontrei no Usuário Compulsivo. Veja:

Este é um instalador automático para adicionar a widget no seu blog. Basta escolher um título e a quantidade de atualizações a serem exibidas.

Adicionar Twitter Updates ao meu Blog!

Além disso, pode exibir, também, a contagem dos seus seguidores no Twitter. Para isso, use o TwitterCounter, que disponibiliza diversos botões estatísticos no estilo FeedBurner, além de códigos prontos para você personalizar.

Tradutor Conveythis para blog - o melhor

2009-01-26T05:03:00.000-08:00

Esse é 10. Encontrei em um blog em inglês um super, mega, ultra, master, blaster, plus advanced tradutor para blog.

Quando passa o mouse por cima dele, abre uma pequena janela com opções de idiomas. Você pode clicar em "more" se quiser outro idioma.

Escolhido o idioma, aparecerá uma janela para vocês escolher qual tradutor deseja usar.

Veja os modelos de botões:

Customizar Tradutor para o meu Blog!!!

Plano de Fundo Degradê - Duas Cores

2009-01-24T14:59:00.000-08:00

Encontrei esses planos de fundo para blogs no blog Tah na Mão. Observe o Dicas Plugins e verá que usei o plano de fundo Preto e Cinza Degrade (Duas Cores).

/*---Body---*/
body {
background: substituir pelo código
color:$textcolor;
border: 5px none #5F4775;
font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Encontre a sequência acima no código HTML do seu blog e susbtitua a marcação em vermelho pelo código do plano de fundo desejado.

Azul e brando Degrade
	background: #ffffff url('http://www.thematrixx.oi.com.br/ap/fundos/azul_branco.gif') fixed top left repeat-x;
Preto e Cinza Degrade
	background: #000000 url('http://www.thematrixx.oi.com.br/ap/fundos/preto_cinza.gif') fixed top left repeat-x;
Laranja e Branco Degrade
	background: #ffffff url('http://www.thematrixx.oi.com.br/ap/fundos/laranja_branco.gif') fixed top left repeat-x;
Preto Vermelho Degrade
	background: #000000 url('http://www.thematrixx.oi.com.br/ap/fundos/preto_vermelho.gif') fixed top left repeat-x;
Verde e Branco Degrade
	background: #ffffff url('http://www.thematrixx.oi.com.br/ap/fundos/verdea_branco.gif') fixed top left repeat-x;

Repassando o Meme

2009-01-23T05:02:00.000-08:00

Olá a todo, o blog Amo Handebol me indicou no Meme (um jogo entre blogs). Até agora eu só havia ouvido falar sobre isso, mas não sabia direito o que é. Mas o negócio é o seguinte.

Quem for indicado num Meme, deve:

Linkar quem te indicou.
Contar 6 coisas sobre você.
Repassar o MEME.

Bom. Então, seis coisas sobre mim:

1 - Meu nome é Willian, tenho 19 anos, e faço parte da Blogosfera (o mundo dos Blogs) desde Junho de 2008, há 8 meses, quando fiz um blog sobre amostras grátis (http://ganhedegraca.blogspot.com).

2 - O tema amostras grátis nunca, de fato, me incentivou, eu vivia mudando o template do blog, adiciona e retirando colunas, mexendo nas cores do blog, futricando o código HTML dele até que em 23 de Dezembro de 2008, nasceu o Dicas Plugins, eu ja tinha acumulado alguma experiência e criei um blog de um tema que eu gosto.

3 - Ainda pretendo criar também, um blog sobre tecnologia, robótica e informática, mas por enquanto fico por aqui mesmo.Bom, não sou tão chegado a ler livros mas gosto de ler revistas, notícias e dicas na internet sobre tecnologia, informática, etc...

4 - Sempre fui considerado um nerd na minha escola, mas em uma escola pública. Quando me conparo a outras pessoas esse título se esvai como água em uma correnteza de rio. Curso administração de empresas.

5 - Finalmente depois de 11 anos(eu não aguentava mais) me formei no Curso Técnico de Música, algo para música como o nosso ensino médio para a educação básica (resumindo, o ensino médio do Música). Gosto de diversos ritmos, mas não sou muito ligado nas letras. Nada contra, mas não sou chegado a funk, hock e hiphop.

6 - Sou evangélico e tenho uma namorada linda que eu amo muito e não vivo sem ela. Se chama Lílian e, em breve (assim que eu passar em um bom concurso ou arranjar um emprego que valorize os conhecimentos que eu tenho) pretendemos nos casar.

Agora, repassando o MEME:

Mr-Bin - Blog de notícias e dicas sobre informática e tecnologia.
Baixe Movies -Blog de dicas e downloads de filmes.
Plug Your Mind - Blog sobre tv, cultura, notícias, música, etc...
Blog do Jovem X - Download de ptrogramas, músicas, jogos, filmes, etc...
Omoristas - Por que dar risadas faz bem.

Atenção, blogs escolhidos! Repassem o Meme.

Flash Tag Cloud - Nuvens de Tags em Flash

2009-01-22T15:03:00.000-08:00

No blog do Jean, o Super Downloads Free, encontrei uma widget tag cloud (ou Nuvem de tags) em flash, simplesmente sensacional. Os efeitos dão de 10 em outros que encontramos pela internet. Então, entrei em contato com ele e ele, de prondidão, me indicou como ele colocou no blog dele.

A Tag Cloud rola pra direita, pra esquerda, pra cima e prea baixo quando passa o mouse sobre ela.

Assim, fazendo umas pesquisas entre o Blogger Buster e o Web Dois Ponto Zero Plus, criei um tutorial para adicionar essa tag cloud no seu blog.

Então, se você quiser adicionar ao seu blog, vamos lá!

1. Vá até o código HTML do seu blog (NÃO é preciso expandir modelo de widgets)
2. Procure a seguinte sequência:

<b:section class='sidebar' id='sidebar' preferred='yes'>

3. Logo abaixo dessa linha coloque o seguinte código:

<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
   <b:if cond='data:title'>
     <h2> <data:title/> </ h2>
   </ b: if>
   <div class='widget-content'>
     <object type = "application / x-shockwave-flash" dados = "http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" width = "250" height = "200" allowscriptaccess = "sempre">
         <param name="movie" value="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" />
         <param name="bgcolor" value="#ffffff" />
         <param name = "flashvars" value = "tcolor = 0x000000 & mode = tags & distr = true & tspeed = 100 & tagcloud = <tags>
       <b:loop values='data:labels' var='label'>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' style='12'> <data:label.name/> </ a>
</ b: loop>
</ tags> "/>
         <p> Blogumulus por <a href='http://www.roytanck.com/'> Roy TANCK </ a> e <a href='http://www.bloggerbuster.com'> Amanda Fazani </ a> </ p>
     </ object>
   </ div>
   <b:include name='quickedit'/>
</ b: includable>
</ b: widget>

4. Clique em visualizar e se tudo estirver ok, salve o modelo. Pronto! A nuvem de tag aparecerá na sua sidebar.
5. Agora, você poderá movê-la de lugar: vá em "Elementos de página" e verifique a widget "Label" que apareceu. Arraste-a para onde desejar.

Configurações

Agora, temos algumas opções de configurações para adequar a nuvem de tags ao seu blog. Nas marcações em vermelho, modifique:

1 - Largura e altura da widget: width = "250" height = "200"

2 - Cor do plano de fundo da widget: <param name="bgcolor" value="#ffffff" />

3 - Cor do Texto: "tcolor = 0x000000

4 - Tamanho do texto: style='12'

Qualquer dúvida é só perguntar nos comentários.

Campus Party - Controle de PC usando só as mãos

2009-01-22T08:07:00.000-08:00

É realmente uma pena eu não poder ter ido no Campus Party 2009 que aconteceu nesta semana, mas acompanhei algumas amostras na internet e essa é, sem dúvida, a que mais gostei. Tomara que essa tecnologia avance bem rápido para podermos estar utilizando-a o mais breve possível.

Uma tecnologia tão simples quanto revolucionária foi apresentada na noite deste sábado na Campus Party Brasil. Imagine poder controlar o computador usando apenas as mãos, sem precisar de mouse, touchpad ou teclado. Sem sequer tocar a tela. É esta a criação de dois jovens campuseiros que, apesar de desenvolverem um trabalho parecido há algum tempo, só se conheceram durante o evento. Felipe Farinon, 17 anos, e Jean Karpinski, 24, compartilharam suas idéias e, em quatro dias, a nova tecnologia virou realidade.

O que foi criado aqui vocês nunca viram antes, é algo que vai realmente permitir abandonar teclado e mouse", anunciou Kapinski, advogado e ativista do software livre e programador nas horas vagas. A explicação de Felipe foi simples: "Desde que vi Minority Report quis fazer algo parecido. É um sonho nerd. Então programei um software de interação com o computador", disse.

Utilizando o controle do Wii como sensor infra-vermelho para captar os leds colocados em seus dedos, conectado ao notebook via Bluetooth, Felipe comanda o micro sem encostar nele. "Como o Windows não aceita mais de um ponteiro, tentei entender como o programa grava estes dados mas não consegui, então criei um layer sobre o programa, que posso controlar colocando quantos ponteiros quiser", explicou. Na demonstração, Felipe utilizou um pendrive Bluetooth, já que o notebook PC que estava usando não tinha esse recurso.

A tecnologia, que permite inúmeras aplicações, foi criada a um custo muito baixo: cerca de R$ 10 segundo Felipe, gastos com velcro, pilhas e leds. De acordo com Roberto Andrade, diretor de comunicação da Campus Party, já há empresas interessadas em investir na criação.

"É claro que ainda há alguns bugs", disse Felipe. "Mas com investimento, é uma questão de tempo para que eles sejam consertados."

Como próximo passo, Felipe, que programa desde os 14 anos e tem o C++ como linguagem preferida, quer agora utilizar Linux. "O futuro é livre", disse, recebendo pela segunda vez na apresentação os aplausos da platéia.

Telão mostra jogo que Felipe utilizou apenas os dedos para jogar

Fonte: Terra - Tecnologia

Template Statement

2009-01-21T07:04:00.000-08:00

Eis mais um famoso e belo template para o Blogger, convertido do Wordpress. Encontrei ele no Zona Cerebral. Também ja o vi disponível no Dicas Blogger.

Clique na imagem para ver uma página com oTemplate.

Downlaod .RAR Download .XML

Configurações da Caixa de Pesquisa

Para ativar a caixa de pesquisa do templete, vá até o código HTML e busque (utilize Ctrl+F) pela URL: http://tublog.com/search. No lugar de tublog, coloque o endereço de seu blog.

Template Google Chrome

2009-01-21T06:30:00.000-08:00

Mais um sensacional template para o Blogger. O Google Chrome possui o visual donovo navegador do Google.

Clique na imagem para visualizar uma página com o template.

Download

Dica: O Google Chrome possui duas colunas mas você poderá inserir mais uma coluna conferindo o tutorial "Adicionar Coluna Horizontal Lateral" que publiquei há algum tempo. Caso faça isto, não se esqueça que a soma da largura do template (bady) deve ser igual a soma das larguras de todas as colunas mais as margens e paddings. Ou seja, pra adicionar uma nova coluna, deve diminuir a largura (width) da outra e/ou o post.

Google Adsense: Técnicas de Otimização dos Anúncios

2009-01-17T06:52:00.000-08:00

Encontrei um artigo muito interessante sobre o Google Adsense do blog Mr-Bin. Entrei em contato com o Lucas Vegi e ele prontamente me autorizou a reproduzí-la aqui no Dicas Plugins tal como escrito no Mr. Bin.

O artigo é enorme mas vale a pena ler.

Google Adsense: Técnicas de Otimização de Anúncios

Levando em consideração alguns emails recebidos por mim de pessoas que não tiveram a oportunidade e assistir nenhum dos mini-cursos que ministrei a respeito de planos de afiliados com enfoque no Google Adsense e técnicas para otimização de renda dos mesmos, estou hoje fazendo a postagem desse artigo que nada mais é que um resumo da idéia principal dos mini-cursos que com certeza irá ajudar muito quem estiver buscando informações a respeito e estiver interessado no assunto.

Principais técnicas de otimização dos anúncios

A principal fonte de renda atual do Google vem das publicidades, por isso o investimento em pesquisa nessa área é intenso na empresa, principalmente as pesquisas em IHC (Interação Humano Computador).
Com base nessas pesquisas em IHC, foram identificadas técnicas a serem utilizadas com relação às cores, posicionamento e formato dos anúncios, além da utilização de critérios e formas para aumentar o inventário de anunciantes. Vejamos a seguir.

Cores dos anúncios
As cores mais indicadas para serem utilizadas nos anúncios, são as cores do layout do seu site, fazendo com que os anúncios fiquem “integrados” no seu layout. Se seu site tem o fundo branco e os links vermelhos, então coloque o fundo e a borda dos anúncios em branco e a cor dos links dos anúncios idêntica a do seu site.

Exemplo de anúncios integrados ao layout:

Com os anúncios integrados ao layout do site, fica muito mais fácil dos visitantes olharem para eles, até por pensarem ser conteúdo e assim quebrar o preconceito de achar que todos os anúncios não são interessantes. Porém, nunca incentive seus usuários a clicarem nos anúncios fingindo que eles são conteúdo do seu site, pois isso pode gerar certa insatisfação nele e acarretar na não volta dele ao site.
Com os usuários olhando para seus anúncios, já é um grande passo para você receber cliques, pois como o Google AdSense faz contextualização automática, muito provavelmente os anúncios apresentados serão relevantes ao conteúdo que o usuário está vendo no site e portanto pode atrair seu interesse em clicar e obter maiores detalhes.
Com o tempo, a taxa de cliques nos anúncios pode cair, principalmente se seu site possui visitantes fiéis, pois como seus anúncios são sempre da mesma cor, os usuários podem acostumar com o seu layout e assim passarem a nem olhar mais para os anúncios com o tempo. Para solucionar isso, uma opção é periodicamente utilizar a rotação de cores.
A rotação de cores faz com que seus anúncios não tenham uma cor fixa, a cada vez o site é carregado, os anúncios aparecem numa combinação de cor nova. Isso faz com que os usuários não acostumem com o seu layout, porém deve ser usado somente em situações extremas, pois como os anúncios irão aparecer em cores que muitas vezes não tem muito a ver com o layout do site, o efeito da utilização da rotação de cores pode ser negativo para algumas situações.
Para utilizar a rotação de cores, selecione a opção “Use múltiplas paletas”. Veja o exemplo logo a seguir:

Posicionamento dos anúncios
O posicionamento dos anúncios é outro fator muito importante para a otimização, pois se os anúncios forem colocados em locais onde o usuário não tem costume de olhar e ler, dificilmente obterão sucesso.
Imagine seu site como uma loja e o local onde você colocará os anúncios como a vitrine da sua loja. Pois bem, a “vitrine” do seu site são os locais de maior índice de visualização.
Segundo o Google, os usuários visualizam os sites em um campo de visão parecido com a letra “F”, portanto esses locais são ideais para os anúncios aparecerem, pois os usuários estarão vendo os anúncios, e isso é muito importante.

Exemplo de campos de visão médio dos usuários:

As partes em vermelho são os locais que os usuários mais olham em média, portanto são a vitrine do seu site.
Outros locais interessantes para a colocação de anúncios são na barra de navegação e entre os artigos do site, pois são locais que agregam valores para o usuário.
Na barra de navegação, caso o usuário tiver procurando por algo, ele pode não encontrar, mas caso ele se interessar pelos anúncios, é uma forma desse usuário sair do seu site gerando renda, ao contrário do que ele faria se ali não tivessem anúncios e ele não tivesse encontrado o que procurava.
Já entre os artigos, o usuário ao terminar de ler o artigo, pode ver nos anúncios algo que complemente sua leitura e assim acabar clicando e saindo do seu site gerando renda novamente.
Existem locais onde deve ser evitada a colocação dos anúncios, como por exemplo, ao lado do logotipo da página, fora do layout e no rodapé.
Ao lado do logotipo é um local até comum de se ver pela internet inclusive em sites grandes e famosos, porém é um péssimo local, pois mesmo ele sendo um campo muito visualizado, os anúncios que aparecem lá ainda não têm nenhuma relevância para o usuário, levando em consideração que ele acaba de entrar no seu site, vai ver os anúncios, mas ainda nem leu seu conteúdo e por conta disso é mais difícil que ele se interesse em clicar, mesmo vendo o anúncio.
No rodapé é ainda menos provável do usuário olhar, pois é o local mais fora do campo de visualização média dos usuários. Dificilmente um usuário irá rolar toda barra de rolagem até chegar ao rodapé do seu site, e caso chegar lá, provavelmente já estará enjoado, querendo visitar novos locais e nem olhará para o anúncio.
Anúncios fora do layout acontecem muito em sites de beneficiários mal informados. Como veremos no próximo tópico do artigo, existem alguns formatos de anúncios que geralmente alcançam índices maiores de cliques e sucesso, porém alguns beneficiários influenciados por essa questão e por falta de espaço no layout acabam colocando anúncios de melhores formatos em locais errados. Porém na falta de espaço no layout, é muito melhor colocar anúncios em formatos menores em locais corretos, do que anúncios em formatos de maiores sucesso em locais que os usuários não irão olhar.

Formato dos anúncios
Quanto mais largos forem os formatos dos anúncios, maior é a tendência de sucesso do mesmo, pois eles fornecem maior espaço para os anunciantes, conseguem apresentar uma maior quantidade de anúncios em um único bloco, apresentam anúncios mais fáceis de ler e como conseqüências atraem uma maior quantidade de anunciantes de qualidade.
Os formatos de anúncios mais largos possuem os maiores inventários de mídias, ou seja, possuem mais anúncios de texto, imagem e vídeo, além dos maiores anunciantes do AdSense e que geralmente pagam mais por clique utilizarem eles para suas campanhas.
Os 3 formatos de maiores sucessos segundo o Google, são o retângulo médio(300x250), o retângulo grande(336x280) e o arranha-céu largo(160x600).

Exemplo dos 3 melhores formatos:

Sempre que possível, tente utilizar esses formatos de anúncios nos seus sites, pois o leilão dos anunciantes será mais concorrido e conseqüentemente as chances de aparecerem anúncios com maiores CPCs e eCPMs no seu site são melhores, e assim você ganhará mais. Mas como eu disse anteriormente, é muito melhor utilizar um formato de anúncio que não seja tão bom, mas em uma posição correta, do que um bom formato em uma posição errada, portanto use o bom senso.
O que é CPC e eCPM?
CPC é uma unidade de medida que o Google mantém sigilo, é a medida de quanto cada anunciante está pagando por clique no seu site.
eCPM é uma medida que o Google deixa visível nos relatórios, ela indica o potencial de renda de cada anunciante a cada 1000 impressões de anúncios.
O leilão de anunciantes corre em tempo real, portanto a cada visualização do seu site, estarão aparecendo os anunciantes que no momento estão com as maiores médias de CPC e eCPM e querem anunciar no seu site. A prioridade de aparecer nas partes mais altas do site é dos anunciantes que tem as maiores médias.

Aumento do inventário de anunciantes
Seu inventário de anunciantes é composto pelos anunciantes que estão concorrendo do leilão do seu site, portanto é sempre interessante ter um inventário grande, pois quanto maior for o número de concorrentes no leilão, maiores são as chances de seu site ter anúncios de melhor qualidade e que pagam mais. Para aumentar o inventário de anunciantes devemos seguir 5 passos básicos.
O primeiro deles é o de manter limpo o filtro de anúncios concorrentes, pois ao filtrar um anúncio que poderia vir a aparecer no seu site, conseqüentemente você estará diminuindo o seu inventário e tornando seu leilão menos concorrido, pois o anunciante filtrado poderia ser talvez o que pagaria mais e teria maior potencial de renda do seu leilão.
O segundo passo é o de aceitar anúncios de texto e imagem, pois assim você terá em seu leilão uma gama de possibilidades maior aumentando assim a competitividade do leilão.
O terceiro passo é ter um site com conteúdo de qualidade e de preferência exclusivo, pois os anunciantes não gostam de associar suas marcas a conteúdos ruins ou plágios.
O quarto passo é a utilização de palavras-chaves nos textos, porém sem exagerar, pois quando o texto possui palavras-chaves, fica mais fácil dos algoritmos de contextualização automática do Google direcionar anúncios mais relevantes vindos do seu leilão e como conseqüência aumenta a chance de você ser clicado.
O quinto e ultimo passo é algo que já vimos anteriormente, que é a utilização de formatos de blocos de anúncios largos sempre que possível.

Utilização de critérios
Como vimos nos tópicos anteriores, é sempre bom fazer uma boa cobertura com anúncios nas partes mais visualizadas dos sites para obtermos maiores chances de recebimento de cliques, porém muitas pessoas acham que quanto mais anúncios colocarem no site, maior é a chance de ganhar dinheiro e nem sempre é assim.
Pode acontecer de sites com menos anúncios gerarem mais rendas que alguns que tem mais anúncios pelo fato de fazerem o controle de número de cliques e quanto de renda que cada bloco gera através dos critérios.
Existe a possibilidade de você estar recebendo mais cliques nos blocos de anúncios que lhe pagam menos e a partir dos relatórios dos critérios você poderá resolver isso da forma mais adequada.

Exemplo de caso que os critérios ajudam:

Esse site do exemplo possui eCPM e CPC altos no bloco ao lado do cabeçalho (que é uma posição não indicada para a colocação de anúncios, mas como é a parte mais alta do site, possui os anunciantes que pagam mais) porém possui um baixo CTR*, ou seja, é um bloco pouco clicado porém tem os anunciantes que pagam mais, já o bloco localizado depois do artigo, possui eCPM e CPC baixos por não ser uma posição de privilégio em relação ao topo da página, porém possui um CRT* alto, ou seja, é um bloco de anúncios que paga pouco mas recebe muitos cliques.
O ideal para a otimização seria tentar fazer com que o bloco de anúncio que paga mais, fosse também o que recebesse mais cliques, e nessa situação se cada bloco de anúncio utilizar um critério diferente associado durante a criação do bloco, pelos relatórios avançados do AdSense, é possível saber qual bloco esta gerando mais renda e qual recebe mais clique e partir daí você tira as conclusões específicas para o seu site.
A solução ideal para a situação vista no exemplo, seria a retirada do bloco de anúncios localizado ao lado do logotipo, pois automaticamente só restaria um na página, que é o que está localizado abaixo do artigo. Mesmo ele estando localizado numa parte mais baixa do site, naquela situação ele está na parte mais alta do site que tem anúncios e, portanto recebe o privilégio de apresentar os anunciantes que pagam mais naquele momento e como ele já tem taxa de cliques alta, ele vai continuar recebendo muitos cliques, porém em anúncios que pagam mais, otimizando assim a renda mesmo utilizando menos anúncios.
*CTR é a unidade de medida usada para saber a média de clique que o anuncio recebe em relação ao numero de vezes que ele foi exibido.

Conclusão
A partir dessas técnicas apresentadas no artigo, conciliadas com um layout agradável para leitura e utilizando técnicas de SEO, as chances de maximização da renda gerada pelos anúncios no seu site aumentam de forma exponencial. Vale a pena implementar.

Tutorial - Como Instalar Sidebar Tab no Template

2009-01-16T03:59:00.000-08:00

Fazendo umas pesquisas em alguns blogs, em especial o Meu Super Blog e o Dicas Blogger, descobri como inserir a sidebar tab no template que você está usando. É aquele menu lateral com três abas como na figura abaixo (exemplo do Usuário Compulsivo).

Eu ja havia postado aqui uma forma de sidebar tab para iciantes e intermediários, que não precisa alterar nada no código HTML do blog. Não era fixo no template, era apenas colocado em uma nova gadget,não era muito funcional nem tanpouco profissional.

Esse que vou mostrar agora, é o mesmo daqueles tempaltes que ja vêm com esse recurso instalado. Consegui montar um passo-a-passo de como adiciona-lo ao seu blog. Então, vamos lá.

É o seguinte, para adionar no seu blog, siga o passo-a-passo:

1 - Vá ao código HTML do seu blog e clique em "Expandir modelo de widget". Abaixo das sequências de características das sidebars (depois daquelas que contem #sidebar 1{ etc... e antes das tags sobre Profiles, Blockquote, Comment e etcc., etendeu?), cole o seguinte código:

Exemplo: No meu template, eu colei depois de:

.sidebar a img {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

Então, faça como o descrito copiando e colando o código abaixo:

/*--------Tabber ---------------------------------*/
#tabsidebar-wrapper{
width: 375px; /* Mesma largura da Sidebar */
float: right;
border: 1px none #CCC;
margin-bottom: 15px;
}
.tabberlive .tabbertabhide {display:none;}
.tabber {display:none;}
.tabberlive {margin-top:1em;}
.tabber h2 {
border-bottom:2px solid #5B0;
margin-bottom: .3em;
padding: 0;
line-height:1.2em;
}
.tabber .widget {margin-bottom: 1em;}
.tabber .widget-content {margin: 0 0px;}
ul.tabbernav{
margin:0;
padding: 8px 0;
border-bottom: 1px solid #ccc;
}
ul.tabbernav li{
list-style: none;
margin: 0;
display: inline;
}
ul.tabbernav li a{
padding: 8px 0.5em;
margin-right:2px;
border: 1px solid #CCC;
border-bottom: none;
background: #fff;
text-decoration: none;
}
ul.tabbernav li a:link { color:#369;}
ul.tabbernav li a:visited { color: #369;}
ul.tabbernav li a:hover{color:#369; background: #e6e6e6; border-color: #CCC;}
ul.tabbernav li.tabberactive a{
background-color: #e6e6e6;
color: #369;
border-bottom: 1px solid #e6e6e6;
}
ul.tabbernav li.tabberactive a:hover{
color: #369;
background: #e6e6e6;
border-bottom: 1px solid #e6e6e6;
}
.tabberlive .tabbertab {
background: #e6e6e6;
padding:5px;
border:1px solid #ccc;
border-top:0;
}

.tabberlive .tabbertab h2 {display:none;}
.tabberlive .tabbertab h3 {display:none;}

2 - Agora, cole o código seguinte antes da tag </head>:

<script src='http://pi0qqg.bay.livefilestore.com/y1pzujTC-NnsVpna7xTKKxk2oqK_xXox33_8y_NuoWuWFYBgDdqUYqso_r2FPHlEhpQL0ACpEZJSkwoDWiDk7VYPA/tabber.js?download' type='text/javascript'/>

Feito isso, salve o modelo.

3 - Apartir da tag <body> existe uma sequência de tags que identificam a estrutura do seu blog, onde ficam as colunas, etc... Aqui, vamos inserir o local onde ficará a sidebar tab (Tabber):

Então, encontre uma tag mais ou menos igual a esta:

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

OBS.: É imposrtante colar abaixo de <b:section></div> em negrito acima.

Abaixo dela, cole o seguinte código:

<div id='tabsidebar-wrapper'>
<div class='tabber' id='tab1'>
<div class='tabbertab'>
<b:section class='sidebar' id='tabbertab1' maxwidgets='1' showaddelement='yes'/>
</div>
<div class='tabbertab'>
<b:section class='sidebar' id='tabbertab2' maxwidgets='1' showaddelement='yes'/>
</div>
<div class='tabbertab'>
<b:section class='sidebar' id='tabbertab3' maxwidgets='1' showaddelement='yes'/>
</div>
</div></div>

Pronto! Agora vc tem um recurso bem interessante para seu blog. Dúvidas? Pergunte através dos comentários.

Tutorial - Excelente Tradutor via Google

2009-01-15T10:52:00.000-08:00

Olá a todos. Hoje eu mudei o tradutor do Dicas Plugins para uma forma mais eficiente e com menos erros de tradução. Eu estava insatisfeito com os tradutores disponíveis e resolvi quebrar a cabeça. Fui a pesquisa e atravás dos códigos-fontes de outros blogs, me apareceum uma luz de como usar o tradutor do Google para a tradução do seu blog. Vou mostrar neste tutorial como funciona.

PS.: É um pouco trabalhoso, mas o resultado compensa plenamente.

É o seguinte. Resolvi usar a forma imagem linkada para o link com tradução e as respectivas bandeiras. Veja

<a href="URL da Tradução"><img src="URL da Bandeira"/></a>

O primeiro passa é copiar o link de tradução de cada idioma que você quiser utilizar. Essa é a parte mais trabalhosa. Veja porque:

Antes, abra uma nova gadget "HTML/Java Script" e cole o código da lista de idioma que está no final do post.
Vá até o Tradutor Google.
Digite a URL do seu blog.
Agora, escolha o primeiro idioma para traduzir seu blog.
Clique em traduzir.
CLIQUE EM "REMOVER FRAME".
Copie a URL da barra de endereços e cole na marcação em vermelho da widget que estamos usando para cada idioma.
OU copie a URL da bandeira (lista logo abaixo aqui neste tutorial) e cole em <img src="URL da Bandeira"/>

Veja como deverá ficar no exemplo abaixo (Tradução do Dicas Plugins para o Inglês):

<a href="http://66.102.1.101/translate_c?hl=pt-BR&sl=pt&tl=en&u=http://dicasplugins.net/&usg=ALkJrhidYpTP4GewcmswiS2J1mZvcq1mpw"><img src="http://i41.tinypic.com/f07ss4.png"/></a>

Lembre-se que você deverá traduzir seu blog para cada idioma e copiar a URL de cada tradução.

Utilizando a seguinte estrutura, faça como o descrito no passo a passo:

<a href="URL da Tradução"><img src="URL da Bandeira"/></a>

Lista de Idiomas coms as respectivas URL das bandeiras:

<a href="URL em Inglês"><img src="http://i41.tinypic.com/f07ss4.png"/></a>

<a href="URL em Espanhol"><img src="http://i43.tinypic.com/zmgihc.png"/></a>

<a href="URL em Chinês"><img src="http://i44.tinypic.com/9quv5h.png"/></a>

<a href="URL em Francês"><img src="http://i42.tinypic.com/280p17m.png"/></a>

<a href="URL em Alemão"><img src="http://i39.tinypic.com/2w7n1tx.png"/></a>

<a href="URL em Italiano"><img src="http://i42.tinypic.com/25qrpck.png"/></a>

<a href="URL em Russo"><img src="http://i40.tinypic.com/2ewm7t1.png"/></a>

<a href="URL em Árabe"><img src="http://i43.tinypic.com/4sxr7t.png"/></a>

<a href="URL em Hebraico"><img src="http://i44.tinypic.com/2nqw8bc.png"/></a>

<a href="URL em Português"><img src="http://i41.tinypic.com/1zbf5hu.png"/></a>

Pronto! Agora salve e visualize. Meio conplicado, não? De forma alguma. Basta um pouco de paciência que tudo sai ok. Qualquer dúvida pergunte nos comentários.

Template Red White Web 2.0

2009-01-15T06:19:00.000-08:00

Há algun tempo, coloquei aqui no blog, o Template Red White Web 2.0 - 3 colunas, que foi um dos templates que eu utilizei no Dicas Plugins. Agora, estou colocando aqui a versão original de duas colunas convertida do Wordpress.

Detalhes da Instalação:

Como esse tema tem muitas funções ele precisa de alguns ajustes durante a instalação. São apenas 2 modificações muito simples, mas qualquer dúvida pergunte nos comentários.

Download

Caixa de Busca:

Na aba Layout vá na opção Elementos da página e dentro do widget de "HTML/JavaScript" coloque o código abaixo:

<form id="SearchBox" action="/search" method="get"> &lt

;input id="s" maxlength="255" value="Faça sua Busca!" name="q" type="text"/> &lt

;/form>

Links de Navegação

Na aba Layout vá na opção Elementos da página e dentro do widget de "HTML/JavaScript" coloque o código abaixo, mudando os valores de acordo com sua preferência:

<ul>

<li><a href="URL DO BLOG">Home</a> </li>

<li class="page_item"><a href="URL PAGINA" title="Page 1">EXEMPLO1</a></li>

<li class="page_item"><a href="URL PAGINA" title="Page child">EXEMPLO2</a></li>

<li class="page_item"><a href="URL DO FEED" title="Page 2">FEED</a> </li>

</ul>

Links para enviar Torpedos Grátis

2009-01-14T16:54:00.000-08:00

Algumas vezes, quando buscamos sites de torpedos de celulares no Google, boa parte deles fornecem um formulário que não funciona corretamente ou está fora de serviço.
Então, segue abaixo, dois links úteis para enviar torpedor para celulares OI.

Mundo OI
Torpedo Grátis.net

Em breve, colocarei links de outras operadoras.

Veja widget HTML para colocar em seu blog:
<a href="http://mundooi2.oi.com.br/servicostorpedo/">Mundo OI</a>
<a href="http://www.torpedogratis.net/oi/">Torpedo Grátis.net</a>

Template Onix

2009-01-14T15:21:00.000-08:00

Bom, o Dicas Plugines & Templates está de cara nova e o template da vez é o Onix, do Dicas Blogger feito pela já conhecida, Juliana. Abaixo, está o link para download do Template.


	Download

CARACTERÍSTICAS

4 colunas à direita
3 colunas no rodapé
01 coluna embaixo do cabeçalho
compatível com qualquer navegador
cores personalizáveis
vários locais para widgets
excelente para anúncios

Entre o cabeçalho e as sadebars e a coluna do post, você pode inserir um anúncio do Google e a caixa de pesquisa, da mesma forma como aqui no Dicas Plugins. Para tanto, abra uma nova gadget e em "HTML/Java Script" insira o seguinte código:

<table
style="border: 2px solid rgb(255, 255, 255); text-align: left; width: 100%;"
cellpadding="2" cellspacing="4">
<tbody>
    <tr>
      <td align="left" valign="undefined">
CÓDIGO DO ANÚNCIO
     </td>
      <td align="undefined" valign="undefined">

CÓDIGO DA CAIXA DE PESQUISA

</td>
    </tr>
</tbody>
</table>

Template Esqueleto Compulsivo

2009-01-13T01:57:00.000-08:00

Encontrei no Usuário Compulsivo, um template show de bola. Ele tem diversas opções de sidebars e alguns recursos bem interessantes no estilo revista. Estou pensando usá-lo para o Dicas Plugins. O que vocês acham?

Veja que legal:


	Download Esqueleto Dark	Download Esqueleto Albino

O template é baseado no Mínima do Blogger e, por isso, é de fácil personalização.


	Clique para ampliar

Recursos já implementados:

Preparado para o estilo revista;
Posts resumidos na página inicial;
Rodapé dos posts personalizados em colunas;
Menu em abas na coluna lateral;
Artigos relacionados no rodapé dos posts;
Tags automáticas para o Technorati;
Caixa de pesquisa com dica autolimpante;
Navegadores personalizados;
Âncora para o topo da página;
Corrigido Bug "1 ComentárioS";
Comentários do autor com destaque;
Citações com destaque;
Feed de comentários individuais por artigo;
Links de subscrição para RSS (artigos e comentários);
Menu Vertical (Linkbar) .

Como Inserir Barra "a Carregar"

2009-01-10T14:44:00.000-08:00

Você, provavelmente, ja deve ter encontrado algum site com a barrinha " a carregar", enquanto carrega a página. Então, eu vou mostrar aqui como colocar esse recurso no seu blog.

A Carregar

No código HTML do seu blog, cole o seguinte código antes de </head>:

<script type="'text/javascript'"> <br /><br />window.onload = detectarCarga; <br /><br />function detectarCarga(){<br /><br />document.getElementById("imgLOAD").style.display="none";<br /><br />}<br /><br /></script><br /><br /><br /><br />

Salve as alterações.

Em "Elementos de página", adicione uma gadget "HTML/Java Script", e cole o seguinte código (Você deverá cococar essa gadget, no local onde a barra deverá aparecer):

<div id="'imgLOAD'" style="TEXT-ALIGN: center"><br /><br /><b>A Carregar</b><br /><br /><img src="http://i151.photobucket.com/albums/s137/andrewmusic1/loading.gif" />

<br /><br /></div>

Pronto! Veja em Activity Indicators outras barras diferentes.

Tradutor Babel Fish para Blog

2009-01-10T14:29:00.000-08:00

Encontrei na internet mais um tradutor para ser utilizado em seu blog. Mas, sinceramente, eu não gostei dele. As truduções deixam muito a desejar.

em uma nova gadget, clique em "HTML/Java Script" e adicione o código do tradutor.

	<script type="text/javascript" charset="UTF-8" language="JavaScript1.2" src="http://br.babelfish.yahoo.com/free_trans_service/babelfish2.js?from_lang=pt&region=br"></script>
	<script language="JavaScript1.2" src="http://www.altavista.com/static/scripts/translate_engl.js"> </script>

Ícones para usar no Blog

2009-01-09T10:42:00.000-08:00

Navegando pela internet, pela blogosfera e pelos código-fontes de outros blogs e sites a gente descobre muita coisa. E um link que eu descobri e que achei muito interessante é o Iconspedia.

Existem diversos sites que oferecem ícones para o seu blog, mas gerlamente, eles disponibilizam downlaod de uma pacote temático de ícones que, na maioria das vezes, não é exatamente o que a gente procura, ou não é muito funcional.

O Iconspedia é diferente. Alem de poder fazer download de um pacote temático, nele, você navega, encontra o ícone que você quer utilizar e pode fazer download em formato de ícone ou em formato de imagem PNG, em diversos tamanhos variando de 32x32 px a 256x256 px (pixels).

Widget Google Translate para Blog

2009-01-09T04:54:00.000-08:00

Fazendo algumas pesquisas, encontrei um tradutor sensacional do Google para blogs. É o Google Translate.

Basta acessa o link, escolher o idioma do seu blog e copiar o código. Cole o cógigo em uma gadget "HTML/Java Script".

http://translate.google.com/translate_tools?hl=pt-BR&sl=pt

Funcionou perfeitamente no Firefox mas não deu certo no Explorer. Pelo menos para o meu blog. Teste no seu e veja como fica.

Dica: Se quiser centralizar o tradutor na coluna utilize as tag <center> e </center> entre o código.

<center>

Íten ou código a centralizar

</center>

Tradutor de Vários Idiomas para Blog

2009-01-08T07:26:00.000-08:00

Uma coisa é certa. O idioma da internet é o inglês e no exterior existe uma gama muito grande de visitantes que podem acessar o seu site. E como nem todo mundo endente o português, um tradutor se faz necessário para um bom blog.

Então, coloco aqui um código para um tradutor para o seu blog. Não fica 100%, mas ajuda bastante.
Adiciona uma nova gadget e cclique em "HTML/Java Sscript", então, cole o código abaixo substituindo a marcação em vermelho pela URL do seu blog.

<center><img
src="http://img176.imageshack.us/img176/6091/84056383at1.png"/>

</center>
<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 style="font-size: 70%; width: 50px;" value="Traduza"
type="submit"/>
</form>

Traduz de portugûes para inglês, francês, alemão, italiano, russo e espanhol.

Adicionar coluna Horizontal Lateral

2009-01-07T15:01:00.000-08:00

Há algum tempo eu estava procurano um tutorial de como adicionar uma coluna horizontal lateral sobre as duas colunas do template. Não encontrei.

O que eu fiz? Utilizei alguns templates de teste e pesquisei no HTML dos templates como as sidebars horizontais ficavam sobre as duas colunas laterais. Então, com um pouco de paciência, descobri e vou postar aqui.

Em "Layout" e Editar "HTML", clique em "Expandir modelo de Widget". Encontre (Ctrl+F) primeira tag das sidebar do seu blog, como (no caso do meu template) no exemplo a seguir:

#sidebar {
    width:230px;
    float:left;
    text-align:left;
    padding: 5px;
    overflow: hidden;
}

Cole o seguinte código logo acima da tag encontrada. Este código abaixo é o da sidebar horizontal sobre as duas colunas.

* Se você quiser adicionar essa sidebar horizontal também abaixo das duas colunas, deverá procurar nas sequências da tag acima a que representa a última coluna e colar o seguinte código abaixo dela.

#rightsidebar2-wrapper {
background: url() top no-repeat;
width: 320px;
margin-top:10px;
margin-right:10px; _margin-right:0px;
margin-left: 0px;
float:right;
word-wrap: break-word;
overflow: hidden;

}

A marcação em vermelho é a largura da área destina à sidebar horzontal, que deve ser a soma das larguras das colunas (cuidado com margins e paddings). Altere de acordo. Veja o exemplo:

Sidebar Horizontal sobre as colunas= 250px

Coluna Esquerda= 100px Coluna Direita= 150px

A marcação de azul é a flutuação na página. Se as colunas do seu template são à esquerda da coluna do post, altere este valor para float:left;

Agora encontre a sequencia das sidebars do seu blog que indica as posições. (Mais ao final do código HTML)

Algo mais ou menos como: (Estas linhas do código representam as duas colunas do blog)

             <div id='sidebar2'>
<b:section id='sidebar2-widget' showaddelement='yes'>
<b:widget id='HTML4' locked='false' title='Your Feed Here' type='HTML'/>
<b:widget id='HTML2' locked='false' title='Posts Recentes' type='HTML'/>
</b:section>
            </div>
            <div id='sidebar'>
<b:section id='categories-widget' showaddelement='yes'>
<b:widget id='Label1' locked='false' title='Categories' type='Label'/>
<b:widget id='BlogArchive1' locked='false' title='ARCHIVES' type='BlogArchive'/>
</b:section>
            </div>

Cole o seguinte código logo acima da tag encontrada.

<div id='rightsidebar2-wrapper'>
<b:section class='rightsidebar' id='rightsidebar2' preferred='yes'>
<b:widget id='Subscribe1' locked='false' title='Inscrever-se' type='Subscribe'/>
</b:section>
</div>

* Vale lembrar que, se você quiser adicionar essa sidebar horizontal também abaixo das duas colunas, deverá colar o código abaixo dessa tag.

Existem outras alterações masi complexas no código HTML do template a fazer, mas essa vai ficar pra uma outra postagem.

Visualize, faça vários testes e salve o template. Agora você inseriu uma sidebar superior às duas colunas do seu blog.

Como Retira Navbar do Blogger

2009-01-07T13:48:00.000-08:00

Navbar, para quem não sabe, é aquela barrinha de login do Blogger, talvez até útil mas bem chata, que fica logo acima do cabeçalho do blog. Geralmente, quando você utiliza outro template que não seja padrão do Blogger, não vem com essa barra, mas às vezes pode vir, e se utiliza um template do Blogger e quer retirá-la, aqui vai a dica:

Vá em "layout" e "editar html" e procure no HTML do seu blog por esta tag (Ctrl+F para pesquisar):

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

Cole o seguinte código, imediatamente ates de ]]></b:skin>;

#navbar-iframe { height: 0px; visibility: hidden; display: none; }

Clique em visualizar. Se tudo tiver ok, salve o modelo. pronto!

Imagem ou Menu Flutuante

2009-01-07T04:37:00.000-08:00

Você provavelmente ja deve ter visitado algum site ou blog em que, quando você rola a página para cima ou para baixo, há um menu ou uma imagem que rola junto coma a tela. São as imagens ou menus flutuantes.

Se você deseja adicionar isso no seu blog, encontrei na internet como adicionar esse efeito. Pode ser muito útil para passar alguma mensagem importante para seus visitantes, ou anúncio ou o menu de categorias do seu blog, por exemplo.

Você pode escolher deixar rolando imagens, widgets, links ou mesmo um pequeno menu. Então vamos lá! Antes de mais nada, salve o seu blog.

Vá em “Layout” e “Editar HTML” e clique em “Expandir modelos de widgets” e procure por:

]]></b:skin>

Logo acima dessa linha cole o seguinte código:

#float_corner {
position:fixed;_position:absolute;bottom:0px;left:0px;clip:
inherit;_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);}

Altere a marcação vermelho que é a posição em relação à tela: “left”, “right”, “top”, “buttom”.

Agora encontre a linha “<body>” e abaixo dela, cole o seguinte código:

<div id="float_corner">

IMAGEM OU WIDGET A FLUTUAR

</div>

Na marcação em vermelho, coloque o código daquilo q for ficar flutuando na tela.

Salve as alterações e pronto!!!

Domínio Próprio no Blog

2009-01-06T07:46:00.000-08:00

Olá a todos. Agora o Dicas Plugins está com domínio próprio, o dicasplugins.net. E como na internet é meu complicado encontrar um passo-a-passo para isso, resolvi fazer um post mostrando o passo-a-passo de como registrar um domínio próprio para seu blog.

Para quem está chagando agora e não está acostumado, domínio é aquela extensão do tipo: .net, .org ou .com.br. Isso facilita seus visitantes acessarem seu blog, e elimina o pequêno incômodo do .blogspot.

Então, vasmos lá! O registro de dómío próprio para seu blog, é feito em três passos bem simples e não demora mais do que dois dias úteri para você ja ter o seu somínio próprio.

Registro do Domínio

A primeira coisa que você deve fazer é registrar um domínio. Eu utilizei o Locaweb pelo preço e por referências na internet. Antes, eu tinha utilizado o IGempresas em outro blog mas só passei raiva.

No Locaweb, pesquise o domínio de sua preferência. Após isso, faça o seu cadastro no site e compre o domínio (taxa anual).

Depois, é só aguardar o Locaweb identificar seu pagamento para poder acessar o painel de controle.

Configuração do DNS

Após cadastrado o seu painel de controle, deveremos redirecionar o nosso blog (que fica hospedado em servidores do Google) para o novo domínio. Agora iremos configurar o DNS.

Então, acesse seu painel de controle e clique em Administrar. Depois, Edição de DNS e, em seguida, Edição da Zona de DNS.

Na janela, Clique em CNAME e escreva no primeiro campo www e no segundo ghs.google.com. Salve a alteração..

Clique novamente em CNAME e escreva . (ponto) no primeiro campo e ghs.google.com no segundo. Salve a alteração.

Pronto. As alterações necessárias no painel de controle foram feitas. Agora, devemos fazer as alterações no Blogger.

Configuração no Blogger

Acesse seu login no Blogger, vá em configurações e, em seguida, clique em publicação no blog a ter o domínio próprio.

Clique em domínio personalizado e, como você ja comprou o domínio, escolha Ir para configurações avançadas.

No campo indicado, escreva o seu novo domínio e salve. Agora clique na caixa de seleção redirecionar www.seublog.domíniocomprado para seublog.domíniocomprado e salve novamente.

Pronto! Agora seu blog tem um domínio próprio e você deverá divulgar o novo domínio.

Menu com Índice de Todas as Postagens

2009-01-04T06:57:00.000-08:00

Encontrei uma superdica que eu estava procurando no Templates e Acessórios. É um tutorial sobre como colocar uma tabela expandivel com todas as postagens do blog. Veja o exemplo:

Para coloca-la em seu blog não é muito difícil. Vejamos:

Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo.

Vá até o HTML de seu blog e clique em "Expandir Modelos de widget"

Agora procure pelo trecho:

<b:section class='main' id='main' showaddelement='no'>

E substitua pelo código abaixo salvando depois.

<b:section class='main' id='main' maxwidgets='2' showaddelement='yes'>

ATENÇÃO: No meu blog, mesmo com o código anterior era possível colocar gadgets acima do post. Quanto fiz essa alteração, não pudia mais. Então, se no seu blog é possível adicionar gadgets acima da coluna das postagens (masmo que seja arrastando o gadget para lá), não precisa fazer essa alteração. Passa para o passo seguinte.

Agora procure pelo código:
]]></b:skin>
E cole o código seguinte logo acima dele.

<style type="text/css">
#toc {
border: 0px solid #000000;
background: #ffffff;
padding: 5px;
width:500px;
margin-top:10px;
}
.toc-header-col1, .toc-header-col2, .toc-header-col3 {
background: #cccccc;
color: #000000;
padding-left: 5px;
width:250px;
}
.toc-header-col2 {
width:75px;
}
.toc-header-col3 {
width:125px;
}
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {
font-size:80%;
text-decoration:none;
}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
font-size:80%;
text-decoration:underline;
}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
padding-left: 5px;
font-size:100%;
}
</style>

Salve as alterações.

Vá até "Elementos de página". Note que agora há a opção de colocar Gadgets acima das postagens do blog. (Talvez não haja; é só arrastar uma gadget de outra coluna para logo acima da coluna post, como no meu caso)

*Aqui (acima do post) é onde aparecerá a tabela quando for clicado em "Conteúdo do Blog".

Clique então e adicione um HTML/Javascript e cole o próximo código dentro dele. Salve !

<div id="toc"> </div>

Agora, dentro de outro HTML/Javascript (onde ficará o link "Conteúdo do Blog" para a tabela de índice), cole o código abaixo.
*Não se esqueça de colocar o nome de seu blog no local em vermelho.

<div id="toclink"><a href="javascript:showToc();">Conteudo do Blog</a></div>
<script style="text/javascript" src="http://templateseacessorios5.googlepages.com/tocdoblogparaleitores.JS">
</script>
<script src="http://NOMEDOSEUBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>

Pronto! Você acora tem um exelente recurso como índece com todas as postagens para o seu blog.

Campo de Busca Google Blog Search

2009-01-04T05:08:00.000-08:00

É muito mais fácil para os nosso visitantes pesquisar por um assunto e obter as respostas em uma lista como a do Google, do que aparecer as postagens referentes à palavra chave buscada no próprio blog. É mais cômodo e mais fácil.

Além do mais, se você utiliza o Google Adsense (programa de afiliados do Google) pode personalizar o campo de busca do Google e, assim, obter anúncios entre as respostas da busca. Mas nessa postagem mostrarei, por enquanto, um código que você pode inserir no blog para suas buscas aparecerem como no Google. A do Google Adsense mostrarei em breve.

O código é o seguinte:

<div class="module-search module">
<div class="module-content">
<form action="http://blogsearch.google.com/blogsearch" method="get">
<input value=http://SEUBLOG.blogspot.com/ name="bl_url" type="hidden"/>
<label for="search" accesskey="4"></label><br/>
<input id="search" name="as_q" size="20" type="text"/>
<input value="Buscar" name="submit" type="submit"/></form></div></div>

O que tem a fazer, é alterar a marcação em vermelho pela URL de seu blog.

*O interessante é que eu testei em um blog de teste e funcionou mas não funcionou aqui no Dicas Plugins.

Gerador de Banner Link-me

2009-01-03T08:52:00.000-08:00

Encontrei esse gerador de banners no Dicas para Blogs.

Ele gerará o código HTML de seu banner. Insira a URL de seu blog e o endereço da imagem e clique em gerar código.

Depois, vá até seu blog. Clique em "Layout", "Elementos de página", Inserir novo "Gadget", " HTML/Java Script", cole o código.

Template Red White Web 2.0 - 3 colunas

2009-01-03T07:05:00.000-08:00

Vou postar aqui pra vocês o template que estou utilizando aqui no Dicas Plugins.

Nesse template, a coluna sidebar à direita (230 px) é maior do que a do que a da esquerda (170 px). A qui no Dicas Plugins é o contrário porque eu alterei os valores no código HTML. A coluna post tem 450 px.

O Template está em inglês. Logo, as frases: Postado em:, por, Voltar ao Topo, Comentários para, Postar um Comentário, eu traduzi. Para traduzir procure no HTML do template por: Posted in:, by, Up?, Responses to, Something to say? e traduza-as conforme aqui no Dicas Plugins.


	Download

Detalhes da instalação:

Como esse tema tem muitas funções ele precisa de alguns ajustes durante a instalação. São apenas 3 modificações muito simples, mas qualquer dúvida pergunte nos comentários.

Caixa de Busca:

Na aba Layout vá na opção Elementos da página e dentro do widget de HTML/JavaScript coloque o código abaixo:

<form id="SearchBox" action="/search" method="get">
<input id="s" maxlength="255" value="Faça sua Busca!" name="q" type="text"/>
</form>

Links de Navegação

Na aba Layout vá na opção Elementos da página e dentro do widget de HTML/JavaScript coloque o código abaixo, mudando os valores de acordo com sua preferência ( ou, se preferir, utilize uma gadget lista de links):

<ul>
<li><a href="URL do BLOG">Home</a> </li>
<li class="page_item"><a href="URL DA PAGINA" title="Page 1">EXEMPLO1</a></li>
<li class="page_item"><a href="URL DA PAGINA" title="Page child">EXEMPLO2</a></li>
<li class="page_item"><a href="URL DO SEU FEED" title="Page 2">FEED</a> </li>
</ul>

Sobre mim - Willian Coutinho

2009-01-02T08:14:00.000-08:00

Bom, aproveitei um post que fiz para o Meme com 6 coisas sobre mim para criar este. Então, se vocês queserem saber um pouco sobre mim, está aí, seis cisas a meu respeito:

Meu nome é Willian, tenho 19 anos, e faço parte da Blogosfera (o mundo dos Blogs) desde Junho de 2008, há 8 meses, quando fiz um blog sobre amostras grátis (http://ganhedegraca.blogspot.com).

O tema amostras grátis nunca, de fato, me incentivou, eu vivia mudando o template do blog, adiciona e retirando colunas, mexendo nas cores do blog, futricando o código HTML dele até que em 23 de Dezembro de 2008, nasceu o Dicas Plugins, eu ja tinha acumulado alguma experiência e criei um blog de um tema que eu gosto.

Ainda pretendo criar também, um blog sobre tecnologia, robótica e informática, mas por enquanto fico por aqui mesmo.Bom, não sou tão chegado a ler livros mas gosto de ler revistas, notícias e dicas na internet sobre tecnologia, informática, etc...

Sempre fui considerado um nerd na minha escola, mas em uma escola pública. Quando me conparo a outras pessoas esse título se esvai como água em uma correnteza de rio. Curso administração de empresas.

Finalmente depois de 11 anos(eu não aguentava mais) me formei no Curso Técnico de Música, algo para música como o nosso ensino médio para a educação básica (resumindo, o ensino médio do Música). Gosto de diversos ritmos, mas não sou muito ligado nas letras. Nada contra, mas não sou chegado a funk, hock e hiphop.

Sou evangélico e tenho uma namorada linda que eu amo muito e não vivo sem ela. Se chama Lílian e, em breve (assim que eu passar em um bom concurso ou arranjar um emprego que valorize os conhecimentos que eu tenho) pretendemos nos casar.

Parceria

2009-01-02T06:53:00.000-08:00

Para formar parceria, insira um dos banners abaixo no seu site e, após isso, entre em contato comigo através do e-mail: wscpianist@hotmail.com ou do Formulário de Contato.

Parcerias são bem vindas, exceto para:

Sites ou Blogs com conteúdo e/ou material pornográfico;
Sites ou Blogs com conteúdo de cunho racista;
Sites ou Blogs com conteúdo pirata (cracker);
Sites ou Blogs incompletos, mal feitos ou inacabados.

Lembrando que a melhor maneira de divulgar seu site/blog aqui no Dicas Plugins, é comentando.

1 - Banner 120X80 e 120x60

<br/><a onmouseover="parent.location='http://dicasplugins.blogspot.com/'" href="http://dicasplugins.blogspot.com/" target="_blank"><img alt="Dicas Plugins & Templates" src="http://i493.photobucket.com/albums/rr293/wscpianist/Banner120_60.gif" /></a><br/><br/>

2 - Banner 468x60

<br/><a onmouseover="parent.location='http://dicasplugins.blogspot.com/'" href="http://dicasplugins.blogspot.com/" target="_blank"><img alt="Dicas Plugins & Templates" src="http://i493.photobucket.com/albums/rr293/wscpianist/banner468_60.gif" /></a><br/><br/>

Todos os Parceiros do Dicas Plugins

2009-01-02T05:26:00.000-08:00

Para se tornar um de nossos parceiros, veja o Termo de parceria.

Template Cold Blue Performance

2009-01-01T00:05:00.000-08:00

Um Template que eu acho muito interessante, apesar de bem simples, é o Cold Blue, adptado do Wordpress para o Blogger pelo Templates para Novo Blogger.

Ja usei ele, em um outro blog meu quando eu estava iniciando no Blogger, depois troquei devido sua simplicidade.

Como eu gosto dele, mexi no código e inseri uma coluna à direita e movi o menu de navegação superior para a esquerde. Chamo a nova variação de Template Cold Blue Performance.

Download Template Cold Blue Download Cold Blue Performance

Nesse template, para o campo de busca funcionar, você deve inserir a URL do seu blog no código HTML do template. Para isso, faça o seguinte:

Clique em "Layout" e depois em "editar HTML"
Pressione "Ctrl+F", e na caixa pesquisar digite: http://endereço do seu blog aqui/search
Troque endereço do seu blog aqui pela URL do seu blog.

Pronto! Agora a caixa de busca estará funcionando normalmente.

Retirar Link Assinar Postagens (Atom)

2008-12-31T08:06:00.001-08:00

Existe um link que sempre vem no final da página, logo abaixo da última postagem que serve para direcionar o visitante ao seu Feed.

Mas, convenhamos, esse link é inútil, ninguém clica nele e, se você tem um Feed em outro lugar como o Feedburner, por exemplo, esse não ajuda em nada.

Então, que tal tirá-lo de lá. Isso deixará o blog um pouquinho mais profissional a medida que os visitantes vejam que você tira esse link inútil.

Então, para retirar este link, vá em "Layout", depois em "Editar HTML"; então procure no código HTML do seu template (utilize Ctrl+F), o seguinte trecho:

.feed-links {
clear: both;
line-height: 2.5em;
}

Abaixo de "line-height:2.5em; acrescente a linha marcada em vermelho:

.feed-links {
clear: both;
line-height: 2.5em;
display: none;
}

Clique em visualizar template. Se tiver tudo ok, salve. Pronto!

Retirar Link Assinar Postagens (Atom)

2008-12-31T08:06:00.000-08:00

Existe um link que sempre vem no final da página, logo abaixo da última postagem que serve para direcionar o visitante ao seu Feed.

Mas, convenhamos, esse link é inútil, ninguém clica nele e, se você tem um Feed em outro lugar como o Feedburner, por exemplo, esse não ajuda em nada.

Então, que tal tirá-lo de lá. Isso deixará o blog um pouquinho mais profissional a medida que os visitantes vejam que você tira esse link inútil.

Então, para retirar este link, vá em "Layout", depois em "Editar HTML"; então procure no código HTML do seu template (utilize Ctrl+F), o seguinte trecho:

.feed-links {
clear: both;
line-height: 2.5em;
}

Abaixo de "line-height:2.5em; acrescente a linha marcada em vermelho:

.feed-links {
clear: both;
line-height: 2.5em;
display: none;
}

Clique em visualizar template. Se tiver tudo ok, salve. Pronto!

Widget Link Adicionar aos Favoritos

2008-12-31T07:05:00.001-08:00

Um link muito útil aos nossos visitantes e que, na maioria das vezes funciona, é o Adicione aos Favoritos. Com ele, seus visitantes podem facilmente te adicionar aos Favoritos e não perder mais seu blog de vista, caso ele não saiba como o encontrou.

Na maioria dos browsers como o Firefox (Ctrl+D), Opera (Ctrl+T) e Internet Explorer "IE" (Ctrl+D) possuem atalhos para que os visitantes adicionem as páginas em seus favoritos.

Mas como nem todos conhecem esses atalhos, e alguns ficam com preguissa de adicionar manualmente, resolvi, nesta postagem, mostrar um código de Adicionar aos Favoritos que serve tanto para o firefox, quanto para o Explorer:

Copie o código abaixo e cole-o em uma gadget, substituido as marcações em vermelho pelo nome e título do seu blog, respectivamente:

<script language="JavaScript">
function addFav(){
var url="http://URL_do_blog";
var title="TÍTULO DO BLOG";
if (window.sidebar) window.sidebar.addPanel(title, url,"");
else if(window.opera && window.print){
var mbm = document.createElement('a');
mbm.setAttribute('rel','sidebar');
mbm.setAttribute('href',url);
mbm.setAttribute('title',title);
mbm.click();
}
else if(document.all){window.external.AddFavorite(url, title);}
}
</script>
<a href="javascript:addFav()"><img border="0" alt="Adicione aos Favoritos"
src="http://www.iconspedia.com/uploads/1050379226.png"/></a>
<a href="http://URL_do _blog/" onclick="window.external.AddFavorite('http://URL_do_blog','TÍTULO_DO_BLOG');">
<img alt="Adicione aos Favoritos" src="http://www.iconspedia.com/uploads/394494863.png"
border="0"/> </a></center>

Dica: Pra fazer o efeito "Não perca este blog de vista!" piscando, utilize a tag abaixo (Funcionou bem no Firefox mas não no Explorer):

<blink>Não perca este blog de vista!</blink>

Widget Link Adicionar aos Favoritos

2008-12-31T07:05:00.000-08:00

Na maioria dos browsers como o Firefox (Ctrl+D), Opera (Ctrl+T) e Internet Explorer "IE" (Ctrl+D) possuem atalhos para que os visitantes adicionem as páginas em seus favoritos.

Mas como nem todos conhecem esses atalhos, e alguns ficam com preguissa de adicionar manualmente, resolvi, nesta postagem, indicarar duas formas de Adicionar aos Favoritos através de links na sua página:

Link de texto "Adicionar aos Favoritos"

Copie o código abaixo e cole-o em uma gadget, substituido as marcações em vermelho pelo nome e título do seu blog, respectivamente. Esse código funciona para qualquer navegador.

<script language="JavaScript">
function addFav(){
    var url      = "http://NOME_DO_SEU_BLOG";
    var title    = "TÍTULO_DO_SEU_BLOG";
    if (window.sidebar) window.sidebar.addPanel(title, url,"");
    else if(window.opera && window.print){
        var mbm = document.createElement('a');
        mbm.setAttribute('rel','sidebar');
        mbm.setAttribute('href',url);
        mbm.setAttribute('title',title);
        mbm.click();
    }
    else if(document.all){window.external.AddFavorite(url, title);}
}
</script>
<a href="javascript:addFav()" title="Adicionar aos Favoritos">Adicionar aos Favoritos</a>

Link com Imagem - Esse seugundo, será com imagem. Segue abaixo os códigos. Copie e cole-os em um gadget do seu Blogger.

OBS.: As marcações em azul são o endereço da imagem que estão hospedadas no meu photobucket. Se você preferir, prucure as imagens que quiser e substitua.

Para FIREFOX

<a href="javascript:addFav()"><img border="0" alt="Adicione aos Favoritos" src="http://i493.photobucket.com/albums/rr293/wscpianist/firefox.gif"/></a>

Para EXPLORE

<a href="http://URL_DO_SEU_BLOG" onclick="window.external.AddFavorite('http://URL_DO_SEU_BLOG','Dicas Plugins e Templates');"> <img border="0" alt="Adicione aos Favoritos" src="http://i493.photobucket.com/albums/rr293/wscpianist/IE_logo.gif"/></a>

Selos: Agradecimentos e Repassando

2008-12-29T20:38:00.001-08:00

Olá a todos! Recebi esses selos do Link Mania.

São selos que indicam a qualidade do blog.

Agradeço a todos e repasso aos seguintes blog:

Selos: Agradecimentos e Repassando

2008-12-29T20:38:00.000-08:00

Olá a todos! Recebi esses selos do Link Mania.

São selos que indicam a qualidade do blog.

Agradeço a todos e repasso aos seguintes blog:

Widget Links com Menu Suspenso

2008-12-28T20:39:00.001-08:00

Há algum tempo eu estava procurando um widget de menu suspenso e os que eu encontrava era necessário fazer alterações no código HTML do blog.

Mas, finalmente, encontrei esse no blog Microship. Nesse widget, bastab você inserir o nome e a URL do link e terá um menu suspenso bem interesssante.

Então, vejamos:

Para colocar um menu suspenso em seu blog basta copiar e colar este código em um gadget HTML.

<form>
<select NAME="links"
onChange="top.location.href=this.form.links.options
[this.form.links.selectedIndex].value">
<option SELECTED>Selecione </option>
<option VALUE="ENDEREÇO DO LINK">NOME DO LINK
</option>
<option VALUE="ENDEREÇO DO LINK">NOME DO LINK
</option>
<option VALUE="ENDEREÇO DO LINK">NOME DO LINK
</option>
</select>
</form>

Para inserir mais links no seu menu, continue acrescentando a tag abaixo (antes de </select>):

<option VALUE="ENDEREÇO DO LINK">NOME DO LINK
</option>

Você poderá, ainda, trocar o nome (Selecione) por um outro de sua escolha, como, por exemplo, Selecionar, Categoria, ......, etc.

Widget Links com Menu Suspenso

2008-12-28T20:39:00.000-08:00

Há algum tempo eu estava procurando um widget de menu suspenso e os que eu encontrava era necessário fazer alterações no código HTML do blog.

Mas, finalmente, encontrei esse no blog Microship. Nesse widget, bastab você inserir o nome e a URL do link e terá um menu suspenso bem interesssante.

Então, vejamos:

Para colocar um menu suspenso em seu blog basta copiar e colar este código em um gadget HTML.

<form>
<select NAME="links"
onChange="top.location.href=this.form.links.options
[this.form.links.selectedIndex].value">
<option SELECTED>Selecione </option>
<option VALUE="ENDEREÇO DO LINK">NOME DO LINK
</option>
<option VALUE="ENDEREÇO DO LINK">NOME DO LINK
</option>
<option VALUE="ENDEREÇO DO LINK">NOME DO LINK
</option>
</select>
</form>

Para inserir mais links no seu menu, continue acrescentando a tag abaixo (antes de </select>):

<option VALUE="ENDEREÇO DO LINK">NOME DO LINK
</option>

Você poderá, ainda, trocar o nome (Selecione) por um outro de sua escolha, como, por exemplo, Selecionar, Categoria, ......, etc.

Criando e Inserindo Meta Tags no Blog

2008-12-28T12:49:00.001-08:00

Meta Tags são muito importantes para que seu blog seja localizado pelos buscadores. Assim neste artigo irei mostrar um código para meta tags e como inseri-lo no código HTML do seu blog ou site.

Meta tags são as palavras chaves para que os buscadores, como o Google, o Yahoo, o Alta Vista, por exemplo, localizem seu blog. Incluem-se ainda nas meta tags o nome do Blog, a descrição do blog, nome do autor do blog, o e-mail e o idioma.

Então, no código abaixo, substitua as marcações coloridas pelas descrições apresentadas:

<META CONTENT='Nome do Site' NAME='TITLE'/>
<META CONTENT='Breve descrição do site' NAME='DESCRIPTION'/>
<META CONTENT='palavras-chaves, separadas por vírgula' NAME='KEYWORDS'/>
<META CONTENT='e-mail do autor do blog' NAME='OWNER'/>
<META CONTENT='nome do autor do blog' NAME='AUTHOR'/>
<META CONTENT='Portuguese' HTTP-EQUIV='CONTENT-LANGUAGE'/>
<META CONTENT='General' NAME='RATING'/>
<META CONTENT='index,follow' NAME='ROBOTS'/>

A marcação idioma (de azul) deve estar em inglês.

Ex.: Portuguese, french, english, italian, spanish, german, japanese, etc...

No caso do blog sendo em português deixe este ítem como está.

Inserindo Meta Tag no código Html do Blog

Para inserir a meta tag em seu blog, localize a seguinte sequência em seu blog (logo no início do código):

<head>

    <link href='ENDEREÇO DO SEU ÍCONE' rel='shortcut icon'/>
    <title><data:blog.pageTitle/></title>

    <b:include data='blog' name='all-head-content'/>
    <b:skin><![CDATA[/*

Agora, insira o código meta tag no espaço logo abaixo de <title><data:blog.pageTitle/></title>

Sempre que você estiver alterando ou inserindo códigos no html do seu blog não salve ainda as alterações. Primeiro clique em visualizar para ver se tudo ocorreu corretamente. Se a página carregou normalmente e estiver tudo ok, pronto. Só, então, clique em Salvar alterações.

Criando e Inserindo Meta Tags no Blog

2008-12-28T12:49:00.000-08:00

Meta Tags são muito importantes para que seu blog seja localizado pelos buscadores. Assim neste artigo irei mostrar um código para meta tags e como inseri-lo no código HTML do seu blog ou site.

Então, no código abaixo, substitua as marcações coloridas pelas descrições apresentadas:

<META CONTENT='Nome do Site' NAME='TITLE'/>
<META CONTENT='Breve descrição do site' NAME='DESCRIPTION'/>
<META CONTENT='palavras-chaves, separadas por vírgula' NAME='KEYWORDS'/>
<META CONTENT='e-mail do autor do blog' NAME='OWNER'/>
<META CONTENT='nome do autor do blog' NAME='AUTHOR'/>
<META CONTENT='Portuguese' HTTP-EQUIV='CONTENT-LANGUAGE'/>
<META CONTENT='General' NAME='RATING'/>
<META CONTENT='index,follow' NAME='ROBOTS'/>

A marcação idioma (de azul) deve estar em inglês.

Ex.: Portuguese, french, english, italian, spanish, german, japanese, etc...

No caso do blog sendo em português deixe este ítem como está.

Inserindo Meta Tag no código Html do Blog

Para inserir a meta tag em seu blog, localize a seguinte sequência em seu blog (logo no início do código):

<head>

    <link href='ENDEREÇO DO SEU ÍCONE' rel='shortcut icon'/>
    <title><data:blog.pageTitle/></title>

    <b:include data='blog' name='all-head-content'/>
    <b:skin><![CDATA[/*

Agora, insira o código meta tag no espaço logo abaixo de <title><data:blog.pageTitle/></title>

Campo de Busca com Texto Autolimpante

2008-12-27T17:57:00.001-08:00

Uma caixa de pesquisa é realmente indispensável em qualquer blog. Acredito que 95% dos blogs usam caixa de busca.

Nesta postagem vou colocar o link de uma caixa de busca com texto auto limpamte - a mesma que usamos aqui no Dicas Plugins - que encontrei no Usuário Compulsivo.

O texto que aparece dentro da caixa de texto do campo de busca chama-se dica de tela, é útil para indicar a usuários leigos o local de pesquisa no blog.

Você tem duas opções:

1 - Instalar através do link abaixo:

Box com Dica Autolimpante

2 - Ou adicionar o seguinte código:

<script type="text/javascript">
function clickclear(thisfield, defaulttext) {
if (thisfield.value == defaulttext) {
thisfield.value = "";
}
}
function clickrecall(thisfield, defaulttext) {
if (thisfield.value == "") {
thisfield.value = defaulttext;
}
}
</script>
<center><form id="searchthis" action="/search" style="margin:0;padding:0;display:inline;" method="get"><input onclick="clickclear(this, 'Pesquisar neste blog')" value="Pesquisar neste blog" type="text" id="search-box" onblur="clickrecall(this,'Pesquisar neste blog')" style="color: #999;" size="20" name="q"/> <input id="search-btn" value="Buscar" type="submit"/></form>
<br/></center>

Para os que não sabem, se quiser alterar a largura da caixa de texto, altere o valor em size="20" por um valor maior ou menor dependendo da sua necessidade.
Para alterar o valor Buscar para, por exemplo, Pesquisar ou Procurar, altere o texto em value="Buscar" para o txto desejado.

Campo de Busca com Texto Autolimpante

2008-12-27T17:57:00.000-08:00

Uma caixa de pesquisa é realmente indispensável em qualquer blog. Acredito que 95% dos blogs usam caixa de busca.

Nesta postagem vou colocar o link de uma caixa de busca com texto auto limpamte - a mesma que usamos aqui no Dicas Plugins - que encontrei no Usuário Compulsivo.

O texto que aparece dentro da caixa de texto do campo de busca chama-se dica de tela, é útil para indicar a usuários leigos o local de pesquisa no blog.

Você tem duas opções:

1 - Instalar através do link abaixo:

Box com Dica Autolimpante

2 - Ou adicionar o seguinte código:

<script type="text/javascript">
function clickclear(thisfield, defaulttext) {
if (thisfield.value == defaulttext) {
thisfield.value = "";
}
}
function clickrecall(thisfield, defaulttext) {
if (thisfield.value == "") {
thisfield.value = defaulttext;
}
}
</script>
<center><form id="searchthis" action="/search" style="margin:0;padding:0;display:inline;" method="get"><input onclick="clickclear(this, 'Pesquisar neste blog')" value="Pesquisar neste blog" type="text" id="search-box" onblur="clickrecall(this,'Pesquisar neste blog')" style="color: #999;" size="20" name="q"/> <input id="search-btn" value="Buscar" type="submit"/></form>
<br/></center>

Para os que não sabem, se quiser alterar a largura da caixa de texto, altere o valor em size="20" por um valor maior ou menor dependendo da sua necessidade.
Para alterar o valor Buscar para, por exemplo, Pesquisar ou Procurar, altere o texto em value="Buscar" para o txto desejado.

Imagens, Textos ou Banners Rolando

2008-12-26T19:10:00.001-08:00

Um widget muito interessante que descobri recentemente é o código para a utilização de imagens, textos ou banners rolando de baixo para cima. Achei muito legal e bem útil para diminuir o espaço que os banner ocupam no blog.

Quando você posiciona o cursor do mause sobre as imagens ela pára de rolar. Isso é bom, poi, ao contrário, se você não clicasse a tempo teria que esperar ela voltar de novo, heheh.

Abixo, está o código para essa função com as alterações possíveis.

No código abaixo, modifique o seguinte:

De vermelho, determine a altura a largura, respectivamente.

De verde, a direção: "up" - de baixo para cima
"down" - de cima para baixo
"up style" - da esquerda para a direita

De azul, a velocidade do rolamento.

De laranja, insira os códigos de imagens, textos ou banners.

<marquee heigth="480" widht="480" direction="up" behavior="scroll" onmouseover="this.stop() " onmouseout="this.start()" scrollamount="3">

<center>

Código de Imagem, Texto ou Banner.

Código de Imagem, Texto ou Banner.

Código de Imagem, Texto ou Banner.

</center></marquee>

Ou utilize ainda duas outras variações mais simples:

<marquee> Código de Imagem, Texto ou Banner.</marquee>

<div align="center"><marquee height="300px" direction="up">Código de Imagem, Texto ou Banner.</marquee></div>

Veja neste site, uma utilização do código para os banner dos parceiros.

Imagens, Textos ou Banners Rolando

2008-12-26T19:10:00.000-08:00

Quando você posiciona o cursor do mause sobre as imagens ela pára de rolar. Isso é bom, poi, ao contrário, se você não clicasse a tempo teria que esperar ela voltar de novo, heheh.

Abixo, está o código para essa função com as alterações possíveis.

No código abaixo, modifique o seguinte:

De vermelho, determine a altura a largura, respectivamente.

De verde, a direção: "up" - de baixo para cima
"down" - de cima para baixo
"up style" - da esquerda para a direita

De azul, a velocidade do rolamento.

De laranja, insira os códigos de imagens, textos ou banners.

<marquee heigth="480" widht="480" direction="up" behavior="scroll" onmouseover="this.stop() " onmouseout="this.start()" scrollamount="3">

<center>

Código de Imagem, Texto ou Banner.

Código de Imagem, Texto ou Banner.

Código de Imagem, Texto ou Banner.

</center></marquee>

Ou utilize ainda duas outras variações mais simples:

<marquee> Código de Imagem, Texto ou Banner.</marquee>

<div align="center"><marquee height="300px" direction="up">Código de Imagem, Texto ou Banner.</marquee></div>

Veja neste site, uma utilização do código para os banner dos parceiros.

Plano de Fundo Degrade - Duas Cores

2008-12-26T14:59:00.000-08:00

Encontrei esses planos de fundo para blogs no blog Tah na Mão. Observe o Dicas Plugins e verá que usei o plano de fundo Preto e Cinza Degrade (Duas Cores).

/*---Body---*/
body {
background: substituir pelo código
color:$textcolor;
border: 5px none #5F4775;
font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Encontre a sequência acima no código HTML do seu blog e susbtitua a marcação em vermelho pelo código do plano de fundo desejado.

Azul e brando Degrade

Preto e Cinza Degrade

Laranja e Branco Degrade

background: #ffffff url('http://www.thematrixx.oi.com.br/ap/fundos/azul_branco.gif') fixed top left repeat-x;

background: #000000 url('http://www.thematrixx.oi.com.br/ap/fundos/preto_cinza.gif') fixed top left repeat-x;

background: #ffffff url('http://www.thematrixx.oi.com.br/ap/fundos/laranja_branco.gif') fixed top left repeat-x;

	Preto e Vermelho Degrade	Verde e Branco Degrade
	background: #000000 url('http://www.thematrixx.oi.com.br/ap/fundos/preto_vermelho.gif') fixed top left repeat-x;	background: #ffffff url('http://www.thematrixx.oi.com.br/ap/fundos/verdea_branco.gif') fixed top left repeat-x;

Metacadastro Grátis - Inserir blog em Buscadores

2008-12-26T12:33:00.001-08:00

Na postagem Inserir Blog em Mecanismos de Buscas, mostrei links de diversos mecanismos de buscas do Brasil e de Portugal. Nesta, apresentarei o que é metacadastro e mostrarei um link bem interessante para você cadastrar seu blog em centenas de buscadores ao redor do mundo.

Há algum tempo atrás era fácil encontrar ferramentas gratuitas que cadastravam seu site em centenas de mecanismos de busca gratuitamente, os famosos metacadastros.

A guerra entre mecanismos de busca não era tão polarizada, exisitam centenas de mecanismos que disputavam a preferência do usuário. Essas ferramentas em geral eram desenvolvidas por programadores em seu tempo livre e por isso costumavam ser gratuitas. Com a mudança do cenário da internet, onde o tráfego vindo de mecanismos de busca geralmente é a maior fonte de visitas dos sites, os metacadastros tornaram-se um negócio lucrativo e mesmo algumas ferramentas que eram gratuitas tornaram-se pagas.

Procurei, procurei e encontrei esse link: http://www.tecnixindo.com/submitter/

Nesse site, você cadastra seu blog em centenas de mecanismos de buscas. Alguns enviam um e-mail de confirmação. Então, se quiser cadastrar somente em buscadores que não requerem confirmação, utilize aquele e-mail que você criaou na Idade da Pedra da Internet e que não usa mais para não ficar recebendo mensagens no seu e-mail principal.

Veja dois simples motivos para que você adicione seu blog aos mais diversos motores de busca:

Segundo pesquisas, 85% dos internautas usam sites de busca para encontrar produtos, serviços e informações. Isso significa que nenhum blog ou site pode desprezar essa poderosa fonte de visitas.
Estar presente no maior número de ferramentas de busca é fundamental para o sucesso de seu site. Além de resultados diretos, a divulgação em um grande número de buscadores tende a aumentar sua popularidade.

Metacadastro Grátis - Inserir blog em Buscadores

2008-12-26T12:33:00.000-08:00

Há algum tempo atrás era fácil encontrar ferramentas gratuitas que cadastravam seu site em centenas de mecanismos de busca gratuitamente, os famosos metacadastros.

Procurei, procurei e encontrei esse link: http://www.tecnixindo.com/submitter/

Veja dois simples motivos para que você adicione seu blog aos mais diversos motores de busca:

Segundo pesquisas, 85% dos internautas usam sites de busca para encontrar produtos, serviços e informações. Isso significa que nenhum blog ou site pode desprezar essa poderosa fonte de visitas.
Estar presente no maior número de ferramentas de busca é fundamental para o sucesso de seu site. Além de resultados diretos, a divulgação em um grande número de buscadores tende a aumentar sua popularidade.

Inserir Blog em Mecanismos de Busca

2008-12-26T11:59:00.001-08:00

Atualmente, inserir seu blog/site em buscadores como o Google e o Yahoo, é fundamental para a divulgação e a performance de seu blog.

Existem sites que executam esse serviço para você de forma paga. Eles garantem grande divulgação e o topo dos buscadores. Mas para a maioria dos blogueiros, o preçõ se torna a grande "cortina de ferro" na divulgação. Então, nesta postagem irei indicar links de alguns dos principais buscadores, onde você poderá inserir seu site gratuitamente.

Antes, porém, veja dois simples motivos para que você adicione seu blog aos mais diversos motores de busca:

Segundo pesquisas, 85% dos internautas usam sites de busca para encontrar produtos, serviços e informações. Isso significa que nenhum blog ou site pode desprezar essa poderosa fonte de visitas.
Estar presente no maior número de ferramentas de busca é fundamental para o sucesso de seu site. Além de resultados diretos, a divulgação em um grande número de buscadores tende a aumentar sua popularidade.

Google - http://www.google.com/addurl/
Yahoo - http://search.yahoo.com/info/submit.html
Sapo - http://directorio.sapo.pt/form/form_normal.html
AEIOU - http://www.aeiou.pt/adicionar/
MundoPT - http://www.mundopt.com/add.php?cat=218
Hot Frog PT - http://www.hotfrog.pt/AddCompany.aspx?step=1
Msn - http://beta.search.msn.com/docs/submit.aspx?FORM=WSUT
Submit One - http://www.submit-one.com/links.html
LinksTraffic - http://www.linkstraffic.net/reg.php
NetIndex - http://www.netindex.pt/adicionar.html
Aonde.com - http://www.aonde.com/inclusaopde/
Leme.pt - http://www.leme.pt/pesquisa/addurl.cgi
PT-DIR - http://www.pt-dir.com/sugerirSite.asp
Portugal - http://www.portugal.com.pt/add_url_form.asp?new=site
Pesquisa.com.pt - http://www.pesquisa.com.pt/add_url.php?c=12
Aeiou - http://www.aeiou.pt/adicionar/
Sites - http://www.sites.com.pt/
Esquillo - http://www.esquillo.com
Webmasters Tuga - http://webmasters.tuga.pt/toptuga.php

Outra dica superimportante para atrairr visitantes para seu Blog é divulgar seus posts em um indexador de blogs. Como há muitos indexadores de blogs na Internet, dificilmente conseguimos atingir todos. O que estes indexadores fazem é reunir vários posts em suas páginas, permitindo que usuários façam por exemplo buscas em blogs. Um exemplo de indexador de blog é o Google Blog Search e BlogsBlogs.

Inserir Blog em Mecanismos de Busca

2008-12-26T11:59:00.000-08:00

Atualmente, inserir seu blog/site em buscadores como o Google e o Yahoo, é fundamental para a divulgação e a performance de seu blog.

Antes, porém, veja dois simples motivos para que você adicione seu blog aos mais diversos motores de busca:

Segundo pesquisas, 85% dos internautas usam sites de busca para encontrar produtos, serviços e informações. Isso significa que nenhum blog ou site pode desprezar essa poderosa fonte de visitas.
Estar presente no maior número de ferramentas de busca é fundamental para o sucesso de seu site. Além de resultados diretos, a divulgação em um grande número de buscadores tende a aumentar sua popularidade.

Adsense Alinhado dentro do Post

2008-12-25T18:58:00.001-08:00

Há algum tempo estava procurando um tutorial sobre como alinhar um anúncio do Adsense no post à esquerda e o texto da postagem iniciando à direita; da mesma forma como fazemos para incluir uma imagem na postagem e alinhá-la à direita ou à esquerda. Depois de algum tempo, encontrei esse tutorial no Oportunidades na Web e resolvi colocá-lo aqui, apenas com algumas alterações práticas.

Esse post trará um tutorial de como implementar os anúncios relevantes do AdSense em seu Blogspot de forma a buscar aumentar o seu CTR. Ao incluir as caixas de anúncios do AdSense dentro do seu texto, a potencialidade de cliques nos anúncios aumenta. Assim, você obterá um rendimento maior.

Bem, a inserção dos anúncios no interior do texto do seu Blogspot pode se dar de duas formas. Usando tabelas ou usando CSS. Abaixo Segue as duas formas.

Atenção: No meu blog, nenhuma das duas funcionou. Mas eu alterei o local onde colocar a tag com o código do Adsense e deu certo. Pode acontecer de não funcionar em outros blogs como no meu caso. Então, durante o post, você poderá ver a minha versão.

Antes de mais nada, faça um backup do seu modelo para um eventual problema de difícil solução.

Utilizando Tabelas

O primeiro passo é habilitar a versão expanded widgets na edição do html. Assim todos os elementos escondidos do código vão aparecer.

O segundo passo é localizar a tag:

que estará localizada abaixo da div class="post-body".

O terceiro passo é inserir esse código

<table align="'left'"><tr><td align="'left'">O SEU CÓDIGO ADSENSE</td></tr></table>

entre as tags <p> e <data:post.body/>.

Se não der certo, colocque abaixo de <div class='post-header-line-1'/> , que funcionou no meu blog.

Assim, você exibirá os anúncios alinhados à esquerda. Se você quiser à direita basta trocar left por right.

Utilizando CSS

O modo CSS é o que eu mais gostei, e por essa razão é a forma utilizada no E-Opportunities. Antes de mais nada, lembre-se de habilitar a opção expanded widgets.

O primeiro passo é simples, adicione o seguinte código de css antes da tag ]]></b:skin>

.adv
{
float:left;
padding-right:10px;
padding-right:10px;
}

O segundo passo é adicionar uma div de nome adv entre o código <p> e o código <data:post.body/>. E complemente com o seu código do AdSense dentro dela. O código ficará assim:

<p><div class='adv'>O SEU CÓDIGO ADSENSE aki</div><data:post.body/></p>

Se não der certo, colocque abaixo de <div class='post-header-line-1'/> , que funcionou no meu blog.

Se você quiser que o alinhamento seja à direita, basta trocar o comando float para right.

Atenção: Provavelmente ao você adicionar os códigos o AdSense não irá exibir os anúncios. Isso vai se dar por uma questão do problema relacionado ao XML do Blogger. Para solucionar isso você vai ter que alterar o código do AdSense. Calma, essa alteração não vai violar de forma alguma o TOS do AdSense. Essa alteração vai se dar apenas no HTML do Blogspot, porém o Blogger vai exibir o anúncio e o código dele da forma permitida pelo AdSense.

A alteração pode ser feita de duas maneiras (eu prefiro e recomendo a segunda):

No início e no fim do código do AdSense você verá os seguintes comandos:

para que o código funcione basta você substituí-los por:

Para inserir seu código com ele funcionando normalmente,você terá que converte-lo, mas isso é muito fácil, basta acessar o site Escape HTML, colar o código desejado e clicar em parse. Copie o código gerado e cole no local ja mencionado neste tutorial.

Adsense Alinhado dentro do Post

2008-12-25T18:58:00.000-08:00

Bem, a inserção dos anúncios no interior do texto do seu Blogspot pode se dar de duas formas. Usando tabelas ou usando CSS. Abaixo Segue as duas formas.

Atenção: No meu blog, nenhuma das duas funcionou. Mas eu alterei o local onde colocar a tag com o código do Adsense e deu certo. Pode acontecer de não funcionar em outros blogs como no meu caso. Então, durante o post, você poderá ver a minha versão.

Antes de mais nada, faça um backup do seu modelo para um eventual problema de difícil solução.

Utilizando Tabelas

O primeiro passo é habilitar a versão expanded widgets na edição do html. Assim todos os elementos escondidos do código vão aparecer.

O segundo passo é localizar a tag:

que estará localizada abaixo da div class="post-body".

O terceiro passo é inserir esse código

<table align="'left'"><tr><td align="'left'">O SEU CÓDIGO ADSENSE</td></tr></table>

entre as tags <p> e <data:post.body/>.

Se não der certo, colocque abaixo de <div class='post-header-line-1'/> , que funcionou no meu blog.

Assim, você exibirá os anúncios alinhados à esquerda. Se você quiser à direita basta trocar left por right.

Utilizando CSS

O modo CSS é o que eu mais gostei, e por essa razão é a forma utilizada no E-Opportunities. Antes de mais nada, lembre-se de habilitar a opção expanded widgets.

O primeiro passo é simples, adicione o seguinte código de css antes da tag ]]></b:skin>

.adv
{
float:left;
padding-right:10px;
padding-right:10px;
}

O segundo passo é adicionar uma div de nome adv entre o código <p> e o código <data:post.body/>. E complemente com o seu código do AdSense dentro dela. O código ficará assim:

<p><div class='adv'>O SEU CÓDIGO ADSENSE aki</div><data:post.body/></p>

Se não der certo, colocque abaixo de <div class='post-header-line-1'/> , que funcionou no meu blog.

Se você quiser que o alinhamento seja à direita, basta trocar o comando float para right.

Atenção: Provavelmente ao você adicionar os códigos o AdSense não irá exibir os anúncios. Isso vai se dar por uma questão do problema relacionado ao XML do Blogger. Para solucionar isso você vai ter que alterar o código do AdSense. Calma, essa alteração não vai violar de forma alguma o TOS do AdSense. Essa alteração vai se dar apenas no HTML do Blogspot, porém o Blogger vai exibir o anúncio e o código dele da forma permitida pelo AdSense.

A alteração pode ser feita de duas maneiras (eu prefiro e recomendo a segunda):

No início e no fim do código do AdSense você verá os seguintes comandos:

para que o código funcione basta você substituí-los por:

Para inserir seu código com ele funcionando normalmente,você terá que converte-lo, mas isso é muito fácil, basta acessar o site Escape HTML, colar o código desejado e clicar em parse. Copie o código gerado e cole no local ja mencionado neste tutorial.

Contador de Visitantes Online

2008-12-25T17:23:00.001-08:00

Contador de usuários online é extremamente comun em sites e blogs e é útil para saber quantos visitantes estão online no seu blog no momento. Então, instale uma contador de usuarios online para saber quantas pessoas estão online no seu blog.

Você deve apenas substituir a frase marcada em vermelho pelo nome do seu site ou blog (sem ponto ".").

Exemplo: site=sitehttpwwwdicaspluginsblogspotcom &corfont1=000000&texto=1&

Eis aí dois modelos básicos:

10 Usuarios online

<a alt="blogtools" href=http://www.dicasplugins.blogspot.com target="_blank"><img border="0" width="16" src="http://rtmblog.wordpress.com/files/2007/08/imagesee.png" height="16"/></a>
<script language="Javascript"
src="http://www.opromo.com/servicos/usuariosonline/useronline.php?site=sitehttpwwwurldoseublog&corfont1=000000&texto=1&formato=normal&tipo=verdana&tamanho=3&simbo=7" type="text/javascript"></script>

10 Usuario online

<a alt="blogtools" href=http://www.dicasplugins.blogspot.com target="_blank"><img border="0" width="16" src="http://rtmblog.wordpress.com/files/2007/09/icon_connect.gif" height="16"/></a>
<script language="Javascript"
src="http://www.opromo.com/servicos/usuariosonline/useronline.php?site=sitehttpwwwurldoseublog&corfont1=000000&texto=1&formato=normal&tipo=verdana&tamanho=3&simbo=7" type="text/javascript"></script>

Para blog/sites com plano de fundo escuro use o codigo abaixo:

<a alt="blogtools" href=http://www.dicasplugins.blogspot.com target="_blank"><img border="0" width="16" src="http://rtmblog.wordpress.com/files/2007/09/icon_connect.gif" height="16"/></a>
<script language="Javascript" src="http://www.opromo.com/servicos/usuariosonline/useronline.php?site=urldoseusite&corfont1=FFFFFF&texto=1&formato=normal&tipo=verdana&tamanho=3&simbo=1" type="text/javascript"></script>

Você pode se quiser, seguir um formulário para te auxiliar a colocar um contador de visitas através dos sites:

Usuários Online
Opromo
HitStats (Recomendo - é necessário se cadastrar)

Contador de Visitantes Online

2008-12-25T17:23:00.000-08:00

Você deve apenas substituir a frase marcada em vermelho pelo nome do seu site ou blog (sem ponto ".").

Exemplo: site=sitehttpwwwdicaspluginsblogspotcom &corfont1=000000&texto=1&

Eis aí dois modelos básicos:

10 Usuarios online

<a alt="blogtools" href=http://www.dicasplugins.blogspot.com target="_blank"><img border="0" width="16" src="http://rtmblog.wordpress.com/files/2007/08/imagesee.png" height="16"/></a>
<script language="Javascript"
src="http://www.opromo.com/servicos/usuariosonline/useronline.php?site=sitehttpwwwurldoseublog&corfont1=000000&texto=1&formato=normal&tipo=verdana&tamanho=3&simbo=7" type="text/javascript"></script>

10 Usuario online

<a alt="blogtools" href=http://www.dicasplugins.blogspot.com target="_blank"><img border="0" width="16" src="http://rtmblog.wordpress.com/files/2007/09/icon_connect.gif" height="16"/></a>
<script language="Javascript"
src="http://www.opromo.com/servicos/usuariosonline/useronline.php?site=sitehttpwwwurldoseublog&corfont1=000000&texto=1&formato=normal&tipo=verdana&tamanho=3&simbo=7" type="text/javascript"></script>

Para blog/sites com plano de fundo escuro use o codigo abaixo:

<a alt="blogtools" href=http://www.dicasplugins.blogspot.com target="_blank"><img border="0" width="16" src="http://rtmblog.wordpress.com/files/2007/09/icon_connect.gif" height="16"/></a>
<script language="Javascript" src="http://www.opromo.com/servicos/usuariosonline/useronline.php?site=urldoseusite&corfont1=FFFFFF&texto=1&formato=normal&tipo=verdana&tamanho=3&simbo=1" type="text/javascript"></script>

Você pode se quiser, seguir um formulário para te auxiliar a colocar um contador de visitas através dos sites:

Dividir Postagem ou Sidebar em Colunas

2008-12-25T11:55:00.001-08:00

Existe um código muito interessante para você poder dividir postagens e/ou textos ou widgets da sidebar em colunas paralelas. O código é bem simples e de fácil formatação. Você poderá utilizar 2, 3 ou mais colunas fazendo poucas modificações.

Sua utilização na é no código HTML do blog. é só colá-lo num elemento de página ou em uma determinada postagem e organizar facilmente.Vejamos:

Para 2 colunas, basta inserir em sua postagem o seguinte código e colocar o texto e/ou imagens na ordem indicada substituindo pela marcação em vermelho:

<div style="float: left; WIDTH: 45%">Aqui o Texto da Coluna da Esquerda</div><div style="float: right; WIDTH: 45%">Aqui o Texto da Coluna da Direita</div><divstyle="clear: both"></div>

Veja um exemplo:

O blog é um diário pessoal. Uma tribuna diária. Um espaço interativo. Um local para discussões políticas. Um canal com as últimas notícias. Um conjunto de links. Suas idéias. Mensagens para o mundo.O seu blog pode ter a forma que você quiser. Há milhões de blogs, de todos os tamanhos e formatos.

Na verdade, não há regras.
Dito de forma simples, o blog é um site onde você está sempre escrevendo coisas. As novidades aparecem na parte de cima, para que os visitantes vejam. Em seguida, os visitantes fazem comentários sobre a novidade, acrescentam um link ou enviam emails. Ou não.

Para 3 colunas, basta inserir em sua postagem o seguinte código:

<div style="float: left; WIDTH: 30%">Aqui o Texto da Coluna da Esquerda</div><div style="float: center; WIDTH: 30%">Aqui o Texto da Coluna Central</div><div style="float: right; WIDTH: 30%">Aqui o Texto da Coluna da Direita</div><divstyle="clear: both"></div>

De azul: Observe que acrescentamos a linha central (float:center) e alteramos a porcentagem de cada coluna de 45 para 30% (De preferência, a soma das porcentagens deve ser igual a 90%).

Exemplo:

O seu blog pode ter a forma que você quiser. Há milhões de blogs, de todos os tamanhos e formatos. Na verdade, não há regras.Dito de forma simples, o blog é um site onde você está sempre escrevendo coisas.

As novidades aparecem na parte de cima, para que os visitantes vejam. Em seguida, os visitantes fazem comentários sobre a novidade, acrescentam um link ou enviam emails. Ou não.

Para 4 colunas, basta inserir em sua postagem o seguinte código:

<div style="float: left; WIDTH: 22%">Aqui o Texto da Coluna da Esquerda</div><div style="float: left; WIDTH: 22%">Aqui o Texto da Coluna Central da Esquerda</div><div style="float: right; WIDTH: 22%">Aqui o Texto da Coluna Central da Direita</div><div style="float: right; WIDTH: 22%">Aqui o Texto da Coluna da Direita</div><divstyle="clear: both"></div>

Você ainda pode alterar as porcentagens das colunas da forma que quiser, desde que não pase de 100%.

Dividir Postagem ou Sidebar em Colunas

2008-12-25T11:55:00.000-08:00

Sua utilização na é no código HTML do blog. é só colá-lo num elemento de página ou em uma determinada postagem e organizar facilmente.Vejamos:

Para 2 colunas, basta inserir em sua postagem o seguinte código e colocar o texto e/ou imagens na ordem indicada substituindo pela marcação em vermelho:

<div style="float: left; WIDTH: 45%">Aqui o Texto da Coluna da Esquerda</div><div style="float: right; WIDTH: 45%">Aqui o Texto da Coluna da Direita</div><divstyle="clear: both"></div>

Veja um exemplo:

Dito de forma simples, o blog é um site onde você está sempre escrevendo coisas. As novidades aparecem na parte de cima, para que os visitantes vejam. Em seguida, os visitantes fazem comentários sobre a novidade, acrescentam um link ou enviam emails. Ou não.

Para 3 colunas, basta inserir em sua postagem o seguinte código:

<div style="float: left; WIDTH: 30%">Aqui o Texto da Coluna da Esquerda</div><div style="float: center; WIDTH: 30%">Aqui o Texto da Coluna Central</div><div style="float: right; WIDTH: 30%">Aqui o Texto da Coluna da Direita</div><divstyle="clear: both"></div>

De azul: Observe que acrescentamos a linha central (float:center) e alteramos a porcentagem de cada coluna de 45 para 30% (De preferência, a soma das porcentagens deve ser igual a 90%).

Exemplo:

As novidades aparecem na parte de cima, para que os visitantes vejam. Em seguida, os visitantes fazem comentários sobre a novidade, acrescentam um link ou enviam emails. Ou não.

Para 4 colunas, basta inserir em sua postagem o seguinte código:

<div style="float: left; WIDTH: 22%">Aqui o Texto da Coluna da Esquerda</div><div style="float: left; WIDTH: 22%">Aqui o Texto da Coluna Central da Esquerda</div><div style="float: right; WIDTH: 22%">Aqui o Texto da Coluna Central da Direita</div><div style="float: right; WIDTH: 22%">Aqui o Texto da Coluna da Direita</div><divstyle="clear: both"></div>

Você ainda pode alterar as porcentagens das colunas da forma que quiser, desde que não pase de 100%.

Templates Listen Azul, Preto e Rosa

2008-12-24T17:12:00.001-08:00

Estou colocando aqui no Blog os links para downloads do Template do blog e sua versão em preto e rosa. Os links retirei do blog Templates Para Você, onde os encontrei.

Esses templates, em especial o Listen Azul está muito ligado à origem desse blog. Quando eu o vi, não deu outra, eu quis criar um blog de dicas onde pudesse compartilhar me conhecimento, pesquisas e indicar widgets e dicas de outros blogs para a Blogosfera geral.

Clique na imagem para fazer o Download.

Características:

3 colunas na parte superior ao post, sendo 2 com altura pré-definida de 300px;
Possui 3 colunas no rodapé;
Menu em abas já instalado além de outros hacks;
Menu superior na forma de lista de links;
Recurso para colocar anúncios Adsense entre os posts.

Configurando:

PARA CONFIGURAR O MENU SUPERIOR
Clique em Layout → Em Elementos de Página altere a Lista de Links logo Abaixo do Cabeçalho;
COMO ACRESCENTAR AS GADGETS NAS ABAS
1º- Clique sobre o número da Aba que você deseja colocar a gadget;
2º- Clique em: Editar para alterar o conteúdo da gadget que já está naquele número (pode ser apagando a gadget e colocando outra ou editando a já existente), ou em Adicionar elemento de página caso este apareça;
Os TÍTULOS das abas serão sempre o título da gadget que você escolher para colocar mesmo que apareça números na página de Elementos de Página.

ATENÇÃO

»O menu em abas funciona com um JavaScript que deve ser hospedado por você;
»BAIXE E SALVE o arquivo java que está em azul:
<script src="'http://www.barelyfitz.com/projects/tabber/tabber-minimized.js' type='text/javascript'">;
»Hospede no local de sua preferência substituindo o LINK: http://www.barelyfitz.com/projects/tabber/tabber-minimized.js no código do seu template pelo LINK fornecido por sua hospedagem;
»Desta forma não haverá o risco de suas abas não funcionarem, a não ser que você hospede muitos arquivos e sua taxa de transmissão de banda ultrapassar o limite do site de hospedagem.

Templates Listen Azul, Preto e Rosa

2008-12-24T17:12:00.000-08:00

Estou colocando aqui no Blog os links para downloads do Template do blog e sua versão em preto e rosa. Os links retirei do blog Templates Para Você, onde os encontrei.

Clique na imagem para fazer o Download.

Características:

3 colunas na parte superior ao post, sendo 2 com altura pré-definida de 300px;
Possui 3 colunas no rodapé;
Menu em abas já instalado além de outros hacks;
Menu superior na forma de lista de links;
Recurso para colocar anúncios Adsense entre os posts.

Configurando:

PARA CONFIGURAR O MENU SUPERIOR
Clique em Layout → Em Elementos de Página altere a Lista de Links logo Abaixo do Cabeçalho;
COMO ACRESCENTAR AS GADGETS NAS ABAS
1º- Clique sobre o número da Aba que você deseja colocar a gadget;
2º- Clique em: Editar para alterar o conteúdo da gadget que já está naquele número (pode ser apagando a gadget e colocando outra ou editando a já existente), ou em Adicionar elemento de página caso este apareça;
Os TÍTULOS das abas serão sempre o título da gadget que você escolher para colocar mesmo que apareça números na página de Elementos de Página.

ATENÇÃO

»O menu em abas funciona com um JavaScript que deve ser hospedado por você;
»BAIXE E SALVE o arquivo java que está em azul:
<script src="'http://www.barelyfitz.com/projects/tabber/tabber-minimized.js' type='text/javascript'">;
»Hospede no local de sua preferência substituindo o LINK: http://www.barelyfitz.com/projects/tabber/tabber-minimized.js no código do seu template pelo LINK fornecido por sua hospedagem;
»Desta forma não haverá o risco de suas abas não funcionarem, a não ser que você hospede muitos arquivos e sua taxa de transmissão de banda ultrapassar o limite do site de hospedagem.

Anúncios do Google entre as Postagens

2008-12-24T15:55:00.001-08:00

Colocar anúncios entre as postagens é muito comum nos dias de hoje, vemos vários blogs que possuem tal recurso, o mais usado é o adsense, pois ele busca analisar seu texto e automaticamente mostrar anúncios relativos ao que você escreveu.

Para inserir seu código com ele funcionando normalmente,você terá que converte-lo, mas isso é muito fácil, basta acessar o site Escape HTML, colar o código desejado e clicar em parse.

Depois é só escolher uma (ou todas) das opções abaixo:
Entre em “Layout” – “Editar HTML” – (salve seu modelo) – “Expandir modelos de widgets”;

Entre o título e a postagem

Encontre a linha "<div class='post-header-line-1'/>"

Logo abaixo dela cole o código do anúncio (convertido), ficando assim:

<div class='post-eader-line-1'/>
<cript type=”text/javascript”><!–
código do anúncio

//–></script>
<script type=”text/javascript”
src=”http://pagead2.googlesyndication.com/pagead/show_ads.js”>
</script>

Anúncio no final do texto

Encontre a linha "<div class='post-footer'>"

Logo abaixo dela cole o código (convertido), ficando assim:

<div class='post-footer'>
<script type=”text/javascript”><!–

código do anúncio

//–></script>
<scripttype=”text/javascript”
src=”http://pagead2.googlesyndication.com/pagead/show_ads.js”>

Inserir após o campo de postagem e os créditos

Encontre por "<p class='post-footer-line post-footer-line-3'>"

Cole em seguida o anúncio (convertido), ficando assim:

<p class='post-footer-line post-footer-line-3'>
<script type=”text/javascript”><!–
código do anúncio

//–></script>
<scripttype=”text/javascript”
src=”http://pagead2.googlesyndication.com/pagead/show_ads.js”>

Anúncios do Google entre as Postagens

2008-12-24T15:55:00.000-08:00

Para inserir seu código com ele funcionando normalmente,você terá que converte-lo, mas isso é muito fácil, basta acessar o site Escape HTML, colar o código desejado e clicar em parse.

Depois é só escolher uma (ou todas) das opções abaixo:
Entre em “Layout” – “Editar HTML” – (salve seu modelo) – “Expandir modelos de widgets”;

Entre o título e a postagem

Encontre a linha "<div class='post-header-line-1'/>"

Logo abaixo dela cole o código do anúncio (convertido), ficando assim:

<div class='post-eader-line-1'/>
<cript type=”text/javascript”><!–
código do anúncio

//–></script>
<script type=”text/javascript”
src=”http://pagead2.googlesyndication.com/pagead/show_ads.js”>
</script>

Anúncio no final do texto

Encontre a linha "<div class='post-footer'>"

Logo abaixo dela cole o código (convertido), ficando assim:

<div class='post-footer'>
<script type=”text/javascript”><!–

código do anúncio

//–></script>
<scripttype=”text/javascript”
src=”http://pagead2.googlesyndication.com/pagead/show_ads.js”>

Inserir após o campo de postagem e os créditos

Encontre por "<p class='post-footer-line post-footer-line-3'>"

Cole em seguida o anúncio (convertido), ficando assim:

<p class='post-footer-line post-footer-line-3'>
<script type=”text/javascript”><!–
código do anúncio

//–></script>
<scripttype=”text/javascript”
src=”http://pagead2.googlesyndication.com/pagead/show_ads.js”>

Widget Sidebar Tab

2008-12-24T15:26:00.001-08:00

Procurei por vários sites algum widget para criar uma sidebar com tab no blogger (aquele com abas). Achei alguns, mas tinha que fazer várias alterações no HTML e ainda baixar e hospedar um arquivo java script. Mei complicado.

Encontrei no Blogger Templetes um widget em que você não precisa fazer alteração alguma no código HTML do seu blog. Basta apenas copiar o código e colar em um elemento de página. (Ficará mais ou menos como na figua ao lado)

Copie e cole o código abaixo num elemento de página do seu Blog. Depois é só configuras o nome das abas e o tamanho da tab.

De laranja, se refera ao menu de abas, e como são três menus, deve ter 1/3 (um terço) da largura da tab que está marcada de verde.

De vermelho, são as alterações referentes ao título da cada aba e o código ou texto inserido em cada uma.

style type="text/css">
div.TabTampil div.TTs
{height: 24px; overflow: hidden; }
div.TabTampil div.TTs a:hover, div.TabTampil div.TTs a.Active
{ background-color: #77d0ee; }
div.TabTampil div.Halamans
{ clear: both; border: 1px solid #0199cb; overflow: hidden; background-color: #ffffff;}
div.TabTampil div.Halamans div.Halaman
{ height: 100%; padding: 0px; overflow: hidden; }
div.TabTampil div.Halamans div.Halaman div.Alas
{ padding: 3px 5px; }
div.TabTampil div.TTs a
{ border-left:1px solid #0199cb; border-right:1px solid #0199cb; border-top:1px solid #0199cb; border-bottom:0px solid #0199cb; float: left;
display: block; width: 100px; text-align: center; height: 24px; padding-top: 3px; vertical-align: middle; text-decoration: none; font-family: "Arial", Serif;
font-size: 12px; font-weight: 900; color: #222}
</style>

<form action="tabtampil.html" method="get">
<div id="TabTampil" class="TabTampil">
<div style="width: 370px;" class="TTs"> <a>Tab 1 Name</a> <a>Tab 2 Name</a> <a>Tab 3 Name</a></div>
<div style="width: 350px; height: 300px;" class="Halamans">

<div class="Halaman">
<div class="Alas">
Tab 1 Insira aqui o código que deseja utilizar
</div>
</div>
<div class="Halaman">
<div class="Alas">
Tab 2 Insira aqui o código que deseja utilizar
</div>
</div>
<div class="Halaman">
<div class="Alas">
Tab 3 Insira aqui o código que deseja utilizar
</div>
</div>
</div>
</div></form>

<script style="text/javascript" src="http://meichelina.googlepages.com/newscriptab.js"></script> <script type="text/javascript">tabtampil_inisial('TabTampil');</script>

Em breve, mais scripts para Blogger.

Widget Sidebar Tab

2008-12-24T15:26:00.000-08:00

Copie e cole o código abaixo num elemento de página do seu Blog. Depois é só configuras o nome das abas e o tamanho da tab.

De laranja, se refera ao menu de abas, e como são três menus, deve ter 1/3 (um terço) da largura da tab que está marcada de verde.

De vermelho, são as alterações referentes ao título da cada aba e o código ou texto inserido em cada uma.

style type="text/css">
div.TabTampil div.TTs
{height: 24px; overflow: hidden; }
div.TabTampil div.TTs a:hover, div.TabTampil div.TTs a.Active
{ background-color: #77d0ee; }
div.TabTampil div.Halamans
{ clear: both; border: 1px solid #0199cb; overflow: hidden; background-color: #ffffff;}
div.TabTampil div.Halamans div.Halaman
{ height: 100%; padding: 0px; overflow: hidden; }
div.TabTampil div.Halamans div.Halaman div.Alas
{ padding: 3px 5px; }
div.TabTampil div.TTs a
{ border-left:1px solid #0199cb; border-right:1px solid #0199cb; border-top:1px solid #0199cb; border-bottom:0px solid #0199cb; float: left;
display: block; width: 100px; text-align: center; height: 24px; padding-top: 3px; vertical-align: middle; text-decoration: none; font-family: "Arial", Serif;
font-size: 12px; font-weight: 900; color: #222}
</style>

<form action="tabtampil.html" method="get">
<div id="TabTampil" class="TabTampil">
<div style="width: 370px;" class="TTs"> <a>Tab 1 Name</a> <a>Tab 2 Name</a> <a>Tab 3 Name</a></div>
<div style="width: 350px; height: 300px;" class="Halamans">

<div class="Halaman">
<div class="Alas">
Tab 1 Insira aqui o código que deseja utilizar
</div>
</div>
<div class="Halaman">
<div class="Alas">
Tab 2 Insira aqui o código que deseja utilizar
</div>
</div>
<div class="Halaman">
<div class="Alas">
Tab 3 Insira aqui o código que deseja utilizar
</div>
</div>
</div>
</div></form>

<script style="text/javascript" src="http://meichelina.googlepages.com/newscriptab.js"></script> <script type="text/javascript">tabtampil_inisial('TabTampil');</script>

Em breve, mais scripts para Blogger.

Parceria

2008-12-23T06:53:00.000-08:00

Para formar parceria, insira um dos banners abaixo no seu site e, após isso, entre em contato comigo através de:

Parcerias são bem vindas, exceto para:

Sites ou Blogs com conteúdo e/ou material pornográfico;
Sites ou Blogs com conteúdo de cunho racista;
Sites ou Blogs com conteúdo pirata (cracker);
Sites ou Blogs incompletos, mal feitos ou inacabados.

1 - Banner 120X80

2 - Banner 468x80

3 - Banner 468x60

Blog de Testes 2

Twitter vale US$250 milhões

IncrediMail - Um Editor que dá Vida aos seus E-mails

Widget Atualizações do Twitter no Blog

Tradutor Conveythis para blog - o melhor

Plano de Fundo Degradê - Duas Cores

Repassando o Meme

Flash Tag Cloud - Nuvens de Tags em Flash

Campus Party - Controle de PC usando só as mãos

Template Statement

Template Google Chrome

Google Adsense: Técnicas de Otimização dos Anúncios

Tutorial - Como Instalar Sidebar Tab no Template

Tutorial - Excelente Tradutor via Google

Template Red White Web 2.0

Caixa de Busca:

Links para enviar Torpedos Grátis

Template Onix

Template Esqueleto Compulsivo

Como Inserir Barra "a Carregar"

Tradutor Babel Fish para Blog

Ícones para usar no Blog

Widget Google Translate para Blog

Tradutor de Vários Idiomas para Blog

Adicionar coluna Horizontal Lateral

Como Retira Navbar do Blogger

Imagem ou Menu Flutuante

Domínio Próprio no Blog

Menu com Índice de Todas as Postagens

Campo de Busca Google Blog Search

Gerador de Banner Link-me

Template Red White Web 2.0 - 3 colunas

Detalhes da instalação:

Sobre mim - Willian Coutinho

Parceria

Todos os Parceiros do Dicas Plugins

Template Cold Blue Performance

Retirar Link Assinar Postagens (Atom)

Retirar Link Assinar Postagens (Atom)

Widget Link Adicionar aos Favoritos

Widget Link Adicionar aos Favoritos

Selos: Agradecimentos e Repassando

Selos: Agradecimentos e Repassando

Widget Links com Menu Suspenso

Widget Links com Menu Suspenso

Criando e Inserindo Meta Tags no Blog

Criando e Inserindo Meta Tags no Blog

Campo de Busca com Texto Autolimpante

Campo de Busca com Texto Autolimpante

Imagens, Textos ou Banners Rolando

Imagens, Textos ou Banners Rolando

Plano de Fundo Degrade - Duas Cores

Metacadastro Grátis - Inserir blog em Buscadores

Metacadastro Grátis - Inserir blog em Buscadores

Inserir Blog em Mecanismos de Busca

Inserir Blog em Mecanismos de Busca

Adsense Alinhado dentro do Post

Adsense Alinhado dentro do Post

Contador de Visitantes Online

Contador de Visitantes Online

Dividir Postagem ou Sidebar em Colunas

Dividir Postagem ou Sidebar em Colunas

Templates Listen Azul, Preto e Rosa

Templates Listen Azul, Preto e Rosa

Anúncios do Google entre as Postagens

Anúncios do Google entre as Postagens

Widget Sidebar Tab

Widget Sidebar Tab

Parceria