domingo, 1 de setembro de 2013

Fazendo Seu Layout Parte III

Olá dreamers, como vão? Estão ansiosos pra próxima (e última) parte do tutorial? Não, eu sei hahaha. Enfim, o nosso layout está quase pronto, só faltam alguns ajustes né? Então vamos ajustar! Ah mas antes, quero agradecer a todos os comentários que vocês estão fazendo, são muitos mesmo e embora eu fique super cansada, eu também fico mega feliz em responder todos vocês, é carinho mútuo e isso me agrada. E mais uma vez, me desculpem a ausência no blog, eu estou fazendo alguns layouts que me encomendaram, então o dia fica curto pra postar aqui, porque tenho além dos lays outras coisinhas pra fazer, né? Mas vamos lá!

Hoje, vamos deixar os textos em negrito, itálico, sublinhado e riscado com cores diferentes e efeito hover. Como fazer isso? Simples! Procure por ]]></b:skin> no seu html e acima dessa área, cole o código abaixo:

b{ 
color: #COR DO TEXTO NEGRITO;}
b:hover{ 
color: #COR DO TEXTO NEGRITO COM O MOUSE EM CIMA;}
i{
color: #COR DO TEXTO ITÁLICO;}
i:hover{
color: #COR DO TEXTO ITÁLICO COM O MOUSE EM CIMA;}
u{
color: #COR DO TEXTO SUBLINHADO;
text-decoration: none;
border-bottom: dotted 1px #COR DO SUBLINHADO;}
u:hover{
color: #COR DO TEXTO SUBLINHADO COM O MOUSE EM CIMA;
text-decoration: none;
border-bottom: none;}
strike{
color: #COR DO TEXTO RISCADO;}
strike:hover{
color: #COR DO TEXTO NEGRITO COM O MOUSE EM CIMA;}

Agora, vamos organizar o "Continue Lendo". Procure novamente por ]]></b:skin> e acima cole o código abaixo:

.jump-link  {
text-align: right;
margin-top: 5px;
}
.jump-link a {
padding: 4px;
color: #COR DA FONTE;
text-shadow: 0px 1px 1px #SOMBRA DA FONTE;
background: #COR DO FUNDO;
font-family: NOME DA FONTE;
font-size: TAMANHO DA FONTEpx;
border-radius: 3px;
}

Próximo passo: modificar o post footer, é super fácil eu apenas fiz umas alterações no código original, nada demais. Procure pelo trecho:

.post-footer {
margin: .5em 0;
line-height: 1.6;
}

Agora, substitua o trecho procurado por:

.post-footer {
margin: .5em 0;
line-height: 1.6;
text-align: left;
border-bottom: 1px dotted #COR DA BORDA; /*BORDA ABAIXO, APAGUE SE NÃO QUISER*/
font-family: NOME DA FONTE;
font-size: TAMANHO DO TEXTOpx;
color: #COR DO TEXTO;
}

Por último, vamos deixar a barra de rolagem e a seleção de texto colorida, procure por ]]></b:skin> e acima cole o seguinte código:

::-moz-selection {
background:#COR DO FUNDO DA SELEÇÃO;
color:#COR DO TEXTO;
}
::selection {
background:#COR DO FUNDO DA SELEÇÃO;
color:#COR DO TEXTO;
}
::-webkit-scrollbar-thumb:vertical {
background: #COR DA BARRINHA QUE SE MOVE;
border-radius: 3px;
height:40px;
}
::-webkit-scrollbar-thumb:horizontal {
background-color:#COR DA BARRINHA QUE SE MOVE;
border-radius: 3px;
height:10px;
 }
::-webkit-scrollbar { height:10px; width:7px;
background: #COR DO FUNDO QUE NÃO SE MOVE;
}

Mega simples, né gente? Eu sei que a maioria de vocês já sabem essa parte básica, por isso deixei pro final, quis explicar na parte 1 e 2 as coisas mais "difíceis". Bom, espero que esse tutorial tenha ajudado vocês e que gostem. Sabe que as dúvidas que tiverem e eu puder ajudar, é só falar lá na ask. E se tiverem dicas de post, algo que queiram aqui, também é lá. E vou começar a preparar os posts que o pessoal da ask pediu, só não fiz ainda por pura falta de tempo mesmo, mas vou me esforçar e tentar trazer tudo pra vocês. Beijos e até logo meus amores. 

15 comentários:

  1. Muito bom o post, estou querendo fazer um novo layout (:
    ~~ candyteen-official.blogspot.com

    ResponderExcluir
  2. Perfeito, vou procurar os outros posts! :3

    ResponderExcluir
  3. Quero ver o novo lay do RD, Nana, apesar de esse estar DIWO! Tem alguma diquinha do tema? UAHEUAHEAUH *=*
    Já acabou esse quadro? Aaaaaaaaaaahhh, #bolada! Eu vou até favoritar pra fazer meus lays mais elaborados. Obrigada, Nana - diwa <3
    Mil Beijos ❥
    Garotas Atrevidas ❤ ~estou aguardando sua visita!

    ResponderExcluir
  4. Nossa adoro seu layout,deixa o meu no chinelo.Adorei as dicas!
    Beijos
    http://teenagersblogofficial.blogspot.com.br/

    ResponderExcluir
  5. Novo layout de novo? Mas por que? Eu estou in love com esse!!! Mas ok né, já imagino a perfeição que está por vir ahuehue
    Adorei o tutorial, esse estilo de layout é muito divoo :3
    Kiss
    With You

    ResponderExcluir
  6. Adoreeeeeeeeeeei esse lay :( Vai trocar já? Maas, vai ficar diwo!
    O tuto vai ajudar muita gente, a produzir layouts <33
    Beijos!
    bonjour-uneglacee.blogspot.com ♥
    parisnaestante.blogspot.com ♥

    ResponderExcluir
  7. Esse tutorial é super útil, adorei,vou procurar as outras partes, beijocas. Eloísa do Having Cherry || Aguardo sua visita

    ResponderExcluir
  8. Esse tutu é sempre útil, muito bom. Já vai trocar o lay? Hihi já sei que vai ficar lindo.

    ResponderExcluir
  9. Que legal u.u bem útil mesmo u.u salvei :3
    arazaodesorrir.blogspot.com

    ResponderExcluir
  10. QUE DIWOSIDADE DE LAYOUT É ESSA? AAHHHHHHHHHHHHHHHHHHHHHHHHHHHA Vou-te matar Nana u-u' Estou com inveja, vou-me embora -q
    *O* Esses tuoriais são óptimos Nana, parabéns *3*

    Kiss ♥

    ♥kIm'chi, kIm'chi

    ResponderExcluir
  11. Muito legal, com certeza ajudou muitas pessoas.
    Beijocas, Lili ;3
    Clique aqui, e vá para o blog / Princesa Teen!
    Clique aqui, e vá para o canal / Com videos de tour pelo quarto e penteadeira :)

    ResponderExcluir
  12. Quero ver o novo layout viu , Senhorita . Nana ! <33
    Estou ansiosa para ver o novo Layout , e amei os tutoriais ! Eu nem sei onde arranjei paciência para praticar e modificar essas belezinhas *OO*

    ~Beijocas na xexa~

    ResponderExcluir
  13. Adorei os tutoriais,são muito legais e ficam lindos :3
    beijos!
    quemprecisadetvparaverbeyonce.blogspot.com.br

    ResponderExcluir
  14. Estou amando esse tuto! Bem, o meu dia está cirto, mas por causa de tarefas e coisas de escola. Também gosto muito de retribuir comentários, é legal.

    Com carinho, Ammy | SEMPRE FUI ESTRANHA

    ResponderExcluir
  15. yooo amei seu blog, faz uma visitinha lá no meu ??please
    http://galaxykawaiii.blogspot.com.br/

    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! ^^