Blog a La Carte | Tutoriais Blogger

Número de Comentários em balão no Título

2008-10-13T15:02:00.017-03:00

Este é um hack bem simples e que dá um efeito bonito ao seu template. Para colocar o número de comentários dentro de um balão próximo ao título do post, só precisamos criar uma class para o "numComments" e aplicar alguns estilos. A escolha da imagem para o background fica a seu critério. Existem vários sites que fornecem ícones de balões de comentários. Ou você pode criar sua imagem personalizada, não necessariamente um balão. Se você gostou da imagem do balão retangular que usei no exemplo, no final do artigo estou disponibilizando algumas outras cores para copiar.

A) Criando a "class" e colocando-a próxima ao título do post

Na Guia "Layout" vá para a aba "Editar HTML" e salve uma cópia de seu template original, clicando em "Baixar Modelo Completo";
Marque a caixinha "Expandir Modelos de Widget", procure o código do título do post e logo abaixo acrescente o que está em LARANJA:

<b:if cond='data:post.title'> <span class='numComments'> <b:if cond='data:post.allowComments'> <a expr:href='data:post.url + "#comments"'> <data:post.numComments/></a> </b:if> </span>

Visualize o template para ver se está tudo ok.

OBSERVAÇÃO: Com este código, quando seu leitor clica no número de comentários, é direcionado para o bloco de comentários, se você deseja que o link direcione para o formulário de comentários, use o código abaixo:


<b:if cond='data:post.title'>

<span class='numComments'>
          <b:if cond='data:post.allowComments'>
            <a expr:href='data:post.addCommentUrl'>
<data:post.numComments/></a>
          </b:if>
         </span>

B) Aplicando estilos à nova "class"

Os estilos abaixo servem para uma imagem semelhante à do exemplo que usei, com medidas de 50px por 50px. As medidas de "margin" deverão se adaptar ao seu template. Faça o upload da imagem para seu álbum do Picasa ou o host de imagens de sua preferência. Coloque esses estilos antes de:

/* Comments
----------------------------------------------- */

.numComments { background: transparent url(http://endereço da imagem) no-repeat top right; float:right; /* flutua o balão à direita */ text-align: center; margin: -10px 23px 20px 0px; /* coloque as medidas de acordo com seu template */ padding: 8px 0 0 0; /* padding para imagem de 50px por 50px */ font-size: 150%; /* fonte para imagem 50 x 50 */ width: 50px; /* largura da imagem */ height:50px; /* altura da imagem */ font-family: Georgia, Sans-serif; /* fonte para o número */ } .numComments a:link{ color: #f8f8f8; /* cor do número para link ativo */ } .numComments a:visited{ color: #ff6600; /* cor do número para link visitado */ text-decoration:none; } .numComments a:hover{ color: #ff6600; /* cor do número com mouse-sobre */ }

Visualize seu template e, estando tudo ok, salve.

Imagens de balões de comentários retangulares

Links úteis para Blogger

2008-10-10T17:28:00.007-03:00

Como mantenho contato com vários outros blogs do mesmo nicho do Blog a La Carte, ou seja, ajuda para blogueiros que usam o Blogger, sempre estou atenta às novidades postadas.

Trarei pra vocês artigos que acho interessantes, uns deles para blogueiros que estão começando, outros para mais experientes. Neste post vou mostrar alguns links de "mis compañeros que hablán español". Os blogs de ajuda de língua espanhola são extremamente unidos e sempre trocam novidades. Além disso são muito simpáticos e sempre responderam "prontamente" quando precisei tirar qualquer dúvida. Vamos a eles:

Random de imágenes como fondo del blog - GEMA BLOG

Já que falamos sobre backgrounds para o body do Blogger nesta semana, leiam também o artigo da Gem@ que fala sobre um fundo rotativo para o template - colocamos várias imagens no script e cada vez que o blog é atualizado mostra um background diferente.

Menu de pestañas invertidas - EL ESCAPARATE DE ROSA

Nesse artigo Rosa nos ensina a personalizar um bonito menu da Dynamic Drive, o mesmo que ela usa em sua página. Quem está pensando em colocar um menu no blog ou trocar o que tem, vale dar uma olhada. Fácinho, fácinho!

Seis técnicas para títulos usando CSS - Vagabundia

JMiur mostra técnicas para personalizar os títulos no Blogger. Algumas elementares e outras com truques bastante interessantes. Além do conteúdo, é uma delícia navegar pelo blog do JMiur de tão bonito que é o template.

Alterar Postagens Mais Antigas - Mais Recentes

2008-10-10T05:44:00.004-03:00

Títulos dos Posts na Navegação

Estive testando um hack que eu apanhei um bocado para descobrir como implementar. Depois de umas "trocentas" navegadas, pesquisadas, tira código daqui e coloca ali, cheguei onde eu queria - substituir os links "postagens mais antigas" / "postagens mais recentes", pelos títulos dos posts anterior e posterior.

Antes de tudo, uma observação: o hack usa URL dos posts, portanto se você coloca acentuação e caracteres especiais nos títulos dos posts, o texto não ficará bem configurado. Habitue-se a postar como a Ariane ensina no artigo do Templates Novo Blogger sobre títulos.

A) Alterar e Hospedar o Arquivo Java Script

Copie o código abaixo para um bloco de notas;
Altere onde está em LARANJA, colocando o endereço do seu blog;
Salve o arquivo com a extensão .js, por exemplo: top-pager.js ;
Hospede o arquivo no SkyDrive ou no host de sua preferência.

Código Java Script

// Item Pagination Rewrites function pItemPager() { topPager = document.getElementById('topPagerLinks'); if(document.getElementById('blog-pager-newer-link')){ piNewer = document.getElementById('blog-pager-newer-link').getElementsByTagName('a'); piNTitle = '◄◄ '+piNewer[0].href.split('/')[5].replace(/-/g,' ').replace(/.html/g,''); piNewer[0].innerHTML = piNTitle; a = document.createElement('a'); a.href = piNewer[0].href; a.innerHTML = piNTitle; a.id = 'top-pager-newer-link'; a.title = piNewer[0].title; topPager.appendChild(a); } else { a = document.createElement('a'); a.innerHTML = ' '; a.id = 'top-pager-newer-link'; topPager.appendChild(a); } if(document.getElementById('blog-pager-older-link')){ piOlder = document.getElementById('blog-pager-older-link').getElementsByTagName('a'); piOTitle = piOlder[0].href.split('/')[5].replace(/-/g,' ').replace(/.html/g,'')+' ►►'; piOlder[0].innerHTML = piOTitle; a = document.createElement('a'); a.href = piOlder[0].href; a.innerHTML = piOTitle; a.id = 'top-pager-older-link'; a.title = piOlder[0].title; topPager.appendChild(a); } else { a = document.createElement('a'); a.innerHTML = ' '; a.id = 'top-pager-older-link'; topPager.appendChild(a); } a = document.createElement('a'); atxt = document.createTextNode('Home'); a.href= 'http://blogalacarte.blogspot.com/index.html'; a.appendChild(atxt); topPager.appendChild(a); }

B) Colocar a chamada do arquivo JS no template

Na Guia "Layout" em "Editar HTML", salve uma cópia de seu template original, clicando em "Baixar Modelo Completo";
Marque a caixinha "Expandir Modelos de Widget";
Coloque o código abaixo ANTES da tag </head>
Substitua onde está em LARANJA pelo endereço do arquivo Java Script que você hospedou.


<script src='http://endereço-do-seu-arquivo/top-pager.js' type='text/javascript'/>

C)Modificar o link "Postagem Mais Antigas", "Postagens Mais Recentes"

Procure o seguinte trecho em seu template:

<b:widget id='Blog1' locked='false' title='Postagens no blog' type='Blog'> <b:includable id='nextprev'> <div class='blog-pager' id='blog-pager'>

No final de todo o código do "blog-pager", coloque o trecho em LARANJA conforme abaixo:

<b:if cond='data:newerPageUrl'> <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a> </b:if> </b:if> <script type='text/javascript'>pItemPager()</script> </div> <div class='clear'/> </b:includable>

D) Colocar uma "cópia" do link no topo do Post

Se você deseja que os links se repitam no topo do post, acrescente o código conforme segue:

Localize o seguinte trecho (ou semelhante) no seu template:

<b:includable id='main' var='top'>  <div class='blog-posts hfeed'> <b:include data='top' name='status-message'/>

Você deverá colocar o código ACIMA do código da "status-message", como no exemplo (acrescentar o que está em LARANJA):

<b:includable id='main' var='top'>  <div class='blog-posts hfeed'> <b:if cond='data:blog.pageType == "item"'> <div id='topPagerLinks'/></b:if> <div style='clear:both;'/> <b:include data='top' name='status-message'/>

Visualize seu template e estando tudo ok, salve.

Esses são os passos necessários para colocar o hack.
Você não verá os links na visualização porque eles só aparecem nas páginas internas dos posts e não na página inicial (of course!! :D)

Vou passar a seguir um exemplo de estilo para colocar na CSS. Você deve adequar esses estilos de acordo com as margens/medidas e cores do seu template.

E) Alterando a CSS e acrescentando estilos para o "topPagerLink"

Procure em seu template os estilos do "blog-pager". Em geral eles estão assim:

#blog-pager-newer-link { float: $startSide; } #blog-pager-older-link { float: $endSide; } #blog-pager { text-align: center; }

Substitua todo o trecho pelos estilos abaixo, modificando conforme seu template:

#blog-pager-newer-link, #top-pager-newer-link { float: left; width:230px; text-align:left;} #blog-pager-older-link, #top-pager-older-link { float: right; width:230px; text-align:right;} #blog-pager, #topPagerLinks { margin:5px 0 10px 0; text-align: center; font-size:88%; letter-spacing:-0.05em;} #blog-pager a { color: #ccc; text-decoration:none;} #topPagerLinks a { color: #666; text-decoration:none;} #blog-pager a:hover, #topPagerLinks a:hover { color: #3D81EE; text-decoration:none;} #topPagerLinks { padding:0; margin:5px 0 0;}

Para que você entenda como colocar os estilos de acordo com seu template:

"blog-pager" são os links que ficam abaixo do post;
"top-pager" são aqueles que ficam no topo do post;
"newer-link" são os links das "postagens mais recentes";
"older-link" os das "postagens mais antigas";
os "blog-pager" e "topPagerLinks" são da página inicial "Home";
"a" é para o link ativo e
"a:hover" para o link quando passa o mouse.

OBSERVAÇÕES: Achei esse hack no Blogger au bout du doig (um excelente blog se meu francês fosse melhorzinho :( ).

No entanto, o hack não dava certo e eu tentei ir no blog do (que me parece ser) criador do hack Phydeaux3. Mas o sr. Phydeaux não é dos mais generosos e não disponibiliza o hack. :@

Mas não tem problema não - o pontapé inicial do africano do Congo, ainda que em francês, serviu pelo menos para eu pegar o arquivo JavaScript e depois foi questão de ir "ajustando" os locais onde colocar os códigos, que não dava certo!!

Espero que vocês gostem.

Technorati: Hacks Blogger
Technorati: Navegação Blogger

Blockquotes com imagens

2008-10-09T20:36:00.020-03:00

No primeiro artigo sobre as blockquotes aprendemos como personaliza-las sem a utilização de imagens. Veremos agora uma maneira bem simples de alterar o código usando imagem.

A grande maioria dos tutoriais e das blockquotes com imagem que encontramos, utiliza apenas uma imagem no início da citação. Vou mostrar aqui como colocar uma imagem no início e outra no final.

No Laboratório do Blogger, tem uma dica de como fazer uma bonita personalização de sua blockquote com apenas uma imagem, traduzida do excelente BlogU da Annie, para quem preferir.

A) Faça o upload da imagem

Em seu editor de imagens crie uma imagem com o tipo de aspas que você preferir. Faça o upload no Picasa ou no seu site preferido de hospedagem. Lembre-se que precisaremos de uma imagem para a direita e outra para a esquerda.

Quem gostar da imagem que usei para o exemplo do tutorial, coloquei no final do artigo algumas opções de cores para copiar. Essas são as imagens da direita. Para fazer as da esquerda, inverta a imagem na horizontal.

B) Alterar a CSS no template

Na Guia "Layout", em "Editar HTML", salve uma cópia de seu template original, clicando em "Baixar Modelo Completo";
Não é necessário marcar a caixinha "Expandir Modelos de Widgets";
Procure na parte de estilos de seu template se existe o código para "post-blockquote", ou algo parecido com isso;
Altere o código, substituindo-o pelo seguinte:

.post-body blockquote {
margin: 0;
padding: 0 0 0 10px;
background: transparent url(http://imagem-da-esquerda.png) 0% 8% no-repeat;
}
.post-body blockquote div {
margin: 0;
text-align: left;
font-family: Georgia;
font-style: italic;
font-size: 100%;
font-weight: bold;
padding: 0 58px;
background: transparent url(http://imagem-da-direita.png) bottom right no-repeat;
}

Substitua onde está em LARANJA pelos endereços das suas imagens
Visualize o template e se estiver tudo ok, salve.

OBSERVAÇÃO: As medidas descritas no código acima são adequadas para imagens com tamanho igual as que disponibilizei aqui. Se forem usadas imagens de tamanho diferente, as medidas devem ser ajustadas.

C) Configurando a postagem

Quem preferir deixar o post já configurado, para não precisar editar em HTML, siga estes passos:

Na Guia "Configurações", clique em "Formatação"

Role até o fim da página e acrescente o código abaixo no box de "Modelo de Postagem":

<blockquote><div> "DIGITE AQUI O TEXTO DE SUA CITAÇÃO" </div></blockquote>

Salve as alterações

Quando você usar citações em seu post, basta digitá-las por cima do texto "DIGITE AQUI O TEXTO DE SUA CITAÇÃO". Se você não usar citações, delete esse texto de seu post.

D) Editando o post em "Editar HTML"

Quem está mais habituado a digitar usando a caixa de postagem em "Editar HTML", não precisa seguir os passos do item "C". Na caixa de postagem, ao digitar a citação, use o código:


<blockquote cite="http://link-da-citação"><div>
TEXTO
DA
CITAÇÃO
</div></blockquote>

Substitua o texto em LARANJA pelo link de sua citação.

Para baixar as imagens, clique com o botão direito do mouse.

Créditos imagem do artigo
Site: About.com - Tattoo/Body Piercings
Tattoo da Artista Liz Brady, com Citações de Charles Dickens.

Technorati: Blockquotes
Technorati: CSS

Perfil do blogueiro brasileiro - Pesquisa

2008-10-08T13:44:00.006-03:00

O Blog Receita do Sucesso do jornalista blogueiro Pedro Cardoso, com o auxílio da estatística blogueira Tine Araújo do Blog Eu, Eu Mesma e Tine, estão realizando uma pesquisa para analisar o perfil do blogueiro brasileiro. Confiram nos respectivos sites as informações a respeito dessa iniciativa, quais os objetivos do projeto, opiniões, considerações, etc. Apressem-se porque a pesquisa termina no dia 22 deste mês.

Li alguns comentários por lá e gostaria de aproveitar para incluir minha opinião a respeito do "fatalismo" de algumas pessoas. Concordo plenamente que a exposição exagerada na net (divulgar endereço, local de trabalho, exibir fotos dos bens que possui, etc) pode ser perigosa. No entanto, me parece que hoje está existindo o exagero oposto, onde ninguém é ninguém - não tem nome, rosto, profissão, etc.

Sinto muito mais prazer em evoluir um contato com alguém que pelo menos eu sei onde vive!

Aplaudo a iniciativa desses colegas e faço questão de divulgar o projeto, que eu tenho certeza exigirá dedicação, muito trabalho e tempo, que provavelmente eles nem dispõe. E os beneficiários dos resultados seremos todos nós.

Por esse motivo, quando leio determinadas críticas tenho tendência a imaginar que o crítico falou com seus botões: - "Porque não pensei nisso primeiro?"

#prontofalei

Visitem os sites, leiam com atenção os posts a respeito do assunto e respondam a pesquisa. Não há nenhuma pergunta "perigosa". Tenho quase certeza que as conversas de elevador oferecem mais riscos.

Technorati: blogsofera

Alec Baldwin nos tempos de tanquinho

2008-10-08T08:01:00.001-03:00

Apesar de ele estar virando uma "Brastemp", não tem como não suspirar ao relembrar as fotos do tanquinho do homem mais charmoso do clã de homens mais deliciosos de Hollywood (ô família de homem bonito.. afff...)

Hãn?!? O que?!? Vocês não entenderam nada? O que o Baldwin está fazendo no Blog a La Carte?

Esta é uma brincadeira que resolvi fazer com o Bauru do Encontros Fortuitos.

Ele escreveu um artigo sobre a proliferação de posts a respeito das fotos das paniquetes na revista Sexy.

Realmente é bem interessante o quanto existe de procura por sites com mulheres semi-vestidas (não vou escrever semi-aquela outra coisa.. vai que cai na busca e venham procurar as paniquetes aqui!! :-o)

Decidi então que vou postar um "gatão" semi-vestido, um dia por semana e acompanhar a repercussão.

Será que as meninas (talvez alguns meninos...) também procuram na net os belos representantes do sexo masculino?

Será que os rapazes que visitam o Blog a La Carte sairão correndo ao ver o peito peludão do Baldwin?

Bem enquanto me divirto com essa pesquisa (quem sabe eu ganho o pirulito que o Bauru prometeu?) segue mais uma foto do Baldwin mais famoso. Como sou fã da família toda, breve colocarei fotos dos irmãos.

E depois da pesquisa vou ver se acho um psicólogo, sexólogo, antropólogo ou algum ólogo desses que entenda do assunto para analisar e explicar porque os homens procuram tanto fotos de mulheres semi-vestidas na net...

(Agora só aqui no cochicho entre as meninas: ser casada com SÓ UM dos Baldwin deve ser uma tortura diária, não acham?)

Alec Baldwin

Imagens em Background no Body - 2ª parte

2008-10-07T19:30:00.003-03:00

Neste segundo artigo sobre colocar imagens no fundo do template, veremos inicialmente a propriedade background-attachment, que informa ao navegador se a imagem deve ou não rolar junto com a tela; a propriedade background-position, que permite que indiquemos onde queremos que a imagem se localize e a propriedade background-repeat-y, para que a imagem se repita apenas na vertical.

Leiam também o primeiro artigo sobre imagens no background e o artigo sobre noções gerais das propriedades background

Imagem fixa na tela - propriedade background attachment

Todas as imagens do artigo anterior "rolavam com a tela". Esse é o "default" para a propriedade background-attachment. O Rodrigo do blog Zakos Games quer colocar esta imagem no background do seu template. Quando usamos imagens desse tipo, a propriedade "background-attachment: fixed;" resolve o problema de fixar a imagem na tela. Assim, apenas as colunas do blog se movem (rolam para baixo) e a imagem toma todo o fundo do template. Para isso, não podemos repetir a imagem e aplicamos a propriedade "fixed":

body {
background:#000 url(http://i156.photobucket.com/albums/t26/acemicha/devil_may_cry3.jpg) no-repeat fixed;
margin:0;
/* restante dos estilos do body */
}

Vejam no código que coloquei o "no-repeat" para que a imagem não se repita e o "fixed" que é a propriedade background-attachment que mantém a imagem fixa na tela.

É importante saber que nesse tipo de imagem, as cores do template precisam ser muito bem pensadas. Se colocarmos cor de fundo nas colunas, esse fundo irá cobrir a imagem, portanto o ideal é usar fundos transparentes nas colunas. Também a cor do texto é importante. É muito difícil trabalhar as cores de textos com essas imagens no fundo, pois tanto cores escuras como cores claras podem ser bem visualizadas em uma posição da imagem e serem de difícil leitura em outra posição.

Eu apliquei a imagem no background de um blog de testes para que vocês possam ver como ela se fixa, mas não mexi muito nas colunas. Nesse template, por exemplo, o ideal seria evitarmos o lado esquerdo do blog para textos. A imagem no lado esquerdo tem cores que variam do escuro para o claro e fica difícil acertarmos uma cor de texto que fique sempre visivel. A coluna de posts poderia ficar à direita onde as cores não tem tanta variação.

DEMO

Posicionamento das imagens no background - propriedade background-position

Por "default" as imagens são sempre colocadas no topo e no lado esquerdo (top left).

Se você quer posicionar sua imagem em outro local, precisa aplicar a propriedade background-position para informar isso ao navegador.

Vamos usar a imagem da rosa para verificarmos como usar o posicionamento.

Relembrando o artigo Cores e Imagens como Background, para posicionar a imagem:

Valores:
top left;
top center;
top right;
center left;
center center;
center right;
bottom left;
bottom center;
bottom right.

Sempre que se estipular o primeiro valor e não estipular o segundo, por "default" o segundo valor será "center".

Aplicando "center left" no background-position, sem repetir e fixa, a imagem ficará posicionada à esquerda e no centro.

body {
background:$bgcolor url(http://lh4.ggpht.com/rozanchetta/SJnqMJW6_II/AAAAAAAAAs0/h4M_rdZsWuY/rosa-vermelha.jpg) no-repeat fixed center left;
margin:0;
/* restante dos estilos do body */
}

Para ter um posicionamento mais definido, em vez de usar os valores de posição, podemos usar valores em pixels ou em percentual. Em percentual o "left top" é 0% 0% e o "right bottom" é 100% 100%. O primeiro valor é a posição horizontal (x) e o segundo é a posição vertical (y). Se colocarmos apenas o primeiro valor, o segundo será 50% por "default". Em pixels, o raciocínio é o mesmo: primeiro valor é horizontal (x) e segundo valor é vertical (y).

Neste exemplo eu não usei o "fixed" para que a imagem role com a tela e vocês possam ver onde ela se posiciona. Notem que eu coloquei a imagem "saindo fora do template". Usei valores negativos e valores acima de 100% o que não poderia ser feito se eu colocasse os valores de posição left bottom:

body {
background:$bgcolor url(http://lh4.ggpht.com/rozanchetta/SJnqMJW6_II/AAAAAAAAAs0/h4M_rdZsWuY/rosa-vermelha.jpg) no-repeat -5% 105%;
margin:0;
/* restante dos estilos do body */
}

E vejamos um exemplo posicionando a imagem com pixels, que dá ainda mais controle do posicionamento:

body {
background:$bgcolor url(http://lh4.ggpht.com/rozanchetta/SJnqMJW6_II/AAAAAAAAAs0/h4M_rdZsWuY/rosa-vermelha.jpg) no-repeat 500px 392px;
margin:0;
/* restante dos estilos do body */
}

Lembrem-se que o primeiro valor é o horizontal (x) ou seja: esquerda, centro, direita; e o segundo valor é o vertical (y): topo, centro, "bottom" (não tem palavra em português pra bottom, não?).

Propriedade background-repeat-y - Imagem a repetir na vertical

Deixei esta propriedade por último porque vamos misturar todas as outras propriedades neste exemplo. Vou colocar o código com as propriedades "por extenso" e depois o código "resumido". Vejam:

Código com propriedade background para o body "por extenso"

body {
background-color:#ffffff;
background-image: url(http://lh4.ggpht.com/rozanchetta/SJnqMJW6_II/AAAAAAAAAs0/h4M_rdZsWuY/rosa-vermelha.jpg);
background-repeat: repeat-y;
background-attachment: fixed;
background-position: -8% 30px;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Código com propriedade background para o body "resumido"

body {
background:#ffffff url(http://lh4.ggpht.com/rozanchetta/SJnqMJW6_II/AAAAAAAAAs0/h4M_rdZsWuY/rosa-vermelha.jpg) repeat-y fixed -8% 30px;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

O resultado pode ser visto na imagem:

Gradiende com propriedade repeat-y

Quando precisamos colocar uma imagem com linear da esquerda para a direita, o procedimento é semelhante ao linear do topo para o bottom. A diferença é que a imagem precisa ser bastante larga (dependendo do quanto você deseja de gradiende) e não necessita de muita altura (quanto menor, melhor a velocidade de carregamento). Da mesma forma que no linear de cima para baixo, precisamos colocar como cor de background a última cor (da direita) da nossa imagem, para que o gradiende se repita em qualquer tamanho de tela (veja na imagem acima um screenshot em wide screen - 1600 px de largura).

Usei uma imagem com linear em verde mais escuro à esquerda clareando em direção à direita com 1024px de largura e 15px de altura.

Para a repetição da cor na vertical, usei a propriedade background-repeat-y e coloquei o verde claro como cor de background:

body {
background: #66ff00 url(http://i37.tinypic.com/xvmzq.jpg) repeat-y;
margin:0;
/* restante dos estilos do body */
}

Acredito que com esses dois tutoriais a respeito de imagens no background do body consegui cobrir a maioria das dúvidas que me enviam.

Se ainda faltou alguma coisa (sempre falta... ;-)), fiquem à vontade para perguntar nos comentários ou pelo formulário de contato.

Technorati: Background
Technorati: CSS

Imagens em Background no Body

2008-10-06T17:06:00.000-03:00

Outra solicitação freqüente quanto à colocação de estilos no template, refere-se à maneira de colocar imagens no background do body. Recebo diversos pedidos de leitores que perguntam onde devem colocar, como repetir ou não repetir a imagem, fixar em um determinado local, etc. No post "Cores e Imagens como Background" dei uma noção geral sobre o assunto, mas acredito que ainda restam dúvidas especificamente sobre o body.

Vou focar este artigo então em como customizar o fundo do template.

Onde devem ser colocados os estilos para o fundo (background) do template?

O primeiro passo é localizar o "body". Na Guia "Layout" vá para a aba "Editar HTML". Salve uma cópia de seu template original, clicando em "Baixar Modelo Completo". Não é necessário marcar a caixinha "Expandir Modelos de Widget".

O body se localiza logo abaixo das Váriaveis. Veja figura:

Na figura acima vemos que no background do body a cor deverá ser a que está estipulada nas Variáveis como "bgcolor". Sempre que um estilo estiver com o sinal $ na frente, quer dizer que ele está nas Variáveis e pode ser alterado na aba de "Fontes e Cores".

Relembrando as propriedades de background:
background-color;
background-image;
background-repeat;
background-attachment e
background-position.

Não há necessidade de escrevermos cada propriedade. A formação da linha de estilo pode ser feita da seguinte maneira:
body {
background: #cor url(http://endereço da imagem) repetição fixação posição;
/* restante dos estilos */
}

Imagem a repetir na horizontal e na vertical

Normalmente são usadas pequenas imagens para essa finalidade. Veja o exemplo:

Esta era uma imagem de fundo de tela que eu recortei no menor tamanho possível, respeitando o padrão. Quanto menores forem as imagens, melhor para a velocidade de carregamento do seu blog. Como eu mantive o padrão da figura - corações alternados e borda vertical entre eles - posso repetir a imagem na vertical e horizontal do blog e a impressão é de uma imagem grande.

Quando você quiser que a imagem se repita na vertical e horizontal, não é necessário colocar a propriedade, pois esse é o padrão. Neste caso, não há necessidade de colocar cor no background, pois a imagem irá cobrir todo o fundo do template.

body {
background: transparent url(http://i289.photobucket.com/albums
/ll212/rozanchetta/backgrounds/bgheart-2.png) top left;
margin:0;
/* restante dos estilos */
}

Imagem que não se repete, com cor de fundo

Quando você tem uma imagem grande que já possui uma cor de fundo e quer coloca-la sem repetição, é necessário colocar a mesma cor do fundo da imagem no background do body. Utilize a paleta de cores do seu editor de imagem para encontrar o código hexadecimal (aquele que vem com o sinal # na frente) da cor de fundo da imagem.

Fiz esta imagem no Fireworks para ser usada no canto esquerdo do blog. Desta vez precisamos usar a propriedade "no-repeat".

Observem que antes da URL da imagem, coloquei o código para a cor:

body {
background: #E09D9D url(http://i289.photobucket.com/albums/ll212/rozanchetta/backgrounds/bgheart-1.png) no-repeat top left;
margin:0;
/* restante dos estilos */
}

Imagem com "gradiende" na horizontal - repeat-x

Para economizar "espaço" esta imagem é bastante estreita, pois se repetirá na horizontal. Quando queremos aplicar um efeito de cores linear que se inicia com uma cor escura no topo e segue clareando em direção ao "bottom" do blog, usamos uma imagem com pouca largura.

A altura dependerá do quanto você deseja aplicar de efeito linear. Esta imagem tem 12px de largura por 950px de altura. Poderia ser ainda mais estreita, mas eu não teria como exibi-la aqui no post.

Se eu desejasse que a cor clara iniciasse mais no meio do template, a imagem poderia ter menos altura.

body {
background: #00ccff url(http://i289.photobucket.com/albums/ll212/rozanchetta/backgrounds/bgblue-2.png) repeat-x top left;
margin:0;
/* restante dos estilos */
}

Agora uma observação importante:

No caso desse efeito (gradiende de cima para baixo) só podemos repetir a imagem na horizontal (repeat-x). Se colocarmos a propriedade para repetir na vertical também (repeat-y), a cor escura será aplicada logo que a altura da imagem termine. Não temos como controlar a "altura" do body (mesmo que tenhamos apenas 1 post por página, como controlar o tamanho do post?)

Pelo mesmo motivo, precisamos colocar uma cor para o background do body, e essa cor deverá ser a mesma cor da última cor (a de baixo) usada na imagem linear. Vejam lá no código que coloquei uma cor antes da URL da imagem.

Ainda temos mais alguns estilos para aprender: como fazer com que a imagem não role (background-attachment), como posicionar imagem (background-position) e a repetição na vertical (repeat-y). Vou deixar para um próximo post para que este não fique muito longo, mas peço que enquanto isso leiam o artigo anterior sobre Imagens e Cores pra ficar mais fácil de entender.

Technorati: CSS
Technorati: Background

Links das Pipes - abrir na mesma página

2008-10-03T20:19:00.004-03:00

Tentei várias maneiras, através da CSS e através da chamada do script do Yahoo Pipes, fazer com que os links abrissem na mesma aba/janela do Blog. A Ariane me ensinou que o contrário de target="_blank" é target="_self", então decidi alterar o próprio script do Yahoo para conseguir essa função.

Vou então disponibilizar o arquivo para quem quiser usa-lo e ensinar como mudar a chamada do script.

Copie todo o arquivo do link abaixo em um bloco de notas e salve com o nome listbadge.js

listbadge

Faça o upload do arquivo para o skydrive ou o host de sua preferência.

As pipes do Yahoo tem o script como no exemplo:

<script src="http://pipes.yahoo.com/js/listbadge.js">{"pipe_id":"02410b06319e38176cf12ecab35fd1b7","_btype":"list","pipe_params":{"urlinput1":"http:\/\/blogalacarte.blogspot.com","textinput1":"Yahoo Pipes","numberinput1":"10"},"hideHeader":true}</script>

Substitua o que está em LARANJA pelo novo endereço de Script, deixando o código como no exemplo:

<script src="http://vqkgow.blu.livefilestore.com/y1plll1Od1KQFzCuoHOvnU4-rk8mLzwpEYNhIBEkTy2pElAa8F6xyc5eIZteNwuXk7oqWf2OtPzqmI/listbadge.js">{"pipe_id":"02410b06319e38176cf12ecab35fd1b7","_btype":"list","pipe_params":{"urlinput1":"http:\/\/blogalacarte.blogspot.com","textinput1":"Yahoo Pipes","numberinput1":"10"},"hideHeader":true}</script>

É importante que você mantenha o nome do arquivo como listbadge!

Technorati: Yahoo Pipes

Wowzio - Configurar os Widgets

2008-10-02T14:28:00.025-03:00

Tem surgido dúvidas de como configurar os Widgets do Wowzio, então veremos o que é possível fazer nas opções do site e aproveitamos e damos uma "desmembrada" no script para entender o que significa cada trecho dele. Dessa forma fica possível acrescentar estilos que não são possíveis de configurar no site.

Criar o Widget

Acesse o site e clique em qualquer exemplo para criar seu Widget.

Coloque o nome de seu blog no box e clique em "Continue".

Cheque se os posts que aparecem correspondem ao seu feed. Se tudo estiver Ok, clique em "Looks Great, Create My Widgets".

Escolha o Widget que você quer colocar em seu blog e clique em "Customize This".

Passaremos agora à parte de customização.

Retirar a borda padrão do Widget

Essa é simples. Basta desmarcar a caixinha "Show Border".

Configurar tamanho do Widget

Clique na setinha para baixo no botão "Auto-Fit".

Uma pequena janela vai se abrir. Nessa janela, as opções são:

1) Manter o auto-fit, ou seja, o site irá ajustar um tamanho que considere ideal para o Widget;

2) Small, Medium e Large para Widgets pequenos, médios ou grandes;

3) Custom Size, que dá a possibilidade de customização.

Clicando em "Custom Size", você é direcionado para outra página onde pode colocar as medidas de Largura (Width) e Altura (Height) em px que melhor se adaptem à sua Sidebar. Depois de colocar as medidas, clique em "Apply New Size".

Personalizar as Cores

A maioria dos Widgets permite a customização de cores. Alguns só tem opção de personalizar o background, outros possuem diversas opções. Escolhi para exemplo o Widget de Visitantes que tem várias opções para poder explica-las.

Em "Preset Colors", você pode escolher algumas das opções disponíveis que oferecem texturas e cores pré-determinadas, ou clicar em "Custom Colors" e escolher as cores que desejar.

Ao optar por escolher as cores, no "Header Background", você ainda tem a opção de aplicar textura ou cor ao background do título.

Em todos os ítens do Widget, as cores podem ser escolhidas digitando o código hexadecimal no box ou clicando na seta que irá abrir uma janelinha com um "mixer" de cores. À medida que você altera as cores, consegue visualizar as alterações no "preview" do widget.

Os ítens são:
Widget Title Color = Cor da Fonte do Título do Widget.
Article Link Color = Cor do Link. O Link nos Widgets em geral é o título do Post do seu Blog. Na Nuvem de Tags, são as tags na nuvem e os títulos dos Posts na janela seguinte.
Text Color = Cor do Texto. No Widget de Visitantes, é o texto que mostra as visitas. No Widget de Nuvem de Tags é o resumo dos posts da segunda janela.
Background Color = Cor de Fundo do Widget (exceto o título).
Article Summary Color = Cor do Resumo do Post no Widget de Feed.

Outras Customizações

Movimento e Velocidade

Nos Widgets com movimento, se você marcar o ítem "auto-play", a troca de telas será automática de acordo com a velocidade que você escolher, clicando na setinha do botão ao lado de "Play Speed":
Extra Slow = bem demorada, troca a cada 12 segundos;
Slow = demorada, troca a cada 10 segundo;
Medium = velocidade média, troca a cada 8 segundos;
Medium Fast = média-rápida, troca a cada 6 segundos;
Fast = rápida, troca a cada 4 segundos.

Se você deixar a caixa desmarcada, o leitor precisará clicar nas setas de avançar ou voltar para trocar a tela.

Alterar Título do Widget

Alguns Widgets contém um título no topo. Digite no box "Title", o título que deseja para o seu Widget.

Widget de Visitantes

Marque ou desmarque as caixinhas para escolher:
Live updates = marcando a caixa, o widget atualizará em tempo real os visitantes que chegam ao blog;
Include Image = marque a caixa para mostrar uma das imagens de seu post, ou desmarque para mostrar apenas o texto;
Include Referrer = com a caixa marcada, mostra de qual site partiu o visitante.

Galeria de Fotos

Neste widget você pode escolher quantas linhas e colunas apresentar. Clicando em "Layout" você escolhe os layouts pré-deteminados

ou pode clicar em "Custom Layout" e optar por digitar quantas linhas / horizontal (rows) e quantas colunas / vetical (cols) deseja exibir. Depois de digitar, clique em "Apply Layout".

Widget de Feed

Neste Widget você pode optar por mostrar o resumo do post marcando a caixinha "Show Snippets" e mostrar uma das imagens do post marcando "Show Images". Se deixar as caixas desmarcadas, será exibido apenas o título do post e o período em que foi postado.

Finalizando o Widget

Depois de criar e customizar seu Widget, você pode clicar em Add to Blogger e o Widget será adicionado como um gadget em seu Blog. Ou pode copiar o script e colar em um elemento de página HTML/Java Script.

Escolhi o widget de Feed (Artigos Recentes) para analisarmos os Script. Um dos Termos de Uso do Wowzio é que o código não seja modificado. Isso provavelmente se refere ao backlink do Widget para o site do Wowzio e as referências ao site existentes no código. Mas podemos por exemplo acrescentar uma borda em torno do Widget que combine com as cores do template. Em VERMELHO, você pode verificar as medidas do Widget, largura e altura, e em AZUL, as configurações escolhidas de cores, imagens, movimento, etc. Em LARANJA estão alguns estilos que acrescentei ao Widget - uma borda e a centralização:

<center> <div id='wow_wwrap0cc2' rel='content' style='border: 2px solid #ffffff;'><script type='text/javascript' src='http://www.wowzio.com/widgets/jscript?wtype=content&w=200&h=450&ti=Artigos%20Recentes&tc=FFFFFF&hc=FFFFFF&bc=696846&txc=555555&lc=FFFAFA&ni=50&tx=CRACKED_ROCKS&sc=C1BFCE&ap=yes&ii=yes&is=yes&ps=10&sb=yes&sv=2&ef=fade&ids=21745'></script><div id='wow_sign0cc2'><a id='wow_sr0cc2' href='http://www.wowzio.com' title='Feed Blog Widgets'>Wowzio</a><div id='wow_sl0cc2'><a class='wow_bl bl_f' id='gwl_0cc2' href='http://www.wowzio.com/widgets/designer?ids=21745&wtype=content' title='grab/edit this widget'>grab widget</a> • <a class='wow_bl' href='http://www.wowzio.com/widgets/seewidgets?ids=21745' title='widgets for "Blog a La Carte | Tutoriais Blogger"'>see more</a><div class='wowclear'></div></div></div></div></center>

Technorati: Widgets

Posts Recentes na Página Inicial

2008-09-30T18:59:00.008-03:00

Uma das coisas que nunca gostei quanto à idéia de usar o gadget de feed para mostrar os 5 posts mais recentes e colocar o gadget na página inicial do blog é que me parecia redundante. Em geral, uma grande parte dos editores mantém de 3 a 5 posts na página inicial, portanto o gadget não me parecia útil.

Mantive a badget de Artigos Recentes do Yahoo Pipes durante algum tempo na página inicial do Blog a La Carte para demonstração, mas logo transferi para as páginas internas. Um pedido do Compulsivo me deu uma idéia para uma nova alternativa.

Construí uma nova Pipe em que o usuário insere a quantidade de posts que possui na página inicial e o número que deseja exibir no Widget. A Pipe localiza o ítem imediatamente posterior ao último artigo da página inicial e mostra os ítens a partir desse.

Para colocar esse Widget em seu Blog:

Adicione um elemento de página (gadget) HTML/JavScript;

Copie o código abaixo:

<style> .myClass {width:100%;font-size:90%;background-color:transparent} .myClass .pipesImgdescription {margin-left:8px;} .myClass .ybf,.myClass .yba, .myClass .ybad, .myClass .ybaa, .myClass .ybas, .myClass .gt, .myClass .gts{display:none;visibility: hidden} </style> <div class="myClass"> <script src="http://vqkgow.blu.livefilestore.com/y1plll1Od1KQFzCuoHOvnU4-rk8mLzwpEYNhIBEkTy2pElAa8F6xyc5eIZteNwuXk7oqWf2OtPzqmI/listbadge.js">{"pipe_id":"dff4d2ce00328efaa157a82754c44a5d","_btype":"list","evenBackgroundColor":"transparent","oddBackgroundColor":"transparent","pipe_params":{"blogurl":"http://nomedoseublog.blogspot.com","numposts":"5","postsmainpage":"5"},"hideHeader":true}</script> <span style="float:left;>Widgets <a href="http://blogalacarte.blogspot.com/2008/09/posts-recentes-na-pgina-inicial.html">Blog a La Carte</a> </div>

Susbtitua os trechos:
em LARANJA - endereço de seu blog;
em AZUL - número de posts que você deseja exibir no Widget;
em VERDE - quantidade de posts em sua página inicial.

DEMO

Technorati: Yahoo Pipes

Colocando os assuntos em dia

2008-09-29T22:42:00.003-03:00

Estou em dívida com alguns de vocês!

Uma forte gripe me pegou alguns dias atrás e me forçou a ficar um pouco em descanso (segundo o médico, ficar no computador não significa "descanso"). O pouco tempo que disponibilizei para trabalhar no pc, usei para acertar as pipes do Yahoo cujos links estavam abrindo páginas de feed de comentários.

Já passei a fase forte do vírus e a partir de amanhã voltarei aos poucos à ativa.

Darei prioridade às respostas aos comentários e emails, publicação de alguns posts que estão semi-prontos e por fim algumas ajudas que estou devendo em arrumações de ítens de templates. Além disso ainda preciso revisar vários posts que tinham links hospedados no google pages e que não estão abrindo.

Como vocês podem ver, a agenda está um pouco cheia.

Aprecio a paciência e principalmente a compreensão de quem está esperando minha ajuda para arrumar códigos no blog. Isso demanda mais tempo e atenção e não posso "parar" o Blog a La Carte enquanto verifico esses ajustes.

Acredito que em pouco mais de uma semana a casa fica em ordem e coloco tudo em dia.

O Blog a La Carte completou 6 meses no último dia 27 de setembro e eu gostaria de aproveitar para agradecer os vários leitores freqüentes que sempre trazem dúvidas e idéias que geram novas funcionalidades para o Blogger.

E gostaria também de dar boas vindas aos novos leitores que crescem a cada dia!

imagem: Mike Licht, NotionsCapital.com

Aplicando Margin e Padding nos Títulos

2008-09-26T17:36:00.013-03:00

Para personalizar os títulos dos posts ou da sidebar, colocando cores e imagens no background ou colocando bordas, precisamos mexer nas medidas de "padding" e algumas vezes também em "margin". Veremos como trabalhar essas medidas tomando o título do post como exemplo.

No exemplo abaixo temos um título de post sem background ou borda:

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;}

.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:$titlecolor;
font-weight:normal;}

.post h3 strong, .post h3 a:hover { color:$textcolor;}

Modificamos a cor do título, colocamos bordas e cor no background:

.post h3 {
background: #708090;
border: 2px solid #191970;
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:#fff;}

.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:#fff;
font-weight:normal;}

.post h3 strong, .post h3 a:hover { color:$textcolor;}

E colocamos uma imagem de fundo flutuando à esquerda do título:

.post h3 {
background: #708090 url(http://lh3.ggpht.com/rozanchetta/SN1KtMrZa-I/AAAAAAAABZI/Ph3jndQBOPU/folha.gif) no-repeat left center;
border: 2px solid #191970;
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:#fff;}

Aplicando "margin", centralizamos o bloco do título e deixamos um espaço maior entre o título e a linha que contém os marcadores, autor, data e hora:

.post h3 {
background: #708090 url(http://lh3.ggpht.com/rozanchetta/SN1KtMrZa-I/AAAAAAAABZI/Ph3jndQBOPU/folha.gif) no-repeat left center;
border: 2px solid #191970;
margin:.25em 2em 1em 2em;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:#fff;}

Finalmente, ajustamos o "padding" para equilibrar a imagem e o texto:

.post h3 {
background: #708090 url(http://lh3.ggpht.com/rozanchetta/SN1KtMrZa-I/AAAAAAAABZI/Ph3jndQBOPU/folha.gif) no-repeat left center;
border: 2px solid #191970;
margin:.25em 2em 1em 2em;
padding:6px 0 6px 45px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:#fff;}

As medidas de padding dependem do tamanho da imagem a ser utilizada. Lembrem-se que colocamos medidas de margin e padding em sentido horário: top - right - bottom - left.

Quando aplicamos padding, estamos colocando medidas para o texto. Como a imagem flutua à esquerda no background, o texto necessita de uma medida à esquerda que o distancie da imagem. A imagem escolhida tem as medidas de 36px por 37px. Aplicando 45px de padding-left temos espaço suficiente para esse distanciamento.

Esse raciocínio serve para qualquer imagem colocada em background ao lado de textos, em títulos, ítens de lista, etc.

Vejamos esse mesmo exemplo apenas com a imagem, sem borda e cor de background no título. Também retirei as margens direita e esquerda que centralizavam o título:

.post h3 {
background: url(http://lh3.ggpht.com/rozanchetta/SN1KtMrZa-I/AAAAAAAABZI/Ph3jndQBOPU/folha.gif) no-repeat left center;
margin:.25em 0 1em 0;
padding:6px 0 6px 45px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;}

Technorati: Tutoriais Blogger

Gadget Fantasma - Visivel apenas para o dono do blog

2008-09-25T18:47:00.007-03:00

Assim como podemos colocar uma navbar ou menu que fique visível apenas para o editor do Blog, podemos usar o mesmo código se quisermos adicionar gadgets que não fiquem visíveis para os leitores.

A única diferença é que precisamos verificar o local no código do Widget que a expressão deve ser colocada, para que o Blogger aceite. Após alguns testes pude chegar ao resultado esperado.

A imagem acima mostra o Blog de Testes da maneira que os leitores o visualizam e a imagem a seguir como o Blog é exibido para o editor:

Observem a Navbar no topo do template e o Gadget de Texto na Sidebar.

O código utilizado para o gadget foi o seguinte:


<b:widget id='Text1' locked='false' title='GADGET VISÍVEL APENAS PARA O DONO DO BLOG' type='Text'>
<b:includable id='main'><span class='item-control blog-admin'>
 <!-- only display title if it's non-empty -->
 <b:if cond='data:title != &quot;&quot;'>
   <h2 class='title'><data:title/></h2>
 </b:if>
 <div class='widget-content'>
   <data:content/>
 </div>

 <b:include name='quickedit'/></span>
</b:includable>
</b:widget>

Os trechos mostrados em LARANJA são os necessários para que o gadget fique visível apenas para o editor do Blog. Não esqueça de fechar a tag </span> no local indicado.

imagem: lynnsta.
Technorati: Hacks Blogger

Mostrar Data em todos os Posts - Uma nova maneira

2008-09-24T20:49:00.008-03:00

Com um pequeno e simples script podemos ter data mesmo em posts publicados no mesmo dia, sem necessidade de abrir mão da "time-stamp" (hora da postagem).

A maior vantagem desse hack entretanto é que podemos escolher qualquer formato de data nas Configurações do Blogger.

Na Guia "Layout" em "Editar HTML" salve uma cópia do seu template clicando em "Baixar Modelo Completo";

Marque a caixinha "Expandir Modelos de Widget";

Procure o seguinte trecho no código:

<b:if cond='data:post.dateHeader'> <h2 class='date-header'> <data:post.dateHeader/></h2> </b:if>

Substitua esse trecho por:

<b:if cond='data:post.dateHeader'> <script>var lastDate= '<data:post.dateHeader/>';</script> <h2 class='date-header'><data:post.dateHeader/></h2> <b:else/> <h2 class='date-header'> <script>document.write(lastDate);</script> </h2> </b:if>

Visualize o template e estando tudo ok, salve.

Dica de Fernando Coello do Randomness

DEMO

Technorati: Hacks Blogger

Posts Mais Comentados - versão II - Yahoo Pipes

2008-09-24T19:47:00.014-03:00

A fim de agradar a gregos e troianos, fiz uma segunda versão da Pipe de Posts Mais Comentados, dessa vez com a URL completa do título do Post. A primeira versão contém um número limitado de caracteres na URL e reticências entre colchetes [...] no final do título. Esta nova versão contém todos os caracteres salvos pelo Blogger na URL do título.

Para clonar a Pipe siga os procedimentos já informados nos artigos anteriores e acesse a pipe no link Posts Mais Comentados no Blogger II

Para instalar diretamente o Widget em seu Blog preencha o formulário localizado na página anexa para importar o Widget para o seu Blog do Blogger

MAIS COMENTADOS
VERSÃO II

A diferença entre as duas Pipes:

DEMO

imagem: Mike Licht, NotionsCapital.com
technorati: Yahoo Pipes

Yahoo Pipes - Posts Mais Comentados

2008-09-23T21:03:00.006-03:00

O Blogger fez algumas mudanças nas URLs dos comentários, o que "destruiu" as pipes que utilizavam URLs "showcomments". Um dos widgets muito utilizados e que está agora com esse problema é o de Posts Mais Comentados ou "Most Popular Posts", publicado pelo Blogger Buster.

Refiz a Pipe utilizando uma nova URL e vou disponibiliza-la para quem gostou do Widget e gostaria de te-lo novamente.

Para quem preferir clonar a Pipe:

Acesse sua conta do Yahoo;
Acesse a Pipe Posts Mais Comentados no Blogger ;
Personalize a Pipe conforme sua preferência

Para instalar diretamente o Widget em seu Blog:

Preencha o formulário localizado na página anexa para importar o Widget para o seu Blog do Blogger

MAIS COMENTADOS
VERSÃO I

DEMO

imagem: ewen and donabel
Technorati: Yahoo Pipes

Receber comentários por email

2008-09-23T01:05:00.006-03:00

Não sei se vocês notaram, mas abaixo do formulário de comentários apareceu recentemente um link "Subscribe".

O Blogger Team ouviu nossos pedidos e finalmente instalou o link para receber as atualizações de um comentário específico por email.

Portanto, quando você desejar acompanhar os comentários do Blog a La Carte por Feed, clique no link correspondente acima do bloco de Comentários e quando desejar acompanhar por email, clique no link "Subscribe" abaixo do formulário de Comentários.

Technorati: Comentários Blogger

Navbar Fantasma com Caixa de Busca

2008-09-22T23:17:00.005-03:00

Fiz algumas melhorias na Navbar invisível. Sempre usei a caixa de busca do meu próprio blog. Como utilizo com freqüência os códigos que posto nos artigos, a caixa de busca era muito útil. Quando passei a usar a caixa do AdSense, deixei de usar para evitar problemas com Mr. Google. Por essa razão, coloquei na Navbar invisível um buscador. Seguem os códigos e a CSS. Modifiquem as cores e os links conforme preferirem.

Coloquei o código antes do outer-wrapper, logo abaixo da tag <body> pra ficar bem colada no alto da página.

<body>  <span class='item-control blog-admin'> <div id='navFantasma'> <div class='nav'> <ul class='navFantasma'> <li><a href='http://www.blogger.com/home'>Painel</a></li> <li><a href='http://draft.blogger.com/home' title='Painel Blogger Draft'>Blogger Draft</a></li> <li><a href='http://www.blogger.com/post-create.g?blogID=3752939958339064617' title='Criar um Novo Post'>Novo Post</a></li> <li><a href='http://www.blogger.com/posts.g?blogID=3752939958339064617' title='Janela de Editar Posts'>Editar Posts</a></li> <li><a href='http://www.blogger.com/blog-options-basic.g?blogID=3752939958339064617' title='Janela de Configurações'>Configurações</a></li> <li><a href='http://www.blogger.com/layout?blogID=3752939958339064617' title='Guia Layout'>Layout</a></li> <li><a href='http://www.blogger.com/html?blogID=3752939958339064617' title='Editar HTML do Template'>Editar HTML</a></li> </ul> <form action='/search' id='searchform' method='get' style='display:inline;'><input id='search-box' name='q' type='text'/><input id='search-btn' type='submit' value='Buscar'/></form> </div> </div></span>  <div id='outer-wrapper'><div id='wrap2'>

Substitua o que está em negrito itálico pela ID de seu Blog.

Os estilos coloquei logo acima da tag ]]></b:skin>

#navFantasma {
background: #dcdcdc ;
height: 26px;
width: 100%;
margin: -10px auto 1px auto;
font-family: "Century Gothic", Verdana, Trebuchet MS, sans-serif;
font-variant: small-caps;
font-weight: bold;
color:#737374;
font-size: 12px;
border-bottom: 1px solid #afafaf;}

.nav {width: 950px; margin: auto;}

ul.navFantasma {padding: 0px;}
ul.navFantasma li {list-style: none; display: inline;}

ul.navFantasma li a {
background: transparent;
color:#737374;
display: block;
float: left;
padding: 4px 7px 3px 7px;
margin-right: 3px;
text-decoration: none;
border-right: 1px solid #afafaf;
border-left: 1px solid #afafaf;}

ul.navFantasma li a:visited {text-decoration: none; color: #737374;}

ul.navFantasma li a:hover {
background: #cc6600;
color: #ffffff;
text-decoration: none;
border-right: 1px solid #afafaf;
border-left: 1px solid #afafaf;}

ul.navFantasma li a:active {text-decoration: none; color: #737374;}
ul.navFantasma li a:focus {color: #41a5c3; outline: 1px dotted #e1477d;}

ul.navFantasma li.current_page_item a {
text-decoration:none;
color:#fff;
background: #E1477D;}

ul.navFantasma li ul {float:left; margin:0; padding:0;}

#searchcont {width: 100%; margin: 12px auto 12px auto;}

#searchform {
height:26px;
line-height:25px;
float:right;
margin: 0px;
padding: 0px;}

input#s {
color: #e1477d;
width: 283px;
background:#fcfcfc;
padding: 2px 4px 2px 4px;
border: 1px solid #afafaf;}

input#searchsubmit {
background:#afafaf;
color:#fff;
font-size:13px;
padding: 2px;}

Substitua as cores conforme sua preferência.

Technorati: Navegação Blogger, Menu Blogger

Navbar Fantasma - Menu invisível para editar seu Blogger

2008-09-20T17:22:00.008-03:00

Depois de alguns (vários) testes e de fazer o Tico e o Teco (meus 2 neurônios) trabalharem direito, consegui finalmente criar a Navbar invisível que pode substituir a navbar do Blogger, porém só aparece para o editor do Blog.

Não tenho como apresentar um DEMO, já que a navbar fica invisível para os leitores, portanto vou mostrar imagens. Façam a experiência em seu Blog de Testes antes de aplicar no template.

Inicialmente vamos criar a lista de links para o Menu. Eu coloquei o código acima do Header, logo abaixo do início do Outer-Wrapper, mas vocês podem escolher o local que preferirem (footer, sidebar, etc)


<body>
 <div id='outer-header'>


        <span class='item-control blog-admin'>
<ul id='novanavbar'>
<li> <a href='http://www.blogger.com/home'>Painel</a></li>
<li><a href='http://www.blogger.com/rearrange?blogID=7344891683686629878'>Layout</a></li>
<li><a href='http://www.blogger.com/html?blogID=7344891683686629878'>Editar HTML</a></li>
<li><a href='http://www.blogger.com/posts.g?blogID=7344891683686629878'>Editar posts
</a></li></ul>
 </span>


   <div id='header-wrapper'>

Substitua os links e os nomes dos links por aqueles que você deseja em sua NavBar invisível;
Se desejar, coloque imagens no lugar dos textos para os links.

Se você visualizar o template, não verá alterações já que a visualização mostra o blog da maneira como os leitores o vêem.

Depois aplicamos estilos à novanavbar. Coloquei alguns estilos como exemplo, mas você pode configura-la com o estilo que preferir para menus:

#novanavbar {
margin: 8px 0 10px 2px;
list-style: none;
font-family: Helvetica, Arial;
font-weight: normal;}

#novanavbar li {
list-style:none;
float: left;
border: 1px solid #cccccc;
padding: 2px 5px 3px 5px;
margin: 2px 8px;
line-height: 1.5em;
font-size: 1em; }

#novanavbar li a {padding: 0; text-decoration: none;color: #74aaed; }

#novanavbar li a:hover {padding: 0; text-decoration:underline; color: #ffffff; }

Hack solicitado pelo Fernando.

Technorati: Navegação Blogger

Margin, Padding e Espaçamento nas Colunas

2008-09-19T16:00:00.019-03:00

Vimos no artigo anterior sobre as colunas que mesmo sem aplicarmos "margin", o main-wrapper se distancia da sidebar, dependendo da soma da largura de ambos e a largura do outer-wrapper.

Resumindo: Se a largura do outer-wrapper for igual a soma da largura do main-wrapper e da sidebar, essas duas colunas ficam coladas. Quanto mais aumentamos a largura do outer-wrapper em relação às larguras do main-wrapper e sidebar somadas, maior será o distanciamento entre as colunas.

Vamos ver agora como a propriedade "margin" e "padding" pode ser útil para configurar as colunas.

Usaremos o último exemplo do artigo anterior. Na imagem se observa que tanto o main-wrapper como a sidebar estão posicionados nos extremos.

= imagem 1 =

#outer-wrapper {
width: 635px;
margin:0 auto;
border: 1px solid #cc0000;}

#main-wrapper {
width: 410px;
float: $startSide;
border: 1px solid #cc0000;}

#sidebar-wrapper {
width: 220px;
float: $endSide;
border: 1px solid #cc0000;}

Ao aumentarmos bastante a largura do outer-wrapper, percebemos isso claramente:

+ imagem 2 =

#outer-wrapper {
width: 800px;
margin:0 auto;
border: 1px solid #cc0000;}

Segundo o site Richard Barros:

“

Padding é a distância entre o conteúdo e a borda do elemento e margin é a distância entre o elemento e outros elementos do conteúdo.

”

Em quase todos os sites sobre CSS a definição é semelhante, mas ainda assim ficam dúvidas, principalmente quando não há uso de bordas. Uma definição mais simplista, mas que talvez seja melhor entendida: margin é o espaço de "fora" e padding, o espaço de "dentro".

Nas imagens a seguir essa diferença ficará mais evidente.

Acrescentamos margin de 30px ao redor do main-wrapper

= imagem 3 =

Margin de 30px ao redor da sidebar

= imagem 4 =

E padding de 10px no main-wrapper e 10px na sidebar para que os textos descolem das bordas.

= imagem 5 =

Essa configuração não nos proporcionou um equilibrio das colunas no template. A margin-top e margin-bottom estão muito grandes, o padding ainda é pequeno e a distância entre main-wrapper e sidebar deixou um "buraco". Não é possível aumentar o padding porque a soma das larguras atingiu a largura total do outer-wrapper de 800px:

Largura do Main = 410px
Largura da Sidebar = 220px
Sub-total 1 = 630px

Margin no main = 30px à direita e 30px à esquerda = 60px
Padding no main = 10px à direita e 10px à esquerda = 20px
Margin na sidebar = 30px à direita e 30px à esquerda = 60px
Padding na sidebar = 10px à direita e 10px à esquerda = 20px
Sub-total 2 = 160px

TOTAL 1 = 790px

As bordas tem o seguinte comportamento: a borda do outer-wrapper só ocupa o espaço "de dentro", então temos 1px à direita e 1 px à esquerda.

As bordas do main e da sidebar ocupam o espaço "de dentro" e "de fora":

bordas no main: 1px à direita e 1 px à esquerda vezes 2
bordas na sidebar: 1px à direita e 1 px à esquerda vezes 2

TOTAL 2 (bordas) = 10px

TOTAL GERAL = 800px

Vamos então ajustar as medidas para conseguirmos uma melhor aparência de nossas colunas:

= imagem 6 =

#outer-wrapper {
width: 800px;
margin:0 auto;
border: 1px solid #cc0000;
text-align:$startSide;
font: $bodyfont;}

#main-wrapper {
width: 410px;
float: $startSide;
border: 1px solid #cc0000;
margin: 10px 10px 10px 30px;
padding: 20px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 220px;
float: $endSide;
border: 1px solid #cc0000;
margin: 10px 30px 10px 10px;
padding: 20px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Mantivemos a medida de 30px para a margin esquerda do main e direita da sidebar, e reduzimos para 10 px as restantes. Assim, a distância entre o main e a sidebar passou a ser de 20px (10px à direita do main e 10px à esquerda da sidebar) ao invés de 60px.

As mediddas para margin e padding devem ser colocadas obedecendo o sentido horário:

margin-top / margin-right / margin-bottom / margin-left

A soma das medidas continua sendo os mesmos 800px (largura total do outer-wrapper), porém conseguimos uma melhor distribuição das colunas no template.

Technorati: Colunas Blogger

Espaço entre colunas no Blogger

2008-09-18T17:00:00.003-03:00

O tema "margin" e "padding" talvez seja um dos mais complicados de entender quando iniciamos um blog no Blogger.

Quando analiso as palavras-chave que trazem leitores ao Blog a La Carte percebo que é grande a dúvida com relação ao posicionamento e espaçamento das colunas e dos elementos dentro delas. Na teoria parece simples, mas na realidade o assunto é vasto, portanto, vou escrever sobre ele "em doses homeopáticas".

Primeiro iremos falar sobre as colunas, mas antes de entrar propriamente no assunto "margin" e "padding", precisamos entender as medidas e posicionamento.

Vimos em outros artigos que o outer-wrapper é o "container" que, na maioria dos templates contém o header, o main-wrapper, a sidebar ou as sidebars e o footer.

O header e o footer, se estiverem contidos no outer-wrapper, devem ter no máximo a mesma largura, ou não ficarão bem posicionados.

O main-wrapper e a(s) sidebar(s) como ficam posicionados lado a lado, devem ter medidas de largura que somadas (acrescentando bordas, margin e padding) sejam no máximo a mesma largura do outer-wrapper.

Esta imagem mostra (Template Mínima) um outer-wrapper com a soma exata das medidas do main-wrapper e da sidebar, que não possuem bordas, margin ou padding. Note que as colunas ficam "coladas":

= imagem 1 =

#outer-wrapper {
width: 630px;
margin:0 auto;
padding:10px;}

#main-wrapper {
width: 410px;
float: $startSide;}

#sidebar-wrapper {
width: 220px;
float: $endSide;}

Uma vez que o main-wrapper flutua à esquerda e a sidebar à direita, para separar as colunas, basta aumentar o tamanho do outer-wrapper:

= imagem 2 =

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;}

Quanto maior a medida do outer-wrapper, maior será a distância entre as colunas. O main-wrapper sempre irá flutuar à extrema-esquerda do outer-wrapper no template e a sidebar à extrema-direita:

= imagem 3 =

#outer-wrapper {
width: 800px;
margin:0 auto;
padding:10px;}

Ao acrescentarmos bordas ao main-wrapper e à sidebar, se mantivermos a medida exata da soma dessas colunas igual ao outer-wrapper, a sidebar irá "descer" por não encontrar espaço para se posicionar ao lado do main. Precisamos portanto aumentar a medida do outer-wrapper ou reduzir a medida do main ou da sidebar.

= imagem 4 =

#outer-wrapper {
width: 630px;
margin:0 auto;
padding:10px;}

#main-wrapper {
width: 410px;
float: $startSide;
border: 1px solid #cc0000;}

#sidebar-wrapper {
width: 220px;
float: $endSide;
border: 1px solid #cc0000;}

= imagem 5 =

#outer-wrapper {
width: 640px;
margin:0 auto;
padding:10px;}

#main-wrapper {
width: 410px;
float: $startSide;
border: 1px solid #cc0000;}

#sidebar-wrapper {
width: 220px;
float: $endSide;
border: 1px solid #cc0000;}

Até o momento não utilizamos "margin" e "padding", mas percebemos que todo o texto dentro do main-wrapper e da sidebar estão "colados" às bordas. No próximo post faremos uso dessas propriedades para um melhor posicionamento do texto.

Em todas as imagens anteriores no outer-wrapper tínhamos um "padding" de 10px. Se retirarmos o padding e aplicarmos borda ao outer, a borda também "colará" nas colunas internas:

= imagem 6 =

#outer-wrapper {
width: 635px;
margin:0 auto;
border: 1px solid #cc0000;}

#main-wrapper {
width: 410px;
float: $startSide;
border: 1px solid #cc0000;}

#sidebar-wrapper {
width: 220px;
float: $endSide;
border: 1px solid #cc0000;}

Desses exemplos concluímos que:

O posicionamento das colunas no template depende mais da escolha das larguras do outer-wrapper, main-wrapper e sidebar;
Sem aplicarmos "margin" o main-wrapper está posicionado à extrema-esquerda e a sidebar à extrema-direita do outer-wrapper, posição definida pela propriedade "float";
Sem aplicarmos "padding", o conteúdo interno das colunas "colam" nas bordas.

Imagem: roblisameehan
Technorati: Colunas Blogger

Modificando o Widget de Categorias - Final

2008-09-17T21:34:00.003-03:00

Esta é terceira e última parte dos tutoriais para modificar o Widget de Categorias (Marcadores). Veremos como configurar o hack para que mostre apenas as categorias que desejamos, sem colocar as exceções.

