como criar layout feminino para blogger (new)!

Aeeeeeeeeeeee! Lançou a segunda aula de como criar um layout blog,atualizado né. Vamos la!!!
Antes de tudo quero pedir desculpa que na primeira aula eu fiz tudo correndo e salvei em uma péssima qualidade e ai ficou meio ruim mas nas outras eu vou consertar isso...
Você pode ignorar tudo o que está escrito aqui e ver a vídeo-aula no final do post.
UM MONTE DE GENTE ME PERGUNTA COMO SE CRIA UM LAYOUT,E SÓ CONSEGUE QUEM QUER APRENDER...

Primeiramente,vou deixar um arquivo de layout básico para download que vamos trabalhar nele para fazer um layout,mas ele só tem uma coluna lateral direita,ok? depois que você aprender pode baixar os outros layouts mínima clicando aqui que tem de vários modelos de colunas e quantidades de colunas.
-
como colocar um layout xml no blogger:

como descobrir o css de uma tag

"mudar a cor de algo" (após mudar a cor,você copia o código e poe no seu blogger modelo > editar html pois aquilo é só uma ajudinha basica do navegador,nao vai alterar seu blogger sozinho óbviamente né)

Após ter colocado o layout de xml,vamos com as edições,mas antes vamos aprender algumas coisinhas..

O que é Html?

HTML (abreviação para a expressão inglesa HyperText Markup Language, que significa Linguagem de Marcação de Hipertexto) é uma linguagem de marcação utilizada para produzir páginas na Web. Documentos HTML podem ser interpretados por navegadores. A tecnologia é fruto da junção entre os padrões HyTime e SGML.
HyTime é um padrão para a representação estruturada de hipermídia e conteúdo baseado em tempo. Um documento é visto como um conjunto de eventos concorrentes dependentes de tempo (como áudio, vídeo, etc.), conectados por hiperligações. O padrão é independente de outros padrões de processamento de texto em geral.
SGML é um padrão de formatação de textos. Não foi desenvolvido para hipertexto, mas tornou-se conveniente para transformar documentos em hiper-objetos e para descrever as ligações.
Fonte: Wikipédia

O que é CSS?

O Cascading Style Sheets (CSS) é uma "folha de estilo" composta por “camadas” e utilizada para definir a apresentação (aparência) em páginas da internet que adotam para o seu desenvolvimento linguagens de marcação (como XML, HTML e XHTML). O CSS define como serão exibidos os elementos contidos no código de uma página da internet e sua maior vantagem é efetuar a separação entre o formato e o conteúdo de um documento.
Fonte: Tecmundo

Bem,agora que você já tem uma noção do que é HTML e CSS,provavelmente você não deve ter lido,mas não seria bem necessário saber pois o que importa é na hora de criar o layout.

Para dar introdução,aqui tem algumas tags de css que você vai poder utilizar para dar estilos ao seu layout de blogger,que é muito necessário.

O layout básico que você baixou vai vir assim:

Vamos editar ele completamente e também vou utilizar o photoshop para fazer o cabeçalho,se não tem só recomendo um programa que dá pra fazer edições e suporte para fundos transparentes... O Pixlr você não precisa baixar,você utiliza no navegador mesmo e é quase semelhante ao photoshop.

Nesta aula,utilizei no layout um banner de cabeçalho 960 x 245.

Conjunto de tags (considere 'BG' = background)

color | a cor do texto
opacity | opacidade (transparência de uma div)
background | background (fundo) por cores ou por imagens
background-color | background só de cores
background-image | background so de imagem
border | aplica uma borda a uma div ou background
border-image | borda em imagem

box-shadow | aplica sombra em uma caixa/bg

display | retira algo com 'none' e poe em blocos com 'block'

height | altura (por pixels = x px)

width | largura (por pixels = x px)

left | esquerda

top | topo

bottom | em baixo

right | direita

overflow | transbordamento ou barra de rolagem

