Olá cherrys tudo bem com vocês?! bom esse e o primeiro tutorial de muitos que vou postar aqui no Cherry tutorial, hoje vamos começar pela SERIE fazendo meu Layout do zero e esse e o #1,vou dividir essa serie em 4 partes e vou postar outros tutorial separadamente.
Bom toda blogueira sempre que ter o seu próprio layout e pra quem não entende muito de HTML esses tutorial ajuda bastante, Lembrando que o tutorial que eu vou ensimar eu testei apenas no modelo travel (viagem).
É necessário muita atenção e paciência para se fazer qualquer coisa em HTML. Um errinho e seu blog pode estragar todinho. Jogue a preguiça de lado e vamos lá!
O post de hoje ensina a tirar alguns códigos para tornar a aparência mais bonita. Bem básico!
Primeiro, crie um novo blog e escolha o modelo Travel (viagem), o que tem um fundo todo branco. Recomendo que todo(a) blogueiro(a) tenha mais de um blog. Um que você posta as coisas publicamente e outro (ou outros) para a criação de Layouts, testes de tutoriais, etc.
Depois de seu blog pronto siga os passos abaixo.
Vá em Modelo 
Clique em Personalizar
Clique em Personalizar
Depois, na guia Avançado, escolha uma cor para o fundo da postagem.
No canto superior direito clique em "Aplicar ao blog".
Agora é a parte que exige mais atenção. Vamos mexer nos códigos HTML.
Primeiro vamos tirar as bordinhas de papel que são horrorosas.
Agora no painel do blog clique em "Modelo", depois em "Editar HTML".
Vai abrir uma caixinha cheia de códigos aperte no seu teclado Ctrl+F ou F3. Note que abriu uma caixinha de pesquisa no canto superior direito da página. Cole nela o seguinte código abaixo;
Note que a essa parte se destacou no código geral.
Agora, apague todos os trechos abaixo.
.content-outer .content-cap-top {
height:$(content.imageBorder.top.space);
background: transparent$(content.imageBorder.top) repeat-x scroll top center;
}
.content-outer {
margin: 0 auto;
padding-top: $(content.margin);
}
.content-inner {
background:$(content.background);
background-position: left -$(content.imageBorder.top.space);
background-color:$(content.background.color);
padding: $(content.padding);
}
Feito isso clique em "Salvar Modelo".
Agora vamos colocar um plano de fundo no blog. Há dois modos de se fazer: pelo design de modelo ou pelo HTML.
PELO DESIGN DE MODELO
No painel do blog, clique em "Modelo", depois em "Personalizar"
Na aba "Plano de fundo" clique no local indicado na figura abaixo.
Na página que se abre escolha um plano de fundo ou faça o upload da imagem do seu computador. Feito isso, clique em "Aplicar ao blog".
PELO HTML
No painel do blog, clique em "Modelo", depois em "Editar HTML".
Depois aperte no seu teclado Ctrl+F ou F3.
Pesquise por:
Abaixo dele deve estar assim:
body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
}
Apague a linha destacada de vermelho e cole no lugar o código abaixo:
Coloque o url da imagem no local indicado, visualize e depois salve.
Pronto! O seu layout já está aparentemente bonito. Veja o meu como ficou:
Então e isso Cherrys e até amanha para o novo post da serie *-*
Nenhum comentário: