Estilos para sidebar feitos por mim

Ohayou ! Feliz Halloween C:

Bom, hoje, antes dos nossos goodies diários, eu queria dizer à vocês que tem tipo, 75% de chance do Menina Nerd virar site , ou seja, sair do "blogspot .com'' e virar ".com" .. Mas isso serão "cenas dos nossos próximos capitulos" ..

Eu fiz uns novos estilos para sidebar, tipo o meu, sabe ..

Vi que o KW' tá sempre postando, mas a Catarina' me pediu pra criar uns mais criativos, porque o do KW' só tá seguindo um unico padrão .. Bom, depois de muito tentar, de estragar layouts de teste, e tudo mais, consegui ! Trouxe modelos variados, para que combinem com TODOS os tipos de layouts

Antes de fazer, apague tudo o que estiver abaixo da pequena linha depois da tag "/* Widgets"

Esse primeiro é muito fácil, o layout que eu escolhi para que 'combine' é o layout estilo Candy, no qual as cores principais são o rosa, o branco e o verde.

Simples, marque a opção "Expandir modelos Widgets" e aperte Ctrl F ,

Digite  /* Widgets e abaixo da "linha", cole isso :

.sidebar .widget { width:100% !important; background:#fff; border-bottom:10px #AAE395 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://4.bp.blogspot.com/-zLeWA24qKBY/T9uoUL4XfXI/AAAAAAAAhfc/VEeWTHtumUI/s1600/babado3.png) no-repeat center; height: 35px; width: 200px; text-align: center; text-shadow: 1px 2px 3px #AAE395; margin-top:-12px ; margin-left:-25px ; margin-bottom:12px; padding:6px; width:115%; } Visualize, e se estiver tudo certinho; Salve !

Esse segundo, tem o estilo mais simples, porem meio parecido com o primeiro, pois possui babadinhos, mas combina bastante com blogs mais  simples, ou com o layout estilo de Halloween ..

E o resultado é esse:

 mais uma vez, marque a opção "Expandir modelos Widgets" e aperte Ctrl F ,

Digite  /* Widgets e abaixo da "linha", cole isso : (NÃO ESQUEÇA DE APAGAR TUDO DEPOIS DA LINHA! )

.sidebar .widget { width:100% !important; background:#fff; border-bottom:10px #000 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: #ffffff; background: url(http://25.media.tumblr.com/tumblr_lrje3efFVI1r2fbrbo2_400.png) no-repeat center; height: 35px; width: 200px; text-align: center; text-shadow: 1px 2px 3px #AAE395; margin-top:-12px ; margin-left:-25px ; margin-bottom:12px; padding:6px; width:115%; }

Mais uma vez visualize, e salve !

O ultimo é meio que rosa de mais pra mim, mas não muda o fato de que fiz com carinho !

de novo, marque a opção "Expandir modelos Widgets" e aperte Ctrl F ,

Digite  /* Widgets e abaixo da "linha", cole isso aqui :

.sidebar .widget { width:100% !important; background:#fff; border-bottom:10px #FF0059 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: #ffffff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiILn4z01aR8iv2ZUfhoJhlH1lGLZlX4Bs_vGruk0CO3oCzyw0Qd46ckUhOUcYKz6KlifIkkuGhchPzyCivruwqGnFS_k2eRPZYqFhH1InAtYLbb4EITpZDDyqCAOxRmK2c7KDC_qCJ8nP/s1600/Cortininha+Rosa.jpg) no-repeat center; height: 35px; width: 200px; text-align: center; text-shadow: 1px 2px 3px #FF0059; margin-top:-12px ; margin-left:-25px ; margin-bottom:12px; padding:6px; width:115%; }

Mesmo processo : Visualize e salve !

Bom, é só isso ! Se quiserem mais um estilo; Peçam e se quiserem aprender .. peçam por comentário que faço o tutorial !