Novidade: Expressões Lambda para a aplicação de regras em um template

A equipe do Blogger acabou de lançar um série de operadores que aplicam regras para uma grande maioria de dados, seja postagens, comentários e marcadores. Esse operadores são chamados de expressões Lambda (lambda expressions).

Um novo template!

Que bela maneira de passar o fim de semana. Fiquei na frente ao computador quase que o tempo inteiro para trocar o template e ainda tive que ter muita paciência, porque nesses últimos dias, o Blogger vem dando muitos erros do tipo BX, erro no formulário de comentários e as já conhecidas incompatibilidades com o IEca. Mas mesmo assim, desde que sentei para essa árdua missão, eu consegui minimizar a maioria dos problemas. A troca do template foi tranqüila, mas a recolocação e a customização dos widgets me deu uma baita dor de cabeça.

A troca do template surgiu quando eu estava procurando um template para o meu outro blog, o Palavras Depressivas, na Internet. Vou ser sincero, nenhum template me animava, e nem mesmo eu conseguia criar um template que fosse do meu gosto( por isso desisti dessa tarefa de construir um template "by myself").

E assim cheguei no Our Blogger Templates. O template Sunset era perfeito para um blog de poesias com um ar depressivo e desolador. A cor laranja exprime tudo isso, além da solidão e tristeza, creio eu.

Navegando pelo site, vi um outro template, o Profissional, que achei interessante, por possuir um monte de colunas. Não tive dúvidas, esse iria ser o tema deste blog. Foi um mês, aproximadamente, mexendo no template para colocar algumas funcionalidades que fui colecionando no template antigo(breadcrumbs, conditionals, páginas estáticas, posts relacionados, customização do blog archive, etc).

O legal dos templates lá fornecidos é que eles já vem com o hack "Leia Mais", a linkbar, e uma coisa que na maioria dos templates fornecidos não possui, a customização das cores e fontes direto das configurações do painel do Blogger.

A recolocação dos widgets foi um martírio, porque quase o dia inteiro de hoje, só dava erros BX, e foi um trabalho de paciência para acertar cada um deles.

Se vocês notaram, os posts estão sem padding e marging por causa do banner do Submarino que é maior do que a main wrap (eu tive que zerá-los para que o banner coubesse no lugar). Depois irei até o site para ver se há um outro banner horizontal menor para acertar isso. Mexer com os comprimentos de todas as colunas do template é algo que não quero fazer, pois além de ser trabalhoso, eu não irei ajustar algo por causa de uma única coisa.

Ok, missão cumprida! Espero que vocês tenham gostado da mudança. E mais um detalhe, vocês viram que mudei o nome do blog já há algum tempo? Só não mudei ainda para os feeds. Chronicles and Tales era um nome que já não mais combinava com o conteúdo do blog. Crazyseawolf's Blog é bem mais bonito!

Posts relacionados com imagens

Uma alternativa interessante e legal para quem não quer mexer em códigos do template, mas quer ter os posts relacionados em cada postagem é o widget do LinkWithin. Ele fornece um script que pode ser colocado aos elementos de páginas do Blogger.

Basta ir à página do site e fornecer o seu e-mail, a url do seu blog e a plataforma utilizada:

O script fornecido pode ser colocado tanto na sidebar quanto na coluna principal dos posts.
Caso você queira customizá-lo, é só entrar em contato que eles te atendem prontamente. Por exemplo. a frase "You might like these stories" pode ser mudada para outra do seu interesse.

O widget não tem nenhum anúncio, é grátis e se adapta perfeitamente com o design de seu template. E vocês podem vê-lo em ação no final do post.

Este post NÃO É patrocinado.

Colunas no rodapé usando comando divs

Vocês já notaram que eu estava fazendo um teste colocando 2 colunas no rodapé do blog de acordo com esse tutorial do Compulsivo, mas ele estava me causando muitos problemas, por causa da imagem de fundo, que no rodapé original tem cantos arredondados e eu não conseguia colocar uma imagem semelhante. tentei até pegar a imagem original e deixar do tamanho de cada coluna mas ela ficava com uns cortes totalmente estranhos, e muitas vezes não se ajustava aos elementos que eu tinha colocado. Ou seja, abandonei a idéia de colocar um rodapé diferente.

Navegando por vários blogs, especialmente o Bloggerbuster, encontrei uma maneira meio que parece uma gambiarra, mas que a princípio está funcionando, conforme vocês podem ver lá em baixo, no rodapé.

Nesse artigo, a Amanda ensina como fazer um arquivo de páginas em um post para deixar como um link na barra de menu horizontal acima no blog. Um detalhe que me interessou: na postagem ela dividiu o texto em duas colunas!

Minha cabeça começou a divagar... Bem, usando as divs eu poderia criar 3 ou 4 colunas manualmente. Então comecei a trabalhar: As divs são essas:

<div style="width: 45%; float: left;">Colocar aqui o conteúdo da coluna esquerda</div>

<div style="width: 45%; float: right;">Colocar aqui o conteúdo da coluna direita</div>

<div style="clear: both;"></div>

Como eu queria colocar três colunas, o código ficou assim:

<div style="width: 33%; float: left;">Colocar aqui o conteúdo da coluna esquerda</div>

<div style="width: 33%; float: right;">Colocar aqui o conteúdo da coluna central</div>

<div style="width: 33%; float: right;">Colocar aqui o conteúdo da coluna direita</div>

<div style="clear: both;"></div>

Não ficava legal uma porcentagem menor no tamanho. As colunas ficavam desajustadas, então percebi que o melhor seria mesmo dividir por três o tamanho total(100%). Outra coisa, não existe um float: center, pesquisei pela internet e realmente esse comando não existe, logo a solução é repetir o left(esquerda) ou o right(direita).

Eu queria colocar os posts recentes, comentários recentes, o comentaristas e informações do blog, e decidi então usar 4 colunas, cada uma com porcentagem de 25%, além disso, acrescentei os títulos para cada coluna usando a tag h2 e ajustei o código dessa maneira:

<div style="width: 25%; float: left;"><h2 class="Posts Recentes-title">Postagens Recentes</h2>Colocar aqui o conteúdo da coluna esquerda</div>

<div style="width: 25%; float: left;"><h2 class="Posts Recentes-title">Comentários Recentes</h2>Colocar aqui o conteúdo da coluna centro-esquerda</div>

<div style="width: 25%; float: right;"><h2 class="Informações-title">Informações</h2>Colocar aqui o conteúdo da coluna centro-direita</div>

<div style="width: 25%; float: right;"><h2 class="Top10 - Comentaristas-title">Top 10 - Comentaristas</h2>Colocar aqui o conteúdo da coluna direita</div>

<div style="clear: both;"></div>

O resultado pode ser visto abaixo no rodapé do blog. Não é algo estético mas dá para o gasto até eu conseguir fazer um template do meu gosto. O importante é que meu aprendizado em CSS continua bombando. Percebi que a coisa não é um bicho de sete cabeças. Como tudo na vida, o negócio é querer aprender e se concentrar. Como eu sou um auto didata, amo muito tudo isso... Ops, me deu vontade de ir ao McDonalds... Amanhã irei com toda certeza.

Um detalhe importante: Esse post foi feito totalmente no novo editor de textos do Blogger in Draft, que eu ainda não tinha usado porque não tinha principalmente  o justify e eu me sentia totalmente perdido, eu acabava sempre usando o editor antigo.

Até mais pessoal!!!

Personalizando o rodapé dos meus posts

Nesse domingo triste, na qual preferi não sair e ficar só, acabei fazendo uma personalização no rodapé do post, conforme vocês já devem ter visto. Motivado pelo post do Compulsivo, resolvi fazer uma inclusão no meu código.

No código disponibilizado pelo Compulsivo, ele muda completamente todo o rodapé, incluindo feed, um link diferente de comentários, e links para marcadores sociais.
A unica coisa que eu realmente queria do código, era apenas essa parte do feed, já que o resto eu tenho:

A minha curiosidade entrou em ação e logo percebi que essa parte do código estava em uma div, e para a formatação em CSS só bastaria pegar o # correspondente.

Logo entrei em ação:

- Como sempre fiz um backup do template, porque a Lei de Murphy é implacável! E marquei no Editar HTML, a caixa "Expandir modelos de widgets";

- Copiei essa parte(formatação em CSS) e colei antes do /Comments, apenas alterando a fonte para 90%:

#subscribe {width: 100%; font-size: 120%; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; margin: 1em 0 1em; background: #eee; padding: 5px;}

- Em seguida, copiei a div correspondente no código compulsivo(com a sua devida permissão):

<div id='subscribe'> <!-- Personalizar Mensagem no rodapé dos posts -->
Gostou deste artigo? Então <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' title='faça seu comentário'>deixe um comentário</a> e assine nosso <a expr:href='data:blog.homepageUrl + "feeds/posts/default"' title='RSS Feed'>RSS Feed</a>.
</div> <!-- fim subscribe -->

- Fiz algumas alterações, tais como colocar uma imagem do feed, alterei o texto para que somente houvesse apenas links dos meus feeds, e com os meus conhecimentos em HTML, o código ficou assim:

<div id='subscribe'> <!-- Personalizar Mensagem no rodapé dos posts --><table cellpadding='0' cellspacing='0' width='100%'><tr><td align='left' width='32'><img alt='RSS Feeds' src='http://i77.photobucket.com/albums/j76/j_rosario/feedicon48.png'/>
</td><td>Gostou deste artigo? Então, não se esqueça de comentar no link acima, votar nas estrelinhas e assinar nosso <a expr:href='data:blog.homepageUrl + "feeds/posts/default"' title='RSS Feed'>RSS Feed</a> ou então se preferir, <a href='http://www.feedburner.com/fb/a/emailverifySubmit?feedId=1041876&loc=pt_BR' title='receba por email'>cadastre-se para receber gratuitamente as postagens por email</a>.</td></tr></table>
</div> <!-- fim subscribe -->

- E colei imediatamente após essa linha do código do template:

<div class='post-footer-line post-footer-line-3'/>

Visualizei, salvei e deu tudo certo, conforme podem ver abaixo no rodapé!

A Juliana, do Dicas Blogger também postou um widget semelhante ao que fiz para colocar na barra lateral do blog. Confiram!!!

A imagem do feed eu peguei nesse site aproveitando a dica da própria Juliana!