domingo, 11 de agosto de 2013

Fazendo Seu Layout Parte II

Oioi dreamers! Hoje é dia dos pais, já abraçaram e beijaram seus coroas? Bem, as vezes eu e meu pai discordamos com algumas coisas, brigamos e etc, mas no final fica tudo bem, nós nos amamos e eu quero sempre poder ter o meu pai próximo a mim... Enfim, hoje eu vim postar a segunda parte do nosso big tutorial de como criar um layout. Está bem simples, porque como eu disse anteriormente, o pedido foi de um layout modelo tumblr, mas eu não sei muito bem como é, então eu fiz desse jeito mesmo que vocês viram, espero que seja assim ou mais ou menos isso hahaha. Bom, se não viu a primeira parte, clique aqui e vá para a postagem. E vamos começar logo com a segunda parte hahaha.

Primeiro, vamos separar as postagens... Vá no seu html e procure por:

.main-inner .column-center-outer {
  background: $(post.background.color) $(post.background.url) repeat scroll top left;
  _background-image: none;
}

Agora, substitua todo esse trecho por:

.post-outer {
margin: 4px 2px 5px;
background:#COR DO FUNDO;
padding: 5px;
font-family: FONTE DA POSTAGEM;
font-size: TAMANHO DA FONTE DA POSTAGEMpx;
text-align: center;
color: #COR DA FONTE DA POSTAGEM;
border-top: solid 3px #COR DA BORDA; /*BORDA NA PARTE DE CIMA, REMOVA SE NÃO QUISER*/
border-bottom: solid 3px #COR DA BORDA; /*BORDA NA PARTE DE BAIXO, REMOVA SE NÃO QUISER*/
}

Agora, vamos arrumar a data do seu blog. Procure por:

.main-inner h2.date-header {

Selecione desde o trecho procurado até } que é o fechamento do código, e substitua por esse código:

.main-inner h2.date-header {
font-family: NOME DA FONTE;
font-size: TAMANHO DA FONTEpx;
color: #COR DA FONTE;
text-align:center;
padding: 2px;

Então vamos para o próximo e último passo de hoje, é claro que ainda tem mais outra parte do tutorial pra vocês, calma hahaha. Vamos ajeitar o título das postagens.

Procure por esse trecho:

h3.post-title {
  margin-top: 20px;
}

h3.post-title a {
  font: $(post.title.font);
  color: $(post.title.text.color);
}

h3.post-title a:hover {
  text-decoration: underline;
}

Quando achar, substitua tudo pelo trecho abaixo:

h3.post-title {
margin-top: 5px;
font-family: NOME DA FONTE;
font-size: TAMANHO DA FONTEpx;
color: #COR DA FONTE;
text-shadow: 0px 1px 1px #COR DA SOMBRA;
}
h3.post-title a {
font-family: NOME DA FONTE;
font-size: TAMANHO DA FONTEpx;
color: #COR DA FONTE;
text-shadow: 0px 1px 1px #COR DA SOMBRA;
}
h3.post-title a:hover {
font-family: NOME DA FONTE HOVER;
font-size: TAMANHO DA FONTE HOVERpx;
color: #COR DA FONTE HOVER;
text-shadow: 0px 1px 1px #SOMBRA HOVER;
}

Booooom dreamers queridos, por hoje é só, foi bem rapidinho né? Hahaha. Estão gostando desse tuto e de como está ficando tudo? Realmente dá trabalho explicar hahaha, mas espero que valha a pena e que dê pra ajudar alguém, que isso que é o importante! Beijos, FELIZ DIA DOS PAIS e até amanhã meus amores. ♥

33 comentários:

  1. Hoje é dia do pai? ASPOASKOASKAOSKAS' Em Portugal celebra-se em 19 de Março '-'
    Gosto dos tutorias que postas Nana c: São realmente úteis, obrigada <3

    Kiss~

    from Niik ll Letter of Pain (perfil)

    ResponderExcluir
    Respostas
    1. Waa que legal, datas tão diferentes hahaha. E muito obrigada Niik, que bom que você gosta. *-*

      Excluir
  2. Eu também sou Portuguesa e não celebro o dia mas desejo um bom dia para quem o celebra.

    http://shisy-things.blogspot.pt/

    ResponderExcluir
    Respostas
    1. Hahaha pois é, é legal essa diferença de datas, interessante kkk.

      Excluir
  3. Adorei esse tutorial. Nossa, divando aqui né? Ashuashua FELIZ DIA DOS PAIS POPULAÇÃO NACIONAL <33333
    Kiss
    With You

    ResponderExcluir
    Respostas
    1. Awn Mandi, muito obrigada. Quem diva sempre é você! Hahaha, beijos! ^^

      Excluir
  4. Estou acompanhando esse tuto para ensinar para quem pergunta, hu3
    Feliz dias dos pais!.

    semprefuiestranha.blogspot.com | SEMPRE FUI ESTRANHA

    ResponderExcluir
    Respostas
    1. Awn Ammy que legal! Muito obrigada. *-*

      Excluir
  5. Acho que sou a única que não separa os posts, haha kisses

    Fernanda, visita? || http://epidemiadosblogs.blogspot.com

    ResponderExcluir
    Respostas
    1. Hahaha tem muita gente que não separa mesmo. ^^

      Excluir
  6. Esse tutorial é muito legal e útil adoro seu blog.
    http://cherrykawaii-14.blogspot.com.br/ pode seguir? se não for incomodo! beijos

    ResponderExcluir
    Respostas
    1. Awn Andreza, muito obrigada! ^^

      Excluir
  7. Há Nana como eu queria abraçar e beijar o meu pai hoje, não consigo pensar em outra coisa hoje! Eu não consigo fazer quase nada em html, mais já estou pensando em começar á tentar criar meu próprio lay e estes tutoriais vai me ajudar muito com certeza. Feliz dia dos pais para você também.

    Mundo de Liina

    ResponderExcluir
    Respostas
    1. Ah Lina, é uma pena que você não pode abraçar seu pai no dia tão especial, mas o que importa é o seu sentimento que está no seu coração, viu? Ah e espero que esse tutorial possa te ajudar quando você criar seu layout, tenho certeza que você fará um ótimo trabalho! *-*

      Excluir
  8. Estou adorando esse big tutorial hahahahah! Já desejei feliz dia dos pais ao meu! Beijos
    pandalland.blogspot.com

    ResponderExcluir
    Respostas
    1. Awn Gabiie, muito obrigada, fico feliz que esteja gostando! *-*

      Excluir
  9. Não vi o primeiro mais com certeza irei ver pq preciso aprender a fazer layout >3<
    FELIZ DIA DOS PAIS GALERAA!
    http://raabiscando.blogspot.com.br/

    ResponderExcluir
  10. heuehue, eu tentei, porém ficou UM LIXO segui os passos todinhos desde o primeiro até aqui, e saiu TUDO errado, não mudou nada ;s

    ResponderExcluir
    Respostas
    1. Ahh que pena, mas se você continuar tentando e seguir com atenção você consegue sim, viu? Boa sorte! *-*

      Excluir
  11. que show! adoreii as dicas
    beijos
    http://www.lynnkumoruna.com.br/

    ResponderExcluir

  12. UHUUUUUUUUUUUUUUUUL, 2ª parte *w* Tava ansiosa por isso, Nana!
    Adorei a datinha personalizada! Vou seguir os tutos *w*
    Feliz dia dos pais <3
    Kiss~
    Garotas Atrevidas - Clique e visite *-*

    ResponderExcluir
    Respostas
    1. Awn Mille, muito obrigada, fico muito feliz por você acompanhar o tutorial e gostar dele! *-*

      Excluir
  13. UUUUUUHUUUUUUUUUUUUL , Tá mais diwo que a primeira , gostei .!
    Feliz dia dos pais , <333
    Vou usar os tutos , e creditar , é claro :))

    ~Beijocas na xexa~
    cha-de-boneca.blogspot.com

    ResponderExcluir
  14. Adoro esses tutos, ajudam a fazer layouts perfects!
    Feliz dia dos pais, atrasadinho <3 hahaha
    So... nhaac com muito glacée!
    Bonjour, Une Glacée ♥ | Vem viajar comigo!

    ResponderExcluir
    Respostas
    1. Pois é Ali, espero que esteja ajudando mesmo hahaha. Muito obrigada! *-*

      Excluir
  15. Adoro seus tutoriais, estão sempre bem explicados.
    Feliz dia dos pais, atrasado.
    Beijos,
    Sorvete de Limão

    ResponderExcluir
    Respostas
    1. Awn Lah, muito obrigada, viu? *-*

      Excluir
  16. Awn Nana, estou amando o tutu, tão perfeito >.<

    Beijos ♥ || Simple Things

    ResponderExcluir
    Respostas
    1. Sério Gabs? Muito obrigada, fico super feliz. *-*

      Excluir
  17. Ammmmei o tuto ><
    http://mygoodies1.blogspot.com.br/

    ResponderExcluir
  18. Bem util pros iniciantes, o que vejo de pessoas que esquecem de personalizar comment's, data e essas coisas é demais. Outra dica é não exagerar nos efeitos.

    Prazer, Karola...

    ResponderExcluir

1 ♥ Leio e respondo todos os comentários. Sim, vou retribuir a visita, dependendo do que comentar aqui. Vir aqui só pra pedir pra eu visitar ou seguir é o que não dá, né?

2 ♥ Sem comentários ofensivos, ok? Se tem uma crítica construtiva, pode dar, mas se não for tão importante assim, guarde pra você mesmo. As vezes é bem melhor do que sair ofendendo as pessoas.

3 ♥ Muito obrigada por comentar no meu blog, e obrigada também pela sua visita. Saiba que é muito importante pra mim. Ah, não esqueça de deixar o endereço do seu blog! ^^