Cuidados com o template do blog

Todo cuidado é pouco!
Imagem: Colégio Magno

O template é a cara do seu blog, como os visitantes o veem (sem acento!). Então, a aparência é muito importante para os blogs. Um template mal feito e/ou cheio de imagens e JavaScript pode fazer um visitante nunca mais voltar ao seu blog.
Pensando nisso, selecionei alguns cuidados que você que, como eu, faz o seu próprio template deve tomar:

Cuidado com o tempo de carregamento!

Como eu já disse em “Medindo o tempo de carregamento do seu blog/site”, um blog pesado “espanta” visitantes impacientes. Então, tente deixar o seu template o mais leve possível.

Se o seu blog for de imagens, como por exemplo, o ClickImagens, seu template não pode ser muito “pesado”, pois, adicionando as imagens, seu blog demorará mais ainda para ser carregado.

Se o seu blog tem muitos scripts JavaScript, além de deixar o carregamento lento, dependendo da quantidade de scripts e do computador do visitante, pode até travar o navegador do visitante, o que faz muitos visitantes leigos acharem que seu blog contém vírus e nunca mais voltarem.

Resumindo, quanto mais imagens e scripts seu blog tiver, mais demorado será o carregamento.

Dica: Se você usa o Firefox, utilize o Firebug para verificar o seu blog.

Cuidado com o tamanho da tela!

Com o lançamento de monitores widescreen e monitores com mais de 17", a visualização das páginas da web ficaram diferentes.

Se você usa um monitor de 22" com resolução 1600x1200 e o seu visitante usa um monitor de 15" com resolução de 1024x768, o que seria o certo? E como ficariam os monitores Widescreen?

A resolução mais usada atualmente é 1024px x 768px, independente do crescimento das vendas dos monitores widescreen. Mas para piorar, a venda dos “netbooks” vem aumentando e estes usam resolução 800x600.

Dicas: Faça o seu template com 780px a 1000px de largura e lembre-se de centralizar a página, para que os visitantes que usam monitores widescreen vejam a sua página corretamente.

Cuidado com a compatibilidade entre navegadores!

Com o Internet Explorer perdendo espaço para o Firefox e agora, para o Chrome, fica ainda mais difícil fazer um template compatível com todos os navegadores. Então, quando for fazer o seu template, estude, procure problemas de compatibilidade e tente fazer um template compatível com todos os navegadores, afinal, colocar “Esse blog é melhor visualizado no Firefox” é coisa de preguiçoso...

Dica: Use o BrowserShots para ver como fica seu template em outros navegadores e resoluções.

Cuidado com os anúncios!

Bem, por último, mas não menos importantes, estão os anúncios. Estes, que garantem a nossa vida como blogueiros (ou não), podem atrapalhar a navegação e, por alguns, podem ser vistos como vírus. Então, cuidado com o local que você irá colocar os anúncios, porque eles podem estragar o layout.

Anúncios misturados ao conteúdo do blog para serem confundidos com links internos são uma maneira muito apelativa de ganhar dinheiro. Não faça isso. Deixe claro aos visitantes para que servem os seus anúncios.

Mais chatos que os anúncios em locais inapropriados, são os anúncios em forma de pop-up e pop-under, que são aquelas janelinhas que abrem quando se carrega uma página. Mesmo sendo uma maneira mais fácil de ganhar dinheiro, é uma coisa que faz seus visitantes nunca mais voltarem.

Aproveite e veja como ficariam os blogs famosos sem publicidade.

Bem, essas foram as dicas. Dúvidas, críticas e sugestões, deixe nos comentários.

[...]
Leia o Texto Completo »

Trocando títulos da sidebar do Blogger por imagens

Nesse meu primeiro post do mês de junho, iremos aprender a colocar imagens como título da sidebar do Blogger, como no meu blog ClickImagens.

Para isso, criarei um Widget Qualquer em um blog qualquer para que possamos começar. Vou colocar “Titulo Vagabundo” como título do Widget, para podermos identificá-lo posteriormente:

Depois de salvar o Widget, podemos vê-lo na nossa Sidebar:

E devemos também ter a imagem pronta.  Irei utilizar uma imagem ridícula de 150px x 30px:

Agora, com isso pronto, vamos ao tutorial (clique nas imagens para ampliá-las):

1 - No Blogger, vá em Editar HTML e selecione “Expandir modelos de widgets”:

2 - Cole isso antes do ]]></b:skin>:

.widget .title img{
display: block;
text-align: center;
}

3 - Aperte Ctrl+F e procure o título do widget, no meu caso, “Titulo Vagabundo”:

Encontrado o Widget, ele terá uma estrutura parecida com essa:

<b:widget id='Text2' locked='false' title='Titulo Vagabundo' type='Text'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
[…]

4 - Apague o “<data:title/>” e substitua por:

