13 Modelos para Sidebar

Olá, estou chegando com uns modelos fofos para a sua Sidebar (onde fica seus Gadgets). Bom,não foi fácil de achar esses modelos, mas eu consegui achar alguns bem fofuchos. Espero que gostem por que eu encontrei para vocês com muito carinho. 

Copie o código de seu modelo que você gostou, cole ele em .sidebar .widget { ou se você não encontrar o código faça isso:

Modelo ou Desing // Personalizar // Adicionar CSS e cole o código, simples. Bejus >.<

Os códigos vão ser aplicados em .sidebar .widget  e .sidebar h2, então você precisa apagar tudo que refere-se a isto e só depois aplicar os códigos.

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

                                      

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

----
                                                      

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

-----
                                                

.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(http://i1234.photobucket.com/albums/ff411/SweetLG/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%;}

.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(http://i1234.photobucket.com/albums/ff411/SweetLG/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%;}

.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/AVvXsEjxkxoebjpxuMp7OaYqFEmuLBVXZqhoJSd7BSv4t6i_aXw2HtkE86BgeYR5g60OZnGDA3V6IGuPTyajZJnd0CV9jjKPFE0rytb0uU4-k3Z0nujAiLL6b7-INCOPr_ibUPzvor2bSvNbRwrm/s1600/ribbon.png) no-repeat center;
height: 31px;
width: 243px;
text-align:center;
margin-top:-17px ;
margin-left:-21px ;
margin-bottom:0px;
padding:16px;
}

Cole o código abaixo, antes da tag ]]></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;

}

Ah, para usar é só colar o códigos depois de /* Widgets ~

.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 #a2b6cd;
}
@font-face { font-family: "silkscreen"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); }
.sidebar h2 {
text-align:center;
background-color: #a2b6cd;
-moz-box-shadow: inset 0 0 10px #d7a8fa7;
-webkit-box-shadow: inset 0 0 10px #7a8fa7;
box-shadow: inset 0 0 10px #7a8fa7;
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;
}

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

.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 #ff81a2;
}
@font-face { font-family: "silkscreen"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); }
.sidebar h2 {
text-align:center;
background-color: #ff81a2;
-moz-box-shadow: inset 0 0 10px #cd637e;
-webkit-box-shadow: inset 0 0 10px #cd637e;
box-shadow: inset 0 0 10px #cd637e;
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;
}

.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 #a893b9;
}
@font-face { font-family: "silkscreen"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); }
.sidebar h2 {
text-align:center;
background-color: #a893b9;
-moz-box-shadow: inset 0 0 10px #837292;
-webkit-box-shadow: inset 0 0 10px #837292;
box-shadow: inset 0 0 10px #837292;
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;
}

.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 #abcac1;
}
@font-face { font-family: "silkscreen"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); }
.sidebar h2 {
text-align:center;
background-color: #abcac1;
-moz-box-shadow: inset 0 0 10px #779d92;
-webkit-box-shadow: inset 0 0 10px #779d92;
box-shadow: inset 0 0 10px #779d92;
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;
}

.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 #d7d3a2;
}
@font-face { font-family: "silkscreen"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); }
.sidebar h2 {
text-align:center;
background-color: #d7d3a2;
-moz-box-shadow: inset 0 0 10px #ada980;
-webkit-box-shadow: inset 0 0 10px #ada980;
box-shadow: inset 0 0 10px #ada980;
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;
}

Créditos: Ideias & Tutoriais