Fazendo um Layout - Parte I

(Gostaram? Eu que fiz :3)

Rélou pessoinhas amadas, idolatradas, salve, salve!

Tudo bom com vocês?
Me pediram pra ensinar a fazer layout pela ask (peçam lá :D) e aqui tô eu :D

Bom, eu recebi mais de 10 pedidos de layouts, e, como eu vou demorar pra entregar os últimos pedidos, eu resolvi, caso alguém desista por causa da demora, porque sei que nem todo mundo tem a sagrada paciência, eu vou passar um passo a passo, em 3 partes pra vocês fazerem o próprio lay :D

Bueno, começando!

Vou ensinar a fazer um lay para blogs de tutos, depois, talvez pra um de fanfics :D

Primeiramente eu aconselho não fazer direto no blog que você vai colocar, pois se der algo errado você vai ter que se desdobrar em duas pra consertar, então faz um novo blog aí e coloca o nome de "Layout de blá blá blá blog" e faz por ali, quando terminado, faz o download do modelo e depois aplica no blog que você vai usá-lo

Agora sim:
I. Escolha o modelo Espetacular Ltda, e o segundo estilo dele.
(CLICA PRA AMPLIAR) E muda o plano de fundo dele.

II. Agora, a primeira coisa que você tem que fazer é colocar blockquote e barra de rolagem colorida (se quiser colorida) e sublinhado, itálico e negrito em hover se você quiser que esses efeitos peguem no blog, então esse são os códigos que você deve usar:

Procure por ]]>< e cole os códigos ACIMA dessa tag

Barra de Rolagem

/*** Rolagem da Vertical da Página ***/ ::-webkit-scrollbar-thumb:vertical { background: #ff0f72; /*Cor da barrinha que se move*/ border: 1px solid #bgh; /*Coloque borda se quiser*/} /*** Rolagem da Horizontal da Página***/ ::-webkit-scrollbar-thumb:horizontal { background-color:#ff0f72; /*Cor da barrinha que se move*/ border: 1px solid #bgh; /*Coloque borda se quiser*/} /*** Parte fixa da rolagem (fundo que não se move) ***/ ::-webkit-scrollbar { width:15px; /*Largura da barra de rolagem*/ background: #000000; /*Cor da parte fixa, que fica no mundo*/ border: 1px solid #bgh; /*Coloque borda se quiser*/ }

Edite as partes em negrito e, você pode encontrar alguns blockquotes aqui (www)

E aqui um código que eu alterei umas coisinhas nele e ele vai ficar muito fofo:

b { color: #EE6AA7;
text-decoration: none;
-webkit-transition-duration: .70s;
}
b:hover {
color: #EEB422;
text-decoration: none;
-webkit-transition-duration: .70s;
}
i { color: #CD00CD ;
text-decoration: none;
-webkit-transition-duration: .70s;
}
i:hover { color: #00CDCD ;
text-decoration: none;
-webkit-transition-duration: .70s;
}
 u { color: #c7c8ca ;
text-decoration: none;
border-bottom: 1px solid #e6e2b3;
-webkit-transition-duration: .70s;
}
u:hover { color: #4682B4;
text-decoration: none;
border-bottom: 1px solid #e6e2b3;
-webkit-transition-duration: .70s;
}

Edite o que está em negrito e salve
PS: No "u:hover {" eu acrescentei a 3ª linha, ali você pode alterar "solid" por "dashed" e colocar a cor #ffffff (branca) que seu sublinhado vai ficar no estilo do que a Cams usa no blog de fics dela.

III. Deixando os links em fade e sem sublinhado. Acompanhe os códigos:

Procure por a:link { que logo em baixo vai ter isso:

a:link {

text-decoration:none;

color: $(link.color);

}

a:visited {

text-decoration:none;

color: $(link.visited.color);

}

a:hover {

text-decoration:underline;

color: $(link.hover.color);

}

Apaga e substui por esse código:

a:link {
color: #E9A1C0; /* Cor do link*/
text-decoration: none;-webkit-transition: color 0.7s ease-out;-moz-transition:
color 0.7s ease-out;transition: color 0.7s ease-out;
}
a:visited {
color: #33CCCC; /*Cor dos links visitados*/
text-decoration:none;
filter:alpha(opacity=100);
-moz-opacity: 1; -khtml-opacity: 1; opacity: 1;
}
a:hover {
color: #707070; /*Cor do link quando passa o mouse*/
text-decoration:none;
filter:alpha(opacity=100);
-moz-opacity: 1; -khtml-opacity: 1; opacity: 1;
}

Edite as partes em negrito, agora pra tirar o sublinhado de tudo procure por:

.sidebar .widget a:link {

e apague tudo até o fim de 

.sidebar .widget a:hover {

ou seja até fechar o código com

}

Agora procure por a:hover { (F3) e onde estiver text-decoration:underline; troca o underline por none e salva.

Bom, outro dia eu volto com a 2ª segunda parte, talvez nem precise da 3ª, mas se não precisar eu aviso XD, ah! quero pedir também, ´pra quem pediu layout dizer la na minha ask o e-mail e qual lay pediu (1D, Justin, Austin...) ok?

Por que senão eu não tenho como entregar sem que outras pessoas peguem o lay de vocês, eu vou entregar por aqui pelo blog mesmo, mas mas não vou disponibilizar o HTML, só a preview e o código eu mando pro e-mail do dono, ok? Copiou farinha? (kkk)

Bejauuum pra vocês <3

xXNanda