Códigos Blog

Blogger entra em um novo processo de melhoramento

2009-11-07T12:39:00.000-08:00

O Futuro do Blogger

Algumas semanas atrás o Blogger abriu espaço para seus usuários, fornecendo um formulário para pedidos e reclamações do sistema de blogs. Infelizmente esse espaço era em inglês, dificultando a comunicação entre usuários que não tem intimidade com a língua inglesa, mas nada que impeça a nossa participação.
Entramos em contato também e ontem no blog do Blogger responderam agradecendo a participação de todos e a partir dali começa um processo de melhoramento, estudando cada pedido dos Bloggers.

No entanto faz tempo que falam mais do que fazem. Estamos aguardando um sistema digno de seus usuários (apesar de grátis).

Ainda acredito no Google! =]

Encontre o template ideal [2] - Blogger Themes

2009-11-02T06:31:00.000-08:00

Assim como o BTemplates, o Blogger Themes é um site excelente que traz inúmeros templates gratuitos para Blogger.
Um site simples, com um layout invejável e excelente navegabilidade (apensar de não ser em língua portuguesa). Lá você encontra templates de vários autores, de diferentes formas e modelos.

Vale apena conferir: www.bloggerthemes.net

Obs.: Apesar de parecer, isso não é um post pago! =]

Projeto - Layout -> Pelo Mar Afora

2009-10-31T08:13:00.000-07:00

Fiz o template do blog “Pelo Mar Afora” do casal Fausto Pignaton e Guta Favarato. Esse casal está trabalhando em um projeto fantástico: Dar a volta ao mundo velejando! É com um enorme prazer que estou aqui divulgando esse projeto maravilhoso.

"Um casal terminando a construção de um veleiro catamarã 54', prontos para iniciar uma viagem pelo mar afora velejando...”

Visitem o blog (www.pelomarafora.blogspot.com) e acompanhe cada etapa da aventura que está prestes a começar!

Imagem de fundo fixa (background)

2009-10-31T05:04:00.000-07:00

Há pouco tempo atrás aprendemos a colocar uma imagem de fundo em seu template. Agora vamos aprender a colocar uma imagem fixa no fundo, de forma que quando descemos a barra de rolagem do navegador, ela continua parada.
Obs.: Código valido para qualquer tipo de site ou blog.

Exemplo: www.twitter.com/pauloestevao e www.pelomarafora.blogspot.com

Se você entende quase nada de CSS e/ou não leu a postagem que ensinava a trabalhar com o fundo do seu blog, aconselho a leitura: Um pouco sobre CSS e Mudando o fundo do seu template

1º - Faça login no Blogger, entre em “Layout” -> “Editar HTML”.

2º - Procure (Ctrl + f) por:

body {

Dentro das chaves de BODY tem o código CSS: background, isso dá característica da cor de fundo.

3 º - Apague a background de Body e escolha uma das opções abaixo para o novo background do seu blog:

Imagem de fundo sem repetir e sem outra cor

Se você quer colocar uma imagem fixa no fundo, sem precisar completar com alguma cor, use o seguinte código:

background: url('http://LINK IMAGEM') fixed no-repeat top left;

Imagem de fundo repetindo e sem outra cor

Caso a imagem seja pequena para preencher completamente os espaços, você pode escolher essa opção para a imagem se repetir até completar os espaços vazios:

background: url('http://LINK IMAGEM') fixed repeat top left;

Imagem de fundo sem repetir e com outra cor completando

Se a imagem não cobrir completamente o fundo, você pode usar uma cor para completar, dessa forma use essa opção:

background: CÓDIGO COR url('http://LINK IMAGEM') fixed no-repeat top left;

Fazendo as substituições:
LINK IMAGEM -> Coloque o link (direto) da imagem de fundo já hospedado.
CÓDIGO COR -> Coloque o código da cor escolhida (clique aqui e veja uma tabela de cores)

Exemplo (Twitter @pauloestevao):

body {
background: #2952D0 url('http://a3.twimg.com/profile_background_images/42158797/wallpaper-xseven.jpg') fixed repeat top left;
}

4º - Teste e se tudo ficou como devia ficar... Salve!

eBook Web 2.0 – Erros e Acertos – Um guia prático para o seu projeto

2009-10-30T08:54:00.000-07:00

Quer criar um blog de sucesso? Está pensando em criar um site que vai revolucionar a web?
Como todo projeto novo, estamos sujeitos a problemas, dificuldades e sucessos. Todavia seria bem mais fácil se não deparássemos com problemas inesperados. Infelizmente isso não é possível, mas diminuir essas dificuldades é possível!
Como?

Um projeto bem feito, dedicação e conselhos de pessoas que já passaram por tudo isso. Pronto! Você pode até ter problemas, porém nada vai ser o suficiente para acabar com seu trabalho.

Construir algo de qualidade é algo que todos queremos. Então para isso estou aqui para aconselhar você leitor, baixe e leia o super “eBook Web 2.0 – Erros e Acertos – Um guia prático para o seu projeto”, por Paulo Siqueira.

Paulo Siqueira, 53 anos, tem mestrado em Engenharia de Software pelo IPT. É professor universitário. Trabalha para a UNICEF, no Paquistão, como Gerente de TI. Trabalhou para Seven Networks International, UN-ICTY, Banco Mundial, IFES-USAID, UNDP-PAPP, UNV-PNUD e ICS-UNIDO, e Banespa-Santander, em diferentes lugares do mundo.
Texto de: www.blog.exadigital.com.br

Este eBook tem o objetivo de transferir e campartilhar o conhecimento e as experiências acumuladas no desenvolvimento de um projeto para a web. É um relato prático e real, interessante para estudantes, professores, programadores, analistas, desenvolvedores, gerentes de projeto, executivos de Tecnologia da Informação, blogueiros, jornalistas de tecnologia, enfim, serve para qualquer pessoa que tenha curiosidade, interesse e que saber mais sobre como fazer ou como funciona um projeto para a Web.
A divulgação é parte de um processo colaborativo envolvendo mais de 80 blogs e o Twitter. A licença é Creative Commons.
Texto de: www.blog.exadigital.com.br

Estão participando do lançamento do Web 2.0 - Erros e Acertos - Um guia prático para o seu projeto, os seguintes blogs:
Irradiando Luz, Dossiê Alex Primo, Não Zero, UsuárioCompulsivo, Nerds Somos Nozes, Zerotrack, Blog de Seo e Webstandards, iceBreaker, Luz de Luma, yes party!, Vivo Verde, Cova do Urso, Grãos de Areia pelo Infinito, atblog, DE Consulting, Nota Zer0!,
TecnoCT, Leitura na Tela, Antes da HORA, Tecnologias digitais e Educação, Tecnologias, Educação e algo mais…, Virtual Z1, Uhu, galera!…, Blog do Carlos Fran, Blog do Locoselli, Blog de Renato Salles, Lua internauta, Mundo Desbravador, Fonte de Alegria, Lar da Veterinária, Origine Italiana, Arthur Araujo, Luana Giampietro, Blog do Zemarcos, blog EJM, Notícia e blog, Mídia Boom, [In]Commun Séries, Blogando com Vc!, Grupo NGJ, Voxtopia, pribi.com.br, Blog da Mari Rocha, Unidade Avançada, Blog Windows Brasil, Preparando a Redação, Usuário Nokia, Léo.Lopes – Portfólio, Blog do Netmind, Sylvester Stallone Brasil, Códigos Blog, Brasil Critical, Security Total, Ricardo Campos: Reflexione, Actividade, Açaí Grosso, Muleque Doido, Ernandes Rodrigues, cajuinas, Educação a Distância, WebGringos, Fruição e Escrita, Informática Desvendada, Midlife, Popzei!, Berdades da Boca P’ra Fora, My Percepções, Liso-Sapiens, Blogger Pessoal, Neurônio 2.0, Vondeep, The worst kind of thief, Thiago Antonio, Marcus Monteiro, Franquia Empresa, Blog Mídias Sociais, Abre Aspas, Chronus Blog, Sedentarismo Intelectual, PopNutri.

Como criar uma conta de e-mail personalizada?

2009-10-29T11:13:00.000-07:00

Antes de tudo quero informar que para criar seu email personalizado (NOME@SEUBLOG.com) é necessário que você tenha um domínio próprio (.com / .com.br / .net / .blog.br / etc).
Para entender um pouco mais sobre domínio, leia:

Para criar uma conta de email personalizado é necessário um serviço de email confiável que faça o papel de caixa de email. Para isso utilizaremos o serviço Google Apps.

Por que utilizar o Google Apps?
- Confiável
- Seguro
- Personalização básica da caixa de email
- Permite criação de até 50 emails Grátis
- Painel de controle do serviço
- Serviços extras

Vamos começar o trabalho:
1º - Acesse o site Google Apps, especificamente em www.google.com.br/apps/intl/pt-BR/group/index.html.

2º - Clique em “Primeiros Passos”:

3º - Preencha a fica de inscrição de acordo com que se pede.

4º - Após fazer a sua conta no Apps é hora de configurar o sistema de email.
Acesse o seu painel de controle:

http://google.com/a/SEUDOMÍNIO

Exemplo:
http://google.com/a/codigosblog.com.br

Faça login e seja bem-vindo ao Google Apps:

5º - Primeiro temos que confirmar a propriedade do domínio. Clique em “Confirmar propriedade de domínio”.

Escolha o método de confirmação: “Altere o seu registro CNAME”.
Agora é necessário que você entre no painel de controle onde foi registrado seu domínio e fazer as mudanças de acordo com que se pede:
Na parte de configurações de DNS crie uma entrada “CNAME”, no valor gerado pelo Apps (exclusivo) e apontando para “google.com”.

Obs.: Caso você não tenha acesso na parte de configuração de DNS do seu domínio, entre em contato com o suporte da empresa onde contratou o serviço e solicite as mudanças necessárias.

Depois clique em “Verificar”.

Obs.2: Essa atualização e confirmação podem demorar até 48 horas.

6º - Vamos enfim ativar sua caixa de email! No painel do Apps, clique em “Ativar e-mail”

Na mesma zona de configuração de DNS do seu domínio, siga as instruções:
Apague TODOS os tipos de entrada “MX”. Depois crie as seguintes entradas “MX”:

Endereço do servidor MX	Prioridade
ASPMX.L.GOOGLE.COM.	10
ALT1.ASPMX.L.GOOGLE.COM.	20
ALT2.ASPMX.L.GOOGLE.COM.	20
ASPMX2.GOOGLEMAIL.COM.	30
ASPMX3.GOOGLEMAIL.COM.	30
ASPMX4.GOOGLEMAIL.COM.	30
ASPMX5.GOOGLEMAIL.COM.	30

Veja o exemplo de como vai ficar (painel Locaweb.com.br):

Obs.: Caso você não tenha acesso na parte de configuração de DNS do seu domínio, entre em contato com o suporte da empresa onde contratou o serviço e solicite as mudanças necessárias.

Após ter incluído todas as entradas MX, clique em “Concluir essa etapa” no painel Apps.

Agora é esperar! Quando estiver tudo confirmado o serviço vai funcionar perfeitamente.

Depois, para acessar a caixa de entrada entre no link:

http://mail.google.com/a/SEUDOMÍNIO

Exemplo:
http://mail.google.com/a/codigosblog.com.br

OBS.: Enquanto as configurações não forem aceitas, não é possível enviar emails.
OBS.2: Caso tenha dúvidas na configuração de seu DNS, entre em contato com a empresa onde contratou o serviço de email.

Até mais!

Projeto - Layout -> Beco Sertanejo

2009-10-22T17:06:00.000-07:00

Conheça mais um template feito por mim!

O Beco Sertanejo fez o pedido e depois de duas semanas chegamos ao resultado final.

Visite e conheça: www.becosertanejo.blogspot.com

Encomende já o seu template!

Lucro com o blog: Quando e Como?

2009-10-20T15:51:00.000-07:00

Blogueiros buscam saídas para chegarem ao famoso “estágio” ProBlogger.

Blogger é blogueiro, aquele que bloga. Problogger é Professional Blogger, ou blogueiro profissional.
Fonte: Explorando

No entanto esse caminho não é fácil. Além de ser muito longo, devemos nos sacrificar e obedecer a verdadeiras regras que a web exige.
A concorrência nos dias de hoje é muito alta, e em quanto mais se passa o tempo, mais blogs nascem. Esse é um fator importante para os ProBloggers ficarem cada vez mais longe de nosso alcance (não sou problogger =/).

Lucro com um blog é algo relativo, depende muito do blog, do conteúdo, da sorte, enfim... De tudo! Então com essa postagem vamos entender os princípios, posicionamentos, cores e tudo mais sobre como obter dinheiro com seu blog/site.

Como obter lucro com um blog?

Se você pensa em apenas números, modos de divulgação e tudo mais. Parabéns, você está indo para o caminho errado.
Primeiro passo importante: Escreva com QUALIDADE! Leia muito, escreva algo interessante, novo, mostre seu ponto de vista. O maior segredo de um blog de sucesso é o conteúdo.
Se você não gosta de escrever é melhor nem pensar em dinheiro por parte de blogs.
Quanto você escrever bem, você vai sentir a diferença. O Google vai gostar ainda mais! Então é a hora que você deve divulgar ainda mais o seu trabalho e aguardar os novos visitantes. Sim, os novos visitantes são os que vão dar mais lucro para seu blog.
No momento em que uma pessoa encontra seu blog por via de um mecanismo de busca pode acontecer do visitante:

• Não gostar do texto, mas encontra uma publicidade que o agrade;
• Não gostar do texto e sair;
• Gostar do texto e se tornar um leitor fiel;
• Gostar do texto e criar um link para o seu blog.

por: brpoint.net

Dentre as quatro possibilidades, três são positivas. É um número muito bom, por isso dificilmente um paraquedista não vai trazer benefícios para seu blog.
Entre as possibilidades encontramos o momento em é que entra os anúncios.

Posicionamento/Conteúdo dos Anúncios

Meu amigo, você pode ter milhões de visitas, mas se você não organizar seus anúncios dentro do seu blog, esquece!
É de extrema importância os anúncios estarem de acordo com o conteúdo do seu blog (sendo o primeiro passo).
Em seguida devemos encontrar espaços ideais em nosso layout, de preferência lugares destacados e essencialmente em lugares visíveis (é nessa hora que a aparência do seu blog ajuda, leia mais aqui).

As cores representam os melhores locais, pela ordem de rendimento: vermelho, laranja, amarelo e verde.

Por: ofimdavarzea.com

É importante lembrarmos que um blog com um layout muito colorido e/ou confuso, destaca muito menos os seus anúncios, conseqüentemente o seu rendimento será menor. #fato

Outro ponto importante: Não faça de seu blog um verdadeiro classificados! Você pode até conseguir um bom lucro. Mas não vai ganhar credibilidade, porque ninguém gosta de algum site onde o seu foco é ganhar dinheiro. Infelizmente seu blog não terá visitantes fiéis (visitantes que sempre voltam para buscar novos conteúdos). Ou seja, na blogosfera seu blog será apenas mais um.

Veja um pouco como encaixar bem os anúncios em seu site/blog:

Palestra Google Adsense

Aprenda tudo sobre anúncios, especialmente sobre o Google Adsense. Entenda o funcionamento desse sistema:

Conclusão

Escreva bem, construa um excelente layout, divulgue, pesquise, estude, anuncie e ganhe seu dinheiro.
Todavia não se iluda! Não é fácil e muito menos rápido esse processo.

Lição número 1: Se você quer alguma dica para ganhar dinheiro muito rápido, eu espero que você encontre e seja meu amigo, pra vir me contar quando descobrir, porque eu demorei 5 anos para ganhar os primeiros R$ 100,00.
Edney Souza

Muitas fontes de lucro se encontraram hoje disponíveis na web, mas tenha cuidado com as propostas oferecidas por sites, pesquise muito antes de integrar a um desses mecanismos. Estou cansado de ver blogueiros levando verdadeiros calotes por conta disso.

Recomendo também

• Como Posicionar Anúncios em Seu Site - O Fim da Varzea
• Caçando Probloggers - BrPoint
• Ganhar dinheiro com blogs - uma pitada de realismo - Interney
• Ganhe Dinheiro com seu Blog - Contraditorium
• Como ganhar dinheiro com seu blog ou site - Blog da Maysa

Boa sorte!

Resultados: Promoção - Quer ganhar um domínio .COM ou .NET?

2009-10-18T14:32:00.000-07:00

Chegamos ao fim de mais uma promoção! O resultado foi o que eu esperava: Participação intensa de pequenos blogs.

Esse era meu objetivo! Porque através dessa promoção, consegui espalhar um pouco mais o link do Códigos Blog e principalmente: Vou patrocinar dois domínios grátis no período de 1 ano, dando assim mais um meio para que esses pequenos blogs se tornem mais profissionais.

Então chega de #mimimi, os vencedores são:
1º - www.construideias.blogspot.com – 71 visitas enviadas*
2º - www.b4dtom.blogspot.com – 57 visitas enviadas *

*Dados retirados do Google Analytics

Para evitar dúvidas:
Vários outros blogs e sites enviaram muito mais visitas para o Códigos Blog nesse período de tempo (24/09/2009 a 16/10/2009). No entanto a promoção visava à participação de blogs CADASTRADOS. Dessa forma esses dois blogs vencedores foram os que mais enviaram visitas entre os blogs cadastrados na promoção.

Aos vencedores: Entre em contato comigo via Formulário de Contato do blog.

Obrigado pela sua participação e boa sorte a todos os blogueiros.

Otimizando o Título do blog (dica SEO)

2009-10-17T09:08:00.000-07:00

Melhorar algumas codificações no seu template auxilia bastante na divulgação de seu blog em sites de busca como o Google.

O SEO nada mais é do que a otimização de uma página (ou até do site inteiro) para ser melhor compreendido pelas ferramentas de busca. A conseqüência da utilização das técnicas de SEO é o melhor posicionamento de um site em uma página de resultados de uma busca.

Fonte: http://www.marketingdebusca.com.br/seo/

Uma das formas de melhorar seu posicionamento nesses mecanismos de buscas é alterando a forma de exibição do título do seu blog.
Com essas modificações seu blog vai mostrar de forma diferente o título da postagem nos buscadores:

Faça as modificações abaixo e aguarde até que mecanismos de buscas atualizem as modificações.

1º - Entre no Blogger, faça login. Depois entre em “Layout” -> “Editar HTML”.

2º - Procure (Ctrl + f) por:

<title><data:blog.pageTitle/></title>

Apague essa linha e coloque isso no lugar:

<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/><title><data:blog.pageTitle/></title>
</b:if>

3º - Teste e salve.
Talvez você não note muita diferença de imediato. Mas fica mais uma dica de SEO.
Abraços

Códigos Blog no Orkut!

2009-10-16T07:43:00.000-07:00

Você gosta dos tutoriais, dicas, códigos e tudo mais que o Códigos Blog oferece? Junte-se com outros blogueiros que também visitam esse blog!

Estamos no Orkut! Entre em nossa comunidade e troque idéias, divulgue seu blog, tire suas dúvidas e divirta-se.

Clique aqui conheça nossa página no Orkut.

Encontre o Códigos Blog também no Twitter: @pauloestevao
Tenha um excelente final de semana.

Entendendo o Google Analytics (Fontes / Visitas / SEO)

2009-10-13T17:06:00.001-07:00

O Google Analytics é hoje um dos melhores contadores de visitas disponíveis gratuitamente. Porém poucos sabem como utilizar essa ferramenta.
Estava eu visitando o Youtube e encontrei um vídeo Tutorial incrível ensinando como visualizar suas visitas, suas fontes, etc.

Com esse tutorial você pode dar um uma turbinada no SEO de seu blog/site. Agradecemos especialmente o Rafael do site www.rafaeldesigner.com.br por esse grande tutorial.

Conheça o Google Analytics

A aparência de um blog/site faz diferença?

2009-10-08T16:28:00.000-07:00

Um layout bem estruturado faz diferença? Até que ponto isso ajuda?
As perguntas que todo blogueiro iniciante faz (ou pelo menos deveria fazer), porém poucos respondem. Vamos trabalhar hoje com esse assunto.

O que Layout?
O layout pode ser simplesmente o arranjar ou o rearranjar dos vários objetos ou decorativos até se obter a disposição mais agradável. Leiaute (trazido para o português) é toda a estrutura não só de um site/blog, mas também é uma expressão usada em vários outros casos.

Estudos, pesquisas, opiniões, mostram o quanto é necessário uma boa aparência para procurarmos um emprego. Não estamos falando de a pessoa ser bonita ou feia e sim de como ela se cuida, a forma de se vestir, de se comportar diante os outros. Porém isso vai mais além da vida real. Um site bem estruturado, leve, bonito e sem muitas poluições visuais faz a diferença. De forma alguma podemos esquecer que um site/blog bem sucedido carrega em si um conjunto de características que o levaram ao sucesso e sempre uma dessas características é um layout “perfeito” (entre parênteses porque não existe layout perfeito).

Algumas dicas para seu layout:

Ser rápido e leve (ninguém merece esperar um site carregar durante minutos);
Limpo ao máximo de propagandas, gifs, efeitos, etc. (Isso desconcentra seu leitor, cansa a visão de quem vê e faz com que seu site/blog vire um verdadeiro “poleiro”);
Evite cores fortes (cansa a visão);
Evite um template colorido (cansa ainda mais a visão e deixa seu blog infantil, porém isso depende muito do assunto do blog);
Não coloque cores fortes/chamativas no fundo dos posts (atrapalha a leitura, cansa e deixa seu blog infantil);
Evite cores escuras no fundo das postagens (o melhor é usar branco ou cinza bem claro);
Forneça bastante informação e navegabilidade ao seu leitor (mostre o que seu site/blog tem a oferecer);
De último caso use Pop-up (é muito chato esse tipo de propaganda);
Seja rigoroso e siga um padrão (renovar é sempre bom, mas as cores do seu site fazem parte da identidade visual de sua marca);
Se possível tenha um logotipo de sua marca (isso é uma das formas de representar seu trabalho, fazer com que seu leitor grave a forma de seu logotipo e lembre de sua página por essa representação gráfica).

Quer exemplos? Em minha opinião esses três blogs resumem tudo:

www.brogui.com

www.googlediscovery.com

www.icebreaker.com.br

Isso é um pouco do que lembrei.
O importante é ser criativo e montar um template diferente, agradável e lembrando que um site vale muito mais pelo seu conteúdo. A aparência é uma forma de confortar o seu leitor e fazer com que ele se sinta verdadeiramente em casa.

Tenha uma boa noite.

Ocultar conteúdo da página inicial

2009-10-05T09:25:00.000-07:00

Ontem fiz uma postagem mostrando algumas mudanças no template do Códigos Blog e uma dessas mudanças foi o uso de widgets ocultos da página inicial. Dessa forma o widget só aparece quando o visitante abre alguma postagem por completo.

Para fazer isso é bem simples. Basta inserir um código antes e depois do conteúdo que você quer ocultar.

PARA EXEBIR EXCLUSIVAMENTE NAS PÁGINAS INDIVIDUAIS:

<b:if cond='data:blog.pageType == "item"'>

CONTEÚDO AQUI

</b:if>

PARA EXEBIR EXCLUSIVAMENTE NA PÁGINA INICIAL :

<b:if cond='data:blog.pageType != "item"'>

CONTEÚDO AQUI

</b:if>

PARA INSERIR EM AMBOS:

Basta não inserir nenhum dos dois códigos

Esses códigos podem ser usados em qualquer lugar no Blogger. Então basta ser criativo.

Exemplo:

Esse é um exemplo do anúncio que uso dentro das postagens. Aparecendo quando abrimos o arquivo em uma página individual.

Lembre-se: Para qualquer um dos dois códigos funcionarem, você deve colocar TODO o conteúdo dentro do código apresentado.

Pequenas alterações no Códigos Blog

2009-10-04T08:41:00.000-07:00

Como vocês devem ter notado estou fazendo algumas pequenas alterações no Códigos Blog. Então estou aqui apenas para apresentar três desses “recursos”:

1° - Menu de navegação no fim do blog

Nesse menu se encontra todos os links de navegação do Códigos Blog. Links externos e internos. Facilitando a navegação dos leitores no blog.

2° - Banners de divulgação

Muitos visitantes estavam pedindo mais modelos de banners de divulgação do Códigos Blog. Por isso hoje fiz novos banners de tamanhos diferentes. Se você gostou de nossas postagens, uma forma de agradecer nosso trabalho é colocando nosso link em seu blog.
Clique aqui e acesse nossa galeria de banners.

3° - Widgets no topo e na lateral ao abrir uma postagem

A mudança na propaganda e um novo gadget para os visitantes assinarem o FEED do Códigos Blog aparece sempre quando abrimos uma postagem por completo. Isso para dar um maior destaque ao feed do blog.

P.S.: Estou estudando formas de parceria, aguarde...
No momento é isso. Espero que gostem!
Assine nosso blog! Siga-me no Twitter!

Template Navegando Web - V2.0

2009-10-03T16:31:00.000-07:00

A pedido dos leitores, fiz as modificações do Template Navegando Web! Agora temos duas versões. Uma antiga de três colunas. Sendo as duas colunas de widgets uma do lado da outra:

E agora a nova versão, também com três colunas, sendo a coluna de postagens no meio:

O template Navegando Web foi feito com poucas imagens e MUITAS VARIÁVEIS, assim fica mais fácil a edição, você muda as cores e fontes sem precisar entrar na parde de edição do template.

Conteúdo (widgets, funcionalidades, recursos, caracteristicas etc...):

- Retirada da navbar
- Formulário de comentários embutido
- Corrigido Bug "1 ComentárioS", "2 comentários"...
- Menu Horizontal personalizavel
- Citações com destaque (blockquote)
- Personalizado links de navegação nas postagens "Anterior", "Próxima", "Início"
- Local para anúncio no topo do blog

- Comentários do autor Destacado

Todas as imagens usadas no template, instruções e o template em xml estão em um unico arquivo compactado (.RAR):

Demo

Download

Para fazer o download da versão 1.0 clique aqui.

Agora é só baixar e usar no seu blog! Abraços

Botão enviar postagem para o Twitter

2009-10-01T16:58:00.000-07:00

O Twitter se tornou uma grande fonte de divulgação de um blog/site. O comum agora é surgir novos gadgets para interar ainda mais esse serviço aos blogs.

O botão enviar para o twitter é um desses serviços. Ele fica disponível a todos os visitantes, assim se a pessoa gostar da matéria e quiser divulgar pelo twitter, o botão organiza tudo!

Antes de começar, recomendo que faça backup de seu template. Por segurança.

Vamos ao que interessa!
1º - Faça login no Blogger. Entre em “Layout” -> “Editar HTML”. Depois marque a caixa: “Expandir modelos de widgets”.

2º - Agora você deve escolher a opção de local onde vai ficar o widget e o tipo (completo ou compacto).

Primeira Opção: Botão ao lado direito do título do post

Procure (Ctrl + f) por:

<div class='post-header-line-1'/>
ou
<div class='post-header-line-1'>
ou
<div id='post-header-line-1'/>
ou
<div id='post-header-line-1/>

Escolha a forma do botão abaixo e insira o código ACIMA do lugar encontrado:

• Para botão completo

<div style="float:right;padding:4px;">
<script type="text/javascript">
tweetmeme_url = '<data:post.url/>';
tweetmeme_source = 'Usuario_ Twitter';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</div>

• Para botão compacto

<div style="float:right;padding:4px;">
<script type="text/javascript">
tweetmeme_style = 'compact';
tweetmeme_url = '<data:post.url/>';
tweetmeme_source = 'Usuario_ Twitter';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</div>

Agora edite a parte VERMELHA, colocando no lugar de Usuário_Twitter o nome de login do seu Twitter.
Exemplo: pauloestevao

Agora teste, se tudo estiver certo, salve.

Segunda Opção: Botão abaixo da postagem

Procure por:

<div class='post-footer'>
ou
<div id='post-footer'>

Cole o seguinte código DEPOIS:

• Para botão completo

<div style="float:right;padding:4px;">
<script type="text/javascript">
tweetmeme_url = '<data:post.url/>';
tweetmeme_source = 'Usuario_ Twitter';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</div>

OU

• Para botão compacto

<div style="float:right;padding:4px;">
<script type="text/javascript">
tweetmeme_style = 'compact';
tweetmeme_url = '<data:post.url/>';
tweetmeme_source = 'Usuario_ Twitter';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</div>

Agora edite a parte VERMELHA, colocando no lugar de Usuário_Twitter o nome de login do seu Twitter.
Exemplo: pauloestevao

Teste e salve.

Promoção: Quer ganhar um domínio .COM ou .NET?

2009-09-23T18:28:00.000-07:00

É isso, uma promoção relâmpago! Sem motivos específicos, mas não deixa de ser uma promoção!

Quer ganhar um domínio .COM ou .NET? (Promoção valida de 24/09/2009 a 16/10/2009)
Faça propaganda do Códigos Blog no seu blog, da forma que quiser! Divulgue o Códigos Blog e pronto!

Como Participar?

- Deixe um comentário logo abaixo com o link do seu blog e a frase: “Estou participando da promoção”. E faça propaganda do Códigos Blog no seu blog.

Quem ganha?

- Os dois primeiros blogs (cadastrados) que mais enviarem visitas ao Códigos Blog levam um domínio .COM OU .NET por um ano grátis.

Quem NÃO pode participar?

- Blogs que contenham conteúdo pornográfico, preconceituoso, violento e/ou racista.

Como vou contar os cliques?

- Vou contar o número de visitas que cada blog enviou, usando o Google Analytics. Dessa forma, os dois blogs cadastrados que mais enviarem visitas do período de 24/09/2009 a 16/10/2009 ganham a promoção.

Simples e objetivo.
Boa sorte.

Gadget Top Comentaristas

2009-09-20T11:20:00.000-07:00

Divulgar os leitores que mais comentam em seu blog pode ser um ótimo chamativo para mais comentários. E com isso você intera mais o seu leitor com o seu blog.
Aqui no Códigos Blog a pouco tempo foi implantado um gadget/widget muito eficiente que mostra os 10 maiores comentaristas e do lado a quantidade de comentários que cada um fez.
Esse recurso foi desenvolvido e oferecido pelo blog: Dicas para Blogs

Funcionamento:
O gadget conta a quantidade de comentários para o mesmo “Nick name” (nome) e mesmo link, dessa forma se uma pessoa comenta várias vezes, mas todas com nome e link diferentes, o gadget vai contar separadamente cada comentário. Essa é a razão de muitas vezes o número de comentários não bater com a quantidade acusada por ele.

Configuração/Instalação:
1º - Faça login no Blogger, entre em “Layout” -> “Elementos da página”;

2º - Clique em “Adicionar um Gadget” e dentre as opções escolha “HTML/Java Script”;

3º - Copie e cole o seguinte código no campo oferecido pela opção:

<script src="http://acessoriosparablogs.com.br/scripts/topcomentarios.js" type="text/javascript"></script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=2351a7b3195ee95ef3643998bc8def5e&url=http%3A%2F%2FLINK DO BLOG&num=10&filter=SEU NOME" type="text/javascript"></script>

Modifique onde necessário:
LINK DO BLOG: Coloque o link do seu blog sem o HTTP://. Exemplo: seublog.blogspot.com
SEU NOME: Coloque o nome que você usa para comentar em seu blog. Para que o gadget elimine você da contagem.

Exemplo:

4º - Salve.

Ativando foto nos comentários e Correções

2009-09-18T04:26:00.000-07:00

Ontem publiquei uma postagem mostrando mais uma novidade, do Blogger. Porém hoje em dia a maioria não usa nenhum daqueles templates prontos disponíveis no painel de controle, e com isso fica impossível o funcionamento do recurso sem a presença do código avatar nos templates personalizados.

Hoje eu prometi que procuraria a solução, mas felizmente não será necessário. O Sérgio Estrella do blog Ice Breaker fez isso para nós. Fiz algumas modificações e agora está completa a explicação e logo no final fiz um tutorial para corrigir alguns “bugs”. Siga o tutorial abaixo e seja feliz:

Antes de começar o tutorial recomendo que faça um backup por segurança!

1º - Entre em “Configurações” -> “Comentários”.
Onde está escrito: “Mostrar imagens de perfil nos comentários?”. Marque: "Sim" e salve.

2º - Entre em “Layout” -> “Editar HTML”. Marque a caixa: “Expandir modelos de widgets”.

3º - Procure (Ctrl + f):

<dl id='comments-block'>

Obs.: Caso você NÃO encontre o código acima, procure por:

<dl class='comments-block' id='comments-block'> OU <dl class='comments-block'>

4º - Substitua o código encontrado por esse:

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

5º - Procure (Ctrl + f):

<b:if cond='data:comment.authorUrl'>

Cole o seguinte código ANTES:

<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>

6º - Salve.

CASO SEUS COMENTÁRIOS FIQUEM DESSE JEITO:

Siga o tutorial abaixo:

1º - Procure (Ctrl + f):

<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>

E substitua TUDO por:

<span class='commentsavatar'>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
</span>

2º - Procure (Ctrl + f):

<b:if cond='data:comment.authorUrl'>

Cole o seguinte código ANTES:

<span class='commentsavatarL'/>

3º - Procure (Ctrl + f):

]]></b:skin>

Cole o seguinte código ANTES:

.commentsavatar {
position: absolute;
padding-right: 40px;
}
.commentsavatarL, .commentmetadata {
padding-left: 45px;
}

4º - Salve as modificações.
Seu template deve apresentar a seguinte mudança:

Os templates podem variar a forma de corrigir esse tipo de defeito, talvez sejam necessárias outras modificações. Entre em contato caso não apresente sucessos nesse tutorial.

Abraços.

Novidade Blogger: Imagem de perfil ao comentar

2009-09-17T16:11:00.000-07:00

O Blogger está completando 10 anos e com isso muitas novidades estão saindo toda semana. E hoje acabei de receber a notícia de um novo utilitário!
Agora ao comentar em um blog da plataforma Blogger, você pode escolher uma imagem para usar como foto de perfil. Essa imagem ficará presente do lado do seu comentário.

O recurso deve ser ativado no painel de controle do Blogger para funcionar.
Entre em “Configurações” -> “Comentários”.
Onde está escrito: “Mostrar imagens de perfil nos comentários?”. Marque”Sim” e salve.

Agora basta escrever o comentário, clicar em “Visualizar”, escolher uma imagem do seu PC e fazer o upload. Após isso é só clicar em “Postar Comentário”.

Obs.: Esse recurso é novo, provavelmente vai demorar a que todos os blogs disponibilizem essa ferramenta.

Aguardamos mais novidades. =D

Fazendo seu template – Parte 4 – Configurando efeitos da(s) sidebar(es)

2009-09-14T12:50:00.000-07:00

Estamos chegando à parte final da estrutura do template. Após essa postagem nos restam apenas alguns detalhes e opcionais. Aqui vou ensinar como mudar os efeitos da sidebar, e na próxima postagem ensino como fazer para definir o tamanho das colunas.

1º - Faça login no Blogger, entre em “Layout” -> “Editar HTML”;

2º - Vamos editar o título da sidebar. Encontre (Ctrl + f):

.sidebar h2 {

Fiz as seguintes mudanças:

padding: 5px;
border: 1px solid #000;
font-size: 13px;

Onde padding define as distancias do escrito das bordas. Border é a configuração das bordas, coloquei 1px solido de cor preta. Font-size é o tamanho da fonte, usei 13px como vocês podem ver.
“Brinque” um pouquinho, vale a pena você testar efeitos, fontes, tamanhos, etc. O Google oferece diversas fontes para isso.

A cor de fundo e a cor da letra estão como variáveis, sendo possível sua modificação diretamente na aba “Fontes e cores”. Assim não é necessária a mudança direta no CSS.

3º - Procure:

.sidebar li {

Vamos editar o "li" da sidebar. Podemos dizer que está é a parte em que mudamos os links da sidebar, a parte básica.
Apague TUDO que está entre {...}.
Depois adicione:

margin: 0;
padding-top: 0;
padding-bottom: 5px;

Assim retiramos as configurações inicias e colocamos 5px de distância de um link para o outro.

4º - Depois de definir as distâncias dos links da sidebar, nos resta configurar as cores, ícones, sublinhados, etc.

Por isso vamos CRIAR novas caracterisitas, dentro do CSS depois de sidebar li:

.sidebar a, sidebar a:link{
}

.sidebar a:hover{
}

.sidebar a:visited{
}

Em sidebar a, sidebar a:link, adicione as configurações iniciais dos links, as configurações que serão aplicadas quando alguém visitar seu blog.

Em sidebar a:hover vai ser aplicada as configurações quando o visitantes passarem o mouse sobre o link.

Em sidebar a:visited vai ser aplicada as configurações no link após o clique. Assim vai ficar marcado como se fosse um aviso que a pessoa já visitou este link.

Exemplo que vou utilizar:

.sidebar a, .sidebar a:link{
text-decoration: none;
padding-left: 20px;
background: url(http://codigosblog.net/servidor/li.gif) no-repeat;
}

.sidebar a:hover{
text-decoration: underline;
}

.sidebar a:visited{
background: url(http://codigosblog.net/servidor/livisited.gif) no-repeat;
}

O que eu fiz?

Text-decoration: none; -> Retirei o sublinhado.
Padding-left: 20px; -> Coloquei 20px de distância da palavra linkada ao canto esquerdo.
Background: url...; -> Coloquei um ícone no link antes e depois de já visitado (a:visited).
Text-decoration: underline; -> Coloquei um sublinhado no link quando passa o mouse.

O template seu deve estar parecido estruturalmente com esse:

Acompanhe as mudanças do template: www.fazendoseutemplate.blogspot.com

Pronto, basicamente é isso. Procure ser curioso e modifique o quando quiser as configurações da sidebar. Mas lembre sempre de verificar as mudanças em alguns navegadores (Firefox, Chrome, Internet Explorer 7 ou superior, etc).

Projeto - Layout -> Blog do Tavares

2009-09-13T08:01:00.000-07:00

Conheça o melhor do futebol! O Blog do Tavares está sempre atualizado com notícias quentes sobre o Futebol Mundial e agora está de cara nova! Template + Logotipo feitos por mim!

Espero que gostem! Confira você mesmo:
www.futeboltavares.blogspot.com

Anúncio dentro das postagens

2009-09-12T04:52:00.000-07:00

Após receber emails de pessoas pedindo esse tutorial, estou eu aqui fazendo o possível para que todos coloquem de forma fácil um anúncio do adsense dentro das postagens, de forma que o anúncio só apareça quando alguém abrir postagem por completo.
Lembrando também que você pode usar qualquer outro tipo de anúncio nesse tutorial.

Antes de começar o trabalho, recomendo a todos que façam um backup (copia de segurança) de todo o template.

1º - Entre no Blogger, faça login, entre em “Layout” -> “Editar HTML”. Ative a janela “Expandir modelos de widgets”

2º - Procure (Ctrl + f): <div class='post-footer'>

3º - Cole o seguinte código ANTES:

<b:if cond='data:blog.pageType == "item"'>
CÓDIGO DO ANÚNCIO
</b:if>

Obs.: Esse código acima vai fazer com que o anúncio só apareça depois que você abrir a postagem por completo, se você não quiser isso é só colocar apenas o código do anúncio diretamente ANTES de <div class='post-footer'>

4º - Agora é só substituir CÓDIGO DO ANÚNCIO, pela codificação gerada pelo site de afiliados que você quer usar e depois salvar.

Se seu anúncio foi do Google Adsense, antes de colar o anúncio no template é necessário que você faça algumas mudanças:
Após gerar o anúncio substituam no código as flechas em vermelho:  por estes códigos em azul:

Exemplo código ANTES:

//-->

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

DEPOIS:

//-->

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

Todas as propagandas do Adsense têm essas tags que te ensinei a substituir, e fique tranqüilo, isso não vai atrapalhar seus rendimentos e muito menos prejudicar sua conta. O Google autoriza essa modificação.

Veja o exemplo de como deve ficar seu template:

Projeto - Layout -> Repórter dos Bairros

2009-09-08T11:09:00.000-07:00

A quase dois meses atrás fiz o template e o logotipo do blog: Repórter dos Bairros, porém só agora lembrei de mostrar o projeto finalizado.
Espero que tenham gostado.

Visite e conheça o novo template do blog: w ww.reporterdosbairros.blogspot.com