12/05/2012

BigTutorial: Como criar um Layout Super Cute!





Hooy lindas!
 Pergunta: Eu sou a unica que está postando?
Trouxe um otimo tutorial! Ele mostra como criar um layout completo super fofo! Do jeito certo!
Vai mostrar como fazer tudo! Dicas de HTML, Banner, barra lateral (gadgets), e tudo mais!
Vamos começar?



Agora, para começar, coloque no 3 modelo travel:

Em seguida, mude o BG! Assim:

Depois, as fontes, vai um print mix, entenda:
Ajuste as larguras:
Está pronto! Agora Salve:

Vá em modelo>Editar HTML> Prosseguir
Agora, ai vai umas dicas de HTML:

Sidebar Colorida

Editar HTML- Agora dá um CTRL+F e procura por:

Se tiver Barra Lateral Direita:

.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {

Apareceu assim:

 Se Tiver Barra Lateral Esquerda:

.main-inner .fauxcolumn-left-outer .fauxcolumn-inner { 

Apareceu Assim:

Apague esses codigos em verde, e substitua pelo codigo da sua cor[para fazer sua cor, clica aqui] e para a cor pronta [clica aqui].

Salve, e pronto!


Arredondar as bordas na sidebar:
  • Para o Modelo Viagem apenas!
.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {      (Coluna direita)
ou
.main-inner .fauxcolumn-left-outer .fauxcolumn-inner {        (Coluna esquerda)

Cole acima desse codigo, este aqui:
-moz-border-radius: 10px; /* Para Firefox */
-webkit-border-radius: 10px; /*Para Safari e Chrome */
border-radius: 10px; /* Para Opera 10.5+*/

Barra de rolagem colorida:
Aperte Ctrl+F, procure por ]]></b:skin> e cole antes esse código:

/*** 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*/
height:50px;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}
/*** 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*/
height:10px;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
 }
/*** Parte fixa da rolagem (fundo que não se move) ***/
::-webkit-scrollbar {
height:10px;
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*/
}

É só alterar as cores conforme indicado, visualizar, e se estiver tudo certo, salve. Se não quiser cantos arredondados, apague as partes em verde.


-> créditos <-
Efeito nas imagens:

Aperte Ctrl+F e procurar por ]]></b:skin>
Cole logo acima esse código:
border { 
-moz-opacity:0.70; opacity:0.70;
-webkit-transition-duration:2s;
background-color:#e7b3c2 /*Cor de fundo, aparece enquanto a imagem está carregando*/; 
border:2px solid #c8debf; /* Cor e estilo da borda*/ } 
.border:hover  { 
filter:alpha(opacity=100); 
-moz-opacity:1.0; 
opacity:1.0;
background-color:#e7b3c2; /*Cor de fundo quando passa o mouse em cima*/
border: 2px solid #f2ada5; /* Cor e estilo da borda quando passa o mouse em cima*/ 
}

Pronto, acabou a parte dificil, agora é só mudar os gadgets, Recomendo os gadgets:

  • Seguidores (nome: follow)
  • Marcadores (nome: tags)
  • Status (nome: Status)
  • UM pouco do seu perfil (nome: The Girl, Eu sou)
  • Caixa de pesquisa personalizada { tutorial aqui }
  • Afiliados
Bem, foi isso, espero que tenham gostado! Deu muuuito trabalho, 

   Altamente, restritivamente, proibido COPIAR, com ou sem créditos!



Um comentário: