Tutorial - Como fazer um layout fofo Parte 1

Olá Ann'ys u-ú
Finalmente eu criei uma ask pro blog , para vocês pedirem os posts quando eu estiver sem ideias como agora, é já tenho o primeiro pedido , pediram pra eu fazer um tutorial de como fazer um layout fofo então eu vou atender esse maravilhoso pedido >3< Peça o seu para pedir é só ir nos últimos gadgets do blog é pedir >3< Eu já tinha uma ask só que eu perdi a senha UAHSUAHSU'' Sou burraney ~ . Esse tutorial será dividido em duas partes , parte 1 e parte 2 . 
Na parte 1 tem apenas algumas personalizações básicas, essa imagem e como vai ficar seu layout no tutorial parte 1 mais no tutorial parte dois vai ter mais coisas ^^ Está ansioso (a)? 

1 - Para começarmos vamos escolher o modelo travel, aquele do avião para darmos inicio ao nosso tutorial ( imagem )
2 - Depois vamos tirar aquela bordinha do modelo travel, vamos em modelo -> editar Html depois clique nos ''...'' entre <b:skin> e  </b:skin> (imagem)
3 - Quando você clicar neles vai abrir um código, logo em seguida clique na área do post do HTML ,depois de Ctrl + F ( lembrando que e ctrl F) e procure por .content-outer .content-cap-top { .
4 - Depois quando encontrar aquele codigo apague as partes destacadas (imagem)
5 - Depois que apagar seu modelo ficará assim (imagem)
6 - Depois aplique esse background (imagem) ficará mais ou menos assim (imagem)
7 - Depois crie um post teste , é o post vai ficar transparente (imagem) Mas tem como ajudar, é só ir em modelo -> Personalizar ->Plano de fundo da postagem e colocar branco (imagem)  
 É aplique ao blog.
8 -  Ainda em modelo -> Personalizar . Vamos arrumar o corpo do layout (imagem) -> Depois a largura (imagem) use as mesmas larguras para que o layout fique igual.

           Agora vamos para as partes que vão fazer o layout ficar bem personalizado >3<

1.1 - Abaixo de mobile , cole o código (imagem) :
 .sidebar .widget h2{background: url(http://2.bp.blogspot.com/-aDxsDweNPyA/UUdvT9ulA1I/AAAAAAAAzc8/DLqDxWHK3wI/s1600/130.png) no-repeat left;margin-top:-14px;margin-left:-32px;margin-bottom:0px;padding:15px;width:150%;overflow:hidden;}


 1.1 Cole o codigo abaixo acima de ]]></b:skin>
.feed-links{display:none !important;}
1.2 Cole o codigo abaixo acima de ]]></b:skin>


@font-face { font-family: "pixel"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); }

.post-footer-line-1 {

background: #82b1ce;

border: 1px solid #82b1ce;
box-shadow: inset 2px 2px 0 #f6d3d3;
font-family: 'pixel';
font-size: 8px;
color: #e5bdbd;
margin-top:35px;
padding: 3px;
text-transform:none;
width: 514px;
text-align: right;
margin-left: -4px;
}

1.3 Cole o codigo abaixo acima de ]]></b:skin>
h3.post-title {margin-top: 15px;text-align: center;border-bottom: 1px dotted #ededed;}@font-face { font-family: "bebas neue"; src: url('http://static.tumblr.com/cvlbtjz/cnsln9tpp/bebasneue.otf'); }h3.post-title a {font-family: "bebas neue";color: #86b3d0;font-size: 26px;text-shadow: 0px 0px 1px #82b1ce;letter-spacing: 2px;text-transform: uppercase;-webkit-transition-duration: .90s;font-weight: lighter;}h3.post-title a:hover {color: #82b1ce;-webkit-transition-duration: .90s;}
1.4 Cole o codigo abaixo acima de ]]></b:skin>
@font-face { font-family: "pixel"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); }jump-link a {text-align: center; margin 3px;}.jump-link {font-family: pixel;font-size: 8px;color: #000000;padding: 3px;background: #82b1ce;box-shadow: inset 0 0 10px #82b1ce;text-shadow: #82b1ce 0 1px 1px;border-radius: 0px; - BORDA ARREDONDADA-webkit-transition-duration: .50s;}.jump-link:hover {background: #82b1ce;box-shadow: inset 0 0 15px #82b1ce;text-shadow:#82b1ce 0px 1px 1px;-webkit-transition-duration: .50s;

Aguarde a parte 2 do tutorial . Ah, e os códigos tem que esta na mesma sequencia que eu coloquei por que se não dá erro . Beijos!

38 comentários:

  1. Ahh Anny,Para De Me Surpreender Assim Menina,Tu Tá Divando Demais,Ta Sambando u.u ! Eu Não gostei do tutorial,eu Amei !!!
    Eu To Quase Terminando o layout do meu blog pra começar a postar,vou usar no layout free,por isso favoritei a página rss (darei os devidos créditos)

    Beijinhos | c-diamond.blogspot.com ( Hoje Mesmo,Eu Vou Abrir)

    ResponderExcluir
  2. Cara , vai ficar PERFEITO o layout :3 , quando eu for fazer o meu próximo , vou vir aqui , já salvei nos favoritos :3
    Beijos !
    resenhando--nuvens.blogspot.com.br

    ResponderExcluir
  3. Ótimo tutorial Anny, super útil para aquelas pessoas com falta de inspiração ou que ainda não sabem como editar um template :3 parabéns!

    road to infinity

    ResponderExcluir
  4. Nossa, utilizarei essas dicas no meu próximo lay! Obrigada!!!

    Beijos,
    Lê.

    | Mais Rímel - livros, moda e artesnato |

    ResponderExcluir
  5. adorei as dicas! o primeiro q personalizei foi o modelo viagem e adorei
    fiz um novo com um outro modelo q achei na internet, só q não foi a msm coisa, não consigo personalizar os comentários de jeito nenhum . acho q tá bugado e nem consigo mais respondr os comentários..será q o erro tá onde?

    bjoo

    blogmaricordeiro.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Vou fazer um tutorial sobre isso, pra ajudar você.
      <3

      Excluir
  6. Já vou te seguir na ask u.u
    Eu admiro os blogs que fazem tutoriais de como fazer layouts, porque sei o quanto é trabalhoso OKAOKPA meus parabéns, o tuto ficou ótimo assim como sua explicação, mal posso esperar para o próximo *u*

    htmlandresources.blogspot.com.br

    ResponderExcluir
    Respostas
    1. >3< Ah você nem precisa seus layouts são maravilhosos haha
      <3 Beijos!

      Excluir
  7. Muito legal o tuto flor adorei
    ajuada muito esses posts
    http://meninasperfeitas01.blogspot.com.br/
    seguindo

    ResponderExcluir
  8. Tenho muita vontade de fazer um lay fofo *-*, depois usarei suas dicas pra tentar fazer um :3. Flor já lhe sigo, poderia participar do meu cantinho também se possível ? Te espero lá : Brilliant Diamond

    ResponderExcluir
  9. ótimo tutorial, já estou fazendo um e quem saiba eu não faça um free com esse tutorial? você explica muito bem :3

    Kissus || Follow and Comment || Kawaii Cherry ♥

    ResponderExcluir
  10. Haha adorei o tuto *U* é muito útil para aqueles que são iniciantes
    Quando eu era iniciante na blogosfera, ninguém fazia tutos assim por isso meus layouts eram horríveis T-T
    Você explica muito bem ^^ quero ver a parte dois ;3

    ~September Rains

    ResponderExcluir
  11. Vou fazer alguns pedidos na ask o3o . Este tuto está perfeito , adoro blogs que fazem estes tipos de tutoriais , para quem é iniciante este tuto é maravilhoso. O bom é que você deu uma forcinha colocando alguns códigos , enfim amei o tutorial .

    kiss .

    s-noowing.blogspot.com.br

    ResponderExcluir
  12. Passai aqui pois vim avisar que mudei o meu blog de e tudo,inclusive os afiliados e por isso teu blog não está lá,mas já coloquei!

    ResponderExcluir
  13. Amei esse tuto, vai ajudar muita gente <3

    ha-unting.blogspot.com

    ResponderExcluir
  14. Antww Amei <3
    Da Uma Olhadinha ? http://goolddesigner.blogspot.com/

    ResponderExcluir
  15. Esse com certeza é um dos tutoriais mais úteis que existe. Ainda bem que você começou, vou acompanhar. o/

    www.nahboa.com

    ResponderExcluir
  16. É muito bom ter esse tutorial disponível , muitas pessoas irão amar tenho certeza >3<

    D-Resources || www.d-resources.net

    ResponderExcluir
  17. Muito bom super explicadinho e o resultado vai ficar fofo.

    Sweet of Cherry

    ResponderExcluir
  18. muito bom o tutorial, bastante útil..
    http://zombiecutie.blogspot.com.br/

    ResponderExcluir

Qualquer dúvida comente no post mais recente ou pela ask.
Aceito criticas, mas construtivas.
Não use palavrões.
Comente algo relacionado ao post, todo blogueiro gosta de ler um comentário assim.