15/12/2014

07. Maratona CSS: Sidebar em accordeon (forma de accordeon)

||

Olá meus amores, como estão hoje? Eu vou bem, mas minha vista está pesada, então como hoje não posso ficar muito tempo no computador, decidi trazer uma postagem rápida é pratica para não deixar de postar, deve ser porque não tenho dormido direito. Alguém lembra do layout que postei alguns dias atrás? Irei ensinar a fazer uma sidebar accordeon como o do layout Azure, o efeito é bem simples e simples porém chamativo. Todos os gadgets ficam fechados e revelam seu conteúdo quando selecionado, é muito bom para quem tem muitos gadgets, mas tomando cuidado para não ficar pesado. Para quem ainda não entendeu o que estou dizendo pode visualizar aqui: Preview

Eu fiz o teste nos seguintes modelos, Travel é Simples. Mas se você saber o nome da sidebar em outros templates, creio que consiga estalar os códigos. Aconselho antes de executar esse tutorial fazer um Backup de seu blog, ou fazer em um blog aparte.

Coluna a direita:

1. Vá até o HTML de seu blog é procure por ]]></b:skin> , acima dele cole:



Agora abaixo de  ]]></b:skin> , cole:

Salve e visualize!


Coluna a esquerda:

1. Vá até o HTML de seu blog é procure por ]]></b:skin> , acima dele cole: 



Agora abaixo de  ]]></b:skin> , cole:

Salve e visualize!



Com duas colunas de sidebar (uma coluna de cada lado):

1. Vá até o HTML de seu blog é procure por ]]></b:skin> , acima dele cole:


Agora abaixo de  ]]></b:skin> , cole:


Salve e visualize!


É isso queridos, espero que tenham gostado. Os créditos vão para  AF - Redux pois são os verdadeiros desenvolvedores desse códigozinho maravilhoso, eu vou ficando por aqui espero que tenham gostado e até a próxima.

OBS: Erro arrumado e código atualizado.

19 comentários:

  1. Bunny, quando eu tento visualizar pra ver como ficou aparece isso:

    "Não foi possível carregar a visualização do modelo: Erro ao analisar XML, linha 1041, coluna 5: The element type "div" must be terminated by the matching end-tag "</div"."
    Halph! T-T

    ResponderExcluir
    Respostas
    1. Olá Cien tudo bem? Infelizmente não é possível visualizar o efeito é necessário salvar, para poder ver o resultado. Se tiver qualquer duvida é só perguntar. ^^

      Excluir
    2. Eu fiz o que você mandou, mas não me deixa salvar porque diz que tem um erro em alguma linha, e eu até mudei pro modelo Travel como estava ali no Tuto, mas ainda não funfou D:

      Excluir
    3. Olá Bunny , no meu nem deu para salvar por causa desse mesmo problema do Cien , meu modelo é o viagem do blogger, Help Por Favor ^^

      Excluir
    4. darei uma olhada nos códigos para analisar melhor o que pode estar causando o problema, mas experimenta quando colocar o código da um espaço dele para os outros. ^^

      Excluir
  2. Amei,vou tentar montar um template com seus tutos,diva.
    Beijos da sua fanzoca,Fernanda Xdea

    http://fernandaxdea.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Fico grata por isso. :3 Obrigada linda!

      Excluir
  3. Finalmente! Eu amei o layout principalmente a sidebar hehe

    blackotakuu.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Hihi :3 Obrigada por gostar, fico realmente feliz. *3*

      Excluir
  4. Eu quando acessei o link do layout free ai eu vi a sidebar só com o titulo dos gadgets eu pensava que que não tinha nada e só era os títulos como geralmente em layout free é ai depois eu tive uma luz e cliquei na sidebar que revelou o conteúdo ai eu fiquei indignado como a sidebar me enganou direitinho, más acho que fica legal e super criativo.

    My indecision || http://m-indecision.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. rsrs essa e aintençao, mas que bom que achou legal

      Excluir
    2. hihihi e assim mesmo, mas que bom que gostou

      Excluir
  5. Nuss amei esse tutorial, tão divo! É algo super criativo eu particulamente xonei por ele ♥

    http://animesjaychan.blogspot.com.br/

    ResponderExcluir
  6. Anônimo20/12/14

    Ameiii *3*
    Wendy você poderia criar um tutorial de menu accordion?

    ResponderExcluir
  7. Olá , gosto muito do Bunny Crazy *-*
    Bem , eu quero dizer que a linha " div " não está fechada , e por isso não estou conseguindo usar o código , que iria ficar perfeito no meu layout.
    Eu já testei os códigos em todos os modelos do blogger , e não funcionou em nenhum.
    Queria te avisar isso , se esse não vou o caso me ajude por favor.

    apenaasumcara.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Olá Moisés fico super feliz que goste do BC. Eu utilizei o código e está funcionando perfeitamente. Mas irei avaliar novamente para ficar mais fácil de usar. ^^

      Excluir
  8. Tem como fazer no título do post ? :3

    ResponderExcluir
    Respostas
    1. Tem sim é só trocar o .sidebar-left-1pelo nome da tag da área da postagem.

      Excluir