Templates Novo Blogger

Como dividir o cabeçalho do Blogger

noreply@blogger.com (Ariane) — Fri, 23 Oct 2009 21:58:00 +0000

Atendendo pedidos, vou explicar como dividir o cabeçalho do blog para que possa acomodar outro widget ao lado do título e abaixo do mesmo. Lembrando que todos os tutoriais aqui publicados usam o template Mínima do Blogger como base; templates já modificados podem não apresentar o resultado esperado.
Este é o método que eu uso, vocês podem encontrar outros tutoriais que expliquem de maneira diferente, ok?

Primeiro vamos entender o cabeçalho original, no HTML:

<div id='header-wrapper'>

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='Header Dividido TNB (Cabeçalho)' type='Header'/>

</b:section>

</div>

Perceba que existe uma Div (bloco) no alto da página de nome (ID) 'header-wrapper' que recebe um widget de nome Header1 dentro de uma seção header. Header1 é um widget como qualquer outro elemento que você adiciona em sua sidebar por exemplo, e que não se perde a cada troca de template por que está trancado (locked='true'). O que precisamos fazer é estabelecer que a seção header não ocupe a área total de header-wrapper para dar espaço a uma nova seção. Faremos isso no CSS. Procure por:

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Neste trecho do CSS está contido o estilo para toda div header-wrapper. Veja que a largura total desta div é de 660px. Você pode aumentar esta largura (não sem antes aumentar a largura de Outer-Wrapper, que é a Div maior que engloba todas as outras). O que vou fazer primeiramente é estabelecer que Outer-wrapper tenha 990px de largura:

#outer-wrapper {
width: 990px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

Feito isso, aumento a largura de header-wrapper para 980px de largura:

#header-wrapper {
width:980px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Agora que a Div header-wrapper está apta para conter duas seções, vou dar uma largura para header e determinar que flutue à esquerda (para que a nova seção se apresente à direita do título do blog):

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: left;
float:left;
width:40%;
color:$pagetitlecolor;
}

Em seguida crio uma nova seção que ocupará o lado direito de header-wrapper e que receberá o novo widget; vou chamá-la de #header-right:

#header-right{
margin: 5px;
border: 1px solid $bordercolor;
text-align: left;
float:right;
width:56%;
color:$pagetitlecolor;
}

Bom, sabemos que apenas com CSS não se cria nada, ele serve apenas para dar estilo, portanto iremos criar a nova seção no HTML:

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

</div>

Pronto, já temos o nosso cabeçalho dividido em dois. Salve e vá até a página Layout, deve ficar assim:

Se você deseja que a nova seção possa receber mais de um widget, basta apagar o trecho maxwidgets='1' ou aumentar o número de 1 para quantos widgets deseja que ele receba.

Mas Ariane, eu quero colocar um widget ao lado do título e um baixo, ocupando todo o espaço do header-wrapper, tem como? Tem sim. Novamente vamos criar uma nova seção que chamaremos #header-bottom. Vamos estabelecer primeiro o estilo e depois acrescentamos o código HTML:

#header-bottom {
width:100%; /*veja que a largura é total*/

margin:0 auto 0px; /*não há flutuação, está alinhado ao centro*/
}

e no HTML:

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

<b:section class='header-right' id='header-right' maxwidgets='1' showaddelement='yes'/>

<div style='clear:both'/>

<b:section class='header-bottom' id='header-bottom' maxwidgets='1' showaddelement='yes'/>

</div>

A linha <div style='clear:both'/> abaixo das duas primeiras seções serve para 'empurrar' a nova seção (header-bottom) para baixo, caso contrário ela ficaria acima das outras e bagunçaria todo o layout. Salve e veja como deve ficar na página Layout:

E então eu fiquei muito feliz de conseguir dividir meu cabeçalho e coloquei lá um banner do Adsense de 468x60 na seção da direita e um de 790x90 na seção de baixo e ficou assim:

Aff Ariane, ficou feinho...não tem como deixar o banner alinhado no centro? Tem, claro que sim. O que fizemos até agora foi dar estilo para as seções que recebem os novos widgets, mas não determinamos como os widgets devem se comportar dentro destas seções, certo?
Vou então determinar que o widget que ocupa a seção #header-bottom apareça alinhado ao centro, com um espaçamento para o topo de 5px:

#header-bottom .widget{text-align:center; padding-top:5px;}

Acrescento ainda uma cor no background de #header e obtenho este resultado:

Melhorou um pouco, não? Claro que estou apenas usando um exemplo bem básico para que você tenha uma noção, depois é com a criatividade de cada um. Você também pode centralizar o widget que ocupa a seção #header-right, da seguinte maneira:

#header-right .width{text-align:center} /*o banner ocupará o centro da seção*/

Supondo que você queira colocar em #header-bottom uma lista de links (ou marcadores) para que se apresente como um menu horizontal, acrescente no CSS:

#header-bottom ul{
margin: 0 0 0;
padding: 0 0 0;}

#header-bottom li{
float:left;
list-style-type:none;
}

#header-bottom li a{
display:block;
padding:0 20px; /*espaçamento entre os títulos*/
font-size:0.9em; /*tamanho da fonte*/
font-weight:normal;
text-decoration:none;
color: #000000; /*cor do link*/
}

#header-bottom a:hover{
color:#000000; /*cor do link no quando passa o mouse sobre*/
text-decoration:none;}

O resultado é este (acrescentei também uma borda em #header-wrapper e um background em #header-bottom valor #ccc):

É isso ;)

Como colocar links no menu

noreply@blogger.com (Ariane) — Wed, 14 Oct 2009 17:22:00 +0000

Muitas pessoas me perguntam como colocar links nos menus dos templates que baixam aqui e em outros blogs. Outra pergunta que me fazem muito é que link colocar no menu. Então vamos por partes.
Se você baixou um template que tem a opção de menu horizontal, saiba que há duas maneiras distintas de editar os links:

Editar através do html.

Este tipo exige que os links sejam colocados diretamente no código html do menu. A estrutura do código de um menu é bastante semelhante ao exemplo abaixo:

<div id='menu'>
<ul>
<li><a href='url do link aqui'>Home</a></li>
<li><a href='url do link aqui'>Sobre</a></li>
<li><a href='url do link aqui'>Fotos</a></li>
<li><a href='url do link aqui'>Contato</a></li>
</ul>
</div>

Entre <div id='menu'> e </div> encontra-se o conteúdo do bloco ou seja, uma lista, que se inicia em <ul> e termina com </ul> . Entre cada um dos <li> e </li> deve ser colocado o link de destino e onde está Home, Sobre, Fotos, etc, o nome que aparecerá no menu (destino do link).
Mas, que links colocar no menu? Você pode colocar o link de um post específico (criar um post sobre você ou seu trabalho e colocar em Sobre ou ainda um formulário de contato em um post e nomear Contato) para dar a impressão de páginas, por exemplo. Para obter o link de um post específico, basta clicar sobre o título do post e ir em Copiar Link. Se o post não tiver título, basta copiar o endereço que aparece no seu navegador quando está na página do post. Você pode ainda linkar um marcador específico como faço aqui no blog (em Templates). Basta clicar com o botão direito do mouse sobre determinado marcador de sua lista e copiar o link.

Editar através do gadget Lista de Links.

Em muitos dos templates que disponibilizo deixo para que o menu seja editado através do gadget Lista de Links. Para isso, basta ir em Layout, clicar em Adicionar Elemento de Página e escolher a opção Lista de links:

Em Novo Url do Site coloque o link de destino e em Novo Nome do Site o nome que aparecerá no menu. Clique em Adicionar Link e continue colocando os outros links que deseja que apareçam no menu.

Não coloque título em sua lista!
Tendo terminado sua lista, disponha os links na ordem que deseja que apareçam, da esquerda para a direita no menu, clicando nas flechinhas que direcionam para cima e para baixo (para cima o link fica à esquerda, para baixo à direita).

Clique em Salvar e arraste o gadget para o espaço destinado ao menu, geralmente à direita do cabeçalho ou abaixo dele.

Mas como saber que tipo de edição há em cada template? Bom, geralmente o autor dá uma pista de como editar o menu, mas se ele esquecer (e eu sempre esqueço...) procure no código do seu template algo semelhante a primeira lista (HTML) e se não houver nada assim, edite uma Lista de Links e arraste para o local que seja mais obviamente indicado para mostrar um menu e visualize para ter certeza de que arrastou para o local correto.

Template Setembro

noreply@blogger.com (Ariane) — Thu, 08 Oct 2009 20:16:00 +0000

Demo | Download

Pelo nome do template é fácil chegar a duas conclusões: a) eu não tenho a mínima imaginação para batizar templates e b) este template está sendo publicado com um certo atraso.

Ele segue os moldes do Template Futebol, porém com a sidebar à direita. A diferença principal é o slide que funciona apenas na primeira página do blog (Home) e que também pode ser retirado do template sem problemas.

Os posts se apresentam automaticamente resumidos com miniatura da imagem utilizada na página principal (Home) e também nas páginas que apresentam os posts relacionados a um marcador ou data do arquivo.
O último post publicado apresenta um resumo maior e tamanho da imagem também maior que o restante dos posts.
Todas as cores podem ser modificadas no painel Fontes e Cores, com poucas exceções. Foram utilizadas imagens tanto no header quanto no background da página que podem ser removidas através do código. Se você desejar remover as imagens, procure pelos seguintes trechos do código do template:

Background:
Apague o que está em negrito
body {
margin:0;
background:$bgcolor url(http://i32.tinypic.com/vpby2a.jpg) repeat;
Header
Apague o que está em negrito:
#header-wrapper {
margin:0 auto;
overflow:hidden;
padding:0;
background:$headerbgcolor url(http://i32.tinypic.com/2uyj7np.png) repeat-x;

Para colocar os links no menu horizontal

O espaço do menu está a direita do título do blog, na página Layout. Clique em Editar no retangulo correspondente e coloque seus links.

Para ativar o formulário de busca, procure o trecho abaixo e coloque o nome do seu blog onde indicado:

<div id='subright'>
<form action='http://seublog.blogspot.com/search' id='search' method='get'>
<label class='hidden' for='s'>Search:</label>
<input id='subsearch' name='q' type='text' value=''/>
<input id='subsubmit' type='submit' value='Go'/>
</form>
</div></div>

Para colocar imagens no slide, procure o seguinte trecho:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='s3slider'>
<ul id='s3sliderContent'>
<li class='s3sliderImage'>
<img src='http://i26.tinypic.com/24oyu7n.jpg'/>
<span>texto-a-ser-exibido</span>
</li>
<li class='s3sliderImage'>
<img src='http://i26.tinypic.com/2cr9d02.jpg'/>
<span>texto-a-ser-exibido</span>
</li>
<li class='s3sliderImage'>
<img src='http://i28.tinypic.com/vhvq7l.jpg'/>
<span>texto-a-ser-exibido</span>
</li>
<div class='clear s3sliderImage'/>
</ul>
</div>
</b:if>

As imagens devem ter o tamanho 600px de largura e 220px de altura.

Substitua as url's em negrito pelas url's de suas imagens e coloque a legenda onde indicado.

Arquivos necessários para o funcionamento do slide:

Para que o slide funcione é necessário utilizar dois scripts: jQuery e s3Slider, que acompanham o pacote com o código do template. Hospede no Google Site ou use qualquer outra hospedagem de sua preferência, anote a url fornecida de cada um dos script, depois procure no código do template um trecho idêntico ao mostrado abaixo e coloque as url's onde indicado:

<script src='url do arquivo jquery' type='text/javascript'/>
<script src='url do arquivo s3Slider' type='text/javascript'/>

Se você não deseja utilizar o slide, basta apagar todo o trecho mostrado acima (para a colocação das imagens).
Não retire o link para o Templates Novo Blogger que está no rodapé.
Se deseja redistribuir este template, por favor entre em contato comigo.
Se desejar fazer outras modificações no tema, consulte os tutoriais.

Em breve publicarei outros templates que estou terminando. Espero que gostem :)

Link para o final de semana

noreply@blogger.com (Ariane) — Sat, 19 Sep 2009 02:37:00 +0000

A novidade que o Blogger traz esta semana é o avatar nos comentários. Semana passada foi o Jump Break (o 'Leia Mais' nativo do Blogger: isso mesmo, chega de gambiarras!). Como um monte de gente tratou das novidades, não vou me repetir aqui, prefiro indicar os posts sobre esses e outros assuntos:

Jump Break – o hack “Leia mais” do Blogger - Dicas Blogger
Ativando as fotos/avatares nos comentários do Blogger - IceBreaker
Avatar/Fotos nos Comentários do Blogger - Ferramentas Blog
Personalizando o avatar nos comentários - htmhelen
Ativando foto nos comentários e Correções - Códigos Blog

e outros assuntos:
Comentários e Conversa no blog com Google Conversation Element - Mamanunes
Imagen y enlace en la firma del post para varios autores - El Escaparate de Rosa
O que é Cache e Requisições HTTP? - Bloggersphera
border-radius - Gema Blog
Hablando de la propiedad Float - Vagabundia

e alguns links que guardei no Twitter esta semana (sim, uso o Twitter também para guardar links):
Best Sites to Download Free Patterns
Over 5000 FREE Adobe Photoshop Brushes
11 Classic CSS Techniques Made Simple with CSS3
25 High-Quality Calligraphy Fonts
Os 20 experimentos mais bizarros da história
100 anos de efeitos especiais
Yo quiero ser un Blog Star

Bom final de semana! ;)

Template Impressões

noreply@blogger.com (Ariane) — Tue, 15 Sep 2009 00:08:00 +0000

Demo | Download

Template com menu horizontal e uma sidebar.
Para editar os links do menu horizontal, procure o seguinte trecho do código do template:

<div id='navigation'>
<ul>
<li class='home'><a href='http://riscoserasuras.blogspot.com/'>Home</a></li>
<li class='tab'><a href=''>Sobre</a></li>
<li class='tab'><a href=''>Imagens</a></li>
<li class='tab'><a href=''>Contato</a></li>
</ul>
Substitua a url em negrito pela url do seu blog e coloque as outras url's que desejar.

Obs: As imagens utilizadas neste template, por serem grandes, tornam o carregamento da página um tanto lento. Este problema pode ser contornado hospedando as imagens no seu próprio blog.

Como hospedar as imagens no seu blog:

1- Crie uma nova postagem e acrescente todas as imagens que acompanham o código do template. Deixe a imagem como grande:

2- Coloque todas as imagens neste post e salve o post como rascunho.

3- Clique em Editar HTML e copie a url da imagem:

4- Cole a url no local correspondente no código do template. Por exemplo, a imagem body background deve ser colocada em :

body {
background:url(http://4.bp.blogspot.com/_YGpl3rQPSzI/SqXYfLn4NHI/AAAAAAAAN0g/4QIzInK6ssQ/s320/back.png) repeat;

Algumas imagens aparecem duas vezes, no formato png e gif e devem ser colocadas na ordem em que se apresentam. Por exemplo, em .top há dois backgrounds, desta maneira:

background: url(aqui coloque a imagem top 1) no-repeat top center;
_background: url(aqui coloque a imagem top 2) no-repeat bottom center;

Atenção! O link copiado será mais ou menos como o mostrado abaixo, no entanto a parte em vermelho deve ser apagada:

http: //3.bp.blogspot.com/_YGpl3rQPSzI/Sq63cwTvbZI/AAAAAAAAN7c/AYGWsJGOq1c/s1600-h/bottom+1.png

Template Futebol

noreply@blogger.com (Ariane) — Mon, 14 Sep 2009 20:12:00 +0000

Demo | Download

Template com menu horizontal, formulário de busca e marcadores como menu suspenso na barra superior. Posts resumidos automaticamente com miniatura da imagem utilizada. A novidade aqui é que o último post publicado aparece destacado (largura e altura maior) e também resumido automaticamente. As bordas arredondadas não são visíveis no Internet Explore. Todas as cores podem ser modificadas no painel Fontes e Cores.

Para editar os links do menu, clique em Editar, conforme a imagem abaixo:

Na janela que se abre, clique em editar em cada linha, para alterar o link:

Para ativar o formulário de busca procure pelo seguinte trecho no código do template (não precisa expandir modelo de widget) e coloque o link do seu blog onde indicado:

<div id='subnav'>
<div id='subleft'>
<form action='http://seublog.blogspot.com/search' id='search' method='get'>
<label class='hidden' for='s'>Search:</label>
<input id='subsearch' name='q' type='text' value=''/>
<input id='subsubmit' type='submit' value='Go'/>
</form></div>

Template Pin-Up

noreply@blogger.com (Ariane) — Sat, 05 Sep 2009 01:22:00 +0000

Demo | Download

O template contém:

- Menu superior à direita. Para editar os links do menu superior (Menu1) procure o seguinte trecho no código do template, apague o que está em negrito e coloque o seu link no lugar:


<div id='menu1'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a expr:href='data:blog.homepageUrl + "feeds/posts/default"' title='Subscribe to Content via RSS'>Feed</a></li>
<li><a href='http://twitter.com/_Ariane_' title='Twitter'>Twitter</a></li>
<li><a href='http://template122.blogspot.com/2009/02/contato.html' title='Contato'>Contato</a></li>
</ul>
</div>


- Menu horizontal abaixo do cabeçalho. Para editar os links do Menu2, procure o seguinte trecho do código do template:


<div id='subscribe'>
<ul>
<li class='link1'><a herf=''>Categorias</a></li>
<li class='link2'><a href=''>Fotos</a></li>
<li class='link3'><a href=''>Arquivos</a></li>
<li class='link4'><a href=''>Sites</a></li>
</ul>
</div>


Coloque os links entre as aspas após href=

- Resumos automáticos de postagens com miniatura das imagens utilizadas;
- Sidebar dividida em duas colunas;
- Footer dividido em 3 colunas;
- Posts Relacionados nas páginas internas.

Podem usar e modificar à vontade, peço apenas a gentileza de não retirarem os créditos, ok?

Bom final de semana! :)

Mostrar os Marcadores e Arquivos como listas

noreply@blogger.com (Ariane) — Fri, 04 Sep 2009 13:06:00 +0000

Por padrão, quando se clica em um Marcador ou mês do arquivo no Blogger, ele exibe todos os posts relacionados completos, o que acredito que não ajuda muito na busca do leitor, principalmente se você tem muitos posts em uma categoria/mês. Porém é possível determinar que, clicando em um marcador ou mês do arquivo, surjam apenas os títulos dos posts, ordenados cronologicamente (faça um teste e clique em qualquer marcador aqui do TNB). Eu já expliquei como fazer isso no post Melhorando a apresentação dos marcadores e arquivos mas o que não expliquei ainda é como dar estilo à lista, nem como retirar a data que aparece ao lado do título.

Conforme o tutorial, deve-se substituir <b:include data='post' name='post'> por:

<b:if cond='data:blog.homepageUrl !=data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<data:post.title/></a><br/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

Mas, para que seja possível dar estilo à lista de títulos, ao invés de substituir pelo código acima, substitua por:

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<div id='titulos'><ul><li>
<a expr:href='data:post.url'><data:post.title/></a>
</li></ul>
</div>

<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

Agora para dar estilo à lista, acrescente no CSS (acima da tag ]]></b:skin>):

#titulos{ /*estilo para o espaço ocupado pela lista */
margin:6px 0px;
background:#fff;
padding:6px;
border:1px solid #e3e2e3}

#titulos ul{ /*estilo da lista */
margin:0px;
list-style-type:none;
background:#eeeded;
padding:3px;}

#titulos li{ /* estilo para cada item da lista */
background: #fff ;
padding:15px 0px 3px 40px;
font-weight:bold}

Para que a data não apareça nestas listas, procure pelo código da data dos posts, que é:

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

e substitua por:

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:if cond='data:post.dateHeader'>
<div class='date-header'><data:post.dateHeader/></div>
</b:if>

<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.dateHeader'>
<div class='date-header'><data:post.dateHeader/></div>
</b:if></b:if></b:if>

O que fazemos é colocar a data em uma condicional para a home e não sendo a página home, que apareça nas páginas internas (o que exclui as páginas de arquivos e marcadores).

Vagando pelo Mundo - Entrevista com JMiur

noreply@blogger.com (Ariane) — Sun, 30 Aug 2009 02:00:00 +0000

Rivais no futebol, Brasil e Argentina se entendem muito bem quando o assunto é blog. Nas palavras de JMiur, autor do imperdível Vagabundia: 'Por lo que veo al navegar, la comunidad de blogs en Brasil es muy importante y en realidad, no es de extrañar porque toda la web brasilera es de buena calidad, de las mejores en cuanto a diseño y a creatividad.'. De minha parte (e sei que de muitos leitores brasileiros) só posso tecer elogios ao conteúdo excelente que JMiur compartilha com os usuários do Blogger, com tutoriais muito bem explicados, dicas e idéias criativas, mostrando um grande conhecimento em diversas linguagens, como HTML, CSS, PHP, JavaScript... Apesar de Vagabundia não ser um blog de ajuda, devo confessar que ali tenho aprendido muito e que admiro a atenção que o autor dispensa aos comentários, respondendo pacientemente todas as questões, agradecendo todas as visitas.

Com a mesma gentileza com que trata seus leitores, JMiur concedeu-me uma 'entrevista' que disponibilizo para vocês em duas versões: traduzido para o português (e aqui já me desculpo por possíveis erros, pois compreendo perfeitamente a idéia mas escorrego na tentativa de traduzir algumas palavras/expressões e também usei um tradutor online para algumas expressões) e na versão original.

Entrevista en Español

Quem é JMiur?
Entendi bem a pergunta? Quem sou? Pois esta é a pergunta mais difícil de responder. Digamos que na web sou apenas um usuário sem maiores pretensões além de me divertir e fazer com que os neurônios se exercitem. Na web encontrei uma síntese quase perfeita para expressar-me e para criar. Fora da web sou um senhor casado, chamado Jorge, que trabalha como qualquer outro e que não se parece nada com seu avatar :D

Por que Vagabundia?
O nome é um erro de tipografia :$ Me enganei ao registrá-lo, supostamente seria Vagamundia, uma palavra inventada que mesclava Vagar e Mundo. É que quando pensava num nome, via que os sites sempre indicavam de que se tratava, qual era o tema e, como não tinha a menor ideia do que seria, me ocorreu isso de vagar, de ir sem rumo a ver que se encontra no caminho.

Quantos blogs você tem?
Só dois. Um no Blogger e outro hospedado em um hosting que usa WordPress e que é um subdomínio de uma rede. Na realidade, tenho muito outros que são apenas demos, provas e experimentos, que não são blogs e sim páginas soltas. Também tenho um Tumblr mas não o considero um blog só...um Tumblr :D

Quando criou seu primeiro blog e com qual objetivo?
A 30 de agosto do 2006 mas, quem recorda as datas? e o objetivo era claro: NENHUM
Criei-o porque fiz click no últmo passo depois de ter entrado vinte vezes e ter saído outras tantas. Não sabia que era um blog nem qual era a diferença entre uma página site "normal" e um blog. Não entendia de que se tratava o assunto e ainda estou averiguando. Se tenho sorte, não saberei nunca mas enquanto isso, me divirto procurando!

Você usa tanto o Blogger quanto o WordPress para publicar seus textos. Poderia nos falar um pouco sobre sua experiência com estes dois serviços?
Tecnicamente são completamente diferentes, Blogger é um serviço "fechado" onde as opções estão estabelecidas por quem brinda o serviço e WorPress (falamos de wordpress.org) é mais aberto, assim as possibilidades são maiores. Nenhum dos dois é perfeito e minha lista de queixas se amplia tanto para um como para outro. Em ambos os casos, os usuários estão dependendo sempre dos desenvolvedores dos sistemas.
Para quem começa, Blogger ou seu equivalente wordpress.com são a melhor forma de aprender já que, em ambos casos, teremos algo que funcione com um par de clicks e depois, com paciência, poderemos ir aprendendo e adaptando a nosso gosto. Colocar uma página num hosting próprio e fazê-la funcionar já requer um pouco mais de conhecimentos, não muitos mas um pouco mais. No blog pessoal me agrada sair da estrutura dos blogs e estou apaixonado por PHP que recentemente começo a compreender mas, para um usuário, para alguém que quer ter um blog, superadas as dificuldades técnicas, qualquer dos dois serviços é indiferente porque (sempre repito o mesmo) são só ferramentas e são tão boas ou más como quem as usa, assim a qualidade de um blog depende exclusivamente de quem o faz e não de onde está alojado.

Apesar de prestar um enorme serviço para quem usa a plataforma Blogger, Vagabundia.blogspot não é exatamente um blog de ajuda; podemos encontrar lá assuntos diversos, além de textos pessoais. Qual era o seu objetivo quando criou o blog?

Definitivamente não é um blog de ajuda. Digo e repito quantas vezes seja necessário. É um blog "pessoal" e vá um a saber que significa isso. Acho que "pessoal" porque coloco o que quero, o que gosto, o que me parece interessante sem pensar em nada mais. Eu não escrevo para outros, escrevo para mim. Se fizesse o contrário, seria um vendedor. Não, não é um blog de ajuda porque não sou mestre nem professor de nada. Só conto o que faço, como faço e mostro; saia bem ou mau, dá no mesmo, algo terei aprendido no processo. Em todo caso, um blog só é isso, um lugar onde se compartilham experiências ou vivências e às vezes, nem sequer se compartilham, se escreve e se publica como uma forma de remover de cima. Para mim, um blog é uma mistura estranha de bookmark com psicólogo gratuíto :D

Você demostra um grande conhecimento em HTML, CSS, JavaScritp, PHP...Quando e como você entrou em contato pela primeira vez com estas linguagens?
Não tenho nenhuma formação acadêmica no tema informática. Sou autodidata. O primeiro que aprendi foi Basic para Commodore 64, lendo revistas. Depois, copiava em disketes os códigos fontes das páginas da web e as colocava em meu PC 286 sem Windows e sem Internet para tratar de entendê-las. Quando me 'modernizei' e acessei a Internet, um dia encontrei um manual online, imprimi e ali comecei com isto de HTML, mas sempre offline. Neste manual (da época dos dinossauros) no último capítulo falava de algo novo: do CSS e quando entendi a idéia, me pareceu que era a chave de tudo. Como te disse, só faz 3 anos que criei um blog. Pouco antes havia criado uma conta no Flickr e essa havia sido toda a minha experiência com a Web 2.0. Não tinha idéia de nada e como não tinha idéia, ao criar o blog em Blogger, o primeiro que fiz (talvez para não publicar) foi me pôr a tratar de entender o template. Como isso me tomava muito tempo e, ainda que ninguém visitava o blog me sentia na obrigação de pôr conteúdo, comecei a escrever o que fazia, o que descobria dos códigos, de como haviam mudado quando saiu o Blogger Beta. Suponho que ao ter poucos lugares em espanhol que falassem do tema, isso trouxe visitas, não sei a razão, creio nas casualidades. O PHP é novo. Ainda que faz um par de anos que uso WordPress e sua linguagem é essa, nunca me atrevi a ir demasiado longe e nestes últimos meses estou "a jogar" com essa linguagem e confesso que me fascina. Talvez, por que me recorda um pouco o Basic, não sei. Parece-me muito completo e até simples de compreender, bem mais simples que JavaScript, mais claro, menos pesado e muito mas muito mais poderoso porque pode se fazer qualquer coisa.
Não ter uma educação formal nestes temas tem seus pró e seus contras. O mau é que há certos conceitos básicos que não tenho claros ou que devo assimilar à custa de erros; o bom é que não tenho escrúpulos :D Isto é, não sigo as regras e isso me permite encontrar soluções inesperadas mas também cometer erros elementares. De qualquer jeito, como é algo que não posso mudar, devo me adaptar a minhas limitações e seguir adiante.

O que é o Bolsanegra?
Essa é a segunda pergunta difícil . Que sei eu!! Como rede é um conjunto de pessoas que se foram juntando durante estes anos e que só crêem em fazer o que se lhes dá a vontade. O meu é só outro blog dentro da rede (um dos dois blogs idosos) e no último ano decidi lhe mudar a cara e o fazer ainda mais "pessoal" do que era e sobretudo ver se era possível escapar desse esquema de blog que empilha entradas uma embaixo da outra. Não consegui e por isso, continuo.

Se o blog de Blogger defino sempre como um pátio de jogos, bolsanegra é outro pátio de jogo mas sem o olhar vigilante de algum adulto, compartilhando projetos que jamais irão se realizar com pessoas que o tempo transformou em afetos e que se tornaram uma parte importante de minha vida.

Quanto tempo você dedica aos seus blogs?
Nunca medi o tempo porque é difícil fazer isso, e o cúmulo: não uso relógio. Às vezes, me ocorre que 24 horas diárias mas não mais :D Quando leio ou navego pela internet, de alguma maneira, meu cérebro pensa em termos de blog: 'isto seria algo interessante para provar', 'isto eu gostaria de ver se funciona', 'este é um tema interessante'...logo, o tempo real de escrever ou montar um artigo pode variar. Esses que ninguém lê e que passam despercebidos costumam levar dias e dias de trabalho. Outros que tem 100 comentários e saem em Menéame foram escritos em cinco minutos e se publicaram porque por acaso não os apaguei. Não, não há medidas para isso. Se tenho que dar uma cifra, diria que entre uma coisa e outra devo empregar três ou quatro horas diárias, facilmente e às vezes mais. Costumo trabalhar de noite e são muitos os dias que amanheço em frente ao teclado e depois, em lugar de dormir, simplesmente caio desmaiado sobre a cama :)

Como escolhe os temas que irá publicar? Comentários e pedidos de leitores influenciam nos temas escolhidos?

Oh sim, os comentários ou consultas costumam ser uma fonte de "inspiração", seja porque há um tema específico que me interessa pesquisar ou porque esse comentário me convida a refletir sobre alguma coisa. São fundamentais mas não quando só se limitam a ser um conjunto de perguntas e respostas, para isso, melhor um fórum. Prefiro a palavra conversa à palavra comentário e as conversas sempre são enriquecedoras.

Recentemente você passou a moderar os comentários no Vagabundia.blogspot por conta de um episódio desagradável com um comentarista anônimo. Poderia nos passar sua experiência com os comentários que recebe e sua visão do comportamento de algumas pessoas que se protegem no anonimato? Como um defensor da liberdade de expressão, como é ter que tomar uma medida como esta?
Esta experiência foi realmente feia, muito feia.
Não foi a primeira vez mas sim a mais chata e que me levou a tomar esta resolução depois de consultar outros blogs e chegar à conclusão de que não tinha outro remédio porque Blogger não nos dá as ferramentas mínimas necessárias para nos proteger.
Anteriormente, situações parecidas solucionaram-se bloqueando alguém ou fechando os comentários temporariamente até que o imbecil da vez se cansasse, mas este útltimo foi opressor porque evidentemente , não o estava fazendo manualmente. Eram dezenas de comentários por minuto. Sempre me envergonho ao recordar que quem havia subscrito um comentário para esperar uma resposta, logo se viu inundado por centenas de emails com esses comentários absurdos e insultantes. O primeiro que me ocorreu foi não aceitar comentários anônimos mas não serviu de nada porque quem fazia isso entrava com sua conta de GMail ainda que não tinha perfil disponível. Denunciei-o ao Google mas foi inútil porque do outro lado costuma não ter ninguém que escute. Para Google/Blogger seria fácil saber que o que estava acontecendo era real, eles manejam os comentários e deviam notar que algo raro acontecia, que não era lógico mas, me ignoraram completamente, assim não me restou outro remédio que moderar.
Ainda que isto já tenha ocorrido faz um tempo, decidi os deixar assim simplesmente porque não posso estar presente as 24 horas e não gosto que sujem minha casa. É chato mas inevitável.
O do anonimato era algo que vinha pensado fazia um momento. Parece-me uma descortesia e não vejo nenhum motivo para não se apresentar. O nick que usamos é suficiente para sermos anônimos e na vida "real" (ainda que a web TAMBÉM é vida real) as pessoas saúdam-se, apresentam-se e conversam. Por que devo falar com alguém que se esconde dessa maneira? De que me serve? Que me contribui?
A liberdade de expressão não tem nada que ver com isto, eu não te impeço que se expresse, faça em teu blog e seja responsável disso. Eu defendo a liberdade de expressão de absolutamente todos e sobretudo, de quem me causa aversão porque os direitos humanos (e este é um deles) se fizeram para proteger a meus inimigos, não a meus amigos. Isso não seria liberdade de expressão apenas autoritarismo.

Em seus blogs é possível encontrar muitos artigos sobre música (por exemplo, as categorias música e beatlemania). Qual é a importância da música para você?
Que importância tem a música? TODA, absolutamente toda :É meu maior prazer e escuto música o tempo todo. Cada lembrança está associada a uma música e cada canção traz-me uma recordação; boas e ruins, tristes e alegres. Adoraria ter sido músico mas desafino no chuveiro e não sei distinguir uma nota de outra, talvez seja por isso que lhe dou tanta importância. Algum dia farei um site de música, é algo que sempre desejei.

Mais de uma vez você alertou sobre os perigos de expor dados e imagens pessoais na Internet. Poderia dissertar sobre o assunto?
Esse é o problema mais grave que tem na web e não há forma de o solucionar através da própria web. A única maneira possível se chama educação e essa educação deve começar pelos pais e não pelos filhos. Nós, os adultos, somos os que devemos tomar consciência e aprender.
Como te dizia antes, internet é uma ferramenta. A nenhum pai ocorreria dar a um menino um martelo ou uma furadeira elétrica para que brinque e no entanto, lhes damos um computador. Há algo básico: o publicado é público. Não é um problema moral, filosófico ou legal, é assim e não há maneira do mudar, não há leis possíveis, não há controles estatais possíveis. Tudo se resume em DEVO PROTEGER a meus filhos e para isso devo aprender, devo escutar, devo me envolver, devo compartilhar isto com eles e não os deixar sozinhos.
Jamais, nunca, jamais se deve dar dados nem informações pessoais de nenhuma classe. Se não quer que essa foto "graciosa" de tua noiva seja vista por um chinês em Shangai dentro de um par de dias, NÃO A PUBLIQUE porque inevitavelmente, ele verá. Em internet, nada é totalmente privado: NADA. Internet É isso. Há que entender, há que aceitar e a partir daí, tudo é mais simples e não teremos problemas.

Muitos textos seus são copiados por outros blogs, muitas vezes sem nenhuma referência à sua autoria. Como você encara este tipo de atitude? Independente da questão ética, a duplicidade de textos pode causar algum problema real ao autor do blog?
Isso é inevitável e tem a mesma raiz que o anterior. Até mandaram-me emails contando-me que em tal lado há um artigo de um truque interessante e resultou ser uma cópia de algo que tinha publicado faz anos!!!
Na prática, nada pode se fazer. Se trata-se de outros blogs, parece-me que o melhor é os ignorar porque inevitavelmente, desaparecem. Muito piores são os sites que roubam conteúdos sistematicamente através dos feeds mas, disso deveriam se encarregar Google e os demais buscadores. É absurdo que um artigo teu apareça nos resultados numa posição secundária e um agregador de notícias esteja em primeiro termo; isso sim é um problema sério porque nos prejudica e eles lucram com o trabalho alheio.
Mas nada posso fazer salvo utilizar dois ou três técnicas manuais, pôr assinaturas nos feeds, bloquear as imagens se estão num hosting, não muito mais.
Em todo caso limito-me a seguir pregando que linkar é bom e que isso, ao invés do que muitos crêem, gera visitas e não o contrário. Sem links os blogs deixam de existir; a rede deixa de existir e se transforma em uma plataforma com um discurso único.

O que faz com você não volte a visitar uma página? Especificamente em relação aos blogs, o que você não aprecia em um blog?
O destino :D Quem sabe por que gostamos ou não gostamos de algo? Primeiro que nada, algo geral, o aspecto, a cor, a forma em que está diagramado; não é o fundamental mas é o primeiro que percebemos. Depois, se as páginas são comprensiveis isto é, se está claro como as navegar, se os links funcionam, se se pode seguir uma ordem com facilidade.
Em todo o caso, poderia dizer por que NÃO leio.
Porque publica demasiadas coisas todos os dias e me agonia; porque isso do que falam é o mesmo que li 100 vezes antes, porque os feeds estão incompletos, porque o site contém centos de imagens ou videos e navegá-lo é uma tortura; porque o que publica são só listas de links sem nenhuma avaliação pessoal; porque falam-me de algo "maravilhoso" mas não há um só exemplo de que o tenham tentado aplicar; porque só são artigos que me dizem "vão a tal outro lugar e leiam isto"; porque vejo que os comentários estão cheios de spam e que jamais há uma resposta pessoal; porque têm música de fundo (uso os fones de ouvido e me aborrece que me distraiam); porque forçam-me a instalar plugins para vê-los ou a registar-me para seguir lendo; porque têm pop-ups ou publicidades intrusivas que abrem essas janelinhas que ficam na barra de tarefas.
Bom, como vê, é mais difícil explicar o que gosto do que o que não gosto.Em todo caso, tudo isso é absolutamente subjetivo e até suportável mas, um lugar a que jamais regresso é aquele que pretende me enganar ou que expressa discriminação de qualquer tipo.

Mais de uma vez, lendo suas opiniões, constatei que você defende o direito irrestrito à liberdade de expressão. Poderia falar à respeito?
Como te disse, liberdade absoluta e responsabilidade absoluta. Assumir as consequências da cada ato e de cada palavra. Só exijo algo em troca, que não me obrigue a escutar. Você decide o que escreve e eu decido o que leio. Assim, ambos somos felizes.
No caso dos blogs ou dos fóruns onde há uma ida e volta, em alguns casos, essa liberdade está mal entendida. Liberdade de expressão não é deixar um comentário insultante ou agressivo no site/blog de outro. Isso só é má educação e assim o administrador do lugar o elimina: não há censura, só limpeza. Censura é: não há nenhum lugar onde pode expressar-se e, em todo caso, basta abrir um blog em cinco minutos e ali escrever as barbaridades que lhe ocorrerem. Não deve haver restrições. A única restrição aceitável é a lei e muitas vezes nem isso por que como membros de uma sociedade podemos questionar essas leis.
De fato, se a humanidade não as tivesse questionado desde o início dos tempos, ainda estaríamos a saltar de árvore em árvore. Questionar, duvidar e expressar-se são as únicas características que nos diferenciam dos demais animais.
Na prática, basta fazer click e ir a outro lado, apagar a TV ou fechar o livro e procurar outro. Não é necessário um Irmão Maior que nos diga o que é bom ou o que é mau. Há algum deus terreno imaculado que esteja livre de pecados para decidir? Quem estabelece as regras? Quem as cumprirá? Só se precisa educação para poder conviver com o diferente e o aceitar como parte da diversidade.
E quando se trata de menores de idade, a responsabilidade é dos pais e não devemos delegar essa responsabilidade. Devemos assumí-la.

Com qual objetivo você publica suas opiniões em seus blogs? Como lida com opiniões contrárias?
Escrevo para tirá-las de cima, para que não me molestem, para que não estejam aí dando voltas na cabeça e não me deixem dormir.
As opiniões divergentes não me desagradam, só me desagradam os maus tons e a descortesia. As discussões francas são bem-vindas; os argumentos são bem-vindos;os panfletos, os discursos e as frases feitas não são bem-vindos.
Creio nas diferenças. Não as "tolero" porque tolerar me soa a "suportar"; aceito-as e aplaudo-as. Definitivamente, as opiniões divergentes são o sal desta vida.
Creio firmemente no brainstorming, nessa tormenta de idéias que gera algo que em princípio, tivesse sido inimaginável e que não é a soma de duas ou três senão a potência de duas ou três. Para que isso funcione basta fazer algo bastante difícil nestes tempos: ESCUTAR o outro e não se apaixonar de nossas próprias palavras.

Qual é o seu maior prazer mantendo um blog?
Exercitar o cérebro :D Conseguir que isso que imagino se veja tal como o imagino. Imaginar essa cor, essa linha de pontos num lugar preciso e ohhhhhh ali está ¡Ao FIM!
É um prazer que dura pouco. Sorrio como se tivesse descoberto a roda e pouco depois ... tenho que pensar em outra coisa. Não há nada mais chato que um lugar "terminado".

Sobre o Twitter: o que você acha do Twitter? O que pensa sobre o modo como as pessoas utilizam o serviço?

Vou repetir-me: HÁ DE TUDO e está bem que seja assim. Como ferramenta de comunicação me parece fantástica. Gosto que seja um pouco anárquico, um pouco irresponsável, isto é, que simplesmente seja uma maneira rápida e simples de informar algo, de mostrar algo, de compartilhar algo mas nada mais. Quando se transforma numa carreira de ver quem te segue ou quem não te segue, de quantos RT há ou não há, então já deixa de me agradar. O site está a transformar numa espécie de concurso de popularidade?
Por agora me resulta útil mas se termina sendo só outra passarela de egos, adios.

Você já demostrou em seus textos uma certa aversão por redes sociais. Poderia falar sobre?
Por isso mesmo que dizia de Twitter. Não creio nas redes sociais tal como é proposto no site. No meu ponto de vista, as redes sociais significam carne e osso, lágrimas, um ombro onde chorar, uma mão que se tende, calor de pele, olhos onde se olhar, coisas bastante mais profundas que uma série de mensagens, saludos e presentes virtuais.
O que vejo em lugares como Facebook é muita gente falando ao mesmo tempo e pouca gente escutando. Como pode se criar uma rede se só há monólogos? De que serve uma campanha à favor ou contra algo se a realidade está em outro lado? Bem mais perto mas também bem mais complexa e bem mais difícil de mudar.
Seguramente, como em tudo, há exceções mas, no geral as vejo como cascas sem conteúdo, como essas reuniões de adolescentes onde se discute até saturar como mudar o mundo mas que não conduzem a nada. Uma vez que se acaba o café, cada um volta a sua casa e mais nada. Não sei como se chama meu vizinho mas tenho 500 amigos no Facebook. Inclusive as palavras que se usam são pouco felizes e criam sensações irreais: fans? amigos? Eu não quero um milhão de amigos (perdão, Roberto Carlos) eu quero um só: UM PARA VALER!!!
Bom, confesso, também que há algo pessoal nesta aversão: sou antisocial, não mordo mas rosno :D

Você lê blogs ou sites brasileiros? Conhece algo sobre a blogosfera brasileira? em caso afirmativo, qual sua opinião sobre os blogs do Brasil?
Leio blogs brasileros. Tenho vários deles nos feeds e são eles os que me levam a outros lugares mas, até agora os que sigo regularmente têm que ver com a parte técnica. Meu problema é simples: o idioma. Posso entender a idéia geral de um escrito mas perco a essência, o sabor da palavra, os matizes. Essa é uma limitação importante quando um não conhece a linguagem do outro; as traduções não ajudam muito. É uma pena que até agora não se tenha imposto a educação bilingue como algo obrigatório porque há demasiadas coisas que nos unem.
Pelo que vejo ao navegar, a comunidade de blogs em Brasil é muito importante e em realidade, não é de estranhar porque todo o site brasilero é de boa qualidade, das melhores quanto a desenho e a criatividade. Muitos sites de pessoas que fazem arte gráfica e animações incríveis. Outra confissão: à cada tweet que você coloca com um link à uma página do Brasil, faço click e vou olhar :$
Não sei se pensa o mesmo mas, de um tempo pra cá, me parece que, pelo menos no que se refere ao Blogger, há muita mais interação que antes. Faz um par de anos, as visitas do Brasil eram escassas e hoje está entre os 10 primeiros países com uma média de tempo no blog muito alto, dos mais altos. Acho que o esforço de entender-se e de comunicar-se ainda que seja por sinais, vale a pena e oxalá continue.

Para terminar uma pergunta sobre o Blogger: me parece que o Blogger está prometendo mudanças para o próximo ano, com novas funcionalidades. O que você gostaria de ver no Blogger?
Algo li dessas promessas. Há que lhes crer? Terá algo que ver com todos esses códigos misteriosos que você sempre encontra?

Dizem que "a esperança é a última que morre" mas, também dizem que "aquele que se queimou com leite, vê uma vaca e chora" e, até agora, são poucos os acertos do Blogger, acho que, simplesmente, não sabem que fazer com o serviço. Deveriam vir ao sul a escutar o que dizemos. Serão surdos?
Gostaria que de uma vez por todas resolvessem o problema do alojamento de arquivos, é vergonhoso que não tenha e que quando tem são outros serviços do mesmo Google como essa aberração chamada Google Sites.
Gostaria que a gestão de comentários mudasse absolutamente porque isto que fizeram e que quiseram nos vender como a resposta a nossos pedidos é abominável. Funciona mal (quando funciona) e carece das ferramentas elementares que deveria ter um administrador de um site/blog para os controlar. Não é difícil fazer, só deveriam copiar o que tem qualquer outro serviço medíocre.
Gostaria que voltassem às raízes e que deixassem de agregar coisas inúteis, complexas e incontroláveis, não quero que ponham mais scripts automáticos nem iframes nem códigos escondidos e que deixem de sublinhar todos os links XD
Gostaria que trabalhassem para criar uma ajuda real onde se descreva cada codigo interno para não ter que ficar adivinhando.
Algo mais técnico (já que estamos pedindo, peçamos para valer) gostaria que os dados fossem acessíveis desde o header do blog e não depois; que tivesse alguma forma de combinar condicionais com JavaScript; que o CSS estivesse num arquivo separado; que tivesse dados estatísticos internos mais precisos.
Gostaria ... melhor parar porque não terminaria nunca. Se cumprirem com uma das duas primeiras, me contento e os deixo descansar até o ano que vem.

**************************************************************

Mais uma vez saliento que possivelmente posso ter 'escorregado' em alguns detalhes da tradução e se encontrarem erros, por favor me avisem para que eu possa corrigir o texto.

Quero agradecer novamente ao JMiur pela paciência em responder todas estas perguntas e reafirmar que gostei muito e me senti honrada com sua participação. :)

Entrevista en Español

Hospedar JavaScript no Google Site

noreply@blogger.com (Ariane) — Thu, 20 Aug 2009 17:46:00 +0000

Através do Twitter, Pizcos avisou que é possível hospedar JavaScipt no Google Site e BanakaBanaka fez um post à respeito, explicando como hospedar os scripts. Eu mesma testei e o slide aqui do blog está funcionando com os scripts hospedados por lá.

1- Crie um site no Google Site:

2- Clique em criar página:

3- Escolha a opção Arquivos, dê um nome à nova página e escolha a opção Colocar Página no Nível Superior:

4- Clique em Adicionar Arquivo, procure o arquivo JavaScript no seu computador e clique em Fazer Upload:

5- Clique com o botão direito do mouse sobre o nome do arquivo e escolha copiar link:

6- O link deve ser parecer com este: http:// sites.google.com/site/meuscodigos73/scripts/jquery%282%29.js?attredirects=0.
Exclua do link o trecho em vermelho e coloque no blog (acima da tag </head> ) desta maneira:

<script src='http://sites.google.com/site/codigos1673/scripts2/s3Slider.js' type='text/javascript'/>

Por enquanto tudo está funcionando perfeitamente e esta é uma ótima opção para hospedar scripts depois que o Google Pages fechou suas portas.Esperamos que desta vez não aconteça o mesmo.

Como fazer um template para o Blogger VI - Post

noreply@blogger.com (Ariane) — Fri, 14 Aug 2009 20:14:00 +0000

Continuando a série de artigos sobre Como criar um template para o Blogger, nesta sexta parte mostrarei uma idéia geral sobre as colunas do template Mínima e como dar estilo ao post.

Antes, vamos recapitular um pouco do conteúdo da primeira parte:

Um documento HTML se compõe da seguinte estrutura básica:

<html>
<head>
cabeçalho: aqui está contido o estilo da página - CSS
<head/>
<body>
corpo - aqui está contida a estrutura da página, seus elementos.
</body>
</html>

O código CSS, que dá estilo à página, começa com : <b:skin><![CDATA[/* e sua tag de fechamento é ]]></b:skin>. Tudo o que estiver contido entre estas duas tags refere-se ao estilo da página (aparência) e não à sua estrutura. Não é possível criar um novo elemento (uma coluna, por exemplo) com CSS. O CSS irá apenas determinar a aparência deste bloco, deste elemento.
Imediatamente após o fechamento da tag do CSS, encontra-se </head>, fechando o cabeçalho da página e imediatamente após </head> está <body>, dando início ao corpo do documento:

Se entre <head> e </head> está contido o estilo da página com o código CSS, entre <body> e </body> encontra-se a estrutura do template.

Visão do conteúdo de body no template Mínima (sem expandir modelo de widget):

<body>

<div id='outer-wrapper'>

<div id='wrap2'>

<a href='#main'>skip to main </a> |

<a href='#sidebar'>skip to sidebar</a>

</span>

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='Toda Cute (Cabeçalho)' type='Header'/>

</b:section>

</div>

<div id='content-wrapper'>

<b:section class='crosscol' id='crosscol' showaddelement='no'/>

</div>

<b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Postagens no blog' type='Blog'/>

</b:section>

</div>

<b:section class='sidebar' id='sidebar' preferred='yes'>

<b:widget id='Followers1' locked='false' title='Seguidores' type='Followers'/>

<b:widget id='BlogArchive1' locked='false' title='Arquivo do blog' type='BlogArchive'/>

<b:widget id='Profile1' locked='false' title='Quem sou eu' type='Profile'/>

</b:section>

</div>

</div> 

<b:section class='footer' id='footer'/>

</div>

</div>

</div> 

</body>

</html>

Colori as tags de abertura e fechamento das divs principais para que possam perceber a 'hierarquia', ou ainda, como alguns blocos estão contidos em outros. Entre <body> e </body> a maior div que engloba todas as outras é outer-wrapper, seguida de wrap2 (que não tem estilo definido no CSS) e dentro destes 2 blocos encontra-se:

<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>

Skiplinks são links com âncoras que levam diretamente para o conteúdo da página, pulando qualquer outro menu ou links que possam existir entre o topo da página e os textos, ou sidebar. É uma alternativa para quem tem deficiência visual e usa um leitor de tela. Você pode obter informações detalhadas sobre Skip Navigation aqui. No template Mínima o trecho style='display:none' esconde estes links e para que apareçam em seu blog, basta deletar este mesmo trecho.

Cabeçalho
O trecho do HTML que corresponde ao cabeçalho da página é este:

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

O correspondente no CSS é #header-wrapper, #header-inner, #header, #header h1 (título do blog), #header a, #header a:hover (links do cabeçalho - título) , #header .description (descrição do blog)

Content-Wrapper - Esta é a div que engloba as colunas do post e sidebar do blog. No template Mínima não há estilo para content-wrapper. Se você quiser dar algum estilo à esta div terá que acrescentar no CSS:

#content-wrapper{ ....estilo......}

Crosscol-wrapper

<b:section class='crosscol' id='crosscol' showaddelement='no'/>

</div>

Esta é uma div que fica acima das colunas e que também não tem estilo definido no CSS, apenas dentro do código html, em style='text-align:center' (que centraliza qualquer widget). Para fazer com que esta div apareça na página Layout e possa receber um widget, troque onde está no por yes e salve a modificação. Para dar estilo a crosscol-wrapper, acrescente no CSS:

#crosscoll-wrapper {....estilo...}

Main-wrapper, coluna do post

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Postagens no blog' type='Blog'/>
</b:section>
</div>

Main-wrapper é a div que recebe o widget Blog1, o widget de postagens do Blogger. Para que a div main-wrapper possa receber outros widgets, troque no por yes e será possível acrescentar widgets antes ou depois dos posts. Para destrancar o widget de posts (pois ele é fixo no template), troque onde está locked='true' por locked='false' e você poderá arrastar os posts para a sidebar, por exemplo. Não que mover os posts para a sidebar possa ser interessante, mas este é mais um dado que se pode anotar: para destrancar (e remover) um widget fixo (muitos templates convertidos e modificados vem com widgets fixas), basta trocar true por false.

O correspondente no CSS para a div main-wrapper é este trecho do código:

#main-wrapper {
width: 410px;
float: $startSide;
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 */
}

Entre { e } você poderá acrescentar os estilos que deseja para a coluna de postagem, como background, largura, borda, flutuação (lembrando: float:left, a coluna flutua à esquerda - float:right, a coluna flutua à direita). Todo estilo aqui determinado servirá para a coluna, para a div que recebe o widget de posts (Blog1).

Blog1

Blog1 é o widget fixo em main-wrapper que engloba tudo o que contém o post, da data do artigo à post-footer, o rodapé da postagem, além dos comentários. Para conhecer todas as divs e classes contidas em Blog1 é preciso clicar em Expandir Modelo de Widget, quando todos os códigos 'ocultos' se revelam (o que geralmente desespera um pouco na primeira vez).

Ultimamente muitos códigos novos tem surgido nos templates do Blogger (pelo menos no Mínima, que é o que acompanho), por isso, eu realmente não sei tudo sobre as funções de cada um deles. Também não tenho como explicar aqui cada linha do código que se revela ao expandir o widget, por isso farei um resumo. Daqui em diante sugiro que você acompanhe o texto ao mesmo tempo que observa os códigos que serão mencionados. Crie um blog de testes, escolha o template Mínima, vá em Editar HTML e clique em Expandir Modelo de Widget. Vá procurando a localização dos códigos mencionado. Mostrarei o código html de determinados elementos e seu correspondente no CSS.

Data da postagem - HTML:

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

Data da Postagem - CSS

h2.date-header {
margin:1.5em 0 .5em;}
e
h2 {
margin:1.5em 0 .75em;
font-size:15px;
line-height: 1.4em;
text-transform:capitalize;
letter-spacing:.2em;
color:$sidebarcolor;}

Para o que não for especificado em h2.date-header valerá o que consta em h2.

Título do Post - HTML

<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>

Título do Post -CSS

.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;
}

Como o título do post é um link, no CSS você encontra estilo para o título (post h3), para o título- link no estado normal (.post a...) e para o título-link no estado hover (quando passa o cursor do mouse sobre).

Post - HTML

<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> 
</div>

Post- CSS

.post { /* área ocupada pelo post, o que inclue a data, título, texto e post-footer */
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}

.post-body { /* estilo para o texto, área ocupada apenas pelo texto */
margin:0 0 .75em;
line-height:1.6em;
}

.post-body blockquote { /* estilo das citações /*
line-height:1.3em;
}

.post img { /* estilo das imagens do post */
padding:4px;
border:1px solid $bordercolor;
}

Post-Footer - HTML

tag de abertura:
<div class='post-footer'>

tag de fechamento:
</div>

Post-Footer - CSS

.post-footer {
margin: .75em 0;
color:$sidebarcolor;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
line-height: 1.4em;
}

A div class Post-Footer engloba:

Autor do Post - HTML:

<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>

Não há estilo no CSS. Para dar estilo ao link do autor do texto, acrescente no CSS:

.post-author{...aqui os estilos....}

Data do Post - HTML

<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
</b:if>
</b:if>
</span>

Data do Post - CSS

Não há estilo para a data no template Mínima. Acrescente no CSS:

.timestamp-link{ .... estilo .....}

Link Comentários - HTML

<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span>

Link Comentários - CSS

.comment-link {
margin-$startSide:.6em;
}

Marcadores - HTML

<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>

Marcadores - CSS

Acrescente no CSS:
.post-labels{ ....estilo ....}

Não vou me estender para além destes elementos ou o post ficará enorme e também confuso, com excesso de informações. Para os outros elementos elaborarei novos tutoriais.

Agora que você conhece o significado destes códigos do HTML, poderá modificar suas posições no template de acordo com sua vontade. Basta selecionar, por exemplo, todo o trecho do html referente aos marcadores, recortar e colar abaixo do trecho para o título do post. Faça diversas experiências, modificando as posições dos códigos e acrescentando estilos diversos (como backgrounds coloridos) para cada um, aumentando a visibilidade do espaço que cada um ocupa na coluna main-wrapper. O interessante é destacar cada item com imagens diferentes, por exemplo, um background para os títulos dos posts e um ícone para os marcadores. Se você destacar um trecho, colar em outro local e receber uma mensagem de erro ou ser impedido de visualizar o blog, provavelmente você nã destacou o trecho completo (que deve ir de <span...> até </span>).

Para colocar um pequeno ícone ao lado de qualquer link (como marcadores ou o link comentários), basta acrescentar no CSS:

.post-labels{background: url(link da imagem do ícone) no-repeat bottom left; padding-left:20px; } (para o ícone aparecer à esquerda do link)

para modificar a posição do link comentários:

.comment-link{float:right} o link aparecerá à direita no final do post.

Você pode ainda dar estilo às listas que criar nos seus textos:

.post ul{ ....estilo ....}
.post li{....estilo .....}

item de uma lista no post com imagem como marcador:

.post li {background: url(link da imagem ) no-repeat center left; padding-left:20px;} (a imagem aparecerá à esquerda do item, como eu uso aqui no meu blog).

Exemplo1 :

(clique para ampliar a imagem)

Neste exemplo eu coloquei uma imagem na coluna #main-wrapper (uma imagem que se repete indefinidamente) e uma cor para o background de post, ficando assim o código:

#main-wrapper {
width: 700px;
background: url(http://i30.tinypic.com/kcm36a.jpg) repeat;
border: 2px solid $bordercolor;
float: $startSide;
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 */
}

.post {
margin:15px 10px;
background: #f5f5f5;
padding:1.5em;
border: 4px solid #c373a4
}
Veja que em post eu estipulei uma margin de 15px para o topo e para a base (o que afasta um post do outro e cria o efeito de 'caixas' onde os posts aparecem), além de uma margem de 10px para a esquerda e direita, o que possibilita visualizar a imagem de fundo colocada em main-wrapper. Se a margem de post for 0 (margin:0px) o efeito é completamente diferente:

Veja que sem margin, o background de main-wrapper não pode ser visto nas laterais do post e um texto aparece imediatamente após o outro, sem nenhum espaço.

