BloggerSPhera | Templates e Tutoriais Blogger

Os Bugs do Blogger - Upload de Imagens

noreply@blogger.com (Rô Zanchetta) — Fri, 21 May 2010 17:20:00 +0000

Nos momentos de picos de utilização ou em períodos em que a equipe de desenvolvimento está fazendo alterações, é comum os usuários do Blogger encararem alguns problemas que acabam irritando.

Antes que alguém diga que o Blogger é ruim, isso acontece com qualquer site, provedor, plataforma, etc. Acontece com qualquer tipo de serviço. Não existe nada infalível.

Algumas vezes é melhor deixar seu post ou alteração no template para outra hora, não adianta se irritar. Mas em alguns casos, existe um jeitinho de contornar e finalizar de vez sua tarefa.

1ª PARTE - Não consigo fazer upload das imagens

Isso tem acontecido principalmente com o novo editor de posts e no Blogger Draft. Mais ainda se o seu blog já possui muitas imagens no álbum.

Não adianta ficar insistindo, se não deu certo na primeira tentativa é porque o Picasa está com algum problema.

Se você clicou para fazer upload da imagem e ela não aparece, vá para o álbum do Picasa, acesse o álbum do seu blog e verifique se a imagem está no álbum. Geralmente a imagem é uma das últimas.

Se você localizar a imagem, marque-a, clicando com o mouse e depois clique em "adicionar selecionadas".

A situação pode estar pior e o upload ter falhado mesmo. A alternativa então é tentar o upload no álbum do Picasa e depois adicionar.

Se nem assim você conseguiu resolver, acesse sua conta do Picasa em nova janela, procure o álbum do seu blog e faça o upload da imagem.

Volte ao editor do Blogger, clique no botão de imagens e procure a imagem no álbum do Picasa de seu blog e adicione.

AINDA NÃO DEU CERTO????

Copie o endereço da imagem, vá para a janela "Editar HTML" do editor de posts e cole o código:

<div class="separator" style="clear: both; text-align: center;">
<a href="endereço-da-imagem" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="endereço-da-imagem" /></a></div>

No endereço de sua imagem (após o src=") existe um s1600. Substitua esse valor pela largura que deseja para a imagem, conforme a tabela de miniaturas do Picasa.

Se nem isso deu certo, tome um café, navegue um pouco pelos posts do BloggerSPhera e tente fazer seu post mais tarde :D

Conta de Email com seu dominio

noreply@blogger.com (Rô Zanchetta) — Sat, 15 May 2010 21:17:00 +0000

Quando você compra um domínio no UOL HOST, tem direito à uma caixa de email gratuita. Se você contratar também a hospedagem, tem direito a um número maior, dependendo do plano que contratar. Vamos ver como configurar a caixa gratuita apenas da compra do domínio.

Em seu painel do UOL HOST, clique para ir ao painel de administração de emails.

No menu suspenso, escolha o domínio para o qual quer criar a conta de email e clique em ok.

Clique para criar a caixa postal

Na janela pop-up, escolha "Criar uma conta de email grátis"

Na nova janela, preencha corretamente o formulário. O primeiro campo deve ser preenchido com o endereço que deseja para o email, por exemplo, se você quiser seu-nome@seu-dominio.com.br, coloque seu nome nesse campo, se quiser contato@seu-domínio.com.br, digite a palavra contato.

Clique em criar e sua caixa de email com o seu domínio está pronta!!

Infelizmente, você só pode acessar essa caixa de email pela web - não é possível utiliza-la através do Outlook Express ou programas semelhantes.

O melhor é utilizar a versão beta do Webmail do UOL. Para acessar sua caixa, digite na barra de endereços de seu navegador:

webmail.seudominio.com.br/beta

Digite seu login e senha e pode começar a utilizar sua caixa postal.

Essa versão beta tem melhor visualização e recursos.

CSS: Distância entre Colunas

noreply@blogger.com (Rô Zanchetta) — Fri, 07 May 2010 18:04:00 +0000

Recebo sempre emails com pedidos de ajuda sobre colunas, principalmente dúvidas de como ajustar as colunas de forma que fiquem com distância equilibrada. No artigo Float, Clear e as Colunas do Blogger passei uma idéia das propriedades "float" e "clear", mas acho que ainda falta um aprofundamento no assunto.

Sempre que desejamos 3 colunas, seja no Header, Main, Footer, etc, precisamos utilizar a propriedade "float".

Há 2 opções:
- Flutuar 2 colunas à esquerda e 1 coluna à direita;
- Flutuar as 3 colunas à esquerda.

Vamos ver a primeira opção

2 colunas com float: left e 1 coluna com float: right

Supondo que você tenha um container (Header, Main, Footer, etc) de 960px de largura. Dividindo esse valor por 3, terá o espaço de 320px para cada coluna. Usando esse valor, uma das colunas poderá escorregar para debaixo das outras, porque um mínimo padding, ou uma borda, que houver em qualquer elemento irá superar os 960px de largura. Ou, se a margin e o padding estiverem zerados, tudo ficará colado, sem espaço entre as colunas. Sendo assim, você precisa de um valor menor que 320px para cada uma das 3 colunas. E então surge o problema - a distância entre elas pode não ficar igual.

Isso ocorre porque 2 das colunas irão procurar a margem extrema da esquerda e 1 coluna irá procurar a margem extrema da direita do container.

Nessa situação, você deve aplicar uma margin para que a distância entre a primeira coluna e a segunda fique igual à distância entre a segunda e a terceira.

Como calcular a margem ideal?
Em nosso exemplo do container de 960px, vamos supor que você tenha escolhido a medida de 315px de largura para cada coluna e que exista uma borda de 1px ao redor das 3 colunas e nenhuma margin ou padding.

Temos:
315px de largura x 3 = 945px
1px de borda de cada lado de cada coluna = 6px
Total = 951px
Sobra: 960px - 951px = 9px (essa é a distância que está entre a segunda e a terceira coluna)

Se você dividir essa "sobra" por 2 e aplicar como margin entre a primeira e a segunda coluna você resolve o problema.

Exemplo do código para o outer-wrapper:

#outer-wrapper {
margin:0 auto;
width: 960px;}

#sidebar-left {
border: 1px solid #ccc;
float: left;
margin-right: 4.5px;
width: 315px;}

#main-wrapper {
border: 1px solid #ccc;
float: left;
width: 315px;}

#sidebar-right {
border: 1px solid #ccc;
float: right;
width: 315px;}

Se você quiser as duas colunas dos extremos (primeira e terceira colunas) descoladas das margens do container, use a "sobra" para fazer esse distanciamento e recalcule a margem necessária entre a primeira e segunda colunas.

#outer-wrapper {
margin:0 auto;
width: 960px;}

#sidebar-left {
border: 1px solid #ccc;
float: left;
margin-right: 3px;
margin-left: 3px;
width: 315px;}

#main-wrapper {
border: 1px solid #ccc;
float: left;
width: 315px;}

#sidebar-right {
border: 1px solid #ccc;
margin-right: 3px;
float: right;
width: 315px;}

As 3 colunas com float: left

Usando essa opção, as 3 colunas irão procurar a margem esquerda do container, sobrando um espaço na margem direita.

A "sobra" continua sendo de 9px, portanto precisamos dividir essa medida para distanciar uma coluna da outra. Aplicamos então margin-right na primeira coluna (distanciando a primeira da segunda) e margin-left na terceira coluna (distanciando a terceira da segunda):

#outer-wrapper {
margin:0 auto;
width: 960px;}

#sidebar-left {
border: 1px solid #ccc;
float: left;
margin-right: 4.5px;
width: 315px;}

#main-wrapper {
border: 1px solid #ccc;
float: left;
width: 315px;}

#sidebar-right {
border: 1px solid #ccc;
margin-left: 4.5px;
float: left;
width: 315px;}

Slide Zinmag Primus

noreply@blogger.com (Rô Zanchetta) — Thu, 06 May 2010 00:38:00 +0000

Continuando sobre os slides com posts recentes, agora vou mostrar como colocar o widget de posts recentes no slide do Tema Zinmag Primus do Wordpress. O Alvaris converteu esse template para o Blogger e você pode fazer o download no Falcon Hive.

OBSERVAÇÃO IMPORTANTE: Este é um tutorial para usuários avançados. Não recomendo para usuários iniciantes ou que tenham pouco conhecimento de CSS e JavaScript.

Fiz uma adaptação desse slide, já com o widget de posts recentes e você pode ver como funciona no DEMO:

DEMO
Tema Shazadi

Este slide é bem mais trabalhoso que o anterior porque, dependendo das cores e largura de seu template, você precisará mexer muito nas medidas e na imagem de fundo. Para quem conhece CSS e tem jeito para trabalhar com imagens, não tem tanto mistério.

No arquivo zipado que está no link abaixo você vai encontrar:
1) O código do script do slide já adaptado - arquivo: script-slide;
2) O código do widget de posts recentes já adaptado para esse slide - arquivo: script-widget-slide;
3) Um arquivo de imagem em png do fundo do slide em verde (você pode alterar a imagem) - arquivo: slide-bg-desenho;
4) Um arquivo de imagem em png do fundo do slide em preto (você pode alterar a imagem) - arquivo: slide-bg-desenho2;
5) Um arquivo de imagem em gif do fundo em pink igual ao DEMO - arquivo: slide-bg-pink;
6) Um arquivo de imagem em pink do botão "leia mais" igual ao DEMO - arquivo: botao-leiamais-rosa;
7) Um arquivo de imagem em png do botão "leia mais" em verde para você alterar - arquivo: botao-mais-desenho.

DOWNLOAD
slide-shazadi.rar

Faça o download, extraia os arquivos e vamos começar as instruções.

Estilos - CSS

Os estilos a seguir estão configurados para um slide igual ao do DEMO, tanto nas medidas da página como da imagem de fundo. O slide foi colocado no "crosscol-wrapper" do template. Se você for mudar essas medidas ou o local onde instalar, terá que revisar a CSS. Em cada valor eu coloco a explicação:

/*   Slide   */
#crosscol-wrapper { /* coluna onde você colocará o slide */
padding:12px; 
position:relative;}

/* importante manter a position:relative */

#slide-wrapper { /* container do slide - não alterar */
width:100%;}

#slide-wrapper a:link,
#slide-wrapper a:visited,
#slide-wrapper a:hover{ /* links - não alterar */
outline:none;
text-decoration:none;}

#slider { /* altere a imagem de fundo e as medidas conforme seu template */
background:url(http://lh5.ggpht.com/_j4fpzU2AasM/SiWP-fpKYEI/AAAAAAAAAUc/UzVOcnfL-hw/slide15.gif);
clear:both;
height:254px;
margin:20px 0 0 0;
overflow:hidden;
position:relative; 
width:100%;}

#mover { /* seletor da movimentação do slide - não altere */
overflow:hidden;
position:absolute;
width:auto;}

.slide { /* a largura pode ser alterada conforme a coluna onde você colocará o slide e a imagem de fundo */
float:left;
height:200px;
padding:15px 0;
position:relative;
width:960px;}

.slide h3 { /* título do post - altere cor, fonte e medidas conforme seu template */
color:#EF8EA2;
font-size:24px; 
margin:0 0;
overflow:hidden;
padding:10px 0px 0px 10px;
width:300px;}

.summary { /* container do sumário - altere conforme seu template */
font-size:12px;
font-weight:bold;
line-height:20px; 
margin:0 0;
padding:30px 0px 0px 10px;
text-transform:uppercase;
width:300px;}

.slide p{ /* parágrafo do sumário - altere conforme seu template */
color:#D8ABAB;
font-size:12px; 
line-height:20px;
margin:5px 0;
padding:10px 0px 0px 10px;
width:300px;}

/* os ítens abaixo referem-se ao link leia mais - altere conforme seu template, a imagem de fundo e a imagem do botão que colocar */

.leiamais{ 
background: url(http://lh4.ggpht.com/_j4fpzU2AasM/SiWSpX8ZHTI/AAAAAAAAAUg/QTAO2CCoBQ0/btn-compre.png) no-repeat 325px center;
color:#FFFFFF;
font-size:14px; 
line-height:30px;
margin:0 169px 0 0;}

.leiamais a:link, 
.leiamais a:visited,
.leiamais a:hover{ 
color:#FFFFFF;
text-decoration:none;} 

.slide img { /* imagem do slide - as medidas e posicionamento deverão ficar de acordo com a imagem de fundo */
background:#FFE1F7;
position:absolute; 
top:20px; 
left:565px;
padding:10px 10px;}

#slider-stopper { /* texto para parar e reiniciar o slide - medidas e posicionamento devem seguir a imagem de fundo */
color:#EF8EA2;
font-size:14px;
font-family:Georgia, Helvetica, Sans-Serif;
padding:3px 8px;
position:absolute;
top:111px; 
right:38px;
text-transform:uppercase;}

Se você usar alguma das imagens fornecidas no arquivo, não há necessidade de muitas alterações. Se precisar mudar o tamanho da imagem para adaptar à largura de seu template, o trabalho é um pouco mais complicado. Recomendo apenas para quem tem conhecimento de posicionamento em CSS.

Ao modificar o posicionamento na CSS, pode ser necessário alterar algumas medidas no script do slide (explico depois).

Script do Slide

Você precisa ter o JQuery instalado para seu slide funcionar (veja artigo sobre o slide anterior)

Abaixo da chamada do JQuery, copie o arquivo script-slide e cole em seu template (o código já está compactado).

No script existem algumas medidas de posicionamento, que, se você alterar na CSS, precisará também checar no script.

Veja os ítens do código que podem ser customizados:

var delayLength=6000 - velocidade da transição

.animate.... - os posicionamentos em "animate" estão relacionadas a altura do slide, imagem de fundo e container da imagem. Seja cuidadoso ao modificar a imagem de fundo e a CSS, modificando também no script esses posicionamentos.

.append(&#39;&lt;a href=&quot;#crosscol-wrapper&quot;id=&quot;slider-stopper&quot;&gt;

No código acima, há um ponto importante. Se o seu slide ficar posicionado perto do topo do seu blog, você pode mudar onde está a href="#crosscol-wrapper" para a href="#".

Caso contrário, você deve colocar o nome da coluna onde está seu slide.

Esse trecho se refere ao botão de parar e reiniciar o slide e ao clicar, ele é direcionado (desliza) para a id determinada no código. Quando o slide está bem perto do topo do blog, não há problema, e você pode deixar a âncora como #. Mas se o slide estiver no footer, por exemplo e você deixar a âncora #, a página irá rolar para cima (será que expliquei direito? :0 )

No DEMO, deixei propositalmente a âncora como # para você verificar o que acontece.

Assim como no slide do post anterior, este também está previsto para aparecer apenas na página inicial. Se quiser o slide em todas as páginas retire a condicional.

Script do Widget

O widget de posts recentes já adaptado para este slide está no arquivo script-widget-slide.

Se não for colocar na coluna do crosscol-wrapper, faça as modificações necessárias. As customizações possíveis são as mesmas mencionadas no S3Slider, porém você deve ser mais cuidadoso nas medidas da imagem, pois estão diretamente relacionadas aos posicionamentos já mencionados anteriormente.

Assim como no slide do post anterior, você pode mudar a url do script para aparecer os posts de uma só categoria, em vez de colocar os posts recentes.

DICA

Este slide é muito interessante para blogs onde você quer demonstrar produtos, como artesanato, venda de produtos, portfolio, etc.

Posts Recentes com o S3Slider

noreply@blogger.com (Rô Zanchetta) — Tue, 04 May 2010 21:52:00 +0000

Estou devendo desde janeiro o código completo pronto para instalar o S3Slider com Posts Recentes. O código do widget é meio sensível para colocar parseado aqui nos posts do Blogger, por isso vou disponibilizar um arquivo txt para fazer download, copiar e colar no HTML do template. Mão à obra!

Colocar os estilos

Vamos começar pela CSS. Procure a tag ]]></b:skin> e cole o cógido logo ACIMA dessa tag:

/*  Slide de Posts Recentes  */
#slide-wrapper{ /* estilos do container geral do slide - altere cores e medidas */
background:#fafafa;
border:5px solid #eee;
margin:0 0 10px 0;
padding:10px 0 10px 0;
width:628px}

#postslide{ /* estilos para o slide - altere medidas */
height:380px;
margin:auto;
overflow:hidden;
position:relative;
width:590px}

#postslideContent{ /* estilos para o conteúdo do slide - altere apenas a largura - é uma lista não ordenada */
position:absolute;
top:0;
width:590px} 

.postslideImage{ /* estilos para o ítem de lista - não altere */
display:none;
float:left; 
position:relative}

.postslideImage span{ /* estilos para os textos e fonte do título do post - altere cores e medidas */
background-color:#000;
color:#fff;
display:none; 
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity:0.7;
opacity:0.7;
font-size:20px;
left:0;
bottom:0;
padding:20px 13px;
position:absolute;
width:590px}

.postslideImage span p{ /* estilos para o sumário do post - altere medidas */
font-size:12px;
line-height:1.6em;
padding:8px 20px 0 0}

.postslideImage a:link,
.postslideImage a:visited,
.postslideImage a:hover{ /* cor dos links */
color:#fff}

Altere medidas e cores de acordo com seu template. Este exemplo (tanto estes estilos, como as medidas no widget) é para um slide igual ao do template Zélia, colocado acima da área de posts no main-wrapper.

A hierarquia com os seletores no widget é a seguinte:

div id="slide-wrapper" - container geral
div id="postslide" - container do widget (slide)

ul id="postslideContent" - lista com os posts
li class="postslideImage" - ítem de lista com os posts
(a)link com url do post
(img)imagem do post
fecha (a)
span
(a)link com url do post
título do post
fecha (a)
(p) sumário do post
fecha (p)
fecha span
fecha li
fecha ul

fecha div div

Colocar a chamada do JQuery da API do Google

Quem já tem o JQuery instalado no blog para outras aplicações, não precisa repetir este código. Quem ainda não instalou, copie o código a seguir e cole ABAIXO do tag ]]></b:skin>

<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;jquery&quot;, &quot;1.3.1&quot;);
google.load(&quot;jqueryui&quot;, &quot;1.5.3&quot;);
</script>

Instalar o script para o Slide

Logo depois do JQuery, cole o código do script do slide (se preferir hospede o script em seu site preferido de hospedagem).

A primeira linha (e o fechamento da b:if no final) deve ser deletada se você quiser o slide em todas as páginas. Neste caso está previsto para ser mostrado apenas na página inicial.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- s3Slider 
Developped By: Boban Karišik -&gt; http://www.serie3.info/
CSS Help: Mészáros Róbert -&gt; http://www.perspectived.com/ -->
<script type='text/javascript'>
(function($){$.fn.postslide=function(vars){var element=this;var timeOut=(vars.timeOut!=undefined)?vars.timeOut:6000;var current=null;var timeOutFn=null;var faderStat=true;var mOver=false;var items=$(&quot;#&quot;+element[0].id+&quot;Content .&quot;+element[0].id+&quot;Image&quot;);var itemsSpan=$(&quot;#&quot;+element[0].id+&quot;Content .&quot;+element[0].id+&quot;Image span&quot;);items.each(function(i){$(items[i]).mouseover(function(){mOver=true;});$(items[i]).mouseout(function(){mOver=false;fadeElement(true);});});
var fadeElement=function(isMouseOut){var thisTimeOut=(isMouseOut)?(timeOut/2):timeOut;thisTimeOut=(faderStat)?10:thisTimeOut;if(items.length&gt;0){timeOutFn=setTimeout(makeSlider,thisTimeOut);}else{console.log(&quot;Poof..&quot;);}};var makeSlider=function(){current=(current!=null)?current:items[(items.length-1)];var currNo=jQuery.inArray(current,items)+1;currNo=(currNo==items.length)?0:(currNo-1);var newMargin=$(element).width()*currNo;if(faderStat==true){if(!mOver){$(items[currNo]).fadeIn((timeOut/6),function(){if($(itemsSpan[currNo]).css(&#39;bottom&#39;)==0){$(itemsSpan[currNo]).slideUp((timeOut/6),function(){faderStat=false;current=items[currNo];if(!mOver){fadeElement(false);}});}else{$(itemsSpan[currNo]).slideDown((timeOut/6),function(){faderStat=false;current=items[currNo];if(!mOver){fadeElement(false);}});}});}}else{if(!mOver){if($(itemsSpan[currNo]).css(&#39;bottom&#39;)==0){$(itemsSpan[currNo]).slideDown((timeOut/6),function(){$(items[currNo]).fadeOut((timeOut/6),function(){faderStat=true;current=items[(currNo+1)];if(!mOver){fadeElement(false);}});});}else{$(itemsSpan[currNo]).slideUp((timeOut/6),function(){$(items[currNo]).fadeOut((timeOut/6),function(){faderStat=true;current=items[(currNo+1)];if(!mOver){fadeElement(false);}});});}}}};makeSlider();};})(jQuery);  
</script>
<script type='text/javascript'>
$(document).ready(function() {
$(&#39;#postslide&#39;).postslide({
timeOut: 6000});
});
</script>
</b:if>

Você pode alterar o tempo de mudança das telas do slide, alterando o número 6000 para mais ou para menos.

ATENÇÃO!

Eu modifiquei o script do S3Slider para dar suporte aos mesmos seletores usados no widget, portanto, não adianta usar o código original do S3Slider e copiar os outros códigos deste post, ou o slide não vai funcionar.

Instalar o widget de Posts Recentes vinculado ao slide

Agora vem o script chatinho. Não dá prá colocar o código aqui no post, pois, mesmo parseado, ele não funciona. Então, você deve fazer o download do arquivo txt do link abaixo, copiar o código e colar em seu template.

No Zélia eu coloquei o código logo abaixo da div do main-wrapper, antes da section class='main' (não precisa marcar para expandir os widgets)

Download

postsrecentescomslide.txt

Agora vejamos as partes do script que podem ser customizadas.

<b:if cond='data:blog.url == data:blog.homepageUrl'>

CÓDIGO DO SCRIPT


</b:if>

Assim como expliquei acima, retire a condicional e o fechamento da condicional se você quer que o slide apareça em todas as páginas.

imgr[0] = "http://4.bp.blogspot.com/_j4fpzU2AasM/StEneoD2ZoI/AAAAAAAABfI/WhN3tHhZEy0/s1600/noimage2.gif";

Essa é a imagem que irá aparecer quando não houver nenhuma imagem em seu post. Altere o endereço da imagem se quiser substitui-la.

imgwidth = 590; <!-- esta é a largura da imagem - deve ser a mesma medida que você colocou em postslide e postslideContent -->
imgheight = 380; <!-- altura da imagem - deve ser a mesma medida que você colocou em postslide  -->
summaryPost = 140;  <!-- numero de caracteres que você deseja para o sumário do post  -->
startpost = 6; <!-- a partir de qual post você deseja mostrar no slide - veja observação -->
numposts = 6; <!-- numero de posts que você deseja que apareçam no slide - evite um numero muito alto para não deixar o slide muito pesado  -->

Observação: Acrescentei o startpost no widget para não repetir posts que já estão mostrados na página inicial de seu blog. Você pode colocar numero 1 e o slide mostrará a partir do post mais recente. Se você optar por mostrar apenas a partir dos posts que não estão na página inicial, faça da seguinte forma:

- veja quantos posts você configurou para a página inicial - exemplo: 5 posts.
- coloque como startpost = 6 - o slide mostrará a partir do sexto post mais recente.

Visualize o template e se estiver tudo ok, salve.

Há outros modelos de slides onde podemos usar o widget de posts recentes e mostrarei em próximos artigos.

Criar subdomínio para seu blog

noreply@blogger.com (Rô Zanchetta) — Tue, 04 May 2010 01:10:00 +0000

Ensinei como criar um domínio para seu blog no último post. Quando você resolve comprar um domínio, é porque deseja criar uma marca para seu blog, deixando de ser um subdomínio do blogspot. Mas pode ser que você possua outro ou outros blogs relacionados ao seu blog principal. O que fazer? Ter um domínio para cada um deles? Não - o ideal é que esses blogs também possuam a marca de seu blog principal e sejam subdomínios dele.

Depois de seguir todos os passos do post anterior, sobre as entradas que você deve fazer no painel do UOL Host, faça mais uma entrada CNAME para cada subdomínio que desejar.

Tipo: CNAME
Entrada: coloque aqui o subdomínio com o www
Valor: ghs.google.com

Tipo: CNAME
Entrada: coloque aqui o subdomínio sem o www
Valor: ghs.google.com

Depois de adicionar todos os subdomínios, verifique no painel se eles foram corretamente adicionados

Feito isso, você seguirá o mesmo procedimento no painel do Blogger que fez com o blog do domínio principal para cada blog que servirá como subdomínio.

Novo dominio UOL Host

noreply@blogger.com (Rô Zanchetta) — Fri, 30 Apr 2010 19:00:00 +0000

Como informei pelo Twitter e pelo Facebook, o BloggerSPhera mudou o domínio de .com para .com.br. Essa mudança é trabalhosa e com certeza vou perder pagerank durante algum tempo, mas era necessária em função de alguns projetos que tenho em andamento.

Essa oportunidade serviu também para mudar o registro da Locaweb (onde os domínios estão muito caros) para o UOL Host (melhor preço e mais recursos). O UOL domínios, entretanto, é um pouco mais complicado de configurar. Vamos então ver como é feita essa configuração.

Configurar domínio no UOL HOST

Depois de fazer o pagamento de seu domínio e receber o email do UOL confirmando a liberação, acesse seu painel e clique em "MUDAR AUTORIDADE DNS".

Na tela seguinte, marque seu domínio e no menu "Mais Ações" escolha "GERENCIAR ZONA DNS"

Marque novamente seu domínio na próxima tela e em "Mais Ações" escolha "GERENCIAR DNS"

A tela que abre é onde faremos a configuração. No UOL devemos fazer 3 entradas para o domínio com www, sem www e blog.domínio. Para fazer a primeira entrada:

Em TIPO: escolha CNAME
Em ENTRADA: digite www
Em VALOR: digite ghs.google.com

Clique em "Criar", aguarde a confirmação de que o subdomínio foi criado e faça a segunda entrada:

Em TIPO: escolha CNAME
Em ENTRADA: digite blog
Em VALOR: digite ghs.google.com

Novamente clique em "Criar", aguarde a confirmação e faremos então a entrada para o domínio sem www:

Em TIPO: escolha A
Em ENTRADA: digite @
Em VALOR: digite 74 125 113 121

Clique em "Criar" e aguarde a confirmação. Cheque se suas entradas foram criadas corretamente no painel.

Configurar domínio UOL HOST no Blogger

Depois de concluída a etapa acima, precisamos redirecionar o Blogger para o novo domínio. Abra seu painel na aba Configurações ==> Publicação e clique em "Domínio Personalizado"

Clique em "Ir para Configurações Avançadas"

Coloque o endereço de seu domínio com o www, digite a verificação de palavras e salve

Depois disso, o Blogger vai confirmar que a alteração foi feita e aparecerá uma frase para o redirecionamento sem o www. Marque, digite novamente a verificação de palavras e salve de novo.

Após a confirmação do Blogger, clique para visualizar seu blog em nova janela e verifique se o novo endereço está ok na barra de navegação.

IMPORTANTE!

Existem vários tutoriais para configurar domínios no UOL (procure no Google por Blogger domínio UOL ou cheque a página do BloggerSPhera no Facebook). Eu usei esses tutoriais para configurar domínios para diversos clientes. Algumas vezes deu certo, em outras, ao configurar o domínio sem o www, o blog desaparecia. A configuração que mostro neste post é a que o próprio UOL indica para o Blogger e fazendo dessa maneira nunca mais tive problema na configuração de domínios. Mas pode ter sido pura sorte, portanto, se não funcionar pra você, tente algum dos outros tutoriais. Infelizmente, tanto o Blogger como o UOL não oferecem muita ajuda quando algo sai errado.

Contador de Visitas por Post Único

noreply@blogger.com (Rô Zanchetta) — Thu, 15 Apr 2010 18:23:00 +0000

Uma maneira de identificar quais são os artigos de seu blog mais populares é a análise das visitas por postagem. Geralmente checamos isso em sites ou ferramentas específicas como o Google Analytics

Este widget, criado por Best Blogger Widgets, permite apresentar em seu próprio blog uma contagem de visitas por post.

Instale o Widget

O widget utiliza um script em php hospedado pelo servidor do Best Blogger Widgets, portando não há necessidade de hospedagem.

Se você quiser o widget como na imagem acima, a instalação é muito simples:

1) Acesse o painel de Layout ==> Editar HTML;
2) Salve uma cópia de seu template;
3) Clique para marcar a caixinha "Expandir Modelos de Widgtes;
4) Localize o código do post-header-line-1:

<div class='post-header-line-1'/>
</div>

O código anterior estava mostrando publicidade em nova janela cada vez que o leitor clicava em qualquer link das páginas.

Já foi feita a substituição pelo autor do widget, desta vez utilizando imagens no contador. O código do ítem abaixo (5), é o código que deverá ser utilizado e não contém publicidade.

Veja no final do artigo as instruções e opções sobre a imagem do contador que podem ser usadas.

5) No lugar desse código, cole o código para o widget - deixando como segue:

<div class='post-header-line-1'>
<span class='hit-counter'>
<b:if cond='data:blog.pageType == &quot;item&quot;'><img height='16' src='http://forums.bit-tech.net/images-light/misc/stats.gif' style='padding-right:3px; vertical-align:middle' width='16'/>  <b>Visitas:</b>  <img alt='counter' expr:src='&quot;http://demo.bloggerwidgets.cz.cc/counter.php?page=&quot; + data:post.id + &quot;&amp;digit=16&quot;' style='padding-left:2px; vertical-align:middle'/>  <b:else/><img height='16' src='http://forums.bit-tech.net/images-light/misc/stats.gif' style='padding-right:3px; vertical-align:middle' width='16'/> <b>Visitas:</b> <img alt='counter' expr:src='&quot;http://demo.bloggerwidgets.cz.cc/counter2.php?page=&quot; + data:post.id + &quot;&amp;digit=16&quot;' style='padding-left:2px; vertical-align:middle'/></b:if>
</span>
<div class='clear'/>
</div>

6) Para alterar a imagem da numeração do contador, procure no código o trecho digit=16 e altere o número 16 para o número da imagem que você preferir.

Veja os modelos:

7) Visualize o template e se estiver tudo ok, salve.

ATENÇÃO!

A cópia deste artigo em qualquer idioma não está permitida sem a autorização prévia do criador. Se você deseja compartilhar este artigo, peça autorização em Best Blogger Widgets

Projeto Rainbow Documentários

noreply@blogger.com (Rô Zanchetta) — Thu, 15 Apr 2010 00:57:00 +0000

Nestes primeiros meses de 2010 tenho desenvolvido alguns projetos que pretendo em breve colocar em meu portfolio. Enquanto o portfolio não fica pronto, vou apresentando a vocês alguns dos projetos prontos ou em andamento.

Blog Rainbow Documentários

http://rainbowdocumentarios.blogspot.com/

Um dos desafios para esse blog foi o de criar uma lista de conteúdo em ordem alfabética que fosse automática e não exigisse muito trabalho do administrador do blog.

A solução foi colocar a letra inicial nos marcadores dos posts e depois usar a chave de API do Google para gerar um "Feed Control". Houve um grande trabalho inicial para montar o código para os feeds de categorias de todas as letras do alfabeto, mas a partir daí, em uma página estática a lista é apresentada automáticamente e não é muito pesada.

Outro desafio era colocar nas postagens um botão para download, sem que o administrador tivesse que mexer em HTML. Foi então usado o "blockquote" para fazer um background para o botão.

O desenho foi elaborado partindo do nome do blog "Rainbow" (arco-íris) e alguns elementos tiveram como inspiração o blog de Dante Araújo e do Gerenciando Blog. Usei transparências e bordas arredondadas com imagens. Destaque para o Widget do Códigos Blog.

Ícones de Edição Rápida do Blogger

noreply@blogger.com (Rô Zanchetta) — Wed, 14 Apr 2010 01:34:00 +0000

Os quick edit icons ou ícones de edição rápida do Blogger podem ser úteis ou causar uma grande dor de cabeça. Eu prefiro retirar todos os ícones de edição dos gadgets, deixando apenas uma maneira de editar as postagens. Mas isso é muito pessoal, e cada um tem suas preferências. Vou mostrar como se livrar ou usar de maneira menos intrusiva esses ícones.

Retirando o ícone das postagens

Neste caso, não tem mistério. Acesse o painel de Layout ==> Elementos de Página do seu blog e clique para editar o gadget das postagens.

Em seguida, desmarque a opção de "Mostrar edição rápida".

Alterando a imagem de edição rápida (lápis) para um texto

Essa é a maneira que uso em meus templates. Muitas vezes a imagem do lápis atrapalha a visualização do administrador do blog quando está fazendo alterações no template. Por isso, mudo a imagem para um texto. Essa também é uma boa solução quando o Blogger aparece com bugs que mostram o ícone de edição para qualquer leitor. Com um texto que só você conhece, o leitor com má intenção terá mais dificuldade para identificar a edição rápida.

Acesse a aba Layout ==> Editar HTML. Salve uma cópia de seu template (SEMPRE!!!). Marque a caixinha "Expandir Modelos de Widgets" e procure o trecho no código HTML:

<b:includable id='postQuickEdit' var='post'>
  <b:if cond='data:post.editUrl'>
    <span expr:class='&quot;item-control &quot; + data:post.adminClass'>
      <a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
        <img alt='' class='icon-action' height='18' src='//www.blogger.com/img/icon18_edit_allbkg.gif' width='18'/>
      </a>
    </span>
  </b:if>
</b:includable>

Vamos substituir o trecho em que aparece a imagem para o texto de sua preferência. Também vamos tirar o "title" do link para que não apareça o tooltip indicando que é o texto da edição rápida:

<b:includable id='postQuickEdit' var='post'>
  <b:if cond='data:post.editUrl'>
    <span expr:class='&quot;item-control &quot; + data:post.adminClass'>
      <a expr:href='data:post.editUrl'>
        TEXTO DE SUA PREFERÊNCIA
      </a>
    </span>
  </b:if>
</b:includable>

Retirar a imagem de edição rápida (ícone de ferramentas) dos widgets

Como disse anteriormente, eu retiro a edição rápida de todos os meus widgets. Prefiro edita-los pelo painel "Elementos de Página". Isso ajuda muito a visualização quando estou alterando templates, principalmente nas páginas internas e previne intrusos em meus blogs.

Nesse caso usaremos CSS para retirar a imagem de todos os widgets de determinada coluna. Se você quer retirar a edição rápida da sidebar, por exemplo, acesse a aba Layout ==> Editar HTML e não marque a caixinha "Expandir Modelos de Widgets".

No final da CSS de seu blog (acima da tag ]]></b:skin>}, coloque o estilo que irá esconder a imagem:

.sidebar .item-control a.quickedit img{
display:none;}

Se você quer tirar a imagem de uma coluna que não use a class sidebar, substitua a primeira parte do código, por exemplo:

#footer-wrapper .item-control a.quickedit img{
display:none;}

Ou seja, mantenha o código .item-control a.quickedit img e modifique o início para a coluna onde quer tirar a imagem.

Retirar a imagem de edição rápida (ícone de ferramentas) apenas de alguns widgets

Se você prefere manter a imagem de edição rápida em alguns widgets e retirar de outros, marque a caixinha "Expandir Modelos de Widgets" e no final do código do widget procure o seguinte trecho e delete:

<b:include name='quickedit'/>

BloggerSPhera no Facebook

noreply@blogger.com (Rô Zanchetta) — Tue, 09 Mar 2010 19:17:00 +0000

Você conhece a página do BloggerSPhera no Facebook? Se não conhece, acesse - BloggerSPhera | Facebook - e torne-se fã, para acompanhar todos os serviços que estamos disponibilizando nessa página.

Além dos posts do BloggerSPhera, todos os dias são publicados pelo menos 4 links de Tutoriais para o Blogger, desde o nível básico até o mais avançado.

Esses links são coletados de posts novos e antigos de diversos blogs em lingua portuguesa, levando em conta as dúvidas mais frequentes dos usuários do Blogger e as novidades que vão surgindo.

Em breve, vou apresentar na página um portfolio com os trabalhos exclusivos do BloggerSPhera e um álbum com todos os templates grátis que tenho desenhado e os links para download.

E para participar do fórum clique na guia "Discussões" e abra seu tópico, ou deixe seus comentários nos tópicos que vão surgindo.

Espero você por lá!

Tags do Blogger no Header - Imagem como background

noreply@blogger.com (Rô Zanchetta) — Tue, 23 Feb 2010 21:15:00 +0000

