07/03/2013

GOODIES/TUTOS-modelos para sidebar

*Ficou muito linda essa imagem*
Leitores e leitoras que se prestem,não leiam o post abaixo,porque eu escrevi umas coisas muito fora do normal,sei lá,fiquei doidão e fiz aquele post maluco,agora coloquei a cabeça no lugar e vim postar algo que *PRESTE*,e tenho certeza,vai prestar muito pra aqueles designers preguiçosos que na hora de fazer o lay ficam trancando na sidebar,como pra escolher se colocam faixinha ou editam,e eu trouxe a solução pra esses problemas,uns códigos pra ter sua sidebar *TODINHA* editada em 2 toques,antes que perguntem peguei no KAWAII WORLD.

Antes, preciso que realizem um passo para preparação. 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, você só tera que apagar porque o código é pra a sidebar todinha editada,sem precisar mudar nada.

Espero que gostem.




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


O CÓDIGO DESTE É SÓ EM .sidebar .widget

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



Trouxe somente dois por preguiça. Quando eu tiver tempo, posto mais.

12 comentários:

  1. nossa que liiiiiiindo os modelos da sidebar,serio mesmo é super fofo,e ainda combina com qualquer lay,ahhh é muiiito fofo mesmo *-*
    *já colocando o tutorial no favoritos*

    ResponderExcluir
    Respostas
    1. UAU,que bom que você gostou,combina com tudo mesmo,eu já usei em alguns lays que fiz...

      Excluir
  2. Fica muito lindo! O estilo que mais gostei foi o primeiro...

    Abraços...

    ResponderExcluir
    Respostas
    1. kkk gostei do trocadilho com o primeiro,kkkk
      é mesmo muito lindo

      Excluir
  3. Essa menina diva do começo por acaso, não é a Magali Jovem?!Ah eu já tinha visto esses modelos de sidebar, mais acho eles um pouco comuns, por que todo mundo USA, mais mesmo assim brigada por postar, concerteza vai ser útil para alguém ♥
    KISSUS #May-Sun

    layrakauana.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. é a magali ADULTA,a nova versão da magali,depois posto a da monica

      Excluir
  4. Voltei novamente... legal... se quiser, me ajuda, não sei se o meu ficou bom... rs

    ResponderExcluir
    Respostas
    1. nossa quero te ajudar sim,assim que eu terminar o do prince

      Excluir
    2. e eu descubri como vcs engraçadinhos fazem desse jeito para ocupar mais que o espaço do layout! kakaka... só de sacanagem, me lembrei que foi meio que assim que inventei de fazer a bagaceira do meu blog inicial... (se vc viu e se lembra, entende...)

      Excluir
    3. eu vi,mais eu nao me lembro,kkkk
      eu nao descobri o que vc descobriu,o que ocupa o lay?
      to boiandooo

      Excluir
  5. São muito fofos esses modelos *-*

    Hey, tem alguma laranja? É que eu vivo procurando alguma laranja que combine com as cores do meu blog, mas eu não acho, então tive que deixar a que mais se adequava ao tema (que eu encontrei).

    ResponderExcluir
    Respostas
    1. Não tem nenhuma laranja mais eu posso fazer se quiser...

      Excluir