Sabtu, 27 Desember 2008

Video Aula 01 - Adicionar Coluna, Margin e Padding

By  at 18.14    No comments
Por que sei que muita gente aprende melhor vendo alguém fazer algo do que lendo explicações (e também para enriquecer os tutoriais), decidi criar uma série de vídeos onde mostrarei como fazer modificações no template Mínima do Blogger.

Neste primeiro vídeo ensino:
  • Como adicionar uma coluna no template;
  • Como colocar borda nas colunas para melhor visualização dos espaçamentos;
  • Como criar espaçamento entre as colunas e entre o conteúdo das colunas e seus limites;
  • Como criar espaçamento na data e no feed-link;
  • Como ajustar o cabeçalho para a nova dimensão do template;
  • Como retirar a navbar;
  • Como fazer pequenas modificações no título do blog.

O vídeo não tem narração, não precisa aumentar o som...Para ampliar, passe o mouse no canto inferior direito do vídeo que a seta aparecerá.Para assistir em alta definição é preciso clicar em HD, você será direcionado para o site onde o video está hospedado.
Este será o primeiro de uma série. Espero que gostem.

Link direto para ver o vídeo em alta definição: http://vimeo.com/2647999


Aula 01 Blogger from Ariane on Vimeo.

Jumat, 26 Desember 2008

Mostrar data em todos os posts de um mesmo dia

By  at 15.55  ,  No comments
 
Por padrão, o Blogger não mostra a data em todos os posts escritos em um mesmo dia, deixando a informação visível apenas no último publicado. Para contornar este problema, vá em Editar HTML e clique em Expandir Modelo de Widget. Procure por:

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

E substitua tudo por:

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

Visualize e salve. Testado e aprovado. Simples assim.

Visto no El Escaparate de Rosa

Edit: Para quem usa o Template Ice e deseja que a data apareça em todos os posts também, substitua o código que lá está (um pouco diferente do padrão) por :

<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><div id='fecha'><script>var ultimaFecha = &#39;<data:post.dateHeader/>&#39;;</script>
<script>remplaza_fecha(&#39;<data:post.dateHeader/>&#39;);</script>
</div></h2>
<b:else/>
<h2 class='date-header'><div id='fecha'>
<script>remplaza_fecha(&#39;<data:post.dateHeader/>&#39;);</script><script>remplaza_fecha(ultimaFecha);</script></div></h2>
</b:if>

Selasa, 16 Desember 2008

Adicionar ou remover marcadores

By  at 14.43  , ,  No comments
Normalmente, ao terminar de escrever seu post, você o classifica em uma categoria (marcador) para facilitar a busca do seu leitor. Mas e quando se deseja alterar os marcadores que já foram colocados em posts antigos? Muito simples: clique em Editar Postagens e uma lista com todos os seus posts aparecerá. No topo da lista, a opção de selecionar todos, ou você pode selecionar apenas alguns, bastando clicar no quadradinho à esquerda do título do artigo.


Tendo selecionado seusposts, clique no menu suspenso onde se lê Ações de Marcador. Você verá a opção Aplicar Marcador (e abaixo todos os marcadores que você já criou) e mais abaixo a opção Remover Rótulo (se você deixou algum post demarcado).

 
Suponhamos que você anteriormente criou um marcador que já não lhe interessa mais. Basta clicar em Todos (todos os posts serão demarcados) e no menu suspenso, dentro da lista de Remover Rótulo, escolher o marcador que deseja extinguir.

Minggu, 14 Desember 2008

Ocultar o blog quando estamos fazendo modificações

By  at 18.24    No comments
 
Geralmente, quando vamos fazer grandes modificações no blog, recorremos a opção de torná-lo visível apenas para o autor do blog, o que pode deixar os leitores bastante confusos (já me aconteceu mais de uma vez...). Seus leitores podem pensar que o blog 'acabou' ou que precisarão solicitar permissão para voltar a acessá-lo. Para evitar qualquer transtorno e deixar um aviso claro aos seus leitores de que a interrupção é temporária, segue este dica que encontrei no blog Randomness:

Acrescente esta linha depois de <body>:

<span class="item-control blog-admin">


e antes de </body>:

</span>

O que fazemos é incluir todo o conteúdo do blog em uma classe utilizada pelo próprio Blogger para mostrar somente ao autor  os ícones de Editar Postagens e Widgets (o ícone da ferramenta).

Para que possamos então apresentar uma imagem de aviso, acrescente logo após <body> (e antes do primeiro código que passei):

<center><img src="URL_imagen"/></center>

Escolha uma imagem adequada para o aviso, hospede e copiei o link (endereço) fornecido e inclua no código, substituindo o trecho em vermelho.

Sabtu, 13 Desember 2008

Como dividir os posts em duas colunas

By  at 09.01  ,  No comments
Esta eu aprendi no excelente Blogger Buster: como dividir seus posts em duas colunas. Era algo que eu vinha tentando a muito tempo, sem sucesso. No final das contas, a Amanda resolveu a questão de maneira muito simples do que eu vinha tentando (ainda bem!).

Antes de começar, eu deixo a sugestão de que você crie um blog de testes e não tente nenhuma alteração no seu blog atual. Crie um blog de testes e coloque nele o template Mínima, que o Blogger oferece.

Para que você entenda do que este tutorial trata, clique aqui (meu blog de testes) e veja as postagem divididas em duas colunas. Esta divisão aparecerá apenas na página incial do seu blog. O uso do hack Leia Mais é opcional e eu usei ele no meu blog de testes para converter um template do wordpress. Ele não é necessário, ok?

Após criar seu blog de testes com o template Mínima, faça as seguintes alterações no CSS:

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


Originalmente o template Mínima tem uma Outer-Wrapper com largura 660px; mude para 940px como mostro acima, em destaque.

#main-wrapper {
width: 620px;
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 */
}

Deixe main-wrapper com 620px de largura e a sidebar com 300px de largura:

#sidebar-wrapper {
width: 300px;
float: $endSide;
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 */
}