Quando o número de Categorias a serem mostradas for muito grande, o hack usando as exceções é mais viável, por necessitar "menos código". Caso contrário - se o número de exceções for muito maior que o número de categorias a serem mostradas - este método é mais simples.

Como já expliquei o funcionamento do hack com bastante detalhes nos artigos anteriores, esta última parte dos tutoriais é mais simples.

Iremos desconsiderar o início do código, onde colocamos as categorias que não queremos que sejam visualizadas (as exceções) e montaremos o código apenas com aquelas que desejamos a exibição.

<b:widget id='Label4' locked='false' title='Exemplo3' 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'> <b:if cond='data:label.name == "Nome da Primeira 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:else/> <b:if cond='data:label.name == "Nome da Segunda 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:if></b:if> </b:loop> </ul> <b:include name='quickedit'/> </div> </b:includable> </b:widget>

Siga o mesmo raciocínio dos exemplos nos artigos anteriores:
- Abra uma condicional "b:if" para cada Categoria,
- entre o código uma Categoria e a seguinte, coloque o <b:else/>
- e no final feche as tags condicionais com o mesmo número de </b:if> para as que foram abertas.

No exemplo, selecionei as Categorias "Testes" e "Tutoriais" para criar o Widget.

Acredito que com estes 4 tutoriais exploramos todas as alternativas que o hack nos proporciona, mas se alguém tiver ainda mais alguma idéia de exibição dos marcadores, podemos continuar testando.

