Minggu, 08 Maret 2009

Dia Internacional da Mulher


Este é o dia de todas nós e os homens nos felicitam e recebemos flores e frases bonitas. Hoje é o dia Internacional da Mulher mas eu não me sinto feliz ou contente com a situação da mulher no mundo. Porque o mundo não é o nosso bairro nem o nosso país. O mundo é grande demais e em muitos, muitos lugares, a mulher vale menos que um animal.
Eu gostaria que hoje fosse um dia de libertação.
O dia de libertação das mulheres que sofrem violência em segredo.
O dia das mulheres cheias de filhos, aprisionadas por maridos que não as amam, sem ter para onde ir.
O dia das mulheres que ainda são constrangidas pela brutalidade do homem, em casa, no trabalho, nas ruas.
O dia das mulheres violentadas e que ainda são acusadas de provocar a situação.
O dia das mulheres que trabalham fora e trabalham em casa também e não recebem o reconhecimento merecido.
O dia das meninas raptadas, estupradas, descartadas.
O dia de todas as lágrimas femininas transformarem-se em voz e esta voz ser capaz de calar a violência, o abuso, a falta de respeito.
O dia em que não haverá mais 'o homem' e 'a mulher', mas pessoas que se tratam com igualdade, porque a dor é a mesma para todos.

O dia das mulheres vendidas, apedrejadas, punidas pelos erros dos homens. O dia em que nenhuma mulher  mais será obrigada a fazer o que não quer.
O dia em que uma mulher não será xingada e desrespeitada por querer exatamente o que o homem quer. Fazemos parte de um mesmo grupo, por que não temos o mesmo direito de errar e de cair?
Gostaria que hoje fosse realmente o dia de todas as mulheres, até das que foram convencidas de que não merecem respeito e amor e criam seus filhos para não respeitarem outras mulheres.
O dia das que sofrem as dores do parto sorrindo, das que passam noites e noites em claro, vigiando a respiração de seus filhos, garantindo a continuidade da espécie.
O dia das prostitutas, das loucas, das agressivas, das autoritárias, das estúpidas, das cruéis. Porque mulher não é este personagem criado pelo homem, doce, submisso e tolo. Ela é parte da mesma espécie e deve ter todo o direito de sentir as mesmas coisas, cometer os mesmos erros, sem ser punida.
Eu queria que hoje fosse um dia realmente especial, um dia de mudança, de transformação. Porque eu tenho uma filha e me dói ter que ensinar certas coisas para ela, prepara-la para a possibilidade de sofrer violência, desprezo, abandono.
Mulheres, tanto quanto for possível, não nos submetamos à condição de inferioridade em relação ao homem. Lutemos, mesmo que isso custe amizades, mesmo que isso desperte rancores. Vivemos em uma localidade do planeta onde ainda existe muito abuso, mas podemos nos expressar, podemos mostrar o rosto e gritar. Utilizemos esta liberdade em favor das que não podem nem ao menos mostrar os olhos. Vamos revolucionar o mundo, rejeitar estereótipos, educar nossos filhos para amar e respeitar as mulheres. Não nos submetamos aos caprichos dos homens, façamos exatamente o que desejamos fazer, sempre. Abandonemos as velhas ideias de que mulher honesta é mulher que não deseja, não luta, não vive só. Podemos fazer tudo o que queremos e isso não subtrai absolutamente nada do nosso valor.
Chega de aceitar que um homem promíscuo é garanhão e uma mulher promiscua é vagabunda. Chega de lutar contra outras mulheres, de disputar a atenção de um homem ferindo outras mulheres. Chega de condenar, difamar e enxergar o mesmo gênero como ameaça e concorrência. Vamos nos unir contra toda violência e contra toda falta de respeito.
Que hoje não seja um dia de flores e frases melosas, seja um dia de transformação.
Parabéns a todas as mulheres: é preciso muita força e muita coragem para sobreviver, dia após dia, neste mundo dos homens.

Kamis, 05 Maret 2009

Resumo na página inicial com posts de cores diferentes

O título é grande mas o procedimento é até simples. O resultado é este: Post 01