<img src="http://A_URL_DE_SUA_IMAGEM"/>

Substituindo, é claro, o texto em negrito pela URL da sua imagem.

5 - Visualize para ver se está tudo certo, salve o modelo e pronto! O seu widget agora tem imagem no lugar do título. Veja como ficou a porcaria o meu:

Confesse, você achava que seria algo mais complicado, certo?

[...]
Leia o Texto Completo »

O dia do Orgulho Nerd

Feliz dia do Orgulho Nerd!

Bem, como muitos nerds sabem (ou então quem assistiu o Fantástico ontem sabe), hoje é o Dia do Orgulho Nerd (ou Orgulho Geek, se preferir).
Esse dia foi criado por nerds para nerds, para termos os direitos de sermos nerds. Mas o que é um nerd?

Nerd é um termo que descreve, de forma estereotipada, muitas vezes com conotação depreciativa, uma pessoa que exerce intensas actividades intelectuais, que são consideradas inadequadas para a sua idade, em detrimento de outras atividades mais populares. Por essa razão, um nerd é muitas vezes excluído de atividades físicas e considerado um solitário pelos seus pares. Pode descrever uma pessoa que tenha dificuldades de integração social e seja atrapalhada, mas que nutre grande fascínio por conhecimento ou tecnologia.

Fonte: http://pt.wikipedia.org/wiki/Nerd

A tradução de nerd, segundo o Yahoo, é “lerdo”. Mas nerds não são lerdos, são apenas inteligentes o bastante para se isolar de pessoas que só querem diversão, os quais, com inveja, começaram a chamar os inteligentes de nerds.

Direitos e deveres dos nerds

Direitos:

1. O direito de ser ainda mais nerd.
2. O direito de não sair de casa.
3. O direito de não gostar de futebol ou de qualquer outro esporte.
4. O direito de se associar a outros nerds.
5. O direito de ter poucos (ou nenhum) amigos.
6. O direito de ter tantos amigos nerds quanto quiser.
7. O direito de não ter que estar "no estilo".
8. O direito ao sobrepeso (ou subpeso) e de ter problemas de vista.
9. O direito de expressar sua nerdice.
10. O direito de dominar o mundo.

Deveres

1. Ser nerd, não importa o quê.
2. Tentar ser mais nerd do que qualquer um.
3. Se há uma discussão sobre um assunto nerd, você tem que dar sua opinião.
4. Guardar todo e qualquer objeto nerd que você tenha.
5. Fazer todo o possível para exibir seus objetos nerds como se fosse um "museu da nerdice".
6. Não ser um nerd genérico. Você tem que ser especialista em algo.
7. Assistir a qualquer filme nerd na noite de estréia e comprar qualquer livro nerd antes de todo mundo.
8. Esperar na fila em toda noite de estréia. Se puder ir fantasiado, ou pelo menos com uma camisa relacionada ao tema, melhor ainda.
9. Não perder seu tempo em nada que não seja relacionado à nerdice.
10. Tentar dominar o mundo!

(Fonte: http://pt.wikipedia.org/wiki/Dia_do_Orgulho_Nerd)
(Com certeza foi escrito por um nerd)

Mas a anti-socialização (isolamento) dos nerds afeta a sua vida sexual / amorosa: Mulheres acham que nerds não serão bons parceiros. Então, para as mulheres, vai uma musiquinha dos Seminovos:

Então, para você  que é nerd: seja nerd! E se você não é nerd, liberte o nerd de dentro de você! E para as mulheres, lembrem-se: o nerd de hoje é o cara rico de amanhã!
E Feliz dia do Orgulho Nerd!

[...]
Leia o Texto Completo »

Personalizando o Botão Contador de Posts e Comentários

Lembra do Botão contador de Posts e Comentários? Ele foi baseado no Widget Contador de Posts e Comentários do UsuárioCompulsivo. A pedido de uma leitora, eu criei esse tutorial.
Para poder customizar o seu próprio widget, é necessário que você tenha o Photoshop instalado no seu computador. O objetivo desse artigo é ensinar como mudar o fundo do botão, assim como cores e formato, já que para mudar a posição dos nomes e números é necessário um pouco mais de prática com CSS. Então, vamos lá:
 

1 – Baixe o arquivo da imagem de fundo, clicando aqui.
2 – Abra o arquivo;

Entendendo o arquivo

1 – Agrupamento de camadas “Texto”
Onde ficam as camadas com texto

2 – Camada “Artigos”
A Camada onde fica a palavra “Artigos”. Não é recomendável que você mexa nela, a não ser para mudar a cor.
3 – Camada “Comentários”
A Camada onde está escrito “Comentários” (não diga...). Como a camada anterior, não é recomendável que você altere a camada, a não ser que você saiba o que você está fazendo.
4 – Camada “Moldura - Textos”
Nessa camada ficam as molduras onde entrarão os números. Ela está bloqueada, então não mexa nela, a não ser que você mexa no CSS e em outras coisas (Lembra do objetivo do artigo?).
5 – Camada “Camada 1”
Camada onde está o degradê de efeito do botão (erro: esqueci de renomear a camada). Essa você pode excluir e fazer qualquer outro efeito.
6 – Camada “Fundo / Moldura”
A camada onde fica o fundo do botão, a cor e os efeitos. Perceba que o fundo atrás dela é transparente. Essa camada, como a “Camada 1”, você pode excluir, já que você irá personalizar.

Mãos na massa

1 – Modificando o fundo
Após abrir o arquivo, vá na camada “Fundo / Moldura”, aperte Ctrl+A e depois a tecla “Delete” (Selecionar tudo e deletar). Exclua a “Camada 1” e o efeito de traçado da camada “Fundo / Moldura”. Irá ficar assim a sua imagem:

2 – Colocando um fundo
Na camada “Fundo / Moldura”, escolha uma forma personalizada ou faça o que você quiser (o widget é seu!) com a imagem. O importante é só deixar ela por trás do resto da imagem. Eu utilizei uma forma personalizada:

Após uns efeitinhos:

Trocando a cor do texto (tem que mudar de cada um):

3 – Salvando
Com a imagem pronta, vá em Arquivo – Salvar como (File – Save As) (Ctrl+Shift+S) e salve no formato PNG ou GIF, pois estas têm suporte a fundo transparente. Se você colocou algum brilho externo ou sombra, você deve usar o formato PNG (recurso da transparência não suportado em versões do Internet Explorer anteriores à 7).

Publicando

Para seu botão contador ser visualizado pelas outras pessoas, você deve hospedar a imagem (PNG ou GIF) em algum servidor, como ImageShack, Photobucket, ou no Picasa. Após pegar o link da imagem (Direct Link ou algo parecido, aquele que leva somente à imagem), continuemos com o tutorial:

1 – Código básico
Este é o código original do Botão Contador de Posts e Comentários do SemNome:

<script type="text/javascript">
  function showpostcount(json) {
  document.write(parseInt(json.feed.openSearch$totalResults.$t,10));
  }
</script>
<div style="width:108px; height:43px; position:relative; font-size:13px; font:Verdana, Arial, Helvetica, sans-serif!important;color:#000000">
<span style="position:absolute; top:5px; right:7px;">
<script src="/feeds/posts/default?alt=json-in-script&callback=showpostcount"></script>
</span><span style="position:absolute; bottom:5px; right:7px;">
<script src="/feeds/comments/default?alt=json-in-script&callback=showpostcount"></script>
</span>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT1-0v6ox1KVbs1M9lgLA6-dgZsSBeeY3__917SPhL0W70xWYk1fYYD7EBpE_wRuLT1PT8l3RRK66SVmUQebcT2SRDD4KCab5eFu6WbHgmYXEmqwVbqvKCXGQ7BhTW9sSCiTe3RbYHX13C/s320/count+blogger.png" /></div>
<span style="font-size:11px"> Widget by <a href="http://semnome.net" target="_blank" title="SemNome">SemNome</a> </span>

2 – Substituindo os campos em Negrito
Essa é a parte mais fácil: basta substituir o primeiro campo em negrito pelo código da cor que você quer usar como texto e o segundo é a URL da imagem que você hospedou.
Pronto! Agora é só colocar no seu blog em um Widget HTML/Javascript e dizer: “Eu que fiz”!

Resultado

O botão final desse tutorial foi esse:

Widget by SemNome

Caso queira usar esse novo modelo em seu blog, basta copiar o seguinte código para o seu blog, em um widget HTML/Javascript:

Novo Botão Contador de Posts e comentários

<script type="text/javascript"> function showpostcount(json) { document.write(parseInt(json.feed.openSearch$totalResults.$t,10)); } </script> <div style="width:108px; height:43px; position:relative; font-size:13px; font:Verdana, Arial, Helvetica, sans-serif!important;color:#50008E;"> <span style="position:absolute; top:5px; right:7px;"> <script src="/feeds/posts/default?alt=json-in-script&callback=showpostcount"></script> </span><span style="position:absolute; bottom:5px; right:7px;"> <script src="/feeds/comments/default?alt=json-in-script&callback=showpostcount"></script> </span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDVjLYTPA1s26aCoIN4cY-HbLChSKpLGMqOzpNFUiM0d9wnBC4n_S-jRJxUnwA-cErDI9x1pcmxpnIDWxvvNUyN0hn4Xg-fX1DOZqdI4-iWn5oov0qTXh7VMbFJSaRdUPxJgic2Z971CEi/s320/new_count.png" /></div><span style="font-size:11px"> Widget by <a href="http://semnome.net" target="_blank" title="SemNome">SemNome</a> </span>

[...]
Leia o Texto Completo »