Modelos para sidebar

Por || Tags: , ||


Olá pessoal hoje trouxe alguns modelos para sidebar. Como não me lembro de onde peguei tutoriais de alguns desses modelos então desculpe se não colocar os créditos.
Mas antes queria explicar algumas coisas sobre o layout:
Os afiliados foram colocados no cabeçalho, no Welcome tem o menu, no Social Network está as redes sociais do blog, em Change Background você pode mudar os backgrounds do blog, em Popular Tags ficam as principais tags e em Créditos estão os blogs que ajudaram a fazer esse layout, o link-me do blog, a ask, as redes sociais e o banner da loja parceira.
Tudo explicado então vamos ao nosso tutorial.



Então aqui estão os modelos.
Abaixo de /* Headings substitua tudo com os códigos do modelo para sidebar que você escolher.
1º Modelo

.sidebar h2 {
font-family: Century Gothic; /*Tipo de fonte*/
font-size: 16px; /*Tamanho da fonte*/
color: #000000; /*Cor da fonte*/
border-bottom: 2px solid #000; /*Borda de baixo, apague se não quiser*/
background: #FF0000; /*Cor de fundo*/
text-align: center; /*Alinhamento do texto*/
}

Para esse modelo de sidebar aparecer, você vai colar o seguinte código abaixo de 
/* Widgets
.sidebar .widget {
background: #fff;
  border-bottom: 2px solid $(widget.border.bevel.color);
  padding-bottom: 10px;
  margin: 10px 0;
}

2º Modelo
Eu já fiz o tutorial desse modelo, mas resolvi fazer de novo. 


.sidebar h2 {
margin: -11px -11px .65em -11px; /* margem */
font-family: Lobster; /* tipo de fonte do titulo */
line-height: 1.8em; /* altura da linha */
text-transform: capitalize; /* transformacão do texto */
color: #FFFFFF; /* cor do título */
background: #c2a4fa; /* cor de fundo dos títulos */
font-size: 20px; /*tamanho da fonte */
text-align: center; /* alinhamento centralizado do texto */
font-weight: bold; /* deixa o título em negrito */
border-radius: 10px 10px 0 0; /* deixa apenas as bordas acima arredondadas */
word-spacing:.2em; /* espaço entre palavras do título */
}
Para esse modelo de sidebar aparecer, você vai colar o seguinte código abaixo de 
/* Widgets
.sidebar .widget {
  margin: 0px 0px 15px 0px; /* margem entre uma caixa e outra */
  background: #FFFFFF; /* cor de fundo das caixas */
  padding:10px; /* espaço entre o texto e as margens */
  border-radius: 10px; /* arredondamento dos cantos das caixas */
  text-align: justify; /* alinhamento justificado do texto */
  -webkit-box-shadow: 0 0 1em #c9c9c9; /* sombra nas caixas, apague esse trecho se não quiser sombra */
}

3º Modelo 


.sidebar .widget {
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
padding-bottom: 12px;
margin: 0px 0;
Background: #ffffff;
margin-top:41px;
padding:11px;
box-shadow: 1px 2px 3px 1px #e1dddd;
}
.sidebar h2 {
text-align:center;
color: #FFFFFF;
background-color: #ee91af;
-moz-box-shadow: inset 0 0 10px #d85882;
-webkit-box-shadow: inset 0 0 10px #d85882;
box-shadow: inset 0 0 10px #d85882;
padding:2px;
-webkit-border-top-left-radius: 4px;
-webkit-border-top-right-radius: 4px;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
display:inline;
float:right;
margin-top:-38px;
}

4º Modelo

.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%;
}

5º Modelo

.sidebar .widget {
padding: 10px 20px 20px 20px;
margin: 40px 0;
background: #fff;
border: 1px solid #DEDEDE;
}
.sidebar .widget h2 {
padding-bottom: .5em;
font-size: 18px;
text-transform: uppercase;
background: #8ec1db;
margin-top: -26px;
margin-left: 5px;
height: 12px;
width: 150px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}

6º Modelo 


.sidebar .widget {width:100% !important;background:#fff;border-bottom:5px #faafd0 solid;margin:15px 0 !important;border-radius:0 0 0 0;padding:10px;box-shadow: inset 0 0 16px #eee, 0 0 5px #ccc;overflow:hidden}.sidebar h2 {font-family: Verdana;font-size: 18px;color: #fff;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimav5143_ZHC2MPmP81JGqe22Csajpv4_z6Va-4R2VWzraDHAK0srOiEbekokJjLndkk8gZu_9XMYrelYegiWUcB5AV4LDQt-gx2MtKqtCxh6yZTsDTivflZuPfU_iHPetc4rPLQef9lkQ/s1600/84-1.png) no-repeat center;height: 25px;width: 300px;text-align: center;margin-top:-5px ;margin-left:-9px ;margin-bottom:10px;padding:5px;width:112%;}

7º Modelo

.sidebar .widget {width:100% !important;background:#fff;border-bottom:10px #ffc0cb solid;margin:15px 0 !important;border-radius:0 0 0 0;padding:10px;box-shadow: inset 0 0 16px #eee, 0 0 5px #ccc;overflow:hidden}.sidebar h2 {font-family: Verdana;font-size: 18px;color: #fff;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJvWfZuaN2EoQfn-Vo0zD639CaiULNWQQghtiNQgoWt4E0_xtQ7rf5dkuBwYGPimGWfZyRHqbQRDcoS-4z0j5bXWgSsHWVwf6qlnl0y9UsBO8-M9hDpXdjMXDEPhvFGKe4f8dJp5vY0Dzl/s1600/86.png) no-repeat center;height: 35px;width: 200px;text-align: center;text-shadow: 1px 2px 3px #dd8b99;margin-top:-12px ;margin-left:-25px ;margin-bottom:12px;padding:6px;width:115%;}

8º Modelo

.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_BxPgqeaHdnA9-GcR4Ui4ku0RamiNjDe2KQnngVhi1Flz9jSa7_6DtXSQWITccWEV4YhRdvr9GN9Alh46ffYCu89WBcasJsbHFCo7s_YSkTmMUroOyaSIk09dcDOa01orFZcmjiHpJ3x1/s1600/ribbon.png) no-repeat center;
height: 31px;
width: 243px;
text-align:center;
margin-top:-17px ;
margin-left:-21px ;
margin-bottom:0px;
padding:16px;
}

9º Modelo


O código desse modelo você deve colar antes de 
]]></b:skin>
.sidebar .widget {
  padding-bottom: 10px;
  padding-left: 5px;
  padding-right: 5px;
  margin: 10px 0;
  background: #fff;
  box-shadow: 0px 0px 2px #ccc;
}
.sidebar h2 {
margin-top: 8px;
border-bottom: 1px  solid #eee;
text-align: center;
height: 15px;
font-size: TAMANHODAFONTEpx;
font-family: NOMEDAFONTE;
color: #CORDAFONTE;
text-shadow: 0px 0px 5px #CORDASOMBRADAFONTE;
text-transform: uppercase;
}

10º Modelo

.sidebar .widget {
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
padding-bottom: 10px;
margin: 0px 0;
Background: #ffffff;
margin-top:40px;
padding:11px;
box-shadow: 1px 1px 1px 1px #e1dddd;
border-bottom: 5px solid #e45b5b;
}
@font-face { font-family: "silkscreen"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); }
.sidebar h2 {
text-align:center;
background-color: #e45b5b;
-moz-box-shadow: inset 0 0 10px #bd4646;
-webkit-box-shadow: inset 0 0 10px #bd4646;
box-shadow: inset 0 0 10px #bd4646;
padding:7px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
display:inline;
float:right;
margin-top:-30px;
font-size: 8px;
font-family: silkscreen;
font-style: normal;
}

Bom pessoal é isso espero que tenham gostado!
Créditos:???