Modelos para leia mais

Olá meus cheiros tudo bem? Tudo certinho? Cansada, esta é minha palavra de hoje, estou muito cansada e super esgotada porém muito feliz por ter passado em todas as matérias que necessitava. Parece que eu voltei a época da escola sabe? Fiquei a semana inteira tensa e com muito medo de ficar com dependência em alguma matéria, fiz a prova de matemática e tirei 9, na de TI raspei tirando 6,9, para quem não sabe TI não é nada fácil para quem estuda na área, eu gosto muito e sempre uso na prática pois para quem tem uma noção de mexer em html e algorítimos sabe do que eu estou falando, mas na teoria sistemas de informação acaba sendo chata, complexa e bem vasta, resumindo: cansativo!

Mas mudando de assunto, o que planejam para o fim de ano? E o que querem fazer ano que vem? Eu tenho tantos planos, e um deles é daqui uns 2 ou 3 anos ir morar fora do Brasil, mais provavelmente em algum lugar dos EUA. Se é loucura? Pode ser, mas estamos querendo fazer não é de agora mas sim de longa data, eu irei fazer um post em meu blog pessoal falando sobre isso, sobre mudar de país e como se adaptar em outro ou ao menos tentar né? Mudando de assunto novamente, uma leitora me pediu modelos para leia mais e ela queria aqueles larguinhos que ocupam a tela toda sabe? Eu trouxe três modelinhos fofos que já usei em layouts do blog.

Vá até o seu modelo e clique em editar html, dentro procure por ]]skin; e acima dele cole o código do modelo que desejar, ajuste conforme seu gosto e podem editar a vontade, cores, fontes e tamanho, é só prestar bem atenção.

1 Modelo

Sem hover

 Com hover

 Código:

.jump-link {
background-color: #F1E2F5;
padding:3px;
margin-top: 15px;
margin-bottom:8px;
text-align:center;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
-webkit-transition-duration: .80s;
}
.jump-link:hover {
background-color:#CEC0D1;
text-align:center;
-webkit-transition-duration: .80s;
}
.jump-link a{
font: 12px courier new;
color: #B1A1B5;
font-weight: 300;
letter-spacing: 1px;
text-transform: uppercase;
line-height: 12px;
text-align:center;
text-shadow: 1px 1px 1px #fff;
-webkit-transition-duration: .80s;
}
.jump-link a:hover {
font: 12px courier new;
color: #fff;
font-weight: 300;
letter-spacing: 1px;
text-transform: uppercase;
line-height: 12px;
text-align:center;
text-shadow: 1px 1px 1px #B1A1B5;
-webkit-transition-duration: .80s;
}

2 Modelo

Sem hover

Com hover

Código:

.jump-link {
background:#F8E7E7;
border-top: solid 1px #F2DCDC;
border-bottom: solid 1px #F2DCDC;
padding:7px 7px 7px 7px;
margin-right:-10px;
margin-left:-10px;
margin-top: 5px;
margin-bottom:10px;
text-align:center;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
-webkit-transition-duration: .80s;
}
.jump-link:hover {
background:#F6E1E1;
text-align:center;
-webkit-transition-duration: .80s;
}
.jump-link a{
font-family:georgia;
font-size:14px;
font-style:italic;
font-weight:normal;
color:#E8B9B9;
text-shadow: 1px 1px 1px #fff;
letter-spacing: 0px;
line-height: 12px;
-webkit-transition-duration: .80s;
}
.jump-link a:hover {
color:#E7AFAF;
text-shadow: 1px 1px 1px #fff;
-webkit-transition-duration: .80s;
}

3 Modelo 

Sem hover

Com hover

Código:

.jump-link {
background:#F8F8F8;
border-left:#CF9CA3 1px solid;
padding:5px;
margin-top: 8px;
margin-bottom:8px;
text-align:left;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-transition-duration: .80s;
}
.jump-link:hover {
background:#F8F8F8;
border-left:#DADC9E 1px solid;
text-align:left;
-webkit-transition-duration: .80s;
}
.jump-link a{
background-repeat: no-repeat;
background-image: url(http://static.tumblr.com/koam7dd/0ACnnqoqn/gif158.gif);
background-position: right;
padding-right: 20px;
font-family:baskerville;
font-size: 17px;
font-style: italic;
font-weight: 500;
color: #CACC8B;
text-align: left;
text-decoration: none;
text-transform:lowercase;
letter-spacing: 0px;
text-shadow: 1px 1px 1px #FFF;
-webkit-transition-duration: .80s;
}
.jump-link a:hover {
background-repeat: no-repeat;
background-image: url(http://static.tumblr.com/koam7dd/JTgnnqowr/gif160.gif);
background-position: right;
padding-right: 300px;
font-family:baskerville;
font-size: 17px;
font-style: italic;
font-weight: 500;
color: #CF9CA3;
text-align: center;
text-decoration: none;
text-transform:lowercase;
letter-spacing: 0px;
text-shadow: 1px 1px 1px #FFF;
-webkit-transition-duration: .80s;
}