Kamis, 24 Desember 2009

E então é Natal...



 Desejo à todos vocês Boas Festas e um ano de 2010 maravilhoso, capaz de deixar excelentes recordações para 2011. Agradeço a companhia, as mensagens que recebi através do formulário de contato, os elogios, as críticas e principalmente a generosidade de vocês com esta aprendiz. Que no próximo ano possamos todos nos 'encontrar' novamente através desta maravilha que é a Internet e  que esta experiência continue a ser tão bacana.

Abraços e até 2010!

Kamis, 19 November 2009

Template Outubro


Com um certo atraso publico o Template Outubro.
Contém menu horizontal, resumos automáticos de postagens e posts relacionados.
Para editar os links do menu, procure por este trecho e coloque a url onde indicado, substituindo o que está em negrito:

<div id='header-right'>
<ul>
<li class='home'><a href='http://templateoutubrotnb.blogspot.com/'>Home</a></li>
<li class='tab'><a href='http://templateoutubrotnb.blogspot.com/'>Sobre</a></li>
<li class='tab'><a href='http://templateoutubrotnb.blogspot.com/'>Fotos</a></li>
<li class='tab'><a href='http://templateoutubrotnb.blogspot.com/'>Contato</a></li>

EDIT: existe um erro no código que faz com que a paginação (links Postagens Recentes, Postagens Antigas) apareçam acima dos resumos. Para arrumar, procure por: #blog-pager e acrescente a linha abaixo:

#blog-pager {
text-align: center;
clear:both;
}

Obs: novo link para download em 21/10/10

Jumat, 23 Oktober 2009

Como dividir o cabeçalho do Blogger

 Atenção: Este tutorial aplica-se aos Modelos de Layout (lançados em 2006). Se você procura o mesmo tutorial para os novos modelos (Designer do Modelo - 2010) leia este tutorial.

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

Rabu, 14 Oktober 2009

Como colocar links no menu

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.

Jumat, 18 September 2009

Link para o final de semana VIII

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! ;)

Senin, 14 September 2009

Template Impressões

template blogger

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. 

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_b-BnEwnh1UqJcD4eUL6yLbGMPHO06CYJJrrwK7FRvdlpGpb1_WpWQ2gxM2XMBGvf8jcnBAUj2F3vD9cNnf1Mz07tqyudqbHLIeW1bRqaM5_KLX16zY4Qee7p62YS-Hlh0UQW7B8gWyg/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: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgr48xPieG12sBuzqWwfkk0XPFguiiAUHh5U7I9h01JllKKGJ6YLrkiphAxDhBDMxzpuO2tmc8HpzlSF__fixhqZkKO2tx8_K6kNlwUTxnZ-ao6Sdrlt2DqtSbhUmnj4NUS-LCwOj8Ago4//-h/bottom+1.png

Edit 09/04/2010 - Resolvido o problema dos links no menu para IE7.
Para quem baixou o template antes desta data, a correção é feita deixando os códigos abaixo como se apresentam:


#nav{
position: relative;
margin: 0px auto 0;
padding: 0 0 0;
height:35px;
width: 960px;
line-height:2.0em;
}

#nav ul{
position: absolute;
z-index:1000;
margin: 0px 0px 0px;
padding: 0 0 0;}

Jumat, 04 September 2009

Template Pin-Up

template pin-up blogger


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:

<!-- Inicio Menu1 -->
<div id='menu1'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' 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>
<!-- Fim do Menu1 -->

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

<!-- Inicio do Menu2 -->
<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>
<!-- Fim Menu -->

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.

Para configurar o Feed no rodapé da postagem, cliquem em Expandir Modelo de Widget e procurem pelo seguinte trecho (use o Ctrl+F para facilitar):

Assine o <a href='coloque aqui a url do seu FEED' title='RSS Feed'>Feed</a>


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

Bom final de semana! :)

Obs: novo link para download em 21/10/10

Mostrar os Marcadores e Arquivos como listas

tutorial blogger


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.pageType != "static_page"'>
<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>
<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.pageType != "static_page"'>
<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: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 == &quot;item&quot;'>
<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).

Sabtu, 29 Agustus 2009

Vagando pelo Mundo - Entrevista com JMiur

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.



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. :)


Kamis, 20 Agustus 2009

Hospedar JavaScript no Google Site

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.

Jumat, 14 Agustus 2009

Como fazer um template para o Blogger VI - Post

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

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

<div id='header-wrapper'>
<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'>

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>
<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>
<div id='sidebar-wrapper'>
<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> <!-- end content-wrapper -->

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

</div>

</div> <!-- end outer-wrapper -->
</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:

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

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
<div id='crosscol-wrapper' style='text-align:center'>
<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;'/> <!-- clear for photos floats -->
</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 != &quot;item&quot;'>
<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 != &quot;true&quot;'>,</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

Sabtu, 01 Agustus 2009

isFirstPost - Exemplo 2


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 != &quot;item&quot;'>
<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 == &quot;item&quot;'>
<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 != &quot;item&quot;'>
<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 != &quot;item&quot;'>

<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 != &quot;item&quot;'>
#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: &#39;Trebuchet MS&#39;;
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: &#39;Palatino Linotype&#39;;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.