Fatima Bernardes



showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
background: #cccccc; /*COR DO FUNDO DOS NÚMEROS /*
margin:0 2px;
padding:5px;
}
.showpageNum a:hover {
border: 0px solid #cccccc;
background-color: #00ffff;
}
.showpagePoint {
color:#333; /* COR DO TEXTO /*
text-decoration:none;
border: 0px solid #cccccc;
background: #00ffff; /*COR DO FUNDO DOS NÚMEROS SELECIONADOS/*
margin:0 2px;
padding:5px;
}
.showpageOf {
text-decoration:none;
padding:5px;
margin: 0 2px 0 0;
}
.showpage a {
text-decoration:none;
background-color: #cccccc; /*COR DE FUNDO DO "PRÓXIMO"/*
padding:5px;
}
.showpage a:hover {
text-decoration:none;
background:#00ffff; /*COR DE FUNDO DO "PRÓXIMO" SELECIONADO/*
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#000;
}

Código

showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
background: #cccccc; /*COR DO FUNDO DOS NÚMEROS /*
margin:0 2px;
padding:5px;
}
.showpageNum a:hover {
border: 0px solid #cccccc;
background-color: #00ffff;
}
.showpagePoint {
color:#333; /* COR DO TEXTO /*
text-decoration:none;
border: 0px solid #cccccc;
background: #00ffff; /*COR DO FUNDO DOS NÚMEROS SELECIONADOS/*
margin:0 2px;
padding:5px;
}
.showpageOf {
text-decoration:none;
padding:5px;
margin: 0 2px 0 0;
}
.showpage a {
text-decoration:none;
background-color: #cccccc; /*COR DE FUNDO DO "PRÓXIMO"/*
padding:5px;
}
.showpage a:hover {
text-decoration:none;
background:#00ffff; /*COR DE FUNDO DO "PRÓXIMO" SELECIONADO/*
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#000;
}

Lapis

showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
background: #cccccc; /*COR DO FUNDO DOS NÚMEROS /*
margin:0 2px;
padding:5px;
}
.showpageNum a:hover {
border: 0px solid #cccccc;
background-color: #00ffff;
}
.showpagePoint {
color:#333; /* COR DO TEXTO /*
text-decoration:none;
border: 0px solid #cccccc;
background: #00ffff; /*COR DO FUNDO DOS NÚMEROS SELECIONADOS/*
margin:0 2px;
padding:5px;
}
.showpageOf {
text-decoration:none;
padding:5px;
margin: 0 2px 0 0;
}
.showpage a {
text-decoration:none;
background-color: #cccccc; /*COR DE FUNDO DO "PRÓXIMO"/*
padding:5px;
}
.showpage a:hover {
text-decoration:none;
background:#00ffff; /*COR DE FUNDO DO "PRÓXIMO" SELECIONADO/*
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#000;
}

Saudades

showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
background: #cccccc; /*COR DO FUNDO DOS NÚMEROS /*
margin:0 2px;
padding:5px;
}
.showpageNum a:hover {
border: 0px solid #cccccc;
background-color: #00ffff;
}
.showpagePoint {
color:#333; /* COR DO TEXTO /*
text-decoration:none;
border: 0px solid #cccccc;
background: #00ffff; /*COR DO FUNDO DOS NÚMEROS SELECIONADOS/*
margin:0 2px;
padding:5px;
}
.showpageOf {
text-decoration:none;
padding:5px;
margin: 0 2px 0 0;
}
.showpage a {
text-decoration:none;
background-color: #cccccc; /*COR DE FUNDO DO "PRÓXIMO"/*
padding:5px;
}
.showpage a:hover {
text-decoration:none;
background:#00ffff; /*COR DE FUNDO DO "PRÓXIMO" SELECIONADO/*
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#000;
}

Caminhada

showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
background: #cccccc; /*COR DO FUNDO DOS NÚMEROS /*
margin:0 2px;
padding:5px;
}
.showpageNum a:hover {
border: 0px solid #cccccc;
background-color: #00ffff;
}
.showpagePoint {
color:#333; /* COR DO TEXTO /*
text-decoration:none;
border: 0px solid #cccccc;
background: #00ffff; /*COR DO FUNDO DOS NÚMEROS SELECIONADOS/*
margin:0 2px;
padding:5px;
}
.showpageOf {
text-decoration:none;
padding:5px;
margin: 0 2px 0 0;
}
.showpage a {
text-decoration:none;
background-color: #cccccc; /*COR DE FUNDO DO "PRÓXIMO"/*
padding:5px;
}
.showpage a:hover {
text-decoration:none;
background:#00ffff; /*COR DE FUNDO DO "PRÓXIMO" SELECIONADO/*
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#000;
}

Testando



Hoje veremos mais um jeito de personalizar os links de postagens mais antigas e recentes, só que dessa vez, não usaremos imagens, mas sim, iremos numerar as páginas do nosso blog. Se não entendeu, veja um exemplo abaixo:
Agora que já vimos como fica, vamos ao tutorial!

Vá no HTML do seu blog, marque a caixinha "Expandir Modelos de Widgets" e procure por ]]></b:skin>

Cole antes disso, o código abaixo:




showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
background: #cccccc; /*COR DO FUNDO DOS NÚMEROS /*
margin:0 2px;
padding:5px;
}
.showpageNum a:hover {
border: 0px solid #cccccc;
background-color: #00ffff;
}
.showpagePoint {
color:#333; /* COR DO TEXTO /*
text-decoration:none;
border: 0px solid #cccccc;
background: #00ffff; /*COR DO FUNDO DOS NÚMEROS SELECIONADOS/*
margin:0 2px;
padding:5px;
}
.showpageOf {
text-decoration:none;
padding:5px;
margin: 0 2px 0 0;
}
.showpage a {
text-decoration:none;
background-color: #cccccc; /*COR DE FUNDO DO "PRÓXIMO"/*
padding:5px;
}
.showpage a:hover {
text-decoration:none;
background:#00ffff; /*COR DE FUNDO DO "PRÓXIMO" SELECIONADO/*
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#000;
}

Imagens





Salvador

Para o próximo passo, precisamos colocar uma imagem de cabeçalho no blog. Eu fiz uma só para dar o exemplo, mas você já pode usar a sua imagem definitiva. Lembre-se sempre de fazer uma imagem da largura do seu blog (Veja qual é a largura no designer de modelo).


Lá em layout clique em "Editar" no gadget do cabeçalho:




Vai abri uma janela, lá você clica em "Fazer upload da imagem" e escolhe sua imagem de topo. Em posicionamento, marque a opção "Em vez de título e descrição". Quando a imagem for totalmente carregada, é só salvar.


Agora vamos voltar para o Modelo HTML do blog. (Modelo > Editar HTML > Prosseguir)
Iremos retirar aquele espaço chato que fica entre a imagem do cabeçalho e o resto do blog. A maioria dos layouts fica melhor sem aquele espaço, mas se você achar que não precisa tirar, pule essa etapa.


Aperte Ctrl+F e procure por: /* Tabs
Logo abaixo você verá esse código:

teste

Umas das dúvidas que eu mais recebo é "Liah, como eu faço um layout?". Eu geralmente não respondo porque não tem como explicar em um comentário. E na verdade a maioria dos blogueiros não faz o layout todo em si. Nós apenas modificamos a base disponibilizada pelo blogger.

Então hoje eu vou mostrar as principais modificações que devem ser feitas no modelo blogger. Vou logo avisando que é só o básico, apenas para deixar a aparência dele mais limpa e profissional. O resto como modificar as cores, criar as imagens, e adicionar outros efeitos você pode ver em outros tutoriais tanto aqui no Cherry Bomb como em outros blogs. Esse tutorial é só sobre como fazer a base.



Preste bastante atenção em todos os passos para não errar! Ah, desculpem pela tag nas imagens, mas não posso dar mole para os plagiadores. Se não der pra ver alguma coisa por causa da tag, me avisem. Para ampliar as imagens é só clicar em cima.


Primeiro vamos escolher o modelo básico. Vamos usar o Travel (Viagem) na versão que tem umas "bordinhas" de papel no cabeçalho. Ele pode parecer bem feinho a primeira vista, mas depois vamos deixá-lo super lindo.

Para isso vá em modelo > Personalizar e escolha o modelo circulado de vermelho.

 

Copyright @ 2013 testeee5.