28 de abr de 2013

Sidebar Igual a Minha

Gente, por favor, se vocês forem comentar, não deixe o link do seu blog com o "http://"!


Bom dia!

Já faz algum tempo (dia 20/04, se não me engano), que me pediram na ask para ensinar a fazer a sidebar igual a minha. 
Eu demorei um pouco pra postar porque não sabia se o anony queria o efeito da foto ou da side, então resolvi trazer o que me parecia mais óbvio. -q

Abra o HTML do seu blog e procure por .sidebar .widget {
Quando achar, apague tudo e cole o seguinte código no lugar:

.sidebar .widget {
  padding-bottom: 2px;
padding-left: 5px;
padding-right: 5px;
padding-top: 1px;
  margin: 20px 0;
Background: #ffffff;
box-shadow: inset 0 0 20px #d8d5d5, 0 0 4px #ccc;
border-bottom: 5px solid #COR DA BORDA DE BAIXO;
border-top: 5px solid #COR DA BORDA DE CIMA;
-webkit-transition-duration: .50s;
}

Agora procure por .sidebar .widget:hover {
Não se assuste se não achar esse código no seu HTML, é só colar o código logo abaixo do primeiro.

.sidebar .widget:hover {
  padding-bottom: 2px;
padding-left: 5px;
padding-right: 5px;
  margin: 20px 0;
Background: #ffffff;
box-shadow: inset 0 0 30px #e4e2e2, 0 0 4px #ccc;
border-bottom: 5px solid #COR DA BORDA DE BAIXO HOVER;
border-top: 5px solid #COR DA BORDA DE CIMA HOVER;
border-radius: 0px 20px 0px 0px;
-webkit-transition-duration: .50s;
}
Viu, tão simples!
Qualquer dúvida mande pelos comentários ou pela ask.

Kissus~


6 comentários:

  1. Ótimo tutorial, a sua sidebar é linda! ^^

    Chu~♡
    mikicandy.blogspot.com

    ResponderExcluir
  2. Amei o tuto, sua sidebar é bastante original.
    Sorteio em meu blog, s epuder visita?
    all-2you.blogspot.com
    Bjs!

    ResponderExcluir
  3. Sua sidebar é linda u_u amei o tutorial <3

    Beijos ~
    spring-in-pariis.blogspot.com <~ Visita?

    ResponderExcluir

• REGRAS DOS COMENTÁRIOS •

Nada de "Seguindo! Segue de volta?" ou "Legal. Visite o meu blog". Faça isso, e estará me convidando a NÃO ver o seu blog!
→ Deixe o link do seu blog para ter a visita retribuída, mas não abuse!
→ NÃO façam requests pelos comentários. Utilize a Ask.
→ Comente apenas sobre a postagem!
→ Sugestões e críticas construtivas são bem vindas, ofensas não.