13 de abr. de 2010

Sidebar em forma de menu accordion




Coloque a sidebar de seu blog em forma de menu accordion como neste exemplo AQUI.






Se este tutorial não deu certo, tente este. Seu modelo de template deve ser atualizado.




 Vá até o HTML de seu blog e procure pelo código:


Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo.


</head>

Cole então o próximo código acima dele.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
var sidebarnameacc1=&quot;sidebar&quot;;
var accordionside1=true;
var sideshow1=new Array(0,0);
var sidebarnameacc2=&quot;sidebar2&quot;;
var accordionside2=false;
var sideshow2=new Array(0,0);
</script>
<script type='text/javascript'>
//<![CDATA[
/* 
Javascript Based on Redux http://www.i-marco.nl

Widget for blogger by www.abu-farhan.com
copyright by Abu Farhan
Dont edit without permission from the Copyright owner
*/

eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('g q=J.K;6(q.L("M.N")==-1){g $0=O.P()}d r(){$0("#"+7+" .2-4").s();$0("#"+7+" .2 8").t("u","v");w(i x o){$0("#"+7+"  .2-4:h("+o[i]+")").y();$0("#"+7+"  .2 8:h("+o[i]+")").j("5")}$0("#"+7+" .2 8").z(d(){6(Q){g a=$0(3).e();6((a.9(".2-4"))&&(a.9(":f"))){$0(3).e().k("b");$0(3).l("5");m n}6((a.9(".2-4"))&&(!a.9(":f"))){$0("#"+7+" .2-4:f").A("b");$0("#"+7+" 8").B("5");a.C("b");$0(3).j("5");m n}}D{$0(3).e().k("b");$0(3).l("5")}})}6(E(7)!="F"){$0(G).H(d(){r()})}d I(){$0("#"+c+" .2-4").s();$0("#"+c+" .2 8").t("u","v");w(i x p){$0("#"+c+"  .2-4:h("+p[i]+")").y();$0("#"+c+"  .2 8:h("+p[i]+")").j("5")}$0("#"+c+" .2 8").z(d(){6(R){g a=$0(3).e();6((a.9(".2-4"))&&(a.9(":f"))){$0(3).e().k("b");$0(3).l("5");m n}6((a.9(".2-4"))&&(!a.9(":f"))){$0("#"+c+" .2-4:f").A("b");$0("#"+c+" 8").B("5");a.C("b");$0(3).j("5");m n}}D{$0(3).e().k("b");$0(3).l("5")}})}6(E(c)!="F"){$0(G).H(d(){I()})};',54,54,'jx||widget|this|content|headactive|if|sidebarnameacc1|h2|is||normal|sidebarnameacc2|function|next|visible|var|eq||addClass|slideToggle|toggleClass|return|false|sideshow1|sideshow2|home_page_tab|initMenu1|hide|css|cursor|pointer|for|in|show|click|slideUp|removeClass|slideDown|else|typeof|undefined|document|ready|initMenu2|location|href|indexOf|blogger|com|jQuery|noConflict|accordionside1|accordionside2'.split('|'),0,{}))
//]]>
</script>


Para dar estilo, copie o próximo código e cole antes de: ]]></b:skin>

.sidebar h2.headactive {
background-color: #d77218;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
}
.sidebar2 h2.headactive {
background-color: #d77218;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
}

Abu Farhan

3 comentários:

  1. Oi linda tudo bem ?
    Esse código não da conflito com o resto dos scripts do blog, tais como esconder/mostra e menu deslizante?
    Ah em tempo rainha: Vou colocar um banner teu de agradecimentos a você em meu blog!
    Tu e a Ariane são minhas fadinhas aqui na bloggersphera!!!
    Beijão aguardo sua resposta!!! Para depois fazer a modificação querida!

    ResponderExcluir
  2. Olá, muito bom o tutorial. Mas eu gostaria de saber se vocês não têm algum tutorial ensinando como ultilizar o mesmo efeito no widget de marcadores. Meu blog tem vários marcadores pra cada letra (nomes de bandas), e fica meio grandinha a sidebar, ficaria muito agradecido se vcs fizessem um tutorial ensinando como fazer esse efeito para quando clicasse em cada LETRA mostrasse os marcadores correspondentes. Ia ficar show! E acho que muita gente ia gostar também! Muito obrigado e parabéns pelo blog!

    rocks-file.com

    ResponderExcluir
  3. Elke, a minha sidebar não fica com esse efeito!
    O que eu faço?
    Será que tenho que atualizar a biblioteca Jquery do meu blog?

    ResponderExcluir

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube