Modelos para Sidebar


Estou aqui de novo,tudo bem novamente ? Acho que me empolguei demais,mais tudo bem,eu acho que esse vai ser o número de postagens por dia :3 ! Eu ainda irei acrescentar mais duas postadoras,não sei quem vai ser a outra mais eu já tenho a total certeza de quem será  a outra.
Enfim...Eu só tenho que me preocupar em encher esse parágrafo inteiro com besteiras ><. Gente eu to muuito viciada em GTA,alguém me salva,eu e meu irmão parecemos duas crianças loucas jogando vídeo game rçrç !
Bom eu não irei falar demais *vish,ótima desculpa ;/;*,eu quero ir logo para a parte da postagem só irei encher mais um pouco e mais um pouco...

Com meu tempo livre eu resolvi fazer alguns modelos para sidebar,eu amo mexer em HTML e aproveitei o tempo que estava sobrando para fazer um modelinho para vocês c;




Eu coloquei um psd nessa preview bostaa ! É que toda vez que eu carrego a imagem fica sem qualidade,mais pulando essa parte vamos ao tutorial ><'
Vá em Editar HTML e procure por /*Widgets
Se você nunca mexeu nessa parte obviamente,só vai estar o padding,o background e mais alguma coisa T0T' então apague essa parte e substitua pelo código a seguir ;

.sidebar .widget {
background: #fff;
padding: 10px;
box-shadow: 1px 1px 0px #dbdfd9;
border-radius: 4px;
}
Agora para modificar a fonte procure por .footer-inner.widget,isso na mesma tag,depois apague de .footer...até o último } e então você irá substituir pelo próximo código ;

@font-face { font-family: "silkscreen"; src: url('http://static.tumblr.com/1kdckk4/9yjlolf0w/slkscr.ttf'); }
.footer-inner .widget,
.sidebar .widget {
text-align: center;
font-family: silkscreen;
font-size: 8px;
color: #999999;
}
Agora a última parte procure por ]]></b:skin> e acima dessa tag coloque o código abaixo;
.sidebar h2 {
margin-top: 3px;
border-bottom: 1px  solid #eee;
text-align: left;
letter-spacing -1px;
height: 15px;
font-size: 17px;
font-family: cambria;
color: #f19591;
text-shadow: 3px #ccc;
text-transform: lowercase;
}
.sidebar h2:hover {
text-align: right;
color: #f2d5af;
-webkit-transition-duration: .80s;
}
Espero que tenham gostado do modelo e se usarem creditem <3

Nenhum comentário:

Postar um comentário