Links para o fim de semana V

O Café com Bytes dá a dica de Milhares de ícones em alta resolução. Eu adorei.

No Blog a La Carte a Rô explica como Aplicar Margin e Padding nos Títulos

No embalo do meu recente encanto pelo Photoshop, visito o Photoshop Lady, com indicações de dezenas de bons tutoriais. É preciso se registrar para ter acesso ao conteúdo da página.

Pintou um bloqueio criativo? No Digital Paper você encontra 5 maneiras de quebrar bloqueios criativos. Gostei muito.

No Blog and Web o Francisco explica como usar imagens hospedadas no próprio Blogger em seus templates. Apesar da diferença de idioma, dá para compreender tudo perfeitamente.

A Claudya andou meio sumida mas voltou com tudo no seu Blog Memories (pra quem não sabe, o blog que me inspirou a criar o Templates) e ensina Como cadastrar seu blog no FeddBurner. Em tempo, o visual novo do Blog Memories arrasou!

O pessoal do Deziner Folio publicou um vídeo que mostra como criar lindos sombreados em imagens, no Photoshop.

A Nintendo está fazendo uma propaganda no YouTube fantástica. Vi a dica lá n'O Velho.

No Mundo Gump: O que é um casaco de pele?. Aliás, Mundo Gump é o meu blog predileto desde que o conheci (dois anos atrás, ainda era blogspot); além das curiosidades incríveis, Philipe é um cara muito inteligênte e seus 'causos' são hilários.

O Compulsivo e sua ânsia em dominar o mundo...agora ele quer ser presidente da Blogosfera, veja só! tem meu voto :-)

E é isso.

Ah, retirei o post que coloquei ontem sobre o JQuery em listas da sidebar por que só hoje percebi que todo link, quando clicado, fechava a lista ¬¬ Enfim, dei um jeito aqui e vou alterar o tutorial, mas fica para segunda-feira, ok? Nesse final de semana vou descansar e ver se essa gripe vai embora de vez.

Bom final de semana.

Read More

Postagem dividida em colunas

Este truque de dividir a postagem em duas colunas paralelas, eu encontrei no blog Templates e Acessórios, que consulto sempre.

Como achei a dica muito legal, decidí dividir com vocês. É muito fácil realmente de aplicar e você tem a liberdade de usar apenas em determinadas postagens.

Basta inserir em sua postagem o código:

<div style="float: left; WIDTH: 45%">Aqui o Texto da Coluna da Esquerda</div>
<div style="float: right; WIDTH: 45%">Aqui o Texto da Coluna da Direita</div>
<divstyle="clear: both"></div>

Lembrando que você deverá colar este código apenas nas postagens que desejar dividir.

Read More

Icones para todos os gostos

Para quem anda à procura de bonitos ícones para enriquecer o visual da página, indico aqui alguns links que andei garimpando:

laurent baumann
lindos pacatos de ícones, entre eles um super pacote com 357 ícones que incluem kanjis e kanas (escrita japonesa).

Iconspedia

Centenas de belíssimos ícones. O bom aqui é que é possível salvar separadamente alguns ícones de um pacote, sem precisar fazer o download de tudo.

Splashy Icons

Um pacote com 462 mini ícons.

DryIcons

Recomendo a leitura das licenças de cada pacote de ícones, antes de usar.

Read More

Como fazer um template para o Blogger Listas e Links

Continuando a série sobre como fazer um template, hoje vou tratar dos links e listas no Blogger.

No começo do código do seu template (o Mínima, de testes) você encontra este trecho:

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
a:link {
color:$linkcolor;
text-decoration:none;
}
a:visited {
color:$visitedlinkcolor;
text-decoration:none;
}
a:hover {
color:$titlecolor;
text-decoration:underline;
}

Toda a parte em vermelho refere-se aos links da página: suas cores e se serão sublinhados ou não; mas é claro que nem todos os links precisam se comportar da mesma maneira. Você pode determinar, por exemplo, que os links de sua postagem se apresentem de maneira diferente dos links da sidebar.

Basicamente os estilos dos links são representados desta maneira:



a:link estilo do link no estado inicial
a:visited estilo do link visitado
a:hover estilo do link quando se passa o mouse sobre ele
a:active estilo do link ativo, quando clicado.

As determinações para os links devem respeitar a hierarquia apresentada acima.

Para adicionar um sublinhado no link:
text-decoration: underline;

Sem subinhado:
Text-decoration: none;

Adicionando Sobrelinhado:
text-decoration: overline;

Você pode também acrescentar um fundo colorido para os links, utilizando a propriedade background como para os outros elementos da página.

Para estabelecer o comportamento dos links de sua postagem, é preciso determiná-los dentro da classe .post

.post-body a:link{
color: #993366;
text-decoration: underline;}

.post-body a:hover{
color: #EBC2D7;
text-decoration: underline overline;}

O resultado pode ser visto aqui: Aula Template . Passe o mouse onde está Link Primeiro e veja o efeito de underline e overline juntos.

Você pode detreminar comportamentos e cores diferentes para todos os elementos e classes do template: header, post, sidebar, etc.

Para a sidebar:

.sidebar a:link{
color: #000;
text-decoration: none;}

.sidebar a:hover{
color: #FF6600;
text-decoration: underline;}

Basta respeitar a sintaxe apresentada.

Listas e Menus

Procure no código do seu template este trecho:

.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}

.sidebar li {
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:15px;
text-indent:-15px;
line-height:1.5em;
}

Esta é uma lista simples e os valores contidos determinam a aparência das listas na sidebar (lista de marcadores, arquivos, blogroll, etc).

As tags <ul> e </ul> contém cada elemento da lista (ou menu), que são <li> &lt/li>.

Em .sidebar ul se determinará a aparência de toda a lista e em .sidebar li a aparência de cada item desta lista.

list-style é o seletor de marcadores da lista e aqui você determinará se cada item da lista exibirá um marcador ou não :

list-style-image imagem como marcador da lista;
list-style-position onde o marcador da lista é posicionado;
list-style-type tipo do marcador da lista;
list-style maneira abreviada para todas as propriedades;

list-style-type:
none: sem marcador
disc: círculo (bolinha cheia)
circle: circunferência (bolinha vazia)
square: quadrado cheio
decimal: números 1, 2, 3, 4, ...

list-style-image:
none (nenhuma imagem)
URL: url(endereço da imagem)

list-style-position:
outside: marcador fora do alinhamento do texto
inside: marcador alinhado com texto

Ex. 01 - Vou determinar que a minha lista contenha marcadores quadrados:

.sidebar ul{
list-style: square inside; } (quadrado e alinhado aos itens da lista)



Neste exemplo eu determino uma cor para o fundo da lista e outra para cada item :


Óbviamente você está aí pensando: não deu certo, só aparece uma cor e não duas. Sim, a cor que predomina é a cor dos itens da lista, isto por que não existe diferenças entre os limites de .sidebar ul e .sidebar li no template original. É preciso fazer as seguintes mudanças:

.sidebar ul {
width: 220px;
list-style:square inside;
margin:0 0 0;
padding:0 0 0;
background: #B89F67;
}
.sidebar li {
margin:2px auto 2px;
padding-top:0;
width: 200px;
padding: 3px 0 3px 10px;
text-indent:0px;
line-height:1.5em;
background: #E7DECB;
}

Determinei uma largura para ul e outra menor para li, além disso, estipulei uma margem de 2px entre um item da lista e outro, para que a cor de fundo (de .sidebar ul) possa ser notada:


As variações podem ser muitas: você pode acrescentar imagen de fundo e combinações de cor com o fundo da sidebar.

Note que aqui no meu blog, nas listas da sidebar, não só o link se comporta diferente, quando passa-se o mouse por cima, como o background de cada item também se altera (o fundo torna-se transprente e surge uma borda azul). Vejamos como isto é possivel:

Primeiro determine as cores, largura, etc, de sidebar ul:

.sidebar ul {
width: 200px;
list-style:square inside;
margin:10px auto 10px;
padding:5px;
background: #030303;
}

Depois determine a aparência de cada item da lista:

.sidebar li {
margin:2px auto 2px;
width: 190px;
padding: 3px 0 3px 10px;
text-indent:0px;
line-height:1.5em;
background: #F4F4F4;
border-bottom: 1px solid transparent;
}

Veja que aqui acrescentei uma borda de 1px abaixo de cada link da lista, transparente. É necessário que isso seja feito para que o elemento da lista não dance quando se passe o mouse por ele, já que vou acrescentar um border-bottom no estado hover.

Primeiro determino o comportamento dos links no estado natural e hover:

.sidebar a:link{color: #FF6600;text-decoration: none;}

.sidebar a:hover{color: #C6E6FD; text-decoration: none;}

E aqui determino o comportamento do background de cada espaço ocupado por cada um dos itens da lista, quando passa o mouse sobre eles:

.sidebar li:hover{background: transparent; border-bottom: 1px solid #00FFFF}

A diferença aqui é que determinei um comportamento para a linha onde se encontra o item, seja ele um link ou não. O resultado pode ser visto aqui, na lista da sidebar.

Por hoje é isso. Se você quiser ler mais sobre personalização da sidebar, veja aqui.
Dúvidas é só deixar nos comentários, assim que possível, responderei.

Abraços!

Read More

Wowzio - widgets para seu blog

No site Wowzio você encontra excelentes widgets para seu blog. São seis modelos, entre slides, resumos de postagens e nuvem de tags, para você utilizar à vontade. Na própria página é possível customizar os widgets, deixandos-os com largura, altura e cor que desejar. Basta fornecer o endereço do seu feed e você tanto pode copiar o código quanto adicionar automaticamente ao blog, clicando em Add to Blogger.

Dica pescada no Blog a La Carte

Read More

Criando patterns

Se você pretende mudar o background do seu blog, talvez o site BgPatterns possa te ajudar. Com ele você pode gerar patterns online, podendo escolher o desenho, a cor de fundo (e do próprio desenho escolhido), textura e direção da imagem. Clique em Aplly Background para ter uma prévia da sua criação antes de salvar. Fica a dica.

Read More

Marcadores como lista expansível

Esta dica eu encontrei no excelente Vagabundia e vou repassar para vocês.

É possível transformar cada um dos seus marcadores em uma espécie de menu drop-down, ou seja, ao clicar em um marcador, será mostrado um determinado número de posts relacionado à ele. Testei no meu blog de receitas e o resultado pode ser conferido aqui.



1º Passo:

Vá em Ediat HTML, clique em Expandir Modelo de Widget e procure por:

<b:widget id='LabelX' locked='false' title='Título(Pode estar como Marcadores ou Labels)' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
.......
.......
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

As únicas coisas que estarão diferentes no seu código é o título que você deu ao gadget Marcadores (pode ter sido Marcadores mesmo, Labels, etc) e o número em Label (onde está LabelX).

2º Passo: Substitua tudo o que está entre <ul> e </ul> por:

<script type='text/javascript'>
// <![CDATA[
home_page = 'http://NOMEDOSEUBLOG.blogspot.com/';
max_rc_posts = 10;
function showentry(json){
var maxp = (max_rc_posts <= json.feed.entry.length) ? max_rc_posts : json.feed.entry.length;
var text = "<ul>";
for (var i = 0; i < maxp; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
text += "<li><a href='"+posturl+"'>" + posttitle + "</a></li>";
}
text += "</ul>";
document.getElementById("showItemLabel").innerHTML = text;
}
function showPostLabel(sPL_label,e){
var isDOM = (navigator.appName.match("Microsoft Internet Explorer") || navigator.appName.match("MSIE")) ? false : true;
var check = document.getElementById("showItemLabel");
if(check) {
if(!isDOM) { check.removeNode(true); }
else {check.parentNode.removeChild(check);}
}
var elm;
if(e.target) elm = e.target;
else elm = window.event.srcElement;
var div = document.createElement('div');
div.innerHTML = "";
div.id = "showItemLabel";
if(!isDOM) { elm.insertAdjacentElement('afterEnd', div); } else { elm.parentNode.insertBefore(div, this.nextSibling); }
var elm2 = document.getElementById("showItemLabel");
elm2.style.display = "inline";
elm2.innerHTML = "<br/>Carregando...";
var script = document.createElement('script');
script.src = home_page+"feeds/posts/summary/-/"+sPL_label.replace(/ /g,"%20")+"?start-index=1&max-results="+max_rc_posts+1+"&alt=json-in-script&callback=showentry";
script.type = "text/javascript";
document.getElementsByTagName('head')[0].appendChild(script);
}
// ]]>
</script>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/> <span dir='ltr'>(<data:label.count/>)</span> <a expr:onclick='"showPostLabel(\"" + data:label.name + "\",event)"' href='javascript:void(0)'>&#9658;</a>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
<span dir='ltr'>(<data:label.count/>)</span> <a expr:onclick='"showPostLabel(\"" + data:label.name + "\",event)"' href='javascript:void(0)'>&#9658;</a>
</b:if>
</li>
</b:loop>
</ul>

Coloque o nome do seu blog onde está indicado no código. Você também pode alterar o número de postagens que serão mostradas, em max_rc_posts = 10; lembrando que quanto mais postas você determinar, maior será o tempo de carregamento da lista.
Para retirar a numeração ao lado do Marcador, como já foi ensinado aqui, apague a linha <span dir='ltr'>(<data:label.count/>)</span>
Você também podem substituir a seta que ao ser clicada expande a lista [ ► ]. Procure por ► no código e substitua por:
▼ [ ▼ ]
◄ [ ◄ ]

3º Passo: Estilo

Para dar estilo ao marcador, acrescente no CSS:
#LabelX ul { ....... }
#LabelX ul li { ....... }
#LabelX ul li a { ....... }

Não esqueça de substituir o X pelo número da Label

Para dar estilo à lista expandida, acrescente:

#showItemLabel { /* área completa da lista */ }
#showItemLabel ul { /* a lista */
padding:0;
margin:0;
}
#showItemLabel ul li { /* cada item da lista */
background-color: #343F4A;
list-style-image: url();
padding: 0 0 0 10px;
margin: 2px 0;
width: 85%;
}
#showItemLabel ul li a, #showItemLabel ul li a:visited { /* cada link da lista */
color: #FF9933;
font-weight: normal;
}
#showItemLabel ul li a:hover { /* efecto rollover sobre los enlaces */
color: #FFFFFF;
}