DEMO

Technorati: Categorias Blogger

Modificando o Widget de Categorias - Parte 2

2008-09-16T21:37:00.007-03:00

Na primeira parte deste tutorial para Modificar o Widget de Categorias vimos como criar um widget mostrando apenas Categorias escolhidas.

Agora continuaremos a compreender o código do hack e criaremos um Widget onde as Categorias escolhidas possuem sub-categorias.

= imagem 1 =

Terminamos o post anterior fechando todas as tags "b:if" abertas para cada Categoria-exceção que não será mostrada no Widget.

Os próximos trechos do código "montam" a lista de Categorias com as respectivas sub-categorias.

5. Nestas linhas iniciamos a sublista com a primeira Categoria Principal. A "tradução" seria:

"Na condição do "nome da label" mostrar Nome da Label"

em seguida temos a abertura com "ul" da sublista.


<!-- Inicio da sublista para Categoria Principal -->
<b:if cond='data:label.name == &quot;Nome da Label Principal&quot;'>
<ul style='margin-top:5px;padding-left: 25px;'>
<b:loop values='data:labels' var='label'>

6. Após a abertura da sub-lista, começamos os ítens de lista ("li"):

 <b:if cond='data:label.name == "nome da primeira sub-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:else/>

Esse trecho termina com <b:else/> porque iremos colocar mais ítens na lista. Se houvesse apenas um ítem, o final seria com </b:if>

7. Vamos considerar que sejam apenas dois ítens de lista. Acrescentamos então o novo ítem e fechamos o código dos ítens de lista. Para acrescentar mais ítens de lista, devemos repetir o <b:else/>. No final, para cada sub-categoria fechamos as tags "b:if" com as respectivas </b:if> no lugar do <b:else/>.

 <b:if cond='data:label.name == "nome da segunda sub-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:if></b:if>

8. Fechamos então a sub-lista, e a condicional. Para acrescentar uma nova Categoria Principal (ou sub-lista), o código deve se repetir após o comentário 


</b:loop>
</ul>
<!-- Final da sublista para a Categoria Principal -->
</b:if> 
<!-- Final da condicional para a Categoria Principal -->

9. Por fim, fechamos a lista de marcadores e o código do Widget de Label:


</b:loop>
</ul> <!-- Fim da lista -->

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

= imagem 2 =

Usando o hack, criei um Widget que mostra apenas 2 Categorias Principais com algumas sub-categorias. No trecho de exceções listei todas as categorias que não desejava exibir. Em seguida, criei 2 sub-listas com suas respectivas sub-categorias nos ítens de lista

<b:widget id='Label2' locked='false' title='Exemplo 1' 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'>  <b:if cond='data:label.name != "básico blogger"'> <b:if cond='data:label.name != "categorias"'> <b:if cond='data:label.name != "Colunas"'> <b:if cond='data:label.name != "data"'> <b:if cond='data:label.name != "emoticons"'> <b:if cond='data:label.name != "exceções"'> <b:if cond='data:label.name != "footer 3 colunas"'> <b:if cond='data:label.name != "listas"'> <b:if cond='data:label.name != "posts"'> <b:if cond='data:label.name != "sidebar"'> <b:if cond='data:label.name != "sub-categorias"'> <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:if></b:if></b:if></b:if></b:if></b:if> </b:if></b:if></b:if></b:if></b:if>  <b:if cond='data:label.name == "Testes"'> <ul style='margin-top:5px;padding-left: 25px;'> <b:loop values='data:labels' var='label'>  <b:if cond='data:label.name == "data" '> <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:else/>  <b:if cond='data:label.name == "emoticons" '> <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:else/>  <b:if cond='data:label.name == "Colunas" '> <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:if></b:if></b:if> </b:loop> </ul>  </b:if>   <b:if cond='data:label.name == "Tutoriais"'> <ul style='margin-top:5px;padding-left: 25px;'> <b:loop values='data:labels' var='label'>  <b:if cond='data:label.name == "básico blogger" '> <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:else/>  <b:if cond='data:label.name == "listas" '> <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:if></b:if> </b:loop> </ul>  </b:if>  </b:loop> </ul>  <b:include name='quickedit'/> </div> </b:includable> </b:widget>

DEMO

Technorati: Categorias Blogger

Modificando o Widget de Categorias (Marcadores)

2008-09-15T23:35:00.011-03:00

Com base no hack desenvolvido pelo DE CERVEZAS y otras cosas fiz algumas experiências com as "Labels" (Marcadores, Categorias, etc).

Essa ótima idéia do Cervezas nos permite variações do Widget, sendo possível adicionarmos mais de um Gadget, mostrando as Categorias de diversas maneiras.

Entender o código para testar novas exibições

= imagem 1 =

Vamos verificar cada linha do hack, assim cada um de vocês pode fazer as modificações que forem mais adequadas à sua necessidade.

1. As primeiras linhas são o título do Widget e não fazem diferença para o hack:


<b:widget id='Label1' locked='false' title='Categorias' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>

2. Logo após começam as informações para o widget e o início da lista de marcadores (label):


<div class='widget-content'>
<ul> <!-- Inicio da lista de categorias -->
<b:loop values='data:labels' var='label'>

3. Agora é o início do hack - Colocamos condicionais ("b:if cond") onde listamos as categorias que não devem ser apresentadas no widget. "Traduzindo" a condicional, seria : "Se houver categoria (label) com o nome (nome da label), não mostrar!"


<!-- Apresenta qualquer categoria exceto as listadas abaixo -->
<b:if cond='data:label.name != &quot;nome da label&quot;'>
<b:if cond='data:label.name != &quot;nome da label&quot;'>
<b:if cond='data:label.name != &quot;nome da label&quot;'>
<b:if cond='data:label.name != &quot;nome da label&quot;'>
<b:if cond='data:label.name != &quot;nome da label&quot;'>

Cada categoria que for incluída nessa lista de exceções recebe uma tag inicial "b:if", portanto devemos lembrar de fechar mais à frente no código cada tag "b:if" que abrimos, com a tag de fechamento </b:if>.

Agora vamos fazer uma pausa na compreensão do código para mostrar o que podemos fazer com essa linha de exceções.

Mostrar no Widget apenas Categorias escolhidas, colocando na lista de exceções aquelas que não queremos que sejam mostradas.

= imagem 2 =

Veja que na = imagem 1 = temos no Widget uma lista com 13 categorias. Aplicando essa condicional do hack podemos criar um Widget que mostra apenas as categorias que desejamos.

Para fazer o Widget do exemplo (= imagem 2 =), copiei em um bloco de notas todas as categorias e coloquei na lista de exceções. Depois retirei da lista as sub-categorias da principal "Testes". Adicionei um novo elemento de página (gadget) de Marcadores e coloquei essa lista no código. Assim, criei um Widget que mostra apenas as sub-categorias da Categoria "Testes"

<b:widget id='Label3' locked='false' title='Exemplo 2' 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'>  <b:if cond='data:label.name != "básico blogger"'> <b:if cond='data:label.name != "categorias"'> <b:if cond='data:label.name != "Colunas"'> <b:if cond='data:label.name != "exceções"'> <b:if cond='data:label.name != "listas"'> <b:if cond='data:label.name != "posts"'> <b:if cond='data:label.name != "sub-categorias"'> <b:if cond='data:label.name != "Testes"'> <b:if cond='data:label.name != "Tutoriais"'> <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:if></b:if></b:if></b:if> </b:if></b:if></b:if></b:if></b:if> </b:loop> </ul> <b:include name='quickedit'/> </div> </b:includable> </b:widget>

Continuando com o código...

4. A seguir, no código, temos as informações que dão continuidade à condicional, se fossemos "traduzir"
"Se houver categoria (label) com o nome (nome da label), não mostrar!"
<b:if cond='data:label.name != "nome da label"'>

"Se a URL for URL de label, mostrar o nome da label"

<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>

<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:if></b:if></b:if></b:if></b:if>

É nesse trecho que devemos fechar as tags "b:if" com </b:if> para cada exceção que colocamos no código.

No próximo post vamos "traduzir" o restante do código - os trechos onde criamos as sub-categorias.

DEMO

Technorati: Categorias Blogger