12 maio 2014

Como fazer um layout #1


Olá pessoal!
Eu não sei bem por onde começar,então vou ensinar a colocar as personalizações no seu blog do mesmo jeito que eu coloquei no meu.Vamos ver?

Vamos começar então

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ê quer!

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 pra cima)
Pointer (mão)

Bordas em Hover na sidebar e nas postagens igual a do blog

Bordas nas áreas das postagens:

Vá em editar HTML,Ctrl+F e procure por /*Posts,e abaixo de todo aquele pontilhado cole:

.post-outer {
background:#fff;
border-top: 2px solid #000;
border-bottom: 2px solid #000;
padding: 2px;
margin-top: 2px;
margin-bottom:20px;
box-shadow: 0 0 2px #000;
-webkit-transition-duration: .60s;
}
.post-outer:hover {
border-top: 2px solid #000;
border-bottom: 2px solid #000;
box-shadow: 0 0 1px #000;
-webkit-transition-duration: .60s;
}
Mude apenas as partes em negrito,os dois primeiros 0 são da borda normal,e os dois últimos 0 são da borda em hover.

Bordas nas áreas da sidebar:

 Vá em editar HTML,Ctrl+F e procure por /*Widgets,e abaixo de todo aquele pontilhado cole:


.sidebar .widget {
background:#fff;
border-top: 2px solid #000;
border-bottom: 2px solid #000;
padding: 5px;
margin-left: -30px;
margin-top: 0px;
margin-bottom:20px;
border-radius:0px;
box-shadow: 0 0 4px #000;
-webkit-transition-duration: .60s;
}
.sidebar .widget:hover {
border-top: 2px solid #000;
border-bottom: 2px solid #000;
box-shadow: 0 0 2px #000;
-webkit-transition-duration: .60s;
}

 Mude apenas as partes em negrito,os dois primeiros 0 são da borda normal,e os dois últimos 0 são da borda em hover.
Uma dica:Sempre visualize o seu blog antes de salvar as alterações!

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 modificar 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;
}

Espero que tenham gostado,e qualquer dúvida e só perguntar ^^
Em breve a segunda parte de como fazer um layout


4 comentários:

  1. Muito bom o tuto! Poderia fazer um tutorial de como fazer um botão ao topo?
    bjs

    ResponderExcluir
  2. Amei esse tutorial,usei todos no meu layout! E coloquei os créditos tá?
    Poderia postar hoje a parte 2 ? E postar como usar e personalizar o blockquote? e a área dos comentários?
    Necessito muito amiga hheheueheueehue
    Beijão

    http://kathmonsterhigh.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Fico feliz que tenha gostado ^.^ Tudo bem :)
      Vou ver se consigo :)
      Se não der posto amanhã,pode ser?
      Bjs ♥

      Excluir

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 ♥