sábado, 29 de novembro de 2008

Marcadores em formato de nuvem

Nível: intermediário
Nuvens

Este tutorial é para quem usa Blogger, tem muitos marcadores e quer mantê-los ocupando menos espaço no template.

1. Adicionando os Marcadores

Se seu blog já exibe os marcadores, pule para o próximo passo, se não tem, vá até Layout » Elementos da página » Adicionar um gadget. Procure e selecione a opção Marcadores:

Marcadores

Configure como desejar e salve:

Marcadores2

Arraste o gadget criado para o local desejado e salve:

Marcadores

2. Coloque os marcadores em formato de nuvem

Por padrão, esse recurso gera uma lista, onde um marcador aparece abaixo do outro. A lista de marcadores do Blogger utiliza id='Label1', sabendo disso é fácil forçar sua lista em formato de nuvem com CSS. Logo acima do trecho do seu código que diz ]]></b:skin>, adicione as linhas abaixo (exceto a última, que já tem no seu blog):

#Label1 ul {text-align:center; margin:0px; padding:0px;}
#Label1 ul li {display:inline;}
]]></b:skin>

3. Tirando o contador de posts

Por padrão, cada marcador mostra o número de posts com aquela tag. Para sua nuvem ficar bonita é melhor não mostrar. Clique em Expandir modelo de widget e procure o seguinte código:

<b:widget id='Label1' locked='false' title='Marcadores' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>

</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Onde está escrito Marcadores deve estar o nome que você escolheu para sua lista de marcadores. A parte de código em destaque deve ser escluída para que os números não apareçam. Após excluir, salve e desmarque a opção “Expandir modelos de widgets”.

Marcadores em Nuvem

4. Outras opções de efeitos

Para exibir os marcadores com todas as letras minúsculas:

#Label1 ul {text-transform:lowercase; text-align:center; margin:0px; padding:0px;}
#Label1 ul li {display:inline;}
]]></b:skin>
Exemplo de Marcadores

Para exibir os marcadores com todas as letras maiúsculas:

#Label1 ul {text-transform:uppercase; text-align:center; margin:0px; padding:0px;}
#Label1 ul li {display:inline;}
]]></b:skin>
Nuvem Uppercase

Para definir a fonte:

#Label1 ul {font-family:verdana; font-size:11px; text-align:center; margin:0px; padding:0px;}
#Label1 ul li {display:inline;}
]]></b:skin>

Para efeitos de links, visite Links e sublinhados.

Eu tive a idéia desse tutorial porque via alguns blogs com um número muito grande de tags que talvez precisassem desse recurso. Aproveitei e transformei em nuvem os marcadores do meu blog pessoal.

Update 04/02/2009

Se quiser uma nuvem de marcadores com tamanhos de fonte variados, visite o tutorial Marcadores em formato de nuvem 2.

Aline, mais uma jornalista no BloGYN

Aline Blá-blá-blá

Ser blogueiro é uma válvula de escape para nós, jornalistas. Apaixonados pela comunicação escrita, no mercado de trabalho nos vemos podados por todos os lados por motivos econômicos, religiosos, pseudo-moralistas, isso e aquilo. No blog podemos ser nós mesmos, sem máscaras, sem hipocrisia… Não gostou? Dane-se!

Fico feliz quando descubro mais colegas jornalistas-blogueiros de Goiânia. A Alinne é jornalista, faz pós-graduação em Comunicação e Marketing, trabalha em uma produtora e é curiosa pra valer (entra no assunto até dos funcionários da copiadora, muito engraçado!). O blog dela é um pouco da visão que essa goiana enxerida tem dos mais variados fatos.

E aí, Alinne, está garantida a carona do próximo sábado?

sexta-feira, 28 de novembro de 2008

quinta-feira, 27 de novembro de 2008

Salve em PDF de qualquer programa

Já começo esse tutorial com vergonha por não tê-lo escrito antes. Faz alguns anos que uso esse recurso e sei que até hoje muitas pessoas leigas sofrem quando precisam salvar um arquivo em formato .pdf, pensam que precisam instalar algum programa muito pesado para conseguir fazer isso ou qualquer outra coisa muito complicada.

terça-feira, 25 de novembro de 2008

Elementos block e inline em CSS

Nível: iniciante

Neste tutorial vou explicar a diferença entre elementos block (em bloco) e inline (na mesma linha). Vários tutoriais deste blog podem depender de saber esses conceitos de HTML. Na verdade, eu estava preparando outros tutoriais quando percebi que eles exigiam esse conhecimento, então resolvi publicar este primeiro.

sexta-feira, 21 de novembro de 2008

Entre Aspas | Renato Russo

Sol e Rio
Mas é claro que o sol vai voltar amanhã
Mais uma vez eu sei
Escuridão já vi pior de endoidecer gente sã
Espera que o sol já vem.

Tem gente que está do mesmo lado que você
Mas deveria estar do lado de lá
Tem gente que machuca os outros
Tem gente que não sabe amar
Tem gente enganando a gente
Veja a nossa vida como está
Mas eu sei que um dia a gente aprende
Se você quiser alguém em quem confiar
Confie em si mesmo
Quem acredita sempre alcança!

Mas é claro que o sol vai voltar amanhã
Mais uma vez eu sei
Escuridão já vi pior de endoidecer gente sã
Espera que o sol já vem.

Nunca deixe que lhe digam que não vale a pena
Acreditar no sonho que se tem
Ou que seus planos nunca vão dar certo
Ou que você nunca vai ser alguém
Tem gente que machuca os outros
Tem gente que não sabe amar
Mas eu sei que um dia a gente aprende
Se você quiser alguém em quem confiar
Confie em si mesmo
Quem acredita sempre alcança!

Quem acredita sempre alcança!
Quem acredita sempre alcança!
Quem acredita sempre alcança!
Quem acredita sempre alcança!
Quem acredita sempre alcança!
Quem acredita sempre alcança!
Quem acredita sempre alcança!