30 julho 2014

Como fazer um layout #2


Olá!
Lembram da postagem que eu fiz ensinando vocês como fazer um layout (aqui)?Bem,já faz um bom tempo que fiz essa postagem,então,hoje eu decidi fazer a continuação dela!Vou ensinar a vocês a colocar 
Seleção Colorida,Links sem Sublinhado e com Efeito Fade,Barra de Rolagem Personalizada,Negrito,Itálico e Sublinhado Personalizados e Poste Footer Personalizado em seus blogs!Vamos ver?

Seleção colorida

Primeiro vá no seu blog,depois em  modelo e em Editar HTML.
Agora,aperte Ctrl+F e procure por

]]></b:skin>
Depois de encontrar a tag,copie e cole o código abaixo antes da tag procurada:

/*--- Selecao Colorida ---*/::-moz-selection {background:#EEEEEE; /*Cor do fundo*/color:#333333; /*Cor da fonte*/}::selection {background:#EEEEEE;/*Cor do fundo*/color:#333333; /*Cor da fonte*/}
Você pode substituir as partes em negrito pelo código das cores que você quer para deixar a seu gosto.
>eu recomendo essa Tabela de Cores<

Links sem sublinhado e com efeito fade

Primeiro vá em no seu blog,depois em Modelo>Editar HTML e procure por a:link {
Abaixo da tag procurada,vai aparecer este código:

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);
}
Apague todo ele e no lugar dele cole 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;
}
 Se você quiser modififar as cores e só mudar as partes em negrito ^^
Mas vale lembrar que esse efeito não vai ser aplicado na sidebar,mas se quiser que os links da sidebar
também fiquem com o mesmo efeito,e só procurar pelo código abaixo e apagar todo ele.

.sidebar .widget a:link {
color: $(widget.link.color);
text-decoration: none;
}
.sidebar .widget a:visited {
color: $(widget.link.visited.color);
}
.sidebar .widget a:hover {
color: $(widget.link.color);
text-decoration: underline;
}

 

Negrito,Itálico e Sublinhado personalizados

Primeiro vá no seu blog,e depois no seu HTML e procure por ]]></b:skin>
Depois de acha-lo,adicione o código abaixo acima dele:

b {color: #F08080; text-decoration: none;} /*Negrito */    b:hover { cursor: help; color: #FF6347;}
    i {color: #FF7F50; text-decoration: none;} /* Itálico */    i:hover { cursor:  help; color: #FF6347;}
    u {color: #F08080; text-decoration: none;    border-bottom: 1px dashed #FF6347;} /* Sublinhado */    u:hover {cursor:  help ; color: #FF6347;    border-bottom: dashed 1px #FF6347; text-decoration: none; }
Pronto,agora e só editar oque está em negrito de acordo com a cor que você que!

Estilos de setas:

Crosshair (cruz) 
Default (seta)
E-resize (seta que aponta à direita)
Help (ponto de interrogação)
Move (cruz com setas nas extremidades)
N-resize (seta que aponta para cima)
Pointer (mão)

Barra de rolagem personalizada

Vá em Modelo>Editar HTML>Aperte CTRL+F e procure por ]]></b:skin>.
Depois e só colar o código abaixo em cima ta tag procurada:
*{
scrollbar-face-color:#f677cc;
scrollbar-highlight-color:#f677cc;
scrollbar-3dlight-color:#e177f6;
scrollbar-darkshadow-color:#e177f6;
scrollbar-shadow-color:#f677cc;
scrollbar-arrow-color:#e177f6;
scrollbar-track-color:#e177f6;
}

::-webkit-scrollbar {width: 12px; height: 4px; background: #e177f6; }
::-webkit-scrollbar-thumb { background: #f677cc; }
Oque está em Negrito e a cor da barra de rolagem (a parte menor que se mexe),
e a em Itálico e a cor do fundo da barra de rolagem (a parte maior que não se mexe)
E só substituir as cores e visualizar.

Personalizar o Post Footer do blog

O Post Footer do seu blog ira ficar assim
 (mas no modelo que você ira aplicar em seu blog as cores estarão diferentes)
Agora,vamos ao tutorial:
Vá no seu blog,em seguida em Modelo>Editar HTML>Aperte Ctrl+F e procure por .post-footer {
e substitua o trecho do .post-footer { até a próxima chave pelo seguinte código:

.post-footer { background: #FFF0F5;/* Cor de fundo */ border: 2px solid #FFE4E1;/* Cor e tamanho da borda */ font-family: 'Muli', sans-serif; /* Fonte */ font-size: 13px; /* Tamanho da fonte */ margin-top:35px; padding:5px 8px; text-transform:none; }
Mude as cores e pronto!

Espero que tenham gostado dos tutoriais,e qualquer dúvida e só perguntar! ♥
Todos os tutoriais foram retirados do meu outro blog,o World Sweet Cherry.

6 comentários:

Oi,fico feliz que queira comentar!Mais antes leia as regras:
-Seja educado (a).
-Não xingue ou ofenda ninguém.
-Não fale palavrões.
-Se for criticar,critique com educação.
-Aceito Tags e Selos.
-Aceito comentários do tipo:"Seguindo,segue de volta?" se você estiver mesmo seguindo o blog.
Obrigada por comentar ♥