Modelo de sidebar.

 Por: Lalalalala    10:11     2 Comentarios

Opa vamos começar o dia, desejando muuuuuuuuuuuita felicidade para Lauren Jaurequi, que faz parte da girl band 5H, hoje ela completa 18 aninhos, que lindaa #HappyBDayLaurenFromBrazil  .

Bom, agora vamos ao que interessa... hoje eu trouxe vários modelos para sidebar para vocês... alguns modelos vem do blog Crazy html, One Dí Things e do Lovely Girl. 

Modelo 1 

Procure por ]]></b:skin>, e acima dessa tag cole :

@font-face {font-family: "ayear"; src: url('http://static.tumblr.com/dlelfro/OsXmnntw9/ayearwithoutrain.ttf');}

Em seguida procure por .widget{ 

apague tudo que tiver e cole 

.sidebar .widget {

background: #fff;

padding: 10px;

border: 1px solid #FFE9D4; /*cor da borda da caixinha */

font-family: Trebuchet MS; /* fonte do widget */

text-align: center;
}

Depois procure por .h2{ 

novamente apague tudo que tiver e substitua por : 

h2 {background: #FFE9D4; /* cor de fundo do título do widget */ font-family: ayear;font-size: 16px;font-weight: normal;color: #c87f4b; /* cor da fonte do título do widget */line-height: 12px;padding-top: 8px;margin-bottom: 4px;-webkit-box-shadow: inset 0px 0px 6px #FDC69F; /* sombra interna do título do widget */-moz-box-shadow: inset 0px 0px 6px #FDC69F;-o-box-shadow: inset 0px 0px 6px #FDC69F;}

Modelo 2 

Procure por .sidebar .widget { 

e substitua o código por :

@font-face { font-family: "Commersial"; src: url('http://static.tumblr.com/vhsz9rv/fQemru8eq/commersial_script.ttf');}
.sidebar .widget {
background: #fff;
padding:10px;
border: 1px solid #cbe5e9;
-webkit-box-shadow: inset 0px 0px 0px 5px #dfeff1;
-moz-box-shadow: inset 0px 0px 0px 5px #dfeff1;
-ms-box-shadow: inset 0px 0px 0px 5px #dfeff1;
outline-offset: -6px;
outline: 1px solid #cbe5e9;
text-align: justify;
font-family: Calibri;
font-size: 11px;
color: #ccc;
}
.sidebar h2 {
font-family: "Commersial";
letter-spacing: 3px;
color: #b6ced1;
font-weight: lighter;
font-size: 21px;
text-align: center;
word-spacing:.4em;
margin-bottom: -5px;
-webkit-transition-duration: .50s;
}

Modelo 3 

@font-face {font-family: "code"; src: url('http://static.tumblr.com/dlelfro/fNTmnnzwy/code_bold.otf');}
.sidebar .widget {
background: #fff;
box-shadow: 1px 1px 0 #e0e0e0;
padding-top: 5px;
padding-left: 9px;
padding-bottom: 9px;
padding-right:9px;
margin-bottom: -15px;
outline: dashed 1px #BEBEBE; outline-offset: -5px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 2px;
}
.sidebar .widget h2{  
background: url(http://3.bp.blogspot.com/-juB0bjmNNvY/UbpmUUO-LhI/AAAAAAAABLA/wtcJ399lmFE/s1600/1701.png)  no-repeat left;  
margin-top:-2px;  
margin-left:-20px;  
margin-bottom:0px;  
padding:15px;  
width:150%;  
overflow:hidden;  
font-size: 20px;
color: #fff;
font-family: 'code';
font-style: bold;
font-weight: normal;
text-shadow: 1px 1px 0px #af6e85;
}