7 Modelos para sidebar

3 de out de 2013

Bom dia :)
trouxe 7 modelos para sidebar para vocês usarem e abusarem,Não foi eu quem fiz os modelos.. mais também não me lembro da onde peguei :// se for seu avisa ?!?

Pra usar, basta colar o código da que você escolher antes de ]]></b:skin>(ou -   /* Mobile )




.sidebar .widget {
background:#fff;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #eee;
}
.sidebar .h2 {background: url(http://static.tumblr.com/xxkbk0j/iXTmmreod/faixinha2.png)  no-repeat left;
font: lighter 16px Trebuchet MS;
color: #fff;
margin-top: -20px;
margin-bottom: -10px;
margin-left: -15px;
padding-left: 12px;
padding-top: 23px;
width: 260px;
height: 40px;
}

.sidebar .widget {
background:#fff;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #eee;
}
.sidebar .h2 {
background: url(http://static.tumblr.com/xxkbk0j/8QFmmrekq/faixinha3.png)  no-repeat left;
font: normal normal 16px Trebuchet MS;
color: #fff;
margin-top: -20px;
margin-bottom: -10px;
margin-left: -15px;
padding-left: 12px;
padding-top: 23px;
width: 260px;
height: 40px;
}


.sidebar .widget {
background:#fff;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #eee;
}
.sidebar .h2 {background: url(http://static.tumblr.com/xxkbk0j/T9zmm79tl/faixinha.png)  no-repeat left;
font: lighter 16px Trebuchet MS;
color: #fff;
margin-top: -20px;
margin-bottom: -10px;
margin-left: -15px;
padding-left: 12px;
padding-top: 23px;
width: 260px;
height: 40px;
}

 
.sidebar .widget {
border-bottom: 5px solid #ff74b5;
border-top: 5px solid #1cc9a6;
padding-bottom: 20px;
margin: 10px 0;
background: #fff;
padding:12px;
box-shadow: inset 0 0 15px #ebe9e9, 0 0 3px #ccc;
}
.sidebar .widget h2 {
background:#ffcddd;
color:#fff;
font-size:16px;
text-shadow:0 1px #ddd ;
margin-top:-12px;
margin-left:-13px;
margin-bottom:10px ;
padding:5px;
width:107%;
}
 Procure por: /* Widgets
Abaixo cole :

.sidebar .widget { text-align: center;

   border-bottom: 2px solid $(widget.border.bevel.color);
  padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
  margin: 30px 0;
Background: #ffffff;
box-shadow: inset 0 0 40px #eee, 0 0 6px #ccc;
border-bottom: 10px solid #aca8e8;
}
.sidebar h2 {
font-family: Century Gothic; /*Nome da fonte*/
text-transform: uppercase;
font-size: 20px; /*Tamanho da fonte*/
color: #fff; /*Cor da fonte*/
background: url(http://1.bp.blogspot.com/-rOoyD8tXrUU/UJvYTgzzaSI/AAAAAAAAhec/NkQhrt2Gy7M/s1600/74.png) no-repeat center; /*Sua faixa e posição*/
height: 16px;/*Altura da imagem*/
line-height: 6px;
text-align: center; /*Alinhamento do texto*/
margin-top: 0px;
margin-left:-36px ;
text-shadow:0 2px 2px #e07eb6;
margin-bottom:20px ;
margin-right: -4px;
padding:21px;
width:112%;
-webkit-transition-duration: .40s;
}
A fonte usada é a Short Stack, portanto, colem o seguinte código antes de </body>
<link href='http://fonts.googleapis.com/css?family=Short+Stack' rel='stylesheet' type='text/css'/>
cole antes de ]]></b:skin>

.sidebar .widget {
background:#fff;
margin-left:20px 5;
padding:2px;
padding-left: 5px;
padding-bottom: 15px;
padding-right: 5px;
padding-top: 3px;
box-shadow: 0 0 2px #ccc;
}
.sidebar h2 {
font: normal normal 12px Short Stack;
border-bottom: 4px double #ffa9d6;
color: #666;
background: url(http://i1096.photobucket.com/albums/g336/BellaTuckM/linepattern.png) repeat center;
height: 12px;
width: 260px;
text-align: center;
}

.sidebar .widget {
padding-bottom: 15px;
margin: 10px 0;
background: #fff;
border-top:2px solid #c2d7db;
border-right: 2px solid #e595b1;
border-bottom: 2px solid #c9ceb4;
border-left: 2px solid #c0a5c3;
padding: 4px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 0px 10px 10px 10px;
}
.sidebar h2 {
font: arial;
font-size: 16px;
color: #e595b1;
background: url(http://1.bp.blogspot.com/-uTDmxxuPKkY/ULExUdZrJBI/AAAAAAAAAps/AdAxvEc83EU/s1600/ribbon.png) no-repeat center;
height: 31px;
width: 243px;
text-align:center;
margin-top:-17px ;
margin-left:-21px ;
margin-bottom:0px;
padding:16px;
}

3 comentários :

Paloma Bonani disse...

Adoreii
http://sorriso4met4lico.blogspot.com.br/

❤ Ester Leme ❤ disse...

estou usando *0*, fiz uma mistura de dois layouts, ficou bem legal, hi, hi

Thamiris Lara disse...

@Ester , @ Paloma, Fico feliz que tenham gostado :)

Volte sempre meninas :*

Postar um comentário

Seu Comentários é sempre bem vindo!
Comente,opine,se expresse! Este espaço é seu!
Comentar faz parte,então por favor deixem comentários

-Todos os comentários são moderados e só ficarão disponíveis ao serem aprovados
-A área de comentários não é casa da mãe Joana,então tenha respeito.Não use palavrões,nem insultos,ofensas,agressões e baixarias;
-Não serão aceitos comentários Anônimos,comentários repetidos,e que tenham qualquer material publicitários ou de merchandising pessoal ou de benefício de terceiros
-Contatos pessoais devem ser feitos na pagina de contato.
-Não deixe links desnecessários os comentários

AVISOS:

--Blog não é Chat,respeitadas as regras ,é livre o debate dos assuntos aqui postados,Que o espaço de comentários não sirva para bate papo sobre assuntos de caráter pessoal ou estranhos ao blog
--A tentativa de clonar nomes e apelidos de outros usuários para emitir opiniões em nome de terceiros configura crime de falsidade ideológica.

Espero que tenham gostado do blog e que volte sempre!