Antes de tudo, vai o conselho amigo da titia:
Não faça experiências com seu blog oficial! Crie um blog de testes, coloque nele uns quatro posts Lorem Ipsum (uma encheção de linguiça que soa latim), uma imagem em cada post (acima dos textos) e brinque à vontade.
Primeiro vamos mudar as medidas do template (use o Mínima). Procure por #Outer-wrapper e mude o width para: 990px; Mude #header-wrapper width:100%.Mude ainda #main-wrapper width: 700px;

Agora vamos ao hack que alterna as cores/background dos posts. Este hack foi criado por JMiur e é uma variação do hack que faz uma contagem dos comentários.Procure por este trecho do código e insira o que está em vermelho:
<div class='post-body entry-content' expr:id='"post-" + data:post.id'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Coloque acima de </head> o script:
<script type='text/javascript'>
//<![CDATA[
function ContarP(cual) {
var resto;
resto = contadorPosts % 2;
if (resto == 0)
document.getElementById(cual).className='entradaPar';
else
document.getElementById(cual).className='entradaImpar';
}
//]]>
</script>

e também o estilo para os posts:
<style>
.entradaImpar {background-color: #FFF; padding: 10px;}
.entradaPar {background-color: #000; padding: 10px;}
</style>

Procure por este trecho do código:
<b:loop values='data:posts' var='post'>

e cole ACIMA dele:
<script type='text/javascript'>var contadorPosts=0;</script> <!-- contador a cero -->

acrescente ainda os trechos em vermelho entre os seguintes códigos:
<b:loop values='data:posts' var='post'>
.......
<b:if cond='data:blog.pageType != "item"'>
<!-- no ejecutamos la función en las páginas individuales -->
<script type='text/javascript'>
contadorPosts=contadorPosts+1;
ContarP(&#39;post-<data:post.id/>&#39;);
</script>
</b:if>
</b:loop>
.......
</b:includable>
Quem quiser conferir no original, o post é esse: Jugando con los posts.

Visualize: se os posts aparecerem em cores diferentes (branco e preto), você fez tudo corretamente. Salve.
Bem, agora vá até o blog da Rô e leia este post onde ela ensina a colocar um hack de resumo automático de posts, com miniaturas das imagens utilizadas. Eu realmente adorei este hack e foi o mesmo que usei no Clean Magazine. Para hospedar o script, a própria Rô mostra alternativas e dentre elas, estou usando o Dropbox e até agora não tenho do que me queixar.

Só para constar, no hack para o resumo dos posts, no meu exemplo, usei estes valores:
summary_noimg = 450;
summary_img = 400;

Não se esqueça: quando colocar o hack para resumo dos posts, mantenha a configuração para os posts pares e ímpares, que passei acima:
<div class='post-body entry-content' expr:id='"post-" + data:post.id'>

Muito bem, depois de instalar o resumo automático, vamos dar estilo aos posts.O trecho que nos interessa para determinar as cores e/ou imagens que usaremos, é este:
<style>
.entradaImpar {background-color: #FFF; padding: 10px;}
.entradaPar {background-color: #000; padding: 10px;}
</style>

No meu exemplo, criei duas imagens de tamanho 700x190px, hospedei no TinyPic e deixei assim o código:
.entradaImpar {height:190px;background: url(http://i41.tinypic.com/2im64m.jpg) no-repeat top left; padding: 20px 35px;}
.entradaPar {height:190px;background: url(http://i40.tinypic.com/1z1rcqh.jpg) no-repeat top left; padding: 20px 35px;}

Note que além de acrescentar o link das imagens, estabeleci uma altura fixa para os resumos (height:190px) e um afastamento do texto para a borda da imagem de 20px para o topo e base e 35px para as laterais.

Mas podemos ir além disso. Podemos acrescentar outros estilos para os nossos resumos e para tanto é preciso acrescentar o seguinte código em vermelho:
<b:if cond='data:blog.pageType != "item"'>
<style>
.entradaImpar {background-color: #FFF; padding: 10px;}
.entradaPar {background-color: #000; padding: 10px;}
</style>
</b:if>
Tudo o que for colocado entre as linhas em vermelho aparecera apenas na página inicial, não afetando em nada as páginas individuais. Sendo assim, deixei o meu código desta maneira:
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
.entradaImpar {height:190px;background: url(http://i41.tinypic.com/2im64m.jpg) no-repeat top left; padding: 20px 35px;}
.entradaPar {height:190px;background: url(http://i40.tinypic.com/1z1rcqh.jpg) no-repeat top left; padding: 20px 35px;}
.post-footer{display:none}
.post{margin: 0 auto; padding: 0; text-align:justify}
h2.date-header {display:none}
</style>
</b:if>

Em roxo: determinei que todo o conteúdo de footer não apareça na página inicial;
Em verde: eliminei o estilo para margin e padding que existe no template Mínima para os posts, aproximando-os e eliminando a borda da base. Justifiquei o texto;
Em azul: determinei que a data não apareça na página inicial.

Para terminar, eu queria que o título do blog ficasse dentro da moldura que criei para os posts e não fora dela, como naturalmente deve ficar. Para alterar a posição do título, procure este trecho:
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
E desloque ele para baixo de :
<div class='post-body entry-content' expr:id='&quot;post-&quot; + data:post.id'>

Lembre-se:

Estas modificações afetarão apenas a página inicial. Para criar estilos para as páginas individuais, é preciso modificar os códigos .post e .post-body do Mínima.

Quando for acrescentar o hack para resumos automáticos, não se esqueça de manter o hack para posts pares e ímpares, que passei primeiro. O código completo, com os dois hacks, e o deslocamento do título, deve ficar assim:
<div class='post-header-line-1'/>
<div class='post-body entry-content' expr:id='&quot;post-&quot; + data:post.id'>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span id='showlink'><a expr:href='data:post.url'> [ ... ]</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
No próximo artigo trarei novas sugestões para personalizar os posts.

Rabu, 04 Maret 2009

Template Girly Diaries

Template original para Wordpress convertido por mim para o Blogger. Super feminino, ideal para quem adora a cor rosa (mas já viram que não é o meu caso :)

O local para editar os links do menu está sinalizado no código do template.


Selasa, 03 Maret 2009

Mais menus horizontais

Hoje o Carlinhos me perguntou no Twitter como colocar no blog os menus que aparecem nesta página. Como é impossível explicar em 140 caracteres, vou responder aqui no blog:

Primeiro faça o download do pacote que contém as imagens e códigos para os 4 menus: download.
Copie o código CSS (ver abaixo) para o menu escolhido: Blue, Green, Red ou Purple e cole em qualquer lugar antes de ]]></b:skin>

Hospede as duas imagens que são pedidas para cada menu. Por exemplo, se você escolheu o Red, hospede redslate_background e redslate_backgroundOVER e coloque assim no código:

.red #slatenav{position:relative;display:block;height:42px;font-size:11px;font-weight:bold;background:transparent url(aqui o link da primeira imagem/code/slate/images/redslate_background.gif) repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;text-transform:uppercase;}
.red #slatenav ul{margin:0px;padding:0;list-style-type:none;width:auto;}
.red #slatenav ul li{display:block;float:left;margin:0 1px 0 0;}
.red #slatenav ul li a{display:block;float:left;color:#FECCC3;text-decoration:none;padding:14px 22px 0 22px;height:28px;}
.red #slatenav ul li a:hover,.red #slatenav ul li a.current{color:#fff;background:transparent url(aqui o link da segunda imagem/code/slate/images/redslate_backgroundOVER.gif) no-repeat top center;}

Não mude nada entre os parenteses, apenas acrescente o link das imagens, como indicado.

Agora copie o trecho do HTML do código do menu :

<div class='red'>
<div id='slatenav'>
<ul>
<li><a class='current' href='http://seu link aqui' title=''>Home</a></li>
<li><a href='http://seu link aqui' title=''>About Us</a></li>
<li><a href='http://seu link aqui' title=''>Services</a></li>
<li><a href='http://seu link aqui' title=''>Our Work</a></li>
<li><a href='http://seu link aqui' title=''>Contact Us</a></li>
</ul>
</div>
</div>

e cole abaixo ou acima de:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title=' (Cabeçalho)' type='Header'/>
</b:section>
</div>

O meu ficou assim.

Espero ter ajudado.