O Header do Blogger é um dos widgets que tem código mais extenso. Entretanto, boa parte desse monte de caracteres trata-se de comentários e condicionais. Veremos pedaço por pedaço dos códigos do Header e você perceberá que não é nenhum bicho-de-sete-cabeças.

Neste segundo artigo sobre as tags do Blogger, vamos aproveitar o código do Header para aprender um pouco sobre as tags de dados e as expressões. Também temos as tags codicionais no código do Header, mas essas já foram bastante detalhadas em vários artigos do BloggerSPhera, e você pode consultar a categoria Condicionais. Também começaremos a aprender sobre os includes e includables.

O início do widget do Header é semelhante aos outros widgets. Se você leu a primeira parte da série Tags do Blogger, vai encontrar as tags que mencionamos:

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

Includes

Os includes do Blogger, suas tags e atributos estão explicados em uma das páginas de Ajuda do Blogger. Para não repetir informação, vou apenas acrescentar o que não está explicado lá.

Todo o conteúdo dos widgets do Blogger fica dentro da tag b:includable. Essa tag deve ser aberta como no exemplo:

<b:includable id='main'>

e depois de colocado todo o conteúdo deve ser fechada com:

</b:includable>

Agora a coisa fica um pouquinho mais complicada - os includables servem para separar os trechos de código dentro do widget. Sempre deve haver um includable com uma id='main'. Em alguns widgets temos mais de um includable e include, que explicam ao browser o que e como determinado HTML deve ser interpretado. Os includables não aparecem no código fonte da maneira como estão escritos no HTML do template. Vamos ver no exemplo do Header, para que você entenda melhor.

No Header temos 3 includables. O primeiro tem a id='main' e explica ao browser o que fazer quando há imagem de fundo ou não; se o título fica sobre a imagem, ou se a imagem substitui o texto do título, etc.

Vejamos linha a linha esse trecho do código:

<b:if cond='data:useImage'>
Uma condicional: "se for usada uma imagem" (Atenção para a tag data conforme descrito na página de Ajuda do Blogger.)

<b:if cond='data:imagePlacement == "REPLACE"'>
Outra condicional: "Se a condição 'substituir imagem' for igual a 'SUBSTITUA'"


Comentário: Mostre apenas a imagem, sem o texto.
Um pouco de HTML: Os comentários em HTML devem ser sempre escritos entre os sinais, conforme acima:  - Eles servem para o desenvolvedor colocar frases (para si ou para o usuário) que explicam o que o código está fazendo.

<div id='header-inner'>
Abrimos uma div "header-inner"

<a expr:href='data:blog.homepageUrl' style='display: block'>
Um link para a home-page do blog através de uma expressão.

Vamos dar uma paradinha agora para explicar esses links com expressões.
Primeiro, releia com atenção a explicação sobre a tag data: na página de Ajuda do Blogger, pois ela é muito importante. Em outra página da Ajuda do Blogger, você encontra a lista de todas as tags de dados (data tags) que podem ser usadas com a tag data:.

Quando você precisa construir um link para uma página que você não conhece o endereço, mas existe uma tag de dados, você usa a expr:href='.

Um exemplo: a expr:href='data:label.url' faz um link para uma página de marcadores.

É importante você ficar atento que algumas tags de dados funcionam apenas dentro dos widgets para as quais elas trabalham. A tag data:description, por exemplo, só pode ser usada dentro do widget do Header. Já a tag data:blog.homepageUrl pode ser usada em vários locais do código inteiro do template.

Se vocês acharem que está complicado, me avisem, que assim faço um capítulo especial para as tags de dados.

Continuemos, então com o código de nosso Header:

<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>

Esse é o código da imagem que é carregada e que ficará no background do Header. É a continuação daquele link que vimos acima e ao clicar na imagem, o leitor é direcionado para a home page do blog. Apesar de ser um código longo, não tem mistérios:

- os atributos (alt, height, width, src) usam expressões e tags de dados;

Mais uma paradinha aqui para complementar a explicação sobre expressões. Algumas expressões precisam de tags de dados MAIS algum outro valor. Neste exemplo é o caso da id da imagem: expr:id='data:widget.instanceId + "_headerimg"'

Tag de dados de id de widget (data:widget.instanceId) MAIS o nome da id (_headerimg).

As expressões que usam esse MAIS devem ser sempre escritas dessa forma:

expr (dois pontos) atributo (aspas simples) (sinal de igual) tag de dado e seu valor (sinal de mais) (aspas duplas) valor (aspas duplas) (aspas simples)

Outro exemplo para você entender melhor: um link que leva à página de feed de um blog, construído com uma expressão.

Se for para o feed do BloggerSPhera, o link normal seria assim:


<a href='http://www.bloggersphera.com/feeds/posts/default'>

Se não sabemos o nome do blog, usamos a expressão e a tag de dados e construímos o código assim:


<a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>

Continuando:

</a>
      </div>
    <b:else/>
      <!--
      Show image as background to text. You can't really calculate the width
      reliably in JS because margins are not taken into account by any of
      clientWidth, offsetWidth or scrollWidth, so we don't force a minimum
      width if the user is using shrink to fit.
      This results in a margin-width's worth of pixels being cropped. If the
      user is not using shrink to fit then we expand the header.
      -->

Fechamos o link, fechamos a div header inner e temos um SENÃO para aquela condicional "Se a condição 'substituir imagem' for igual a 'SUBSTITUA'".

Depois temos um comentário longo que em resumo significa que a imagem será mostrada como background ao texto (título do blog) e que a largura da imagem poderá ser modificada (reduzida) caso você faça essa opção ao fazer o upload da imagem.

O código que vem em seguida fornece instruções sobre como mostrar a imagem como background do título do blog (obedecendo a condicional), e veremos em nosso próximo post.

Slide de Posts Recentes - Introdução

noreply@blogger.com (Rô Zanchetta) — Sun, 24 Jan 2010 18:23:00 +0000

Muitos leitores se interessaram pelo slide de posts recentes. Pizcos ensinou a fazer um estilo em seu artigo Slideshow entradas automatico. Podemos usar diversos scripts de slides, aliados ao widget de posts recentes. Para que você tente adaptar o widget ao slide de seu gosto, vou explicar como faço essas adaptações.

Este tutorial requer um conhecimento avançado de HTML, de CSS, e algum conhecimento de JavaScript. Em próximos artigos, faço um passo a passo para instalar vários tipos de slides para os usuários com menos conhecimento.

Vou usar como exemplo o slide do template Zélia que é o s3Slider.

Em muitos scripts já vem escrito o modo como será a apresentação (neste caso) do widget. Quando o Anhvo criou o script original de posts recentes montou a apresentação do widget em uma tabela.

Em geral, os slides utilizam listas/listas de links e, por isso, modifiquei o script para uma apresentação dessa maneira. Identifiquei os containers necessários de acordo com os containers do slide, a lista de links e os ítens de lista, com ids e classes e acrescentei uma span para os títulos dos posts e um parágrafo p para o sumário dos posts. Retirei ainda códigos desnecessários para esta aplicação.

Veja como ficou o script (HTML + script) depois de modificado e já montado nos respectivos containers - slidepostsrecentes-html.txt

Temos as ids "slide-wrapper" e "postslide" para os containers. A lista de links foi nomeada com a id "postslideContent" e os ítens de lista com a classe "postslideImage".

Essas identificações foram usadas para o script do slide e para colocar os estilos.

Não foram feitas modificações no script do s3Slider, além da mudança da chamada da função (de "s3Slider" para o nosso "postslide"), para não haver risco de conflito se o usuário já tiver instalado o slide original.

O código do script ficou assim: slidepostsrecentes-slide.txt.

Para a instalação, o script do slide fica dentro da tag <head>, e o script do widget de posts recentes fica no body (sidebar, main, header, etc).

No widget usei a tag data:blog.homepageUrl, assim é possível criar templates para terceiros com o slide instalado e o usuário não precisa mexer em nada (a menos que queira mudar as configurações - nr de posts a ser mostrado, start dos posts, quantidade de caracteres do sumário, etc).

O s3Slider permite dezenas de variações de CSS. No Zelia, utilizei uma das CSS padrões do plugin, com pequenas alterações e usando nossas ids e classes: slidepostsrecentes-css.css.

Bem, esta é uma introdução para quem deseja desenvolver outros slides, usando essa mesma técnica. Em resumo: alterar o script do widget de acordo com as ids, classes, span, parágrafos, etc, necessários para adaptar ao slide.

Como disse no início deste artigo, nos próximos posts ensino a instalar vários tipos de slides que já testei.

Posts Mais Comentados

noreply@blogger.com (Rô Zanchetta) — Thu, 21 Jan 2010 22:43:00 +0000

O Widget que relaciona os posts mais comentados é um dos preferidos para mostrar quais são os posts mais populares.

Antes do script desenvolvido por Abu Farhan o método para instalar esse widget usava as pipes do yahoo.

A vantagem do novo widget é principalmente a rapidez de carregamento, mas também é mais estável. Veja como instalar em seu blog.

Vou colocar 2 opções de instalação:

Instalando o script diretamente no template;
Hospedando o script e instalando o widget através do gadget HTML do Blogger

A) Instalar direto no template

Copie o código do arquivo:

Faça download do link a seguir
http://www.easy-share.com/1909068700/postspopulares.txt
Na Guia Layout em Editar HTML, mantenha desmarcada a caixinha Expandir Modelos de Widgets;
Cole o código no final de sua sidebar.
Visualize e Salve o template.

B) Hospedar o script e instalar em um gadget

Faça o download do script e hospede em seu site de hospedagem preferido

Faça download do link a seguir
http://www.easy-share.com/1909068731/postspopulares.js
Na Guia Layout em Elementos de Página, adicionar um gadget HTML/JavaScript;

Copie o código abaixo e cole no box:

<div id='Popular'>
<script language='JavaScript'>
aBold = true;
numposts=200;
maxshowresult=5;
home_page = "http://NOME-DO-SEU-BLOG.blogspot.com/";
</script>
<script src='http://ENDEREÇO-DO-SEU-ARQUIVO-JS' type='text/javascript'></script>
</div>

C) Customização

Nos dois casos, altere conforme abaixo:

aBold = coloque true se quiser os links em negrito ou coloque false;
numposts = coloque o número de posts que o feed deve carregar. Se seu blog tem muitos posts (acima de 500), evite colocar um número muito alto para não causar demora no carregamento;
maxshowresult = coloque o número de posts que devem ser mostrados no widget.

D) Estilos

Utilize os seguintes seletores para colocar seus estilos:

#Popular {
/* estilos para o container */
}

#Popular ul {
/* estilos para a lista dos links */
}

#Popular li {
/* estilos para os ítens da lista */
}

#Popular a {
/* estilos para os links */
}

#Popular a:hover {
/* estilos para os links com mouse-over */
}

Tags do Blogger - Introdução

noreply@blogger.com (Rô Zanchetta) — Wed, 20 Jan 2010 20:05:00 +0000

Sempre recebo sugestões de tutoriais para serem postados. Uma sugestão que achei interessante foi sobre uma série de postagens explicando as tags do Blogger.

Cada plataforma, seja de forum, portal ou blog, possui suas próprias características, mas em todos os casos, o mínimo que um designer precisa para criar um template é o conhecimento básico de HTML, CSS e linguagem de programação.

Nossos exemplos irão se basear na construção de sites e na comparação entre o Blogger e o Wordpress que são as plataformas mais populares entre os blogueiros brasileiros.

O princípio de tudo é o HTML. Então vamos começar construindo um site básico usando o bloco de notas.

ACOMPANHE O DEMO

1) Abra seu bloco de notas e veja como começar seu código:

<html>
 <head>
<title>MEU SITE</title>
<style>

</style>
</head>
<body>

</body>
</html>

2) Faça uma pasta (pode ser no desktop ou em "Meus Documentos") com o nome "meusite"

3) Digite esse código no bloco de notas e salve nessa pasta como: "meusite.html"

Se você clicar para abrir esse arquivo, perceberá que ainda não tem conteúdo, mas o nome do site (MEU SITE) já aparece na aba.

Já nesse início, quando comparamos com o código do Blogger, temos a primeira tag. No lugar em que você digitou "MEU SITE" entre as tags <title> e </title>, no Blogger temos a tag: <data:blog.pageTitle/>.

Quando construímos templates para uso de terceiros, não sabemos o nome que o blog terá. Essa tag será útil em todos os locais onde será necessário usar o nome do blog - um exemplo simples: no rodapé da página para créditos/copyright.

Vamos continuar construindo nosso site para que possamos visualizar conteúdo:

4) Inclua agora mais algumas linhas de código, deixando como segue:

<html>
 <head>
<title>MEU SITE</title>
<style>
body {
  background: black;
  margin:0;
  color: #333333;
  font:x-small Arial, Sans-serif;
  font-size/* */:/**/small;
  font-size: /**/small;
  text-align: center;
  }

a:link {
  color:#ff9900;
  text-decoration:none;
  }

a:visited {
  color:#333;
  text-decoration:none;
  }

a:hover {
  color:#333;
  text-decoration:underline;
}

a img {
  border-width:0;
  }

#outer-wrapper {
  width: 960px;
  margin:0 auto;  
  text-align:left;
  font: normal normal 13px Arial, Sans-serif;
  }

#header-wrapper {  
  margin:0 auto 10px;
  border:1px solid #ffffff;
  }

#header-inner {
  background-position: center;
  margin-left: auto;
  margin-right: auto;
}

#header { 
  margin: 5px;
  border: 1px solid #ffffff;
  text-align: center;
  color: #ffffff;
}

#header h1 {
  margin:5px 5px 0;
  padding:15px 20px .25em;
  line-height:1.2em;
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size: 30px;
}

#header a {
  color:#ffffff;
  text-decoration:none;
  }

#header a:hover {
  color:#cccccc;
  }

#header .description {
  text-transform:uppercase;
  letter-spacing:.2em;
  line-height: 1.4em;
  font-size: 14px;
  color: #cccccc;
 }

#header img {
  margin-left: auto;
  margin-right: auto;
}



</style>
</head>
<body>
<div id='outer-wrapper'><div id='wrap2'>

    <!-- skip links for text browsers -->
    <span id='skiplinks' style='display:none;'>
      <a href='#main'>skip to main </a> |
      <a href='#sidebar'>skip to sidebar</a>
    </span>

<div id='header-wrapper'>
<div class='header section' id='header'><div class='widget Header' id='Header1'>
<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
Meu Site
</h1> 

</div> <!-- fim da class .titlewrapper -->
<div class='descriptionwrapper'>
<p class='description'><span>Site de Teste
</span></p>
</div> <!-- fim da class .descriptionwrapper -->
</div> <!-- fim da id #header-inner -->
</div> <!-- fim da id #Header1 -->
</div> <!-- fim da id #header -->
</div> <!-- fim da id #header-wrapper -->


</div> <!-- fim da id #wrap2 -->
</div> <!-- fim da id #outer-wrapper -->
</body>
</html>

Nesse código já incluímos alguns estilos, para poder visualizar conteúdo, e incluímos nosso primeiro conteúdo no "Header". Vamos agora checar a estrutura e tags do Blogger:

Nomeação dos containers

O Blogger usa o termo "outer-wrapper" para definir o container principal, ou seja, aquele em que todos os outros boxes estão contidos. Também adiciona o "wrap2" que nem sempre é usado, mas serve se o usuário quiser colocar estilos adicionais (uma imagem de fundo no bottom, por exemplo). Portanto, há duas divs de fechamento no final do código. O box onde fica o título e a descrição do blog é o "header-wrapper".

Folha de Estilos - tag b:skin

No Wordpress, e na maioria dos sites, a folha de estilos é hospedada fora do template. Como o Blogger não possui hospedagem para arquivos (a não ser as imagens do Picasa), a folha de estilos é escrita no template.

A folha de estilos (CSS) do Blogger fica entre as tags próprias do Blogger <b:skin><![CDATA[/* e ]]></b:skin>.

Essas tags são as <style> e </style> de nosso site - clique para visualizar o código fonte de seu blog, você verá que as tags <b:skin><![CDATA[/* e ]]></b:skin> aparecem como <style id='page-skin-1' type='text/css'></style>.

"b:section"

A tag b:section é a abertura de uma div (veja no código fonte que ela se transforma em div). Ela contém sempre uma class e uma id. As sections podem ser preferred: 'yes' ou showaddelement='no'. Quando é preferred: 'yes' ela sempre aceita a adição de widgets; quando é showaddelement, pode ser 'no' (não aceita adição de widgets) ou 'yes' (aceita a adição de widgets). A diferença entre preferred: 'yes' e showaddelement='yes' é que, quando você utiliza showaddelement pode determinar o número máximo de widgets na section, com maxwidgets e o número de widgets que deseja para a section.

Da mesma forma que as divs, as tags b:section precisam ser fechadas com a barra invertida (</b:section>) ao encerrar o código.

"b:widget"

Assim como a b:section, a b:widget é a abertura de uma div e possui uma id. Essa tag possibilita aos usuários iniciantes instalar widgets e gadgets do Blogger de forma automática, sem necessidade de conhecimento de HTML, como os widgets de Marcadores, Arquivo, Lista de Links, Perfil, Seguidores, Blogroll, etc. Cada widget de mesmo tipo que você acrescenta recebe na id um número diferente, por exemplo: id='LinkList1', id='LinkList2', etc. Além da id, as b:widget possuem:
- um title, que é o título que você determina ao adicionar o gadget;
- um type, que é o tipo de widget (exemplos: LinkList para listas de links, Profile para perfil, etc).
- e um locked, que pode ser locked='false', quando o widget fica aberto para edição ou locked='true', para fechar o widget para edição.

O locked='true' é útil quando desenhamos templates para terceiros e hackeamos (alteramos a estrutura) do widget. Dessa forma o widget permanece com o hack quando o usuário instala o template.

O type é uma class e permite que você acrescente estilos para todos os widgets de mesmo tipo.

Para entender melhor, se você quer estilos apenas para a lista de links de id nr 1, você aplica estilos assim:

#LinkList1 {
/* estilos */
}

Quando você quer estilos para todas as listas de links usa o pontinho da class e o tipo:

.LinkList {
/* estilos */
}

O Blogger possui ainda um widget HTML. Esse widget é um espaço para adicionar widgets de terceiros e códigos em geral, sem que seja necessário mexer no código HTML do template.

Cada widget do Blogger possui sua própria estrutura e tags, e veremos cada um nos próximos posts.

Skiplinks

Aquele código que vem logo após a abertura do outer-wrapper é uma âncora (um link). Skip significa "pular", portanto esse link pula do topo do blog para o local onde se inicia o main-wrapper ou a sidebar. Ele está com style='display:none;' e por isso não aparece em seu blog, mas você pode deletar esse estilo e aplicar alguns estilos à essa id, para uso dos seus leitores. Isso é útil para blogs com header de muita altura.

O "Header" do Blogger

O código do header do Blogger é imenso. Isso é necessário para usuários iniciantes. Facilita o upload de imagens de fundo e dá alternativas para uso de texto sobre a imagem ou não, sem que o usuário precise mexer com HTML.

Esse será o primeiro widget que estudaremos, quanto à sua estrutura e suas tags, portanto, não perca a próxima aula!

ACOMPANHE O DEMO

Salvar os widgets do Blogger automáticamente

noreply@blogger.com (Rô Zanchetta) — Wed, 20 Jan 2010 16:35:00 +0000

Uma excelente novidade! Não há mais necessidade de tanto malabarismo para conservar seus widgets do Blogger quando você troca de template. Agora isso pode ser feito de maneira automática.

Até pouco tempo, quando trocávamos de template era necessário salvar nossos widgets de forma manual. Cada usuário tinha seu próprio jeitinho para fazer isso. Eu publiquei a forma que achei mais fácil no post Como salvar uma cópia de seu template e widgets.

Mas todo aquele procedimento não é mais necessário.

Agora, quando você troca de template, na hora de salvar, o Blogger exibe a seguinte mensagem:

Portanto, você só precisa clicar em MANTER WIDGETS para salvar os que já existem em seu template. Mas você ainda deve ficar atento aos widgets que possuem a mesma id (ex.: HTML1, Label2, etc), mudando o número para não correr o risco de salvar widget errado.

JQuery 1.4 - Atualize seu blog

noreply@blogger.com (Rô Zanchetta) — Mon, 18 Jan 2010 18:49:00 +0000

Na semana passada foi aniversário da minha biblioteca preferida de scripts. No último dia 14 o jQuery completou seu 4º aniversário e nós ganhamos um presentão - o release da versão 1.4.

A nova versão já está disponível no Google, e você pode alterar a chamada do script em seu blog, preparando-se para as novas aplicações que vem por aí.

Quem ainda não tem a biblioteca instalada em seu blog, é muito simples: adicione o código abaixo antes da tag </head>

<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;jquery&quot;, &quot;1.4&quot;);
</script>

Com isso você pode instalar várias aplicações que usam jQuery, sem precisar hospedar o arquivo da biblioteca.

Para comemorar esse aniversário tão significativo (os numerólogos de plantão podem falar mais a respeito dos números 4 e 14) e o lançamento da nova versão, a equipe do jQuery preparou o site The 14 Days of jQuery , onde, durante 14 dias consecutivos você poderá saber sobre todas as novidades da nova versão.

Para quem gosta de criar aplicações, confira o post jQuery 1.4 Released: The 15 New Features you Must Know no blog net tuts+ com um resumo das novas características, melhorias, etc.

Tendências Webdesign 2010 - Parte II - Everything Big

noreply@blogger.com (Rô Zanchetta) — Thu, 14 Jan 2010 19:00:00 +0000

Em 2010 tudo é grande. Várias partes do design crescem, algumas para chamar a atenção do leitor, outras para disponibilizar espaço editável à parte do conteúdo.

Imagens imensas no Header

Blocos Introdutórios (descrição do blog) aumentando o espaço do Header

Tamanho de Fontes maior nos títulos

Footer de grandes proporções e com muito espaço editável

continua em próximo post

Uma Galeria de Blogs do Blogger

noreply@blogger.com (Rô Zanchetta) — Wed, 13 Jan 2010 19:07:00 +0000

Blogger Galeria é o novo projeto do BloggerSPhera. É um showcase em português de blogs do Blogger com layouts originais. Você pode participar sugerindo o link de blogs da plataforma Blogger que possuam design original e exclusivo.

Outras galerias de blogs do Blogger

Blogger Showcase

Blogger Showcase.net

We love Blogger

Tendências Webdesign 2010 - Parte I

noreply@blogger.com (Rô Zanchetta) — Fri, 08 Jan 2010 15:42:00 +0000

Uma página web pode ser fashion ou não. Pois é, assim como em outras atividades, o ser humano também segue a moda em seus sites. E, logicamente, existem aqueles que "ditam a moda".

Entretanto, assim como com suas roupas ou a decoração de sua casa, você só deve seguir as tendências que tem a ver com seu estilo, ou, neste caso, com o estilo de seu blog.

Vamos ver o que foi publicado como tendência em webdesign para o ano de 2010. Muitas dessas tendências são continuidade de anos passados e que continuam in.

Primeiro veremos o que já foi moda, mas agora está out:

Fotos de executivos sorridentes;
Imagens do globo terrestre;
Puzzles (imagens de quebra-cabeças);
Lâmpadas;
Imagens de engrenagens.

O que está in:

Gradiendes e sombras sutis

Tipografia em relevo (Letterpress)

Minimalismo

Estilo Magazine (Revista)

Grandes espaços em branco

continua em próximo post...

Showcase - Blogger Design Brasil - 1

noreply@blogger.com (Rô Zanchetta) — Thu, 07 Jan 2010 17:10:00 +0000

Talvez por ser uma plataforma gratuita, a maior parte dos usuários do Blogger no Brasil não se preocupa em instalar um desenho exclusivo em seus blogs. Alguns usuários mais avançados fazem modificações em templates nativos do Blogger ou templates baixados da net. É mais comum encontrar desenhos exclusivos em blogs de webdesigners, como vocês podem ver neste artigo.

Em próximos posts vocês perceberão que fora do Brasil é possível encontrar desenhos sensacionais em blogs de diversos nichos.

µnor considerations

Usando o Snapshot Sable de Blogcrowds como base, o Adriano do µnor considerations fez um belo trabalho com imagens - sombras e transparências - distribuídas no topo, nos backgrounds e em mais alguns detalhes do template.

Insight

João Alvarenga faz uso de imagens, com sombras e gradiendes, e de CSS, para criar sombras em textos e transparências em imagens no Insight. Destaque para as thumbs de imagens que só aparecem nas páginas "index".

iceBreaker

Sergio Estrella em seu template Orange Iceberg 4, faz pouco uso de espaço em branco, sem comprometer a visualização e boa aparência do iceBreaker. Os boxes e as cores estão distribuídos de forma inteligente, ocupando o espaço de maneira agradável e útil.

Universo Sombrio

Em seus templates Papyro Dark e Gothic Darkness 3.0, Clau usa texturas e imagens de fundo para dar destaque a seus blogs Universo Sombrio e Gothic Darkness.

Bruno Paiva

Em seu blog Moleskine Digital, o designer Bruno Paiva apostou na tendência de desenhos e fontes hand-drawn, ou seja, os que imitam desenhos e letras feitos à mão livre.

Logicamente não conheço todos os blogs brasileiros que usam a plataforma Blogger, mas sempre trarei para vocês os desenhos que encontro pela net e que se mostram diferenciados (como diz o Marcelo do CSS Padrões) da "Frota de Táxi".

Deixe também sua indicação!

Hacks e Widgets Blogger em 2009

noreply@blogger.com (Rô Zanchetta) — Wed, 06 Jan 2010 18:10:00 +0000

Se compararmos 2009 a 2008, sem dúvida o Blogger subiu vários degraus. Além das melhorias implantadas pela própria equipe de desenvolvimento da plataforma, programadores, profissionais ou amadores, nos brindaram com diversos hacks que melhoram bastante a usabilidade de nossos blogs. Vejamos os que fizeram mais sucesso:

Hack Leia Mais Automático

O Hack de resumo automático dos posts, sem dúvida, foi o que mais chamou a atenção dos blogueiros em 2009. Mesmo depois do "Leia Mais" nativo do Blogger, muitos usuários continuam preferindo usar o hack que resume posts novos e antigos, criado pelo Anhvo do vietwebguide.com (que infelizmente está fora do ar!)

A versão 3 desse hack foi publicada pelo BloggerSPhera no artigo Resumo do Post - Hack Leia Mais Automático.

Widget de Posts Recentes com Imagens

Também desenvolvido pelo Anhvo, esse widget foi traduzido para vários idiomas e diversas versões foram feitas utilizando a mesma base. O BloggerSPhera desenvolveu algumas dessas versões. Pizcos utilizou esse script + JQuery para criar um slide de posts recentes.

Novas versões do Blog TOC

O excelente widget Blog TOC do Beautiful Beta ganhou duas novas versões, criadas pelo Abu Farhan - TOC por Categorias e TOC por data. Veja as versões do BloggerSPhera em Templates com os Novos Blog TOC

Widget "Os mais Comentados"

Abu Farhan desenvolveu ainda um widget com os posts mais comentados, sem a utilização das pipes do yahoo (que causam demora no carregamento das páginas). É uma alternativa muito melhor, mais rápida e fácil de instalar. Veja como, em seu artigo: Popular post for blogger

Posts Relacionados com thumbs das imagens

Aneesh do Blogger Widgets fez uma versão do widget do LinkWithin, muito simples de instalar. Veja o tutorial em Related Posts with Thumbnails for Blogger

Na minha opinião, esses foram os hacks / widgets que mais chamaram a atenção no último ano. E você? Quais foram os seus preferidos?

Bom Ano Novo!

noreply@blogger.com (Rô Zanchetta) — Tue, 05 Jan 2010 18:17:00 +0000

O BloggerSPhera retoma suas atividades neste início de ano, após um período de ausência. Sofri uma queda e quebrei meu braço, sendo obrigada por ordens médicas a ficar afastada do computador.

Espero que os leitores e amigos tenham passado um ótimo período de Festas!

Como vocês podem perceber o blog está de roupinha nova.

Neste ano, pretendo dar um certo destaque a posts sobre design (mais ênfase em CSS: tipografia, uso de imagens, etc; links para "inspiração"; mostra de templates...). Nas primeiras semanas farei um apanhado dos melhores tutoriais e hacks publicados para o Blogger no ano de 2009, e também planejei uma série de posts onde mostrarei blogs com desenhos sensacionais que usam a plataforma Blogger.

A todos os colegas blogueiros desejo muito sucesso neste novo Ano!

Sombras em texto com CSS

noreply@blogger.com (Rô Zanchetta) — Mon, 26 Oct 2009 18:48:00 +0000

Em CSS temos uma propriedade chamada text-shadow que permite que você coloque sombras no texto que definir.

Para aplicar a propriedade você precisa definir:
a cor da sombra;
distância horizontal - esquerda/direita - entre o texto e a sombra;
distância vertical - topo/bottom - entre o texto e a sombra;
blur da sombra, ou seja o quanto a sombra deve ficar embaçada, sendo 0 uma sombra mais sólida e variando na medida - quanto maior, mais embaçada (difusa).

Os valores devem ser escritos na ordem que coloquei acima, exemplo:

Texto com Sombra

#sombra{
background: white;
color: white;
font-size: 2em;
margin: 0 auto;
text-shadow: #666 0px 0px 5px;
width: 300px;
}

Texto com Sombra

#novasombra{
background: white;
color: black;
font-size: 2em;
margin: 0 auto;
text-shadow: #666 3px 2px 2px;
width: 300px;
}

Condicionais para Criar Páginas Estáticas no Blogger

noreply@blogger.com (Rô Zanchetta) — Mon, 26 Oct 2009 15:45:00 +0000

Existem diversos tutoriais publicados sobre Como Criar Páginas Estáticas no Blogger. Quem desenha templates por encomenda ou para distribuição, porém, esbarra sempre no mesmo problema: customização fácil para usuários iniciantes. Neste tutorial compartilho o jeitinho que encontrei para solucionar isso.

Sem dúvida, são as maravilhosas condicionais que irão nos ajudar nessa tarefa. Porém, as condicionais precisam das tags do Blogger e é aí que a coisa enrosca.

Como já vimos anteriormente, as tags para páginas no Blogger são:

data:blog.url - onde você pode definir em que URl você quer ou não determinados estilos

data:blog.homepageUrl - para página inicial;
"http://endereço-da-pagina" - colocando o endereço da página.

Exemplo:

<b:if cond='data:blog.url == &quot;http://www.bloggersphera.com/search/label/Condicionais&quot;'>
<!--- CÓDIGO --->
</b:if>

data:blog.pageType - define em que tipo de página

"item" - página individual dos posts;
"index" - páginas "index": home, marcadores, busca, etc;
"archive" - páginas dos arquivos por mês.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<!--- CÓDIGO --->
</b:if>

data:blog.pageName - define em que nome de página

"NOME DA PÁGINA" - colocando o título da página.

<b:if cond='data:blog.pageName == &quot;Condicionais&quot;'>
<!--- CÓDIGO --->
</b:if>

Lembrando sempre que a grafia neste último caso deve ser idêntica à usada no blog.

É relativamente tranquilo usar essas tags (blog.pageName ou blog.url) para as páginas estáticas, quando você está alterando seu próprio template. Complica em templates para distribuição, pois você não sabe que título ou endereço a página do usuário terá.

Uma alternativa é usar condicionais com as tags allowComments ou showBacklinks, mas essas tags só funcionam dentro do widget Blog1.

Eu prefiro usar showBacklinks, pois existem usuários que desabilitam comentários em posts antigos. Só é necessário avisar o usuário que fará o download do template para desabilitar comentários e backlinks nessas páginas.

No último artigo sobre Condicionais na área de posts, montamos um código para 3 tipos de páginas: Home (com 2 códigos/estilos de posts), demais páginas index e páginas individuais dos posts.

Agora, vamos dividir o single-posts em dois, acrescentando uma classe para os posts das páginas individuais estáticas. Chamaremos a classe de wide-posts. Nos posts de páginas estáticas geralmente usamos apenas título e corpo do post, então serão esses os códígos que colocaremos para a classe wide-posts.

Não irei repetir todo o código, vamos partir de onde fecha a condicional para as páginas index e começa a single-posts:

</b:if> <!-- fecha o código condicional para as "todas as páginas, exceto as individuais dos posts"  -->

<b:else/> <!-- condicional: se não for a "todas as páginas, exceto as individuais dos posts" ou seja, se for a página individual de posts -->

    <div class='single-posts'>
<!-- AQUI FICAM OS CÓDIGOS PARA OS POSTS DAS PÁGINAS INTERNAS -->

<!-- Condicional: SE for "mostrar backlinks" diferente de "verdadeiro"  -->
<b:if cond='data:post.showBacklinks != &quot;true&quot;'>
<!-- AQUI FICAM OS CÓDIGOS PARA OS POSTS DAS PÁGINAS ESTÁTICAS -->
<div class='wide-posts'>
<style type='text/css'>
/* LOCAL PARA COLOCAR ESTILOS PARA OS CONTAINERS QUE ESTÃO FORA DA ÁREA DE POSTS, EXEMPLO: CONTENT-WRAPPER, MAIN-WRAPPER, SIDEBAR, ETC */
</style>

<a expr:name='data:post.id'/>

<!-- início do título do post -->
    <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>
<!-- fim do título do post -->

<!-- linha abaixo do título do post -->
    <div class='post-header-line-1'>
<!-- códigos para alinha abaixo do título do post -->
    </div> <!-- fecha a div class post-header-line-1 -->

<!-- início do corpo do post -->
    <div class='post-body entry-content'>
      <data:post.body/>
      <div style='clear: both;'/>
    </div> <!-- fecha a div class post-body entry-content -->

  <!-- fim do corpo do post -->

</div> <!-- fecha a  div class wide-posts -->

<b:else/> <!-- condicional: se não for "mostrar backlinks"  diferente de "verdadeiro", o código será o seguinte -->
<!-- AQUI FICAM OS CÓDIGOS PARA OS OUTROS POSTS DAS PÁGINAS INDIVIDUAIS -->

<!--- CÓDIGOS -->

</div> <!-- fecha a div class post-footer -->

</b:if> <!-- ATENÇÃO: feche a condicional para os single-posts -->

 </div> <!-- fecha a div class single-posts -->

</b:if> <!-- fecha os códigos condicionais -->

  </div> <!-- fecha a div class post hentry -->

<!-- fim do includable do post -->
</b:includable>

ATENÇÃO AOS SEGUINTES PONTOS!

Acrescentar o fechamento da nova condicional que colocamos antes de fechar a div single-posts;
A classe wide-posts só pode ser usada para colocar estilos para os posts das páginas estáticas, então os outros estilos da página (mudar largura do content ou do main-wrapper, colocar display:none para a sidebar, blog-pager, etc) deverão ser colocados dentro da condicional no corpo do includable do post.

Tendo escrito o HTML, podemos então usar a classe para colocar estilos:

.wide-posts{
/* estilos para o post */
}

.wide-posts h3{
/* estilos para o título do post */
}

.wide-posts .post-body{
/* estilos para o corpo do post */
}

/* etc... */

Apesar de estarmos esperando para breve uma tag static para páginas estáticas no Blogger, tenho minhas dúvidas se essa tag nos oferecerá toda a liberdade que gostamos para personalizar nossos templates. Tomara que essa tag nos permita realmente criar páginas, e não seja apenas uma tag estática (desculpem o trocadilho) para 2 ou 3 páginas definidas pelo próprio Blogger.

Bem, com este artigo encerro a série sobre os códigos condicionais na área de postagens. Espero que vocês tenham entendido o conceito:

Páginas Diferentes!!

Fazer uso das tags do Blogger (data:blog.url, data:blog.pageType, data:post.isFirstPost, data:post.showBacklinks, etc);
Usar as condicionais b:if, b:else;
Acrescentar classes para cada tipo de post onde deseja diferenciar os estilos;
Colocar os códigos que deseja para os posts em cada div dessas classes;
Prestar atenção no fechamento das condicionais e das divs.

Depois de montado o código HTML, basta conhecer um pouco de CSS para criar templates com muitos, muitos estilos diferentes.

Quem quiser brincar, fazendo seus testes e experiências, segue o link para download de um arquivo em Bloco de Notas, com todo o código HTML do includable do post, descrito nesta série de tutoriais. Deixe depois nos comentários, o link de seu blog ou blog de testes para que todos possamos apreciar sua criatividade!

condicionais-post.txt

Leitura Recomendada - outras maneiras de criar páginas estáticas no Blogger:

Imagem: Screenshot da página About de Jared Digital