Big Tutorial - Como personalizar sua sidebar


Olá pessoal (≧▽≦)
Eu to muito assustada. Teve um mini terremoto na minha cidade, e balançou TUDO. Os móveis da minha casa se mexiam sozinhos e foi muito assustador. Mas ainda bem que já acabou. Pensei que morreria e nem veria a Disney. Mas tá né? De acordo com minhas suspeitas e estudos, acredito que na minha cidade tenha algum tipo de vulcão nas serras, o que explicaria os tremores e o calor infernal que chega a 45°C.
Bem, queria me desculpar com a Letícia, pois ela me pediu um tutorial faz tempo e eu sempre esquecia. E então, resolvi postá-lo hoje. Ela queria saber como personalizar a sidebar igual a minha, com ribbons específicos para cada gadget, com bordas e com fonte em pixel.
Enjoy ~

Para colocar ribbons específicas em cada gadget, faça:
Vá em <b:skin> e cole acima dele esse código:
#IDdoGADGET h2 { background: url('LINK DA FAIXA') no-repeat; color: transparent; width: 310px; height:75px; margin-top: -30px; margin-left: -35px; float:left; }

O ID do gadget, é o nome do seu gadget, exemplo, se você tem um gadget de seguidores, o ID dele será Followers. Os outros gadgets, você terá que procurá-los pelo nome. Exemplo, procura pelo gadget Welcome e estará  assim o ID dele: HTMLnúmerodogadget. Agora adicione quantos quiser!

Depois de ter feito isso, agora iremos colocar as bordas na sidebar, colocar a fonte pixel no gadget. E fazer a faixinha aparecer. Procure por:  .sidebar .widget { que estará acima da tag Widgets. Vai estar mais ou menos assim:
.sidebar .widget { border-bottom: 2px solid $(widget.border.bevel.color);padding-bottom: 10px;margin:10px 0;}
Apague tudo isso aí e cole:
.sidebar .widget {
padding-left: 10px;
padding-bottom: 10px;
padding-right:10px;
padding-top: 10px;
margin: 15px 0;
background: #fff;
padding: 5px; /* Espaço para as letras não ficar colada nas caixas - Não altere nada */
border-top: 5px solid #514333; /*------------Cor da barra de cima------*/
border-bottom: 5px solid #514333; /*------------Cor da barra de baixo------*/
box-shadow: inset 0 0 6px #e2e1e1, 0 0 1px #ccc;
  font-family: "silkscreen";
font-size: 8px;
  color: $(widget.text.color);
}
Bom, esse é o modelo que uso na minha sidebar! Espero que dê certo no de vocês. E desculpa a demora Letícia.
Kiss

16 comentários:

  1. Terremoto? Man, que louco 'o'
    Eu vou usar esse tuto em breve, no meu lay free.
    :3 || † Ieah

    ResponderExcluir
  2. Mini terremoto? õ/ Que bom que já passou,deve ser horrível *-*
    Amei o tuto,vou tentar *o*
    Smacks :*
    Mary|ideiasdasym.blogspot.com

    ResponderExcluir
  3. Legal o tutorial Mandi! Espero que a Letícia consiga! Eu ficaria em desespero se houvesse um terremoto aqui nem daria tempo de se preocupar com a Disney rsrsrsrs. Você mora perto de serra é? Eu também morava perto de serra, agora moro perto do mar, mais o calor é o mesmo : ).

    Mundo de Liina

    ResponderExcluir
  4. Terremoto? Que horror :O
    Muito bom o tuto :)

    David - Leitor Compulsivo

    ResponderExcluir
  5. Mini terremoto?! Em que cidade você mora?
    Adorei o tuto, bem explicado.
    Beijos,
    Sorvete de Limão

    ResponderExcluir
  6. Oláaaaa!
    boa noite^^
    adorei o post!
    Te desejo um ótimo dia dos pais^^

    Ah! Temos uma homenagem de dia dos pais no blog; venha conferir :
    http://gliter-lovely.blogspot.com.br/

    bjooos <3

    ResponderExcluir
  7. Ótimo tuto, divosa *O* Meio complicado, mas você explicou super bem ♥

    Beijinhos,

    Juu-Chan ;3 | Nescau com Nutella

    ResponderExcluir
  8. Como assim mine-terremoto? Se fosse eu tinha tido um "piripaque" kk
    Amei o tutu, vou usar no meu próximo layout!

    Beijos, ♥ || Simple Things :3

    ResponderExcluir
  9. 45º? Aqui em Portugal está 35 e ninguém aguenta '-'
    Adorei o tutorial :)
    Cat Girl

    ResponderExcluir
  10. Terremoto? auheuheauhe que louco :3
    Adorei o big tuto, sua side é muito linda, e agora todo mundo personaliza assim, né? Não entendi muito bem a parte do ID, mas vou tentar auehuhaueh
    Kiss ✿
    Garotas Atrevidas ❤ ~clique e visite

    ResponderExcluir
  11. Terramoto *O* Eu queria sentir um u-u' Apesar de Lisboa ser uma zona sísmica, num senti nenhum ><'
    Bom tuto Mandi >3<'

    Kiss~

    from Niik ll Letter of Pain (perfil)

    ResponderExcluir
  12. MEU DEEEEEEUS, MANDI '-' Graças á Deus, acabou!
    E quanto ao tuto, adorei, muito bom!
    So... nhaac com muito glacée!
    Bonjour, Une Glacée ♥ | Vem viajar comigo!

    ResponderExcluir
  13. Que massa suas dicas.

    Gostei de tudo por aqui.

    Já estou seguindo.

    Tenha uma linda semana.

    Beijo,

    http://cecisouza.blogspot.com.br/

    ResponderExcluir
  14. eu uso esse tuto no meu blog o/ adoro, muito facil e pratico né?
    acervo-de-livros.blogspot.com

    ResponderExcluir
  15. Adorei seu tuto flor!
    http://fabiolucas92.blogspot.com.br/

    ResponderExcluir
  16. Que isso fofa eu que peço desculpas por não ter te agradecido...
    Mas agora com a volta das aulas só final de semana que eu vou poder mexer...
    rsrs
    Muito tanks pelo tutorial!!!
    Deu certinho no meu blog teste!
    http://ideiasdasym.blogspot.com.br/

    ResponderExcluir

Seu comentário é muito importante para o crescimento do blog, mas antes têm algumas regrinhas a serem cumpridas:
♥ Aceitamos pedidos de afiliação, somente se seguir o nosso blog;
♥ Comentários do tipo "seguindo,segue de volta, serão aceitos com prazer, afinal não é pecado pedir para seguirem seu blog, não é mesmo?;
♥ E é claro que eu visito seu blog, afinal é bom conhecermos novos blogs;
♥ Deixe o link do seu blog;
♥ Para mais informações, consulte a nossa FAQ