Note também que em .post, padding afasta o conteúdo (texto) das bordas:

.post {
margin:15px 10px;
background: #f5f5f5;
padding:1.5em;
border: 4px solid #c373a4
}

Padding com um valor 0em ficaria assim:

Exemplo2: degrade (gradiente) no background de main-wrapper:

#main-wrapper {
width: 700px;
background: #fff url(http://i25.tinypic.com/29cph8n.jpg) repeat-x;
border: 2px solid $bordercolor;
float: $startSide;

Veja que neste exemplo, criei uma imagem dregrade rosa/branco, que se repete na horizontal (repeat-x) e antes do link da imagem coloquei o valor da cor (#fff - branco) do final da imagem:

Use a criatividade e crie estilos diferentes para #main-wrapper e para .post, além dos elementos contidos em Blog1. Recomendo o site do Maujor para aprender noções de CSS e dar estilo aos links e blocos.

Leia também:

Diferença entre margin e padding

isFirstPost - Exemplo 2

noreply@blogger.com (Ariane) — Sat, 01 Aug 2009 16:47:00 +0000

Continuando o post anterior, explicarei aqui como deixar o seu blog como o Exemplo 2. Neste exemplo, os posts aparecem resumidos na página inicial e em formato de lista nos marcadores e arquivos (como uso aqui no meu blog). Além disso, usei jQuery no primeiro post, que esconde e revela parte do conteúdo sem sair da página.

Como lembrar nunca é demais, lá vai o conselho da titia: Nunca faça modificações diretamente no seu blog 'oficial'. Crie um blog de testes para isso, evitando desesperos e dores de cabeça.

Atenção: se você seguiu o tutorial anterior e colocou os códigos para o Exemplo 1, substitua tudo pelo que se segue:

1- Clique em Expandir Modelo de Widget, procure por <b:include data='post' name='post'/> e substitua por:

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

<div id='first'>
<b:if cond='data:post.title'>
<h1 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>
</h1>
</b:if>

<p><data:post.body/></p>

<br/>
<span class='commentlink'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span>
</div>

<b:else/>

<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='post'/>
</b:if>

<b:else/>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<div id='first'>
<ul><li><a expr:href='data:post.url'><data:post.title/></a></li></ul>
</div></b:if></b:if></b:if>

<b:else/>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>

<div id='titulos'><ul><li>
<a expr:href='data:post.url'><data:post.title/></a></li></ul>
</div>

<b:else/>

<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

</b:if>

O que fiz aqui foi basicamente isso: Se a condição for o primeiro post na home page, o post aparecerá dentro da div First, exibindo título, texto e link para comentários, caso contrário, os posts aparecem normalmente nas páginas internas. E ainda, se for diferente das páginas internas e diferente da home page, o primeiro post deve aparecer em forma de lista ( <ul><li><a expr:href='data:post.url'><data:post.title/></a></li></ul> ). Se os posts não estiverem contidos em First (ou seja, todos os outros posts), também devem, nestas condições, aparecer em forma de lista (<div id='titulos'><ul><li>
<a expr:href='data:post.url'><data:post.title/></a></li></ul>
</div>) e fora de todas estas condições, os posts devem aparecer normalmente.

Provavelmente existe uma maneira mais simples e enxuta de organizar estas condições (e espero mesmo que sim!) mas confesso que passei muitas horas até conseguir organizar os códigos desta maneira e foi a única sequência lógica que realmente funcionou comigo. Prometo que assim que descobrir uma maneira mais simples ou direta de dispor as condicionais, volto aqui e explico para vocês.

Salve as modificações. Se você está começando agora, siga os passos do primeiro tutorial para ver como aplicar o hack de resumos automáticos e esconder as informações de post-footer e data dos resumos, além do estilo para os resumos da página inicial. Lembre-se de modificar as medidas para que acompanhem a largura do primeiro post.

Se você já seguiu anteriormente o primeiro tutorial, a diferença aqui é que os estilos para First (tanto na página inicial quanto nas listas) serão colocados abaixo da tag ]]></b:skin>, dentro de uma condicional:

Estilo para First em forma de lista:

<style>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
#first{margin:6px 0px;background:#fff;padding:6px;border:1px solid #e3e2e3; clear:both;}
#first ul{margin:0px;list-style-type:none;background:#eeeded;padding:3px;}
#first li{background: #fff;padding:15px 0px 3px 40px;font-weight:bold}
</b:if></b:if></style>

<style>

Aqui estilo para First na home page:

<b:if cond='data:blog.homepageUrl == data:blog.url'>
#first{ /* altere os estilos da forma que achar melhor */
float: left;
margin: 0px 0px 10px 5px;
width: 580px;
text-align:justify;
padding:0px 12px 12px;
font-size: 14px;
line-height: 1.4em;
font-family: 'Trebuchet MS';
color: #3b3b3b;
border-top: 1px solid #E9E9E9;
border-left: 1px solid #E9E9E9;
border-right: 2px solid #E9E9E9;
border-bottom: 2px solid #E9E9E9;
background: #f8f8f8
}
#first h1 {margin: 10px 0 0 0; padding: 3px 20px 6px 20px;font-size: 24px;font-family: Verdana;color:#fff;border-bottom:1px dotted #aeb4af} /* estilo para o título */

#first h1 a{margin: 0px auto; padding: 0px;font-size: 24px;font-family: 'Palatino Linotype';font-weight:normal;color:#e71ea7;letter-spacing:1px; } /* estilo para o título */

#first img{margin: 0 5px 5px 0px;padding: 5px; background: #fff; border: 1px solid #dfc8d1; float:left;width: 150px;height:180px; } /* estilo para as imagens em first-post */
#first .commentlink{float:right} /* estilo para o link de comentários */

#first .date-header{float:right} /* estilo para a data */

</b:if></style>

Agora acima de ]]></b:skin> os estilos para a div 'títulos' que apresenta os outros posts em forma de lista nos arquivos e marcadores:

#titulos{margin:10px 0px 6px;background:#fff;padding:6px;border:1px solid #e3e2e3} /* estilo para a div */
#titulos ul{margin:0px;list-style-type:none;background:#eeeded;padding:3px;} /* estilo para a lista */
#titulos li{background: #fff;padding:15px 0px 3px 40px;font-weight:bold} /* estilo para os itens da lista */

Para ver o resultado, entre neste blog e clique em algum marcador ou no mês de julho dos arquivos.

Para colocar o efeito de revelar/esconder no primeiro post, siga este tutorial no Empório Digital. O efeito também aparecerá nos posts internos, não apenas na página inicial.

O exemplo 3 dispensa um novo tutorial, pois a diferença está apenas na medida dos posts resumidos, que ocupa toda a largura da coluna, ao contrário do exemplo dois, onde cada resumo ocupa metade da medida, ficando dispostos lado a lado.

isFirstPost - um estilo diferente para o primeiro post

noreply@blogger.com (Ariane) — Thu, 30 Jul 2009 04:23:00 +0000

Uma nova condicional do Blogger chamou minha atenção dois meses atrás, mas só agora tive tempo de fazer alguns testes com ela: a condicional isFirstPost.

A tag <b:if cond='data:post.isFirstPost'> é uma condição para o primeiro post visível de uma página, seja a página inicial ou de arquivos/marcadores. Percebendo isso, vislumbrei a possíbilidade de destacar o primeiro post da home (coisa que queria muito há bastante tempo, o que me levou a fazer as experiências mais escabrosas com o pobre Mínima antes da nova tag :D ), diferenciando-o dos demais.
Para que vocês possam entender logo do que estou falando, segue 3 exemplos com os testes que fiz nos últimos dias:

Exemplo 1
Exemplo 2
Exemplo 3

Vou ensinar primeiro o método mais simples para destacar o primeiro post. Quero lembrar antes que qualquer experiência deve ser feita sempre em um blog de testes, nunca faça nenhuma modificação diretamente em seu blog oficial.

Vá em Editar HTML e clique em Expandir Modelo de Widget. Procure pelo seguinte trecho do código:

<b:include data='post' name='post'/>

Substitua o trecho pelo seguinte código:

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

<div id='first'>

<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>

<div class='first-body'>
<p><data:post.body/></p>
</div>

<div class='post-footer'>
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span>
</div>
</div>

<b:else/>
<b:include data='post' name='post'/>
</b:if>

<b:else/>
<b:include data='post' name='post'/>
</b:if>

O que eu fiz foi criar uma nova div (#first) e colocá-la sob duas condicionais, isFirstPost e homepageUrl, ou seja, ela só é válida para o primeiro post da home page. Dentro da div First inseri o título e o link para os comentários.
Fora das condições especificadas, os posts devem aparecer normalmente.

Para dar estilo a First, acrescente no CSS (acima da tag ]]></b:skin>):

#first{ /* aqui especificações para a div first */
margin: 0px 0px 10px 0px;
padding:0px;
float:left;
background: #111;
border: 1px solid #1b1b1b;
}

.first-body{/* Aqui especificações para o text do post */
margin: 0px;
padding: 10px 10px;
line-height:1.5em;
text-align:justify;
color:#ccc;
}

#first h3{ /* Aqui estilo para o título do post */
display:block;
margin: 10px auto;
width: 95%;
font-size: 19px;
padding: 0px 0px 4px 0px;
font-family: 'Palatino Linotype';
text-align:center;
line-height:1.4em;
color: #f5f5f5 }

#first h3 a, #first h3 a:visited{color:#fff} /* cor do título */
#first h3 a:hover{color:#fff} /* cor do título no estado hover */

.first-body img{ /* estilo para as imagens */
padding:10px;
background:#fff;
border: 1px solid #333}

#first .comment-link{ /* estilo para o link comentários */
float:right;
padding: 0px 5px 15px 0px}

Este é o procedimento básico e o resultado é este: Exemplo Básico.

Partindo do princípio básico, mostrarei como conseguir o efeito dos 3 exemplos que coloquei no início do post:

Exemplo 1

Obs: Para este exemplo trabalhei com as seguintes medidas:
#Outer-wrapper width:990px;
#main-wrapper width: 780px;
#sidebar-wrapper width: 200px;

No exemplo 1, apliquei o hack de resumo automático de postagens, menos no primeiro post. Para conseguir este efeito é preciso que primeiro você aplique o código para os resumos automáticos, que você encontra neste post do BloggerSphera. O arquivo JavaScript que deve ser hospedado, pode ser colocado diretamente no código do template da seguinte maneira:

Feita a instalação do hack de resumos automáticos, vá em Editar HTML, clique em Expandir Modelo de Widget e faça os passos para o Exemplo Básico e salve as modificações. Agora coloque os estilos para os resumos na página inicial, abaixo de ]]></b:skin>:

<b:if cond='data:blog.pageType != "item"'>
<style>

.post{
width:185px;
height:240px;
margin:0px 10px 23px 0px;
float:left;
overflow:hidden;
padding:10px;
line-height:1.4em;
font-size:13px;
color: $textcolor;
background: url(http://i31.tinypic.com/2llg4jr.jpg) no-repeat top left;}

.post h3{
margin:0px;
padding:0px 0 5px 0px;
line-height:1.4em;
color:$titlecolor;
letter-spacing:1px;
border:none;
font-size: 15px;
background: url(http://i25.tinypic.com/ra2lub.jpg) repeat-x bottom left }

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

.date-header{display:none}

.post img{ border:none}

.post-body{padding: 0px; margin:0px;line-height:1.4em;}

#showlink{padding: 5px 10px 0 0; float:right;}

</style>
</b:if>

Não se esqueça de especificar um número baixo de caracteres para os resumos, ou o texto sairá do espaço. Neste exemplo eu usei a seguinte numeração:

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 220;
summary_img = 120;
img_thumb_height = 100;
img_thumb_width = 100;
</script>

Agora, acima da tag ]]></b:skin> coloque o estilo para o FirstPost, como no Exemplo Básico, mas com width:540px;

#first{
width: 540px;
margin: 0px 15px 10px 0px;
padding:0px;
float:left;
background: #111;
border: 1px solid #1b1b1b;
clear:both
}

Agora, para que o post-footer (tudo o que vai no rodapé do post, como nome do autor, marcadores, etc) não apareça nos resumos, procure o seguinte trecho:

<div class='post-footer'>

e acrescente logo abaixo dele:

<b:if cond='data:blog.pageType == "item"'>

e para fechar a condicional, procure por este trecho e acrescente o que está em vermelho:

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

</div>
</b:if>
</div>
</div>
Para que as datas só apareçam nas páginas internas e não interfiram com os resumos, busque por este trecho e acrescente o que está em vermelho:

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

</b:if>

Neste Exemplo 1 os posts aparecerão resumidos na Home Page, na lista de Marcadores e na lista de Arquivos.

Para que este post não se estenda demais, amanhã explicarei como proceder para obter o efeito do Exemplo 2 e Exemplo 3.

Customizando gadget de Lista de Blogs

noreply@blogger.com (Ariane) — Wed, 15 Jul 2009 17:54:00 +0000

Uma das opções de gadgets oferecidas pelo Blogger é a Lista de Blogs, que facilita muito a divulgação de blog amigos/recomendados/parceiros, na sidebar.

Você pode optar por mostrar a lista em ordem alfabética ou por blogs atualizados mais recentemente, o número de blogs a serem apresentados na lista e os detalhes que serão mostrados, como o ícone de cada blog, título do post mais recente, um pequeno resumo deste post, miniatura da imagem utilizada no último post e a data da atualização. Ao clicar em adicionar à lista, você deve escolher os blogs a serem apresentados, seja adicionando a url de cada um ou a lista dos blogs que acompanha ou mesmo incrições do Google Reader.

Tudo muito fácil, rápido e simples. No entanto o resultado pode não ser o esperado pois a formatação da lista não acompanha as determinações para as listas da sidebar e as fontes podem se apresentar muito maiores do que o desejado.

Customizei uma lista de blogs, que pode ser vista aqui na sidebar e optei por não mostrar os ícones nem a miniatura da imagem do último post.

A lista está contida na div BlogList1_container e a classe é blog-list-container.

#BlogList1_container - todo o gadget Lista de Blogs
.blog-list-container ul - classe da lista de blogs
#BlogList1_blogs li - cada item da lista
#BlogList1_blogs li:hover - cada item da lista no estado hover
.blog-title a:link, .blog-title a:visited - título dos blogs
.blog-title a:hover - títulos dos blogs no estado hover
#BlogList1_container .blog-content - conteúdo de cada item da lista
.item-content - espaço ocupado por cada resumo apresentado
.item-title a:link, .item-title a:visited - título do último post apresentado
.item-title a:hover - título do último post no estado hover
.item-snippet - cada resumo apresentado
.item-time - data de cada post

O código CSS para meu modelo ficou assim (comentários em azul):

#BlogList1_container{
padding:4px; (espaço para os limites do gadget, possibilitando ver o background escolhido)
background: url(http://i29.tinypic.com/jpykqw.gif) repeat; (imagem do background)
border: 1px dotted #111 (borda do gadget)}

.blog-list-container ul{margin: 10px;} (margem da lista)

#BlogList1_blogs li{
margin-bottom: 5px;
padding: 5px;
font-size: 12px;
background: #222;
border: 1px dotted #111} (estilo para cada item da lista)

#BlogList1_blogs li:hover{background: #333} (estilo para cada item da lista no estado hover)

.blog-title a:link, .blog-title a:visited{
display:block;
width: 95%;
padding-left:514px;
padding-top: 3px;
background: url(http://i26.tinypic.com/1z4byma.jpg) no-repeat bottom left
font-size: 13px;
color: #8e8eff;
font-family:'Palatino Linotype'; } (estilo para os títulos dos blogs)

.blog-title a:hover{color: #ccc} (estilo para os títulos no estado hover)

#BlogList1_container .blog-content{
width: 95%;
background: #111;
padding: 5px;} (estilo para o espaço ocupado pelo conteúdo de cada item da lista)

.item-content{margin: 0px 0px;padding: 4px 13px;margin: 3px 0 0 }(estilo para o espaço ocupado pelo título do post e resumo)

.item-title a:link,.item-title a:visited{color:#b88df9; font-size:12px;}(estilo para os títulos dos posts)

.item-snippet{font-family: Verdana; text-transform:capitalize;line-height:0px;color: #ccc; }(estilo para os resumos)

.item-time {color: #dad8d8}(estilo para as datas)

resultado

Oito lindos templates para Blogger

noreply@blogger.com (Ariane) — Thu, 09 Jul 2009 00:04:00 +0000

Hanging

Demo | Download

Gamma Ray

Demo | Download

Smoky

Demo | Download

Black Power

Demo | Download

Kids Style

Demo | Dowload

Night Sky

Demo | Dowload

Abrasive

Demo | Download

BCute

Demo | Download

Obs: estes templates não foram criados ou convertidos por mim. Qualquer dúvida entrem em contato com os respectivos autores.

Ícones gratuitos para Twitter

noreply@blogger.com (Ariane) — Tue, 07 Jul 2009 17:24:00 +0000

Cute Free Twitter

Follow me on Twitter badges / logos / buttons

Twitter Birds by InaliBlast

Free Twitter Bird Icon Set

31 Twitter buttons and icons

IconTexto WebDev Social Bookmark Icon

Twitter Icons with Attitude

Practika: A Free Icon Set

Free Fat Twitters icon pack

Twitter Eggs

Free Twitter Caps

40 Cute Free Twitter Graphics

Cute Tweeters Icon Set

50 Free and Exclusive Twitter Icons

Free Rockin’ Twitter Icons

Brushes para Photoshop - Papel

noreply@blogger.com (Ariane) — Tue, 07 Jul 2009 16:15:00 +0000

Grungy Paper Brushes (12 brushes)

Old Paper Brushes (4 brushes)

Paper Brushes (23 brushes)

Folder Paper Brushes (6 brushes)

Burnt Paper Brushes (23 brushes)

Old Paper Brushes 2 (7 brushes)

Old Paper Brushes 5 (18 brushes)

Gadget de Posts Rotativos

noreply@blogger.com (Ariane) — Mon, 06 Jul 2009 21:38:00 +0000

Encontrei no Blog Doctor um gadget muito interessante que mostra todos os posts do blog como um pequeno slide. Você pode ver uma demostração aqui neste blog de testes, na sidebar.

Eu fiz algumas modificações no estilo original e disponibilizo aqui uma versão que se adapta a qualquer largura de coluna, seja na sidebar, seja acima dos posts.

O gadget mostra todos os posts do blog, do último publicado ao primeiro, e exibe o título do post, autor, data e um pequeno resumo do texto.

Ver Código

Copei todo o código do gadget escolhido, vá em Layout, Adicionar Elemento de Página e escolha HTML/JavaScipt e cole o código, fazendo as seguintes modificações:

<script src="http://www.google.com/jsapi/?key=PUT_AJAX_KEY_HERE" type="text/javascript"></script>
<script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script>

<script type="text/javascript">
function showGadget() {
var feeds = [
{title:'title',url:'http://MYBLOG.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=999'},
];

new GFdynamicFeedControl(feeds, 'feedGadget',
{numResults : 1000, stacked : true, title: "BLOG_TITLE ~ Random Posts."});
}
google.load("feeds", "1");
google.setOnLoadCallback(showGadget);
</script>
<div id="feedGadget">Loading...</div>

Onde está AJAX_KEY_HERE deve ser colocada a chave da API de pesquisa AJAX, que você obtém clicando aqui. Concorde com os termos e condições, coloque a url do seu blog e copie o número fornecido e cole no local indicado;
Onde está MYBLOG coloque o nome do seu blog;
Onde está BLOG_TITLE ~ Random Posts. coloque o título que preferir para o gadget.

Ícones RSS

noreply@blogger.com (Ariane) — Mon, 06 Jul 2009 18:14:00 +0000

Ícones RSS de uso livre. Para fazer o download clique na imagem.

Customizando o gadget slide II

noreply@blogger.com (Ariane) — Sun, 05 Jul 2009 17:51:00 +0000

Expliquei anteriormente como aumentar o tamanho do slide do Blogger usando CSS e apesar de ter funcionado para mim, parece que algumas pessoas não conseguiram obter o mesmo resultado. Continuei pesquisando sobre o assunto e encontrei uma outra maneira de redimensionar e dar algum estilo para o gadget. O resultado pode ser visto aqui (é o primeiro slide, com borda rosa). O Google AJAX Feed API forneceu o código completo que carrega do slide no blog e com isso é possível fazer algumas modificações:

<script src="http://www.google.com/jsapi" type="text/javascript"></script>
    <script src="http://www.google.com/uds/solutions/slideshow/gfslideshow.js"
type="text/javascript"></script>
    <style type="text/css">
      #picasaSlideshow {
        width: 250px;

        height: 200px;
        margin-bottom: 5px;
        padding: 5px;
        border: 5px solid #000;
      }
    </style>
    <script type="text/javascript">
    google.load("feeds", "1");
    function OnLoad() {
      var feed = "Coloque aqui a URL do FEED";
      var options = {
        displayTime:2000,

        transistionTime:600,
        numResults : 8,
        scaleImages:true,
        maintainAspectRatio : false,
        fullControlPanel : true,
      };
      var ss = new GFslideShow(feed, "picasaSlideshow", options);
    }
    google.setOnLoadCallback(OnLoad);
    </script>
<div id="picasaSlideshow" class="gslideshow"><div class="feed-loading">Loading...</div></div>
<a href="http://templatesparanovoblogger.blogspot.com/2009/07/customizando-o-gadget-slide-ii.html">Custom Slideshows.</a>

Copie este código, vá em Layout e clique em Adicionar Elemento de Página. Escolha entre as opções o gadget HTML/JavaScript e cole o código, salvando-o e arrastando para a sidebar ou para qualquer outra parte em que desejar mostrar o slide no blog (sobre os posts, em crosccol, abaixo dos posts, footer, etc).

O que deve ser modificado no código:

O primeiro a fazer é obter a url do feed do album que pretende exibir. Se for um album do Picasa, a url deve se apresentar desta maneira:

http://picasaweb.google.fr/data/feed/base/user/NAME/
albumid/NUMBER?kind=photo&alt=rss&authkey=KEY&hl=en

como obter a url do feed do album do Picasa

Você poderá exibir albuns do Flickr, Photobucket, Tinypic, ImageShack...bastando copiar e colar a url do feed no local indicado no código.

O que está em destaque na cor verde é o que você pode alterar em relação ao tamanho, bordas e espaçamento do slide.

Para alterar o número de imagens a serem exibidas, modifique o número neste trecho:

numResults : 8

Para controlar o tempo de transição das imagens :

displayTime:2000,

Para que haja um link na imagem que leve ao album original, acrescente (justo após displayTime:2000, nos códigos em azul):

linkTarget : google.feeds.LINK_TARGET_BLANK,

Por padrão, a transição das imagens faz uma pausa quando se coloca o cursor do mouse sobre uma imagem. Você pode modificar isso acrescentando a seguinte linha:

pauseOnHover : false

Para mostrar miniaturas das imagens em tamanho médio, acrescente:

thumbnailSize : GFslideShow.THUMBNAILS_MEDIUM

Para mostrar miniaturas em tamanho pequeno:

thumbnailSize : GFslideShow.THUMBNAILS_SMALL

Para mostrar o Painel de Controle com ícones pequenos (o painel aparece quando se passa o cursor do mouse sobre o slide), acrescente estas linhas, nesta ordem:

fullControlPanel : true,
fullControlPanelSmallIcons : true,

Para saber mais, visite a página do Google AJAX Feed API

Sobre moderação nos comentários

noreply@blogger.com (Ariane) — Sat, 04 Jul 2009 02:15:00 +0000

Quando você comenta em um blog, está deixando o seu cartão de visitas, está causando sua primeira impressão. As pessoas irão te procurar ou não, levar à sério ou não, dependendo do que exibe o seu cartão. Quando um leitor usa o formulário de comentários aqui no TNB para choramingar, eu não dou mais atenção. Por que gente que choraminga não tenta, não batalha, não se esforça.

Ultimamente é tão raro ler um comentário interessante, que eu acabo publicando todos, muitas vezes sem ler mais do que as tres primeiras palavras. Estou deixando para que um leitor ajude o outro e fico assistindo.

Eu vou explicar novamente para vocês: eu sou uma dona de casa de 36 anos que um belo dia descobriu o que eram os blogs (e poucos dias antes nem sabia ligar um computador) e passou a criar dezenas deles, só para ver como funcionavam, só para entender como se consegue alterar uma fonte, uma cor, uma imagem. Sem fazer uma única pergunta, a quem quer que seja, li (e continuo lendo) dezenas de tutoriais, mensagens em fóruns, apostilas e afins. Quando quero saber algo, pergunto ao Todo Poderoso e ele nunca, mas nunca mesmo, me deixa na mão.

Eu não fiz nenhum curso nesta vida que possa ser de alguma utilidade na hora de customizar um template. Nem inglês eu falo! Se quero aprender algo uso tradutor, a lógica, a tentativa e erro. E quando descubro algo, por mais simples que seja, venho aqui contar para vocês. Às vezes me empolgo, ensino algo e depois vejo que existe maneira mais fácil, volto aqui, edito o texto, tiro ele do ar, o que for. Mas eu não guardo para mim informação nenhuma e não tenho medo de admitir que errei, me equivoquei, o que seja. Eu não tenho 'uma imagem a zelar', eu não quero alcançar nada, eu não desejo nada além de dividir informação. Repito: sou apenas uma dona de casa, mãe de uma garotinha de 3 anos, que adora passar horas na internet e fuçar códigos. Só. Mais nada.

Se eu consigo mudar a cor de uma fonte, qualquer um consegue. De olhos fechados, se bobear. Então, quando alguém vem aqui aos berros gritando pelo amor de deus me salva, eu não vejo com bons olhos. Por que eu também não sabia mas descobri...estudando.
Se houvesse uma escassez de informação sobre html e css na internet, eu compreenderia o desespero. Mas com a quantidade absurda de informação que existe, como posso ficar solidária com este desespero infundado?
Tudo é para ontem, é desesperado, é pelo amor de deus. Se fulano não consegue descobrir, com tanto tutorial que existe, como mudar a imagem do cabeçalho ou como alterar um link, melhor não ter blog. É sério. Por que para ter um blog - com um template personalizado, como todo mundo quer - sem colocar a mão no bolso, é necessário ter no mínimo vontade de aprender. Tem que estudar. Aqui eu já coloco tanta informação mastigada, ilustrada, com flechinha apontando: é aqui ó! Mas se a pessoa não tem nem a pachorra de usar o formulário de busca, eu é que tenho que ir lá no blog dela, fazer por ela?
Não, claro que não. Se eu fosse atender todos os pedidos que chegam diariamente, eu nem dormia mais! Quer dizer que além de fazer os tutoriais, além de disponibilizar os templates gratuitamente, tenho também que ver o blog de cada um que comenta aqui e apontar (ou fazer pela pessoa que é o que a maioria dos 'desesperados' querem) onde deve modificar, apagar, incluir? Não tem nem cabimento...

Coisas do tipo 'me ajuda, por favor, não sei mais o que fazer!' já cansaram. Todas às vezes que fui conferir o problemão do sujeito era alguma coisa muito simples que o próprio tutorial respondia. A pessoa não lê o texto, passa os olhos por cima e pensa 'putz, que trabalheira!' e aí deixa um comentário pedinte esperando que eu faça por ela. Se fosse minha intenção fazer consertos pra todo mundo, nem criava os tutoriais.

Outra coisa que não respondo mais: a pessoa baixa aqui um template gratuito e depois quer que eu ensine ela a modificar ele ao seu gosto. Se eu fizer isso com cada um que baixa o template, no fim das contas eu terei feito uns 3000 templates gratuitos, não? Por que um adorou mas quer mudar a imagem, outro achou lindo, mas quer o menu mais pro lado...assim não dá, né? Quer mudar o template, pode mudar! Leia aqui e nos blogs que recomendo os tutoriais que ensinam passo-a-passo como modificar seu template e seja feliz!

Por isso, à partir de hoje a moderação vai ser séria. Não publicarei mais comentários sobre questões específicas de cada blog (como eu mudo a fonte do meu template? como altero a cor do meu menu?). Para isso leiam os tutoriais. Só publicarei questões mais abrangentes, que podem interessar vários usuários (por exemplo: como posso modificar o gadget de lista de blog? como posso aumentar o slide do Blogger? etc). Também não publicarei mais pedidos de alteração em templates nem perguntas inúteis, que já estão respondidas no tutorial. Comentários completamente vazios idem, como 'num entendi', 'naum consegui'. Como alguém pode realmente pensar que um comentário assim é útil para alguma coisa?

Óbvio que comentários que visam fazer propagandas de blogs e pedidos de parceria, correntes e besteiras do tipo, jamais serão publicados.

Ajudar, eu sempre continuarei ajudando: com os tutoriais detalhados, os templates customizados, as indicações de links úteis e interessantes. Com todas as horas que dedico por dia testando, fuçando, lendo, errando e acertando, para vir aqui dividir a informação com vocês. Mais que isso, sinceramente não dá.

E se você quer mesmo um template customizado com 'a sua cara' mas não quer mexer com códigos, simples: contrate alguém para lhe ajudar. Pelo que sei, a Mamanunes, o Paulo, a Elke , o Compulsivo e outros, aceitam pedidos de encomendas. Só não vale por preço no trabalho alheio: cada qual sabe quanto vale seu tempo e seus esforços.

É isso.

Links para o final de semana

noreply@blogger.com (Ariane) — Sat, 04 Jul 2009 00:44:00 +0000

Retirar os ícones de edição rápida

noreply@blogger.com (Ariane) — Thu, 25 Jun 2009 19:17:00 +0000

A Juliana do Dicas Blogger tocou no assunto e então percebi que havia algo errado quando recebi emails do Blogger, como se eu tivesse solicitado uma nova senha. Imediatamente fiz algumas mudanças para me proteger e depois de ler o post da Juliana decidi retirar todos os ícones de edição rápida dos meus blogs. O que está acontecendo é que o ícone da ferramenta que aparece junto a cada widget que se coloca no blog, e que deve ser visível apenas para o administrador, algumas vezes está aparecendo para os leitores também. Nem todos os blogs estão sendo afetados com o problema e ainda o Blogger não tomou providências para sanar o problema.

De qualquer maneira, muitas pessoas não gostam da ferramenta e me perguntam se há um meio de retirá-las do template e aqui vai a dica de como fazer:

Clique em Expandir Modelo de Widget, procure pelo seguinte trecho de código e o apague:

<b:include name='quickedit'/>

Este código deve se repetir tantos forem os widgets que você tenha na página. Use o Ctrl+F para encontrar com maior facilidade.

Recomendo que leiam o post da Juliana sobre o assunto

Este post foi editado em 03/08/09. A recomendação que havia de esconder os ícones com CSS foi retirada, pois interferia com outros ícones necessários. Se você aplicou o código no CSS para esconder os ícones, por favor apague e aplique o procedimento acima.

Sobre problema nos comentários

noreply@blogger.com (Ariane) — Mon, 22 Jun 2009 19:58:00 +0000

Aviso para quem baixou os templates Pet Shop, Astra e Beauty!

Tanto aqui no TNB quanto nos templates em que instalei o hack para emoticons nos comentários, surgiu um problema em que o formulário de comentários não aparece, ou aparece apenas depois de recarregar a página. Muito provavelmente o problema está relacionado à este hack. Acredito que instalei de maneira errada, pois ele funciona perfeitamente no blog onde o encontrei (Vagabundia). Estou aqui quebrando a cabeça tentando encontrar a solução e assim que souber onde errei, passarei para vocês a correção. Até lá, retirei o hack deste blog e dos templates Pet Shop, Beauty e Astra e coloquei novos links para download do código sem os emoticons. Quem já baixou este templates, por favor, pelo menos por enquanto, retirem o hack dos emoticons.

No final do código do template, antes da tag </body> há um script que deve ser apagado, semelhante a este:

<b:if cond='data:blog.pageType == "item"'>
<script src='url do js' type='text/javascript'/>
<script type='text/javascript'>
emoticonComentario();
</script>
</b:if>

Apaguem este código todo, depois cliquem em expandir modelo de widget e encontrem o seguinte trecho, que também deve ser apagado:

<p style="margin: 0pt auto; padding: 0pt; width: 485px;">
<img src="url da imagem"/>
</p>

Para todos os que seguiram o tutorial para instalar o hack dos emoticons nos comentários, peço que o retirem por enquanto, também.

Peço desculpas pelo transtorno.Assim que encontrar uma solução, publicarei aqui para vocês.

Customizar o gadget Slide

noreply@blogger.com (Ariane) — Sun, 21 Jun 2009 04:24:00 +0000

Quando vi a primeira vez o gadget de slide do Blogger, fiquei toda animada achando que exibiria alguns dos meus albuns de maneira decente mas o que acabou aparecendo na minha sidebar foi isso:

Isso é um slide. Minúsculo. Decepcionante. Tirei do blog.

Mas como sou teimosa, tornei a colocar e comecei a tentar maneiras de transformar aquilo que o Blogger me apresentava, nestes slides que estão em meu blog de testes.

O primeiro é gigante e foi inserido dentro da div crosscol. O segundo tem a largura de main-wrapper e foi inserido acima desta coluna. O terceiro está na sidebar, muito maior que o padrão do Blogger.

Não é possível fazer muita coisa para customizar o slide, além de redimensioná-lo e colocar uma borda para destacá-lo. Pelo menos até agora, não descobri o que mais é possível fazer.

Para redimensionar o slide, acrescente este código no CSS (clique em Editar HTML e acrescente o código em qualquer local antes da tag ]]></b:skin> ):

#Slideshow1 .slideshow-container {
width: 980px;
height:480px;
margin: 10px auto 10px;
padding:0 0 0;
border: 10px solid #000;background: #000}

.slideshow-container a img{position:absolute;top:0;left:0;width:100%; height:100%}

Em width você deve determinar a largura do seu slide, em height a altura. Margin como se apresenta aqui, centraliza o widget e dá uma distância de 10px para cima e para baixo. Em border você determina a largura e cor da borda. Em .slideshow-container a img width e height devem ser 100% ou a imagem não ocupará toda a largura e altura que você determinou para o slide.

Se você pretende acrescentar mais de um slide, repita o código, mudando apenas #Slideshow1 para #Slideshow2.

Mas Ariane, eu não quero um slide enorme em todas as páginas do meu blog, só na home, comofas?

Depois de inserir o slide e fazer as modificações, clique em Expandir Modelo de Widget e encontre este trecho, acrescentando o que está em vermelho:

<b:widget id='Slideshow1' locked='false' title='Apresentação de slides' type='Slideshow'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<div class='slideshow-container' expr:id='data:widget.instanceId + "_slideshow"'>
<span class='slideshow-status'>Loading...</span>
</div>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Pronto, o slide vai aparecer apenas na primeira página.

Há novidades sobre este assunto! Por favor, leia também: Customizar gadget slide II