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