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:

Códigos

/* Sidebar acordion ----------------------------------------------- */ .sidebar-right-1 h2.headactive { background-color: #000; -moz-border-radius-topleft: 4px; -moz-border-radius-topright: 4px; } .sidebar-right-1-2 h2.headactive { background-color: #000; -moz-border-radius-topleft: 4px; -moz-border-radius-topright: 4px; } #sidebar-right-1 h2{ background: #ccc; font-size: 12px; padding: 6px 2px; }

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

Códigos

<script src='https://sites.google.com/site/drwtexte/menudeabs/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> var sidebarnameacc1="sidebar-right-1"; var accordionside1=true; var sideshow1=new Array(0,0); var sidebarnameacc2="sidebar-right-1-2"; 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>

Salve e visualize!

Coluna a esquerda:

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

Códigos

/* Sidebar acordion ----------------------------------------------- */ .sidebar-left-1 h2.headactive { background-color: #000; -moz-border-radius-topleft: 4px; -moz-border-radius-topright: 4px; } .sidebar-left-1-2 h2.headactive { background-color: #000; -moz-border-radius-topleft: 4px; -moz-border-radius-topright: 4px; } #sidebar-left-1 h2{ background: #ccc; font-size: 14px; padding: 6px 2px; }

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

Códigos

<script src='https://sites.google.com/site/drwtexte/menudeabs/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> var sidebarnameacc1="sidebar-right-1"; var accordionside1=true; var sideshow1=new Array(0,0); var sidebarnameacc2="sidebar-right-1-2"; 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>

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:

Códigos

/* Sidebar acordion ----------------------------------------------- */ .sidebar-left-1 h2.headactive, .sidebar-right-1 h2.headactive{ background-color: #000; -moz-border-radius-topleft: 4px; -moz-border-radius-topright: 4px; } .sidebar-left-1-2 h2.headactive, .sidebar-right-1-2 h2.headactive { background-color: #000; -moz-border-radius-topleft: 4px; -moz-border-radius-topright: 4px; } #sidebar-left-1 h2, #sidebar-right-1 h2 { background: #ccc; font-size: 14px; padding: 4px 2px; }

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

Códigos

<script src='https://sites.google.com/site/drwtexte/menudeabs/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> var sidebarnameacc1="sidebar-left-1"; var accordionside1=true; var sideshow1=new Array(0,0); var sidebarnameacc2="sidebar-left-1-2"; 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>

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.