padding | acolchoamento ou espaço em um bg

margin | cria uma margem transparente,separando de outra div

max-height | maximo de altura que pode ser utilizado

max-width | maximo de largura que pode ser utilizado

min-width | minimo de largura que pode ser utilizado

min-height | minimo de altura que pode ser utilizado

letter-spacing | espaços de letras

line-height | altura da linha de texto

text-align | alinhar o texto no centro,direita e esquerda

text-transform | transformar o texto em maiusculo,minusculo primeira letra maiusculo etc

text-decoration | colocar underline no texto,overline..

text-shadow | sombra do texto

font-family | tipo de fonte

font-size | tamanho da fonte

font-weight | texto normal,itálico,negrito,etc

transition | transiçao do :hover

Separei uma das tags que mais uso quando vou criar o layout..MAS EXISTEM UM MONTE AINDA.

Bem,aqui está mais ou menos explicado sobre a criaçao de layouts... mas nao vou ensinar tudo o que sei,obviamente,se vc acompanhar os posts no meu blog sim.

Para quem quiser menu,eu não ensinei na aula mas vou deixar o código dele ai:

<style>
#menu{
float: left;
width:960px;
height:40px;
background: #feccb1; /* Old browsers */
background: -moz-linear-gradient(top, #feccb1 0%, #f17432 50%, #ea5507 51%, #fb955e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#feccb1), color-stop(50%,#f17432), color-stop(51%,#ea5507), color-stop(100%,#fb955e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #feccb1 0%,#f17432 50%,#ea5507 51%,#fb955e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #feccb1 0%,#f17432 50%,#ea5507 51%,#fb955e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #feccb1 0%,#f17432 50%,#ea5507 51%,#fb955e 100%); /* IE10+ */
background: linear-gradient(to bottom, #feccb1 0%,#f17432 50%,#ea5507 51%,#fb955e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feccb1', endColorstr='#fb955e',GradientType=0 ); /* IE6-9 */
}
#menu ul{
margin: 0;
padding:0;
list-style:none;
}
#menu ul li{
float: left;
}
#menu ul li a{
color:#FFF;
list-style:none;
text-decoration:none;
padding:15px;
display:block;
}
#menu ul li a:hover{
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
height:10px;
}
</style>
<div id ="menu">
<ul>
<li><a href="http://estruturablog.blogspot.com.br/">Home</a></li>
<li><a href="#">Sobre</a></li>
<li><a href="#">Contato</a></li>
<li><a href="#">Promoções</a></li>
<li><a href="#">Templates</a></li>
<li><a href="#">Comprar</a></li>
<li><a href="#">Sorteios</a></li>
<li><a href="#">Dicas</a></li>
<li><a href="#">Ajuda</a></li>
</ul>
</div>

Código do dia:

<style>
#data{
background: transparent;
color:#aeaeae;
font:arial;
padding-top:15px;
}
</style>
<div id="data">
<div style="font-weight: bold; font-size: 13 px; font-family:verdana;">Hoje é <script language="JavaScript">
hoje = new Date()
dia = hoje.getDate()
dias = hoje.getDay()
mes = hoje.getMonth()
ano = hoje.getYear()
if (dia < 10)
dia = "0" + dia
if (ano < 2000)
ano = 1900 + ano
function NArray (n)
{
this.length = n
}
NomeDiaWMOnline = new NArray(7)
NomeDiaWMOnline[0] = "Domingo"
NomeDiaWMOnline[1] = "Segunda-feira"
NomeDiaWMOnline[2] = "Terça-feira"
NomeDiaWMOnline[3] = "Quarta-feira"
NomeDiaWMOnline[4] = "Quinta-feira"
NomeDiaWMOnline[5] = "Sexta-feira"
NomeDiaWMOnline[6] = "Sábado"
NomeMesWMOnline = new NArray(12)
NomeMesWMOnline[0] = "janeiro"
NomeMesWMOnline[1] = "fevereiro"
NomeMesWMOnline[2] = "março"
NomeMesWMOnline[3] = "abril"
NomeMesWMOnline[4] = "maio"
NomeMesWMOnline[5] = "junho"
NomeMesWMOnline[6] = "julho"
NomeMesWMOnline[7] = "agosto"
NomeMesWMOnline[8] = "setembro"
NomeMesWMOnline[9] = "outubro"
NomeMesWMOnline[10] = "novembro"
NomeMesWMOnline[11] = "dezembro"
document.write (NomeDiaWMOnline[dias] + ", " + dia + " de " + NomeMesWMOnline[mes] + " de " + ano)</script></div>


</div>

Damos Inicio a nossa aula,primeiramente crie uma imagem no photoshop 960 x 245.

Aqui está o arquivo do layout que eu fiz:

♡  →  Modelo básico da criação xml feito por mim - download (mega) ←

Separei as vide-aulas,para cada vídeo-aula eu vou falar sobre algo,assim o vídeo não fica tão longo e chato... ah não se esqueça que você pode enviar suas imagens para o site imgur.com...
Vocês vão prescisar de duas coisas: um background de fundo do layout e um cabeçalho,vamos la..

Na primeira aula vai ser bem calmo,você vai criar o cabeçalho e hospedar,coisa simples e rápida,eu ainda tenho muito que ensinar para vocês né isso ai é mais uma introdução... Eu criei uma pasta chamada 'vídeo-aula' na área de trabalho para organizar a aula.

Continuando... Nessa segunda aula,eu coloquei o modelo travel segunda opção (viagem) vamos utilizar as "margins" tirar a barra do blogger em cima,tirar o background do blog e colocar backgrounds nos posts,dar cor na sidebar e remover o modelo viagem pertence ao blogger do rodapé e alguns códigos deixei para download.

"Código de instalação da fonte no layout" e o "Código de remover espaços da sidebar"

Download

e vou deixar os códigos do POSTS que tinha dado erro na hora,mas já consertei então ta ai o código abaixo:

/* Posts
----------------------------------------------- */
.post{
font-family:muli;
margin-top: -28px;
}
h3.post-title {
font-family:muli;
background: #fff;
margin-top: 50px;
padding: 7px;
margin-left: -16px;
}
h3.post-title a {
font-family: Muli;
font-size: 18px;
color: #000AFF;
}
h3.post-title a:hover {
color: #000AFF;
  text-decoration: underline;
}
.main-inner .column-center-outer {
  background: $(post.background.color) $(post.background.url) repeat scroll top left;
  _background-image: none;
}
.post-body {
padding: 8px;
background: #fff;
line-height: 1.4;
margin-left: -16px;
margin-top: -13px;
position: relative;
}
.post-header {
  margin: 0 0 1em;
  line-height: 1.6;
}
.post-footer {
margin: .5em 0;
margin-left: -16px;
margin-top: 0px;
padding: 5px;
line-height: 1.6;
}
#blog-pager {
  font-size: 140%;
}
#comments {
  background: $(comments.background);
  padding: 15px;
}
#comments .comment-author {
  padding-top: 1.5em;
}
#comments h4,
#comments .comment-author a,
#comments .comment-timestamp a {
  color: $(post.title.text.color);
}
#comments .comment-author:first-child {
  padding-top: 0;
  border-top: none;
}
.avatar-image-container {
  margin: .2em 0 0;
}

Bem... ai está o vídeo.

Nesta aula iremos aprender a retirar as letras e colocar o cabeçalho personalizado, colocar um background de fundo e muito mais!
height: altura , widht: largura

nessa aula eu nao editei o video pois nao tinha tempo e peço perdao pois fiz tudo correndo e realmente queria acabar com essa aula basica, mas eu ensinei tb como editar um layout e escrevi bastante no post, espero que vcs tenham gostado... obg por tudo!