Obs: faça sempre qualquer experiência ou modificação em um blog de testes primeiro. Salve uma cópia do seu template antes de qualquer 'experiência'.

A estilização da lista requer um conhecimento básico de css que você pode aprender aqui.

Read More

Como fazer um template para o Blogger IV

Quando eu comecei a utilizar o Blogger, imediatamente desejei alterar o template padrão e fui logo xeretando os códigos e tentando modificar alguma coisa. De imediato não percebí muita coisa mas, ao invés de sair perguntando por aí, à torto e à direito 'comofas', descobrí o que era CSS na marra. Uma maneira que encontrei para estabelecer uma ligação com os nomes dos seletores e suas divs ou classes foi colocar cor em tudo. Colorindo minha página,eu tive uma noção clara da localização e dimensão de cada elemento e sugiro que você faça o mesmo.

Mesmo que você tenha entrado aqui só com o intuito de aprender como colocar mais uma coluna no seu template, é importante conhecer todos os elementos que compõem a sua página para diminuir consideravelmente os erros na hora de mudar alguns detalhes.

Coloque em todos os seletores que encontrar a propriedade Background e estabeleça cores diferentes para cada um. Faça isso para #body, #header-wrapper, #header-inner, #header, #header h1, #header .description, #main-wrapper, #sidebar-wrapper, h2.date-header,.post, .post h3,.post-body , .post-footer, #footer e acrescente além disso os seletores .sidebar h2 (que já ensinei como criar no post anterior), #wrap2, #content-wrapper, #crosscol-wrapper, #Blog1 e .hfeed.

Conforme for adicionando cores para os fundos destes elementos, visualize, para perceber a localização e dimensão de cada um.

Para content-wrapper, acrescente, além do background:

word-wrap: break-word; overflow: hidden;

ou a cor (ou imagem) não tomará todo o espaço da div. O código deve ficar assim:

#content-wrapper{
background:#BBCCFF;
word-wrap: break-word; overflow: hidden;}

com croscoll-wrapper é preciso primeiro encontrar este trecho(use Ctrl+F):

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'>
</b:section>
</div>

onde está no coloque yes, depois vá para o painel Layout e insira no novo elemento que aparecrá sob o cabeçalho um gadget qualquer. Eu coloquei uma linha de links do adsense.

Com este método, além de perceber a localização e dimensão dos elementos, ficará claro que algumas divs contém outras divs e por isso as dimensões devem ser respeitadas. Por exemplo, na imagem do meu blog de testes, o que está em cinza é Body, que contém tudo. O que está em preto é Outer-wrapper, que contém todos os outros elementos. Assim, se outer-wrapper tem uma largura de 700px, por exemplo, a soma dos outros elementos não pode exceder esta largura, ou o template ficará desfigurado. Este é o erro mais comum ao tentar colocar uma nova coluna no blog: não respeitar as dimensões. A soma para o acréscimo de qualquer elemento tem que conter os espaços de margin e padding, que já foram explicados aqui além da largura das colunas. Então, a primeira coisa mais importante quando for alterar o seu template é Outer-Wrapper, a div que contém todas as outras.

Como lição de casa :-) faça este colorido no seu blog de testes e vá visualizando, para compreender (e decorar!) a posição dos elementos do template. Você pode ir além e alterar a largura deles também, onde está width. Se no seu blog de testes outer-wrapper tem uma largura width: 660px, aumente para 900px e vá aumentando também a largura ds colunas, para ir se familiarizando.

Read More

Hack Leia Mais Resumo de Postagem

Se você deseja apresentar apenas um resumo de sua postagem com um link do tipo 'Leia Mais...' ou 'Continue Lendo..." em seu blog, siga estes passos:

Vá ao HTML do seu blog e antes da tag < /head >, cole este código:

<b:if cond='data:blog.pageType != "item"'>
<script type="text/javascript">

var fade = false;
function showFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Appear(spans[i]);
} else spans[i].style.display = 'inline';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'none';
if (spans[i].id == "hidelink")
spans[i].style.display = 'inline';
}
}


function hideFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Fade(spans[i]);
} else spans[i].style.display = 'none';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'inline';
if (spans[i].id == "hidelink")
spans[i].style.display = 'none';
}
post.scrollIntoView(true);
}

function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
var found = 0;
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].id == "fullpost") {
spans[i].style.display = 'none';
found = 1;
}
if ((spans[i].id == "showlink") &amp;&amp; (found == 0))
spans[i].style.display = 'none';
}
}

</script>
</b:if>

Salve o template. Depois clique em Expandir Modelo de Widget e procure este trecho:

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

Substitua-o por:

<div class='post-body' expr:id='"post-" + data:post.id' >
<b:if cond='data:blog.pageType == "item"'>
<style>#fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost{display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<a expr:href='data:post.url'>Leia Mais…</a>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>

Salve. Agora em em Configurações->Formatação-> e desça a página até ver Modelo de Postagem. Cole alí o seguinte código:

Digite aqui o resumo do post
<span id="fullpost">
Digite aqui o resto do post
</span>

Salve. Toda vez que você iniciar uma postagem este código aparecerá (melhor visualizado no modo HTML da postagem) e basta que você respeite os campos correspondentes para o resumo e o restante da postagem. Se não desejar resumir um determindo post, basta apagar o código.

Este artigo foi completamente refeito em 19 de novembro de 2008, pois o código anterior que aqui se encontrava não funcionava perfeitamente. Ao contrário, este que coloquei agora, funciona 100%. 

Read More

Como fazer um template para o Blogger III Background

Bom, agora que já entendemos o que são as variáveis e aprendemos a criar algumas novas, vamos aprender a dar estilo a Body, que é o corpo do nosso documento, da nossa página, e que contém todos os outros elementos.

Procure no código do seu blog de testes este trecho:

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

A primeira propriedade que aparece para body é background, que é o fundo de um elemento html. Originalmente no template Mínima o valor é a variável $bgcolor. As propriedades background e seus valores possíveis são:

background-color: (cor do fundo)

Valores:

• código hexadecimal: #FFFFFF
• código rgb: rgb(255,235,0)
• nome da cor: red, green, white, etc
• transparente: transparent

background-image

• url(link da imagem)

background-repeat

• no-repeat
• repeat (repete por toda a página na horizontal e vertical)
• repeat-x (repete a imagem na horizontal)
• repeat-y (repete a imagem na vertical)

background-attachment (se a imagem rola ou não com a tela)

• fixed (imagem fixa na tela)
• scroll (imagem rola com a tela)

background-position: (posição da imagem na tela)

• x-% y-% (distância em porcentagem das margens do documento, horizontal e vertical)
• top left
• top center
• top right
• center left
• center center
• center right
• bottom left
• bottom center
• bottom right

A propriedade background pode ser aplicada a qualquer outro elemento html, além de body. Você pode determinar backgrounds diferentes para cada coluna, menu, títulos (sidebar, post) e footer.

Em nosso blog de testes vamos aplicar uma imagem de fundo em degradê, para testar.

Em seu editor de imagens (vou exemplificar no Photofiltre, aquele programa free que citei na primeira parte deste tutorial) crie uma imagem em branco de 50 de largura por 550 de altura e determine uma cor qualquer de fundo:

Clique na ferramenta gradiente: a primeira cor que escolhí foi a mesma que utilizei no fundo da imagem (#a3a3a3) e a segunda o branco:

Com a ferramenta conta-gotas, anote o valor da cor do final da imagem (bem do finalzinho mesmo, pois é esta cor que se repetira no background do seu template para além da imagem) A cor que eu anotei aqui foi #FEFEFE. Salve a imagem.

Agora vamos colocar esta imagem no background da nossa página.

1- Hospede a imagem no site TinyPic (ou qualquer outro de sua preferência). Tendo feito isso, copie o link fornecido (o último):

2- No código do template, você pode retirar a variável que está em background e colocar no lugar:

body {
background:#FEFEFE url(http://i33.tinypic.com/2ypd69z.jpg) repeat-x;

ou seja, a cor que eu obtí do final da imagem mais o link da imagem fornecido pelo TinyPic mais o valor repeat-x, pois desejo que a imagem que criei se repita horizontalmente. O resultado é este:

Note que rolando a página, a cor que continuará pelo background é a cor que colocamos antes do link da imagem e que continua o gradiente perfeitamente.

Posicionando uma imagem.

Vamos posicionar uma imagem no fundo. Vou usar esta imagem, tamanho 335x403:

Hospede a imagem, copie o link fornecido e volte ao código do template:

body {
background:#FEFEFE url(http://i34.tinypic.com/behova.jpg) no-repeat top left;

resultado:

body {
background:#FEFEFE url(http://i34.tinypic.com/behova.jpg) no-repeat top center;

resultado:

background:#FEFEFE url(http://i34.tinypic.com/behova.jpg) no-repeat bottom left;

resultado:

ou ainda é possível um posicionamento mais preciso:

body {
background:#FEFEFE url(http://i34.tinypic.com/behova.jpg) no-repeat 80% 60%;

resultado:

o que eu fiz foi posicionar a imagem à uma distância de 80% da margem esquerda e 60% do topo.

Como lição de casa :-) teste diversas maneiras de posicionar imagens para o background da sua página, utilizando todos os valores possíveis.

Read More

Como fazer um template para o Blogger - Parte II

Variáveis do tipo Font
Continuando a série, vamos ver agora a criação de variáveis do tipo font. Ao analisarmos o código do nosso blog de testes, podemos ver:
<Variable name="bodyfont" description="Text Font"
type="font" default="normal normal 100% Georgia, Serif" value="normal normal 100% Georgia, Serif">
Antes de alterarmos as fontes que se apresentam nas variáveis, é preciso entender primeiro alguns conceitos básicos:

Uma fonte qualquer só é visível se o navegador reconhece esta font, ou seja, é necessário que o leitor tenha esta font gravada em seu computador, caso contrário não irá vê-la. Existe uma infinidade de fontes das mais variadas, porém, não são muitas as que são comuns à todos os usuários. O que devemos fazer é estabelecer uma lista de fontes que podem ser reconhecidas pela maioria dos navegadores, separando-as por vírgulas e obedecendo a regra:

Fontes com nomes duplos precisam vir entre aspas, ex: "Trebuchet MS";

O navegador exibirá ao leitor a primeira fonte que ele reconhecer de uma lista.
Toda lista deve terminar com uma fonte genérica (serif, sans-serif, monospace, cursive e fantasy.) Você pode conferir os tipos de fontes genéricas clicando aqui.
Voltando a nossa variável bodyfont:
<Variable name="bodyfont" description="Text Font"
type="font" default="normal normal 100% Georgia, Serif" value="normal normal 100% Georgia, Serif">
tal qual as variáveis color, precisamos respeitar a sintaxe que se apresenta para a criação de uma variável do tipo font: nome da variável sem espaços, descrição da variável, valores para default e os valores que desejamos aplicar à propriedde fonte. Vamos analisar separadamente o trecho que nos interessa:
value="normal normal 100% Georgia, Serif">
Neste primeiro normal estabelecemos o estilo da fonte (font-style), que pode ser normal, italic e oblique. No segundo normal estabelecemos o quão escura será esta fonte (font-weight) e o valores possíveis são esses:

1. normal
2. bold
3. bolder
4. lighter
5. 100
6. 200
7. 300
8. 400
9. 500
10. 600
11. 700
12. 800
13. 900

ou seja, se desejamos, neste caso, que a fonte do texto de nossa página se apresente em negrito e no estilo italic, devemos colocar:
value="italic bold 100% Georgia, Serif">
Faça a modificação e clique em visualizar. Deve ficar assim:

value="italic bold 100% Georgia, Serif">
100% refere-se ao tamanho da fonte, que também pode ser estabelecido em pixels. Georgia é o nome da fonte escolhida para a página e Serif a fonte genérica (fontes normais com serifa). No caso de algum navegador não reconhecer a fonte Georgia, automaticamente irá buscar uma fonte da familia Serif para mostrar ao leitor.
Vamos ver a variável headerfont que se apresenta no código do seu template:
<Variable name="headerfont" description="Sidebar Title Font"
type="font"
default="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif">
Veja que aqui várias fontes foram listadas e devem ser apresentadas na ordem em que estão; ou seja, se o navegador do usuário não encontrar na memória do computador a primeira fonte, usará a segunda e assim por diante.
As variáveis do tipo font no template Mínima são bodyfont, headerfont, pagetitlefont,descriptionfont e postfooterfont. Vamos criar uma nova variável do tipo font, para exercitar:
<Variable name="sidebartitlefont" description="Titulo da Sidebar"
type="font"
default="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal bold 100% 'Palatino Linotype', 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif">
Veja que criei a variável sidebartitlefont com a seguinte descrição: 'Título da Sidebar' e estabeleci que a letra será normal e em negrito, tamanho 100% e que a primeira font a ser procurada pelo navegador deverá ser a Palatino Linotype (note, está entre aspas), e na falta dela, Trebuchet MS e assim por diante.
Vamos agora colocar esta variável no titulo da sidebar.
No template mínima não existe a regra css para o título da sidebar. Ela está genericamente definida na propriedade h2 para todos os seletores. O que vou fazer é dar valores diferentes para a propriedade h2 do seletor Sidebar, criando a regra:
.sidebar h2{
font: $sidebartitlefont; }
Coloque este trecho no código do seu template, junto às outras regras para sidebar, para facilitar a busca posteriormente.

Salve as modificações e visualize (se já tiver inserido algum elemento na sidebar, logicamente), e veja a variável em ação.
Você pode criar quantas variáveis do tipo fonte que desejar mas eu particularmente não costumo nem usá-las em meus templates e blogs. Prefiro definir os valores diretamente na regra css para cada seletor, desta maneira:
.sidebar h2{
font-size: 100%;
font-weight: normal;
font-family: 'Palatino Linotype', 'Trebuchet MS', Sans-Serif;
color: #000000;
}
Todos os valores possíveis para a propriedade font, bem como a ordem em que devem ser apresentados, podem ser conferidos aqui.
Como lição de casa :-) se utilize das informações sobre os valores da propriedade fonte para modificar o titulo da sidebar, sem se utilizar de variáveis. Faça como neste último exemplo, alterando o tamanho, cor, estilo e tipos de fontes. Não tenha receio de tentar: enquanto não se clica em salvar, você pode apagar o que fez quantas vezes desejar, clicando em Limpar Edições. Teste todos os valores apresentados na página do Maujor, para ir conhecendo e se familiarizando com cada um.

Read More