Yo pessoal! Trago alguns estilos de sidebar para vocês espero que vocês gostem. Todos eles foram de modelos antigos aqui do blog, então são bem simples. Retirando o primeiro modelo os outros são reblogados, os créditos estão abaixo das imagens. Então se utilizarem por favor, creditem o blog. Por hora é isso, vamos ao modelinhos.
OBS: Para você usar um dos modelos abaixo você deve remover todo conteúdo da sidebar. Isso é muito simples de fazer, vá em HTML, ative a barra de pesquisa com Ctrl+F, na barrinha que for aparecer, procure por: .sidebar .widget ou .sidebar h2. Agora remova tanto o nome (tag) como seu conteúdo. Ex: .sidebar .widget {conteúdo da sidebar}
Códigos
.sidebar .widget {
width:100% !important;
background:#fff;
margin:15px 0 !important;
border-radius:5px;
padding:10px;
box-shadow: inset 0 0 15px #eee, 0 0 3px #ccc;
overflow:hidden
}
.sidebar .widget:first-child {
margin-top: 0;
}
.sidebar h2 {
font-family: Verdana;
font-size: 17px;
color: #fff;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikdkKL5eFHZt6vnSGnGEZOhLLlq_cRsW9ETdNp55JUNo3HiQIB3B-808UPDOaI3Dlf2WkRy2LmQg7kgo_r3XLDXA7tgywZFCP4uyxprfnLMmM7MOvKUJpR410PZcHCvmWGU6f7kZW_wW8/s1600/Faixinha+gadgets.png) no-repeat center;
height: 25px;
width: 300px;
text-align: center;
margin-top:-5px;
margin-left:-9px ;
margin-bottom:10px ;
text-shadow:0 1px #5C487E ;
padding:5px;
width:114%; }
width:100% !important;
background:#fff;
margin:15px 0 !important;
border-radius:5px;
padding:10px;
box-shadow: inset 0 0 15px #eee, 0 0 3px #ccc;
overflow:hidden
}
.sidebar .widget:first-child {
margin-top: 0;
}
.sidebar h2 {
font-family: Verdana;
font-size: 17px;
color: #fff;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikdkKL5eFHZt6vnSGnGEZOhLLlq_cRsW9ETdNp55JUNo3HiQIB3B-808UPDOaI3Dlf2WkRy2LmQg7kgo_r3XLDXA7tgywZFCP4uyxprfnLMmM7MOvKUJpR410PZcHCvmWGU6f7kZW_wW8/s1600/Faixinha+gadgets.png) no-repeat center;
height: 25px;
width: 300px;
text-align: center;
margin-top:-5px;
margin-left:-9px ;
margin-bottom:10px ;
text-shadow:0 1px #5C487E ;
padding:5px;
width:114%; }
Cred: Sweet Poison
Códigos
.sidebar .widget {
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
padding-bottom: 12px;
margin: 0px 0;
Background: #ffffff;
border-bottom:5px #2D3A86 solid;
margin-top:41px;
padding:11px;
box-shadow: 1px 2px 3px 1px #e1dddd;
}
.sidebar h2 {
text-align:center;
color: #2C2C2C;
background-color: #83B7FF;
-moz-box-shadow: inset 0 0 10px #6DA8FB;
-webkit-box-shadow: inset 0 0 10px #6DA8FB;
box-shadow: inset 0 0 10px #8193FF;
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;
}
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
padding-bottom: 12px;
margin: 0px 0;
Background: #ffffff;
border-bottom:5px #2D3A86 solid;
margin-top:41px;
padding:11px;
box-shadow: 1px 2px 3px 1px #e1dddd;
}
.sidebar h2 {
text-align:center;
color: #2C2C2C;
background-color: #83B7FF;
-moz-box-shadow: inset 0 0 10px #6DA8FB;
-webkit-box-shadow: inset 0 0 10px #6DA8FB;
box-shadow: inset 0 0 10px #8193FF;
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;
}
Cred: Kawaii World
Códigos
.sidebar .widget {
border-bottom: 5px solid #D682DE;
border-top: 5px solid #621E85;
padding-bottom: 20px;
margin: 10px 0;
background: #fff;
padding:12px;
box-shadow: inset 0 0 15px #eee, 0 0 3px #ccc;
}
.sidebar .widget h2 {
background:#45CFAF;
font-size:16px;
font-family: Stoke;
color: #fff;
font-size: 23px;
text-shadow:0 1px #ddd ;
margin-top:-12px;
margin-left:-13px;
margin-bottom:10px ;
padding:5px;
width:107%;
}
border-bottom: 5px solid #D682DE;
border-top: 5px solid #621E85;
padding-bottom: 20px;
margin: 10px 0;
background: #fff;
padding:12px;
box-shadow: inset 0 0 15px #eee, 0 0 3px #ccc;
}
.sidebar .widget h2 {
background:#45CFAF;
font-size:16px;
font-family: Stoke;
color: #fff;
font-size: 23px;
text-shadow:0 1px #ddd ;
margin-top:-12px;
margin-left:-13px;
margin-bottom:10px ;
padding:5px;
width:107%;
}
Códigos
.sidebar .widget {
background: #fff;
padding: 5px;
border-bottom: 2px solid $(widget.border.bevel.color);
padding-bottom: 10px;
margin: 10px 0; }
h2 {
display:block; background:#EAC3B8;
color:#A95A4E;
text-shadow: 1px 1px 0 #transparent; font-size:12px;
font-weight:bold; letter-spacing:1px; padding:3px 5px 3px 10px; margin:5 0 0px 0;
text-transform: normal; border-bottom: 1px dotted #000000;
}
background: #fff;
padding: 5px;
border-bottom: 2px solid $(widget.border.bevel.color);
padding-bottom: 10px;
margin: 10px 0; }
h2 {
display:block; background:#EAC3B8;
color:#A95A4E;
text-shadow: 1px 1px 0 #transparent; font-size:12px;
font-weight:bold; letter-spacing:1px; padding:3px 5px 3px 10px; margin:5 0 0px 0;
text-transform: normal; border-bottom: 1px dotted #000000;
}
Ate a próxima post pessoal! XoXo!!!
Acho que você esqueceu dos créditos. Você só mudou as cores e eles são do Kawaii World. Põe os créditos por favor..
ResponderExcluirYo Luuh eu peguei apenas um no Kawaii, o de aba eu já não sei mas abaixo dele esta com os créditos já. ^^
ExcluirUsar a 2° bjs
ResponderExcluirCerto ^^
ExcluirYo! Como se muda a cor do 1º?
ResponderExcluirPreciso mesmo de saber, pode me ajudar? T.T
é uma imagem você muda por um programa editável e o fundo branco dos gadgets se muda nessa parte:
Excluirbackground:#fff;
já sombra por dentro dele é nessa parte
box-shadow: inset 0 0 15px #eee, 0 0 3px #ccc;
se deseja mudar a fonte é nessa parte
color: #fff;
e nessa aqui também é o contorno da letra
text-shadow:0 1px #5C487E ;
espero que tenha ajudado ^^
Ajudou muito! Obrigado!
ExcluirVisite se quiser: http://otakudreamplace.blogspot.pt/ (estou em "obras" kkkk, por isso esta fechado durante um tempo)
Hihi que bom que ajudou, não foi nada.
ExcluirClaro assim que você abrir e eu voltar de viajem eu faço uma visita sem duvida conta comigo lá.
Ano, outra pergunta: Em que zona do HTML se põe o código?
ExcluirDesculpe se estiver a incomodar de mais T.T
Que isso tudo bem se preocupa não, você procura por:
Excluir.sidebar .widget { pague dessa parte ate o } e cole o codigo escolhido na postagem ^^
Arigatou! _saltando para os seus braços_
ExcluirDouitashimashite ^.-
Excluir-upa-
Tô planejando pegar o 1 ;p Tô aprendendo a fazer layouts ainda, graças ao blog. Obrigada!
ResponderExcluirEntendo, com certeza ficara lindo seu layout. De nada fico grata em poder ajudar
ExcluirPeguei o 3º tabom?
ResponderExcluirTa bom ^^
ExcluirPeguei o 1° ^^
ResponderExcluirCerto, bom uso.
ExcluirPeguei o 2, mas a cor dentro dele fica cinza :/, como muda ?
ResponderExcluirEstranho... o fundo dele esta branco, você mudou a cor ao colocar? Ou removeu todo o código da antiga sidebar?
ExcluirPeguei o código da 2º sidebar amor
ResponderExcluirObrigada Laís ^^
Excluiroiiii poderia fazer um sidebar com esssa cor
ResponderExcluir#8A2BE2
os layout são muito lindos,mais infelizmente no meu não adicionou,não sei o porque
ResponderExcluirPeguei o terceiro amoore!!
ResponderExcluirAmei os modeloos! :3 :)
To sem postar, mas vou voltar ;)
vidadanovata.blogspot.com
Volta sim! Saudades de suas postagens.
Excluir