Separar os Gadgets

Xuxuzinhos a Ágatha Chan do blog Some Milk me pediu o tuto de como deixar a sidebar assim como a do BR ela já tinha pedido antes, mais eu esqueci de fazer rsrs  vou postar um tuto bem mais fácil, não é o que usei aqui no BR mas é para separar os Gadgets também e tem alguns efeitos bônus Mini Gifs


Se você quer apenas separar os Gadgets faça o seguinte:

Vá em design > Editar HTML > Ctrl F e pesquise por:
/* Widgets

Mini Gifsé só adicionar esse código antes de fechar a chave:
Background: #f7f7f7; /*Cor do fundo do gadget */
Modifique apenas o que esta em rosa

Exemplo:
Vai ficar assim: 

Prontinho acabou

 

Agora se quiser o modelo personalizado é mais fácil ainda 
(O que foi usado no BR eu fiz um pouco diferente, mas esse tuto é menozinho e mais fácil e tem um efeito bônus por isso vou usar ele)

É só copiar o código abaixo  e colar em um gadget HTML/Javascript, sério é só isso mesmo

<style>
/**PERSONALIZAÇÃO DA SIDEBAR BY CANDYLLAND**/
.sidebar .widget {
width:100% !important;
background:#fff;  /** COR DO FUNDO DO GADGET **/
margin:10px 0 !important;
border-top:10px #ff1490 solid;  /** COR DA BORDA DE CIMA **/;
border-radius:0 0 10px 10px;
padding:10px;
box-shadow: inset 0 0 20px #eee, 0 0 3px #ccc; /** SOMBREAMENTO **/
overflow:hidden
}

.sidebar .widget h2 {
background:#fee /** COR DO FUNDO DO TITULO **/;
color:#f9b /** COR DO TITULO **/;
font-size:17px /** TAMANHO DO TITULO **/;
text-shadow:0 1px #ddd /** SOMBRA DO TITULO **/;
margin-top:-10px /** MARGIN **/;
margin-left:-9px /** MARGIN **/;
margin-bottom:10px /** MARGIN **/;
padding:5px;
width:107%;
overflow:hidden
}
/** FIM DA SIDEBAR BY [www.candylland.net]**/
</style>
Esse não é exatamente igual ao meu..mas separa os gadgets também e tem efeitos bônus que é de sombreamento agora é só personalizar do Jeito que vocês quiserem de acordo com o gosto de cada um 

Tabela de cores aqui

Testado apenas no Modelo Travel/Viagem

Créditos: Candylland

23 comentários:

  1. Ameii o tutorial e o blog é perfeito.
    Aceita afiliação? *o*



    www.ops--cresci.blogspot.com

    ResponderExcluir
    Respostas
    1. que "bão" que gostou daki ^-^
      aceito afiliação sim

      Excluir
    2. *---*
      Vou te botar lá como afiliada *-*

      Excluir
    3. prontinho já coloquei teu blog nos afiliados *-*

      Excluir
  2. KAKAAAAAAAAH DIVA, SÉRIO, ETERNOS CRÉDITOS SEUS LÁ NO BLOG ! OBRIGADA :3

    ResponderExcluir
  3. Ainn' que fofo *u* Pra ficar que nem o seu né? Concerteza vou botá-lo no próximo layout :) Bjss Luuh
    teenstyle-oficial.blogspot.com/

    ResponderExcluir
  4. lidnaaaaaaaaa
    adoroooooooo
    aqui bezosssssssssssssssssssssssssssssssssssss

    ResponderExcluir
  5. Segue meu blog ? quando seguir deixa um aviso q sigo de volta

    http://mybarbiefashiongirl.blogspot.com.br

    Tem como postar imagens para afiliação 40 x 40 ??

    me avisa no meu blog se pode e qndo postar avisa tbém , rsrs!

    ResponderExcluir
  6. Oi kakah! O efeito é muito lindooooooooooooooooo!!! amo o BR e sempre vou amar!
    Quer ser minha afiliada? Posso ser sua?? seria uma honra pra mim!! pf kakah!

    bjussssssssssssssssssssssssssss Y LOVE ♥BAD REPUTATION♥

    sweetkprincess.blogspot.com

    ResponderExcluir
    Respostas
    1. aiiin xuxu ki bom que gosta do blog *-*
      e claro que aceito afiliação :)

      Excluir
  7. Sempre arrazando ;)

    http://srasmustaches.blogspot.com.br/

    ResponderExcluir
  8. Muito obrigada, amei esse tutorial, é realmente divo!

    ResponderExcluir
  9. ooie amor, vlw pelo tuto [finalmente achei um q dá certo]
    então, eeu dei uma modificada nos códigos e ficou legal ^.^
    logo,logo todos vão poder ver lá no meu blog a nova sidebar do meu novo layout ;)

    http://justgirl.tk/

    ResponderExcluir
  10. Finalmente achei um que dá certo! Brigada pelo tuto ^ ^ Usei esse de adicionar o código no gadget, ficou perfeito! Salvou minha pele, aushauhsa!
    Adorei o blog!
    http://www.arrasa-no-look.blogspot.com.br

    ResponderExcluir
  11. Amei Seu Blog, e esse Tuto é tudo de bom...

    Aceita afiliação???

    mimiycosmeticos.blogspot.com.br

    Bjus...

    ResponderExcluir
  12. Amei demais, arigatou gozaimasu *-----------*

    ResponderExcluir