Bom dia! Como estão? Espero que estejam bem, pois eu já estou de férias! Eu fiquei de recuperação em uma matéria, foi na de história. Eu tirei 5,2 na de história, ai eu fiquei na bendita recuperação. Mudando completamente de assunto, fiquei feliz que a Agnes fez o primeiro template do blog, eu adorei. Por causa desse ocorrido, não consegui fazer o template, então pedi para a minha amiga, Agnes fazer para mim. Eu amo essa garota, nos conhecemos quando tínhamos 10 aninhos de idade, já se passou 3 anos, que emoção. Lembram que eu falei que eu ia postar só um dia sim e o outro não? Então, eu vou postar assim, eu já adoro escrever e ler, agora ter um blog de HTML, meu Deus! Julie, porque o nome System HTML? Ah, eu sempre fui ligada nesses negócios de HTML, então aos meus oito anos de idade eu criei um blog chamado Minha Querida Loucura, mas não tinha nenhum seguidor, e eu nessa idade comecei a mexer em HTML, eu já sabia por 2 backgrounds no blog, mudar fonte, fazer cabeçalhos, um monte de coisas. Por isso sou tão ligada nessas coisas. Meu blog favorito é o Cherry Bomb/Cherry Boomb, eu sempre fui ligada nele, quando eu tinha 10 anos eu já mexia no CB. Mudando de assunto novamente, eu vou abrir as vagas de afiliados, então se quiserem ser, é só preencher esse mini-formulário abaixo:
Seu nome:Nome do seu blog:Link do seu blog:Ele tem postagens freqüentes?
Bem, hoje eu vou fazer uma postagem que muitas blogueiras iniciantes precisam, ou seja, criar um template para seu blog. É muito simples, perfeito para as iniciantes e para quem já está mais avançado nos blogs, como 1 ou 2 anos, ou menos. A Clara/Kaorii com certeza deve usar esses tutoriais, e se quiser um dia ter um blog como o da Kaorii, é só fazer layouts grandes, fofos ou até simples, como os do começo dela. Tenho certeza que um dia todos nós vamos ter mais de 1.000 seguidores ♥ Confesso que para alguns como o meu vai demorar muito, mas fazer oque né, é a vida. Tome muito cuidado para não errar nesse tutorial. O tutorial é do Cherry Bomb/Cherry Boomb, então não quero ser acusada de plágio, ok? Bom, para ir diretamente ao tutorial clique em leia mais.
Bem, primeiro de tudo você quer fazer um layout todo grudadinho como o do blog ou um simples e que seja todo separado? Se quiser o todo grudadinho clique aqui {x} Eu vou ensinar o simples e básico, separado.
Primeiro vamos ter que escolher o modelo. Vamos usar o modelo Travel (Viagem) em um modelo que tem beiradinhas/serrinhas de papeis em cima. Ele é muito feio, de primeira vista, mais vamos deixar ele super lindo! Clique nas imagens para melhor visualização. ♥
Para isso, vá em modelo > Personalizar e escolha o modelo que está circulado de amarelo.
Vai ter mais ou menos isso:
Depois que você fizer isso clique em "Avançado" ali do ladinho, e procure por "Plano de fundo da postagem" e ponha qualquer cor, recomendo a cor branca, só para dar um destaque para quando estivermos modificando códigos no HTML do blog.
Depois clique em "Salvar configurações" algo assim. Agora iremos mexer no HTML do seu blog, preste atenção!
Clique em "Editar HTML"
Agora começaremos as modificações. Primeiro vamos retirar aqueles serrilhados/bordinhas de papel feias que deixam o layout horroroso. Aperte Ctrl+F e procure por .content-outer .content-cap-top {
Logo abaixo disso você irá apagar somente esses códigos que estão destacado de verde. Cuidado para nunca apagar os pontos e vírgulas, somente no que se pede.
Seu layout ficará assim:
Faça um cabeçalho para seu blog. Eu fiz um para vocês verem só de exemplo, vou passar para vocês, só se quiserem usar. E se você quer que ele fique do tamanho do blog, pegue as larguras dele como: 960x310.
Então, sabe quando colocamos o cabeçalho como esse acima e tem um PNG de uma menina cortada? Vamos colocar como se ele tivesse atravessando a área de posts. É um código que tira esse espaço entre o cabeçalho e a postagem.
Aperte Ctrl+F e procure por /* Tabs
Logo abaixo disso, você notará esse código:
.tabs-inner {margin: 1em 0 0;padding: 0;}
Apague o código que está sublinhado.
Novamente aperte Crtl+F e procure por .main-inner {
Logo abaixo disso você terá que acrescentar essa linha: margin-top: -20px;
Se quiser modificar é só você trocar o -20 para qualquer outro número. Não pode sobrar nenhum espaço, hein! E se for para aumentar o espaço, tire o sinal de -
Tutorial retirado do Cherry Boomb/Cherry Bomb.
Bem, já fizemos o principal do blog, ele já está perfeito, agora vamos ter que separar as postagens e os gadgets. Vamos lá!
Antes de tudo, vá em modelo > Personalizar > Avançado > "Plano de fundo da barra lateral" Deixe transparente, os dois. Salve.
Agora você poderá separar os gadgets.
Vá em design > Editar HTML > Aperte Ctrl+F e procure por /* Widgets
Antes de fechar } cole o seguinte código:
background: #fff; /*---- cor do fundo da caixa ----*/padding-left: 20px; /*---- espaço à esquerda ----*/padding-bottom: 20px; /*--- espaço de baixo ---*/padding-right: 20px; /*--- espaço à direita ---*/padding-top: 5px; /*---- espaço de cima ----*/border-radius: 5px; /*---- bordas arredondadas, apague a linha se não quiser ----*/box-shadow: 1px 3px 15px 2px #ccc; /*---- sombra da caixa ----*/
Se você quer o fundo da sua caixa/gadget branco, deixe a cor #fff na primeira linha. Na segunda, terceira, quarta e quinta se quiser um espaço tipo dos lados, em cima e em baixo deixe como está, ou modifique, se não quiser, ponha 0.
Na penúltima linha se quiser as bordas redondas deixe como está, se não quiser apague essa linha. E na última se quiser sombra na caixa, deixe assim, como está, mas se não quiser, apague.
Tutorial retirado do Go Imagine.
Agora, você vai ter que por um background no seu blog, ou seja, um fundo. Para isso vá em modelo > Personalizar > "Plano de fundo" e escolha o seu.
Simples não é? Sim, a postagem ficou gigante, eu não esperava isso, mas ficou. Espero que tenham gostado, pois ainda é só a primeira parte! Comentem hein, deu um pouco de trabalho escrever isso, tirar imagens e procurar, mas fiz por vocês ♥ Obrigada!
Nenhum comentário:
Postar um comentário