Criando um lay estilo o meu #03

4 de julho de 2013


Hey my babys, como vocês estão? espero que estejam ótimos! Bem minhas férias estão acabando na verdade essa é ultima semana, eu não pude fazer praticamente nada *cry* gastei tempo atualizando minha fanfics e descansando um pouco, mas estou aqui \oo/.

Estava um pouco sem tempo para posts, ai lembrei desse tuto haha que várias pessoas pediram continuação e eu voltei com ele e ainda vai ter mais uma parte. 

Parte 1 - Parte 2 

Bom, na parte anterior eu ensinei a por bordinhas na sidebar, hoje vou trazer modelos de titulos para sidebar, leia mais, e deixando o titulo da postagem em hover, na minha humilde opinião são esses pequenos detalhes que deixam o layout lindo. 

Let's go!

 Vamos começar com alguns modelos de leia mais. Primeiro escolha um dos modelos abaixo, e cole o HTML dele acima de  ]></b:skin>


Vá no seu HTML >> clique em alguma parte dele>> e tecle ctrl + f vai aparecer uma caixinha de pesquisa dentro do código assim


Modelos


.jump-link {
text-align: right; margin-top: 3px; } .jump-link a {
-moz-box-shadow:inset -1px 1px 1px 0px #ffa3d3;
 -webkit-box-shadow:inset -1px 1px 1px 0px #ffa3d3;
 box-shadow:inset -1px 1px 1px 0px #ffa3d3;
 background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f590b8), color-stop(1, #e062aa) );
 background:-moz-linear-gradient( center top, #f590b8 5%, #e062aa 100% );
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f590b8', endColorstr='#e062aa');
 background-color:#f590b8;
 border:1px solid #de62aa;
 display:inline-block;
 color:#ffffff;
 font-family:arial;
 font-size:14px;
 font-weight:bold;
 padding:6px 13px;
 text-decoration:none;
 text-shadow:1px 1px 0px #bf6d7a;
}
.jump-link a:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #e062aa), color-stop(1, #f590b8) );
 background:-moz-linear-gradient( center top, #e062aa 5%, #f590b8 100% );
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e062aa', endColorstr='#f590b8');
 background-color:#e062aa; }
 

.jump-link  {
text-align: right;
margin-top: 3px;
}
.jump-link a {
-moz-box-shadow: 0px 10px 14px -7px #276873;
        -webkit-box-shadow: 0px 10px 14px -7px #276873;
        box-shadow: 0px 10px 14px -7px #276873;    
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #599bb3), color-stop(1, #408c99));
        background:-moz-linear-gradient(top, #599bb3 5%, #408c99 100%);
        background:-webkit-linear-gradient(top, #599bb3 5%, #408c99 100%);
        background:-o-linear-gradient(top, #599bb3 5%, #408c99 100%);
        background:-ms-linear-gradient(top, #599bb3 5%, #408c99 100%);
        background:linear-gradient(to bottom, #599bb3 5%, #408c99 100%);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#599bb3', endColorstr='#408c99',GradientType=0);    
        background-color:#599bb3;
        -moz-border-radius:6px;
        -webkit-border-radius:6px;
        border-radius:6px;  
        display:inline-block;
        color:#ffffff;
        font-family:arial;
        font-size:13px;
        font-weight:bold;
        padding:9px 14px;
        text-decoration:none;    
        text-shadow:0px 1px 0px #3d768a;
}
 
Uso esse u-u

.jump-link  {
text-align: right;
margin-top: 10px;
margin-bottom: 5px;
}
.jump-link a {
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
 -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
 box-shadow:inset 0px 1px 0px 0px #ffffff;

 background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );

 background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );

 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');

 background-color:#ededed;

 -moz-border-radius:10px;

 -webkit-border-radius:10px;

 border-radius:10px;

 border:2px solid #dcdcdc;

 display:inline-block;

 color:#f5679b;

 font-family:arial;

 font-size:13px;

 font-weight:bold;

 padding:6px 10px;

 text-decoration:none;

 text-shadow:1px 1px 0px #ffffff;

}
.jump-link a:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
 background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');

 background-color:#dfdfdf;

}

 http://1.bp.blogspot.com/-a-zs9FTed80/UPyJ-Ln6EfI/AAAAAAAAsgk/81sh9j-ScOc/s1600/52.pnghttp://1.bp.blogspot.com/-a-zs9FTed80/UPyJ-Ln6EfI/AAAAAAAAsgk/81sh9j-ScOc/s1600/52.png

@font-face { font-family: "silkscreen"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); }
.jump-link  {
text-align: right;
margin-top: 5px;
}
.jump-link a {
font-family: silkscreen;
font-size: 08px;
color: #ffffff;
padding: 10px 15px;
background: -moz-linear-gradient(
top,
#0f0f0f 0%,
#1f1f1f 50%,
#000000);
background: -webkit-gradient(
linear, left top, left bottom,
from(#0f0f0f),
color-stop(0.50, #1f1f1f),
to(#000000));
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border: 1px solid #000000;
-moz-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(255,255,255,0.6);
-webkit-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(255,255,255,0.6);
box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(255,255,255,0.6);
text-shadow:
0px -1px 0px rgba(000,000,000,1),
0px 1px 0px rgba(255,255,255,0.2);
}

 http://1.bp.blogspot.com/-28RmhLAqTiM/UPyLdGJArpI/AAAAAAAAsiM/4cBZ1ZTIXwA/s1600/53.pnghttp://1.bp.blogspot.com/-28RmhLAqTiM/UPyLdGJArpI/AAAAAAAAsiM/4cBZ1ZTIXwA/s1600/53.png
@font-face { font-family: "silkscreen"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); }
.jump-link  {
text-align: right;
margin-top: 5px;
}
.jump-link a {
font-family: silkscreen;
font-size: 08px;
color: #ffffff;
padding: 7px 7px;
background: -moz-linear-gradient(
top,
#ccc18d 0%,
#c7a173);
background: -webkit-gradient(
linear, left top, left bottom,
from(#ccc18d),
to(#c7a173));
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
border: 1px solid #8f8a51;
-moz-box-shadow:
0px 1px 1px rgba(56,51,26,0.9),
inset 0px 0px 2px rgba(255,255,255,0.7);
-webkit-box-shadow:
0px 1px 1px rgba(56,51,26,0.9),
inset 0px 0px 2px rgba(255,255,255,0.7);
box-shadow:
0px 1px 1px rgba(56,51,26,0.9),
inset 0px 0px 2px rgba(255,255,255,0.7);
text-shadow:
0px -1px 0px rgba(000,000,000,0.4),
0px 1px 0px rgba(255,255,255,0.3);
}

Modelos para a sidebar

Se quiser faixinhas numeradas como titulo siga esse tutorial *mais trabalhoso*

Para usar um dos modelos abaixo basta ir no HTML (da mesma forma que ensinei no inicio do post) e procurar por .sidebar h2 { ao encontrar apague todo o código que estiver entre .sidebar h2 {
 até o fechamento das chaves } e colar um dos modelos abaixo no lugar



.sidebar h2 {
font-family: Tahoma;
text-transform: uppercase;
letter-spacing: 3px;
color: #ccac90;
border-bottom: 1px dotted #c8bcb2;
font-size: 11px;
text-align: center;
word-spacing:.4em;
-webkit-transition-duration: .50s;
}
.sidebar h2:hover {
letter-spacing: 6px;
color: #b39478;
   -webkit-transition-duration: .50s;
}
 

.sidebar h2 {
font-family: Tahoma;
font-size: 14px;
color: #aeaeae;
text-transform: uppercase;
text-shadow:0 1px #dbdbdb;
background-color: #f4f4f4;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
padding: 5px;
margin: 2px;
border-bottom: solid 1px #e3e1e2;
text-align: center;
-webkit-transition-duration: .50s;
}
.sidebar h2:hover {
color: #d9d8d9;
-webkit-transition-duration: .50s;
}
 
@font-face {font-family: "beat"; src: url('http://static.tumblr.com/0xqvkot/qoCmj9gu6/altehaasgroteskregular.ttf');}
.sidebar h2 {
font-family: beat;
text-transform: uppercase;
letter-spacing: 3px;
color: #f38a97;
text-shadow:0 1px #cccccc;
border-bottom: 1px solid #e5e5e5;
font-size: 13px;
text-align: center;
word-spacing:.4em;
-webkit-transition-duration: .50s;
}
.sidebar h2:hover {
letter-spacing: 1px;
color: #d0d0d0;
-webkit-transition-duration: .50s;
}
Deixando o titulo do post em hover (muda de cor quando passa o mouse)

Procure por h3.post-title {

Vai estar mais ou menos assim 

h3.post-title {

margin-top: 20px;

}
Então você apaga isso e coloca esse HTML no lugar 

h3.post-title {
margin-top: 20px;
text-align: center;}h3.post-title a {
color: #ed9696;/***Cor sem hover***\
font-size: 24px;
text-shadow: 0px 1px 1px #c5c5c5;
-webkit-transition: color 0.4s ease-in;
-moz-transition: color 0.1s ease-in;
transition: color 0.4s ease-in;}h3.post-title a:hover {
text-decoration: none;
color: #9fccc6;/***Cor a  hover***\}
Edite onde se pede, e fim ><
Para editar as cores recomendo essa tabela

Esse post ficou enorme -' bom ainda vamos ter mais uma parte >< bye, bye até o próximo post.

Créditos KW

23 comentários:

  1. Haha, super útil >.<'

    Beijos Building Stars ♥ || Retribui comentário?

    ResponderExcluir
    Respostas
    1. Obs, tem post novo lá no blog, visita? *-*

      Excluir
    2. Bem útil mesmo >< retribuirei sim

      Excluir
  2. Muito útil só que eu tenho preguiçaa, haha, beijoss :)
    http://oblogdamandi.blogspot.com.br

    ResponderExcluir
    Respostas
    1. HAHA Eu também tenho preguiça ás vezes

      Excluir
  3. Este comentário foi removido pelo autor.

    ResponderExcluir
  4. Super útil o Tutorial ameei'#


    Flor conhecir seu blog através de outros blogs, e acabei amando aqui, tudoo perfeito e super original, lóógico que estou seguindo aqui, te convido a visitar meu blog e seguir tbm'# ^^
    Um supeer Beijo e fica com Deus

    http://amor-teen.blogspot.com

    ResponderExcluir
    Respostas
    1. Ah obrigada querida, e obrigada mais uma vez pelos elogios *-* irei retribuir


      Excluir
  5. Legal e útil! *-*
    Ótimos tutos!
    Beijos!
    Bonjour, Une Glacée ♥

    ResponderExcluir
  6. Todos os modelos, super divos *__* e super úteis >3< amei <3

    Beijos :3 photoscapeevc.blogspot.com

    ResponderExcluir
    Respostas
    1. São divos mesmo >< obrigada querida

      Excluir
  7. Que lindos *o*
    Eu tava procurando modelos faz um tempãaaao e não achava :c

    Beijos , Senhorita Imperfeita

    ResponderExcluir
    Respostas
    1. Obrigada more, isso sempre acontece comigo, procuro e dificilmente acho algum que me agrade

      Excluir
  8. AMEI, sério *-*
    Se você tivesse feito esse post antes, com certeza esses tutoriais estariam no layout do meu blog.
    Um dos 3 de sidebar acho que tá HAUSHSUAHSU'

    Um beijo, fofuramentos.blogspot.com

    ResponderExcluir
    Respostas
    1. haha eu estava sem tempo ;/ e ainda estou um pouco XD


      Excluir
  9. Anônimo18:08

    Oii tudo bem? Adorei o post, pode fazer uma visitinha lá? bjos
    http://birthdaykawaii.blogspot.com/

    ResponderExcluir
    Respostas
    1. Que bom que gostou, passo lá sim ^^

      Excluir
  10. esses leia mais são tão fofos adorei o/ e adoro o modelo desse seu layout, o/


    acervo-de-livros.blogspot.com

    ResponderExcluir
    Respostas
    1. São lindos mesmo oo/ awn obrigada diva

      Excluir
  11. Adorei os modelos para sidebar, muito útil esse tutorial.

    six--seconds.blogspot.com

    ResponderExcluir

Fã page | Twitter | Instagram

Críticas construtivas são sempre bem vindas.
Deixe o link do seu blog no final do comentário e retribuiremos a visita
Aceitamos TAG's, se não a respondermos, provavelmente nós já devemos ter respondido anteriormente por outra indicação.
Lembre-se, tudo aqui é feito para você, então fique a vontade para pesquisar,ler,comentar e pedir postagens.

© BELEZA NERD 2013 - 2018. Todos os direitos reservados.
Layout e codificação: GLEICY HANER - DESIGNS E FOTOGRAFIA .
Tecnologia do Blogger.
imagem-logo