Remova de header-wrapper e footer-wrapper a linha que determina a largura:

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

#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

Acrescente no código CSS (pode ser logo após Outer-Wrapper) o seguinte código:

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

Agora vamos posicionar melhor a data dos posts. Clique em Expandir Modelo de Widget e procure o seguinte código:

<data:adStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:post.includeAd'>
<data:adEnd/>
<data:adCode/>
<data:adStart/>
</b:if>
</b:loop>
<data:adEnd/>

Corte a parte em vermelho e cole imediatamente após:

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

Feitas estas modificações, copiei o código abaixo:

<b:if cond='data:blog.pageType != "item"'>
<style>
.post {width: 290px; margin-right: 20px; float: left;overflow: hidden;}
</style>
</b:if>

e cole imediatamente após </b:skin>

Visualize e você verá que na página inicial seus posts estarão divididos em duas colunas!

Para que as imagens que você usar em seus posts não ultrapassem a largura das colunas na página inicial, você pode estabelecer uma dimensão fixa para elas (nos posts internos elas aparecerão no tamanho real), bastando acrescentar o que está em vermelho:

<b:if cond='data:blog.pageType != "item"'>
<style>
.post {width: 290px; margin-right: 20px; float: left;overflow: hidden;}
.post-body img {width: 280px;}
</style>
</b:if>

Esta medida para a largura da imagem pode ser alterada ao seu gosto. No caso do meu blog de testes eu ainda determinei que as imagens apareçam sempre à esquerda do texto, incluindo a linha: float:left; Também determinei uma altura fixa para cada coluna (cada bloco de texto) acrescentando a linha em destaque:

.post {width: 310px; height:220px;........

Isto por que estou usando o hack Leia Mais, que é opcional.

Rabu, 03 Desember 2008

Firebug encontrando os codigos do seu template

By  at 18.14    No comments

Este blog recebe em média 40 comentários/dia e 90% deles são perguntas ou relatos de dificuldades em localizar um determinado código no template. Alguns desejam fazer modificações mas não percebem exatamente onde devem alterar o código. Por exemplo, alguém me pergunta como retirar um menu ou os paineis do template Clean, mas não sabe que trecho do código corresponde à eles. Para detectar qualquer código da sua (e de outras) páginas, recomendo o Firebug, um complemento do Firefox que eu uso inclusive para converter temas do Wordpress para o Blogger. Após ter instalado o Firebug, acesse a página onde se encontra o código que deseja modificar (se for em seu próprio blog, acesse a página principal e não a página de visualização), clique em Ferramanetas - Firebug - Inspecionar Elemento, como na imagem abaixo:


Veja que uma janela se abriu na parte inferior da tela: do lado direito você verá o código CSS (o que dá estilo à página) e do lado esquerdo o código HTML. Para localizar o código correspondente à um determinado elemento na página, basta colocar o mouse sobre ele (sobre o slide do template Clean, por exemplo) e será mostrado os dois códigos correspondentes:

 
clique para ampliar e ver os detalhes
Veja na imagem que à esquerda já aparece em destaque o inicio do código HTML que corresponde ao slide e à direita o CSS. Você pode localizar qualquer detalhe: código de cor, fonte, largura de uma div, etc, bastando apontar o cursor sobre o elemento.

Esta é uma excelente maneira de conhecer os códigos e entender melhor a estrutura do seu template.

Fica a dica.