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 »

Enviando postagens para o Twitter automaticamente

Logo do Twitter

Procurando algo para fazer de útil com o meu Twitter, já que eu não sabia o que fazer com aquela coisa (nem a utilidade daquilo [ainda não sei]), eu acabei descobrindo como enviar automaticamente minhas postagens do SemNome e do ClickImagens para o meu Twitter, tirando-o da escuridão. Se você está procurando por isso, a solução é simples: o TwitterFeed.

Com o TwitterFeed, você só precisa colocar o seu login do Twitter, a senha e a URL do feed do seu blog. Veja um tutorial de como fazer isso (Clique nas imagens para ampliá-las):

1. Vá em http://twitterfeed.com/auth/login e no campo “OpenID Login”, coloque a URL do seu blog e aperte Enter;

2. Se você usa Blogger, irá aparecer a tela de login. Faça o login

3. O Blogger irá pedir uma confirmação do envio de informação para o TwitterFeed, então, clique em “Sim, sempre”

4. Após confirmar, você será redirecionado para a página do TwitterFeed. Então, clique em “Go to my Twitter Feeds (or create a new one)”

5. Lá, clique em “create new feed”

6. Agora, você só precisa preencher os dados:

1. RSS Feed URL: simples, é apenas a URL do feed do seu blog (Ex.: se você usa o Blogger, a URL é http://urldoseublog.blogspot.com/atom.xml
2. Update Frequency: A freqüência das atualizações do seu blog. O resto você pode deixar como está (ou não).
7. Clique em “Create”

 

Pronto! Agora seu Twitter sairá da escuridão. Aproveite e me siga no Twitter: http://twitter.com/semnome_net.

[...]
Leia o Texto Completo »