Criando um lay estilo o meu #03

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;

}

 

@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);
}

 

@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