Marcadores que Expandem

CLASSIFICAÇÃO DO TUTORIAL
AVANÇADO

Seguindo a mesmo raciocínio do post sobre a Lista de Links Expansível vou ensinar como fazer o gadget de MARCADORES expandir.

Mas antes você deve saber como aplicar o hack de Menu Expansível.

Vamos relembrar?

1ª Parte

1º Coloque este código Java Script no seu blog logo acima da tag </head>senão nenhum menu vai expandir.

<!-- JavaScript Expandir --><style type='text/css'>.texthidden {display:ipostnline}.shown {display:block}</style><script type='text/javascript'>document.write(&#39;<style>.texthidden {display:none} </style>&#39;);</script><script type='text/Javascript'>function expandcollapse (postid) {whichpost = document.getElementById(postid);if (whichpost.className==&quot;shown&quot;) {whichpost.className=&quot;texthidden&quot;;}else {whichpost.className=&quot;shown&quot;;}}</script>

2º Para criar um botão expansível devemos aplicar o código abaixo em uma gadget tipo HTML usando uma imagem como botão ou palavras para expandir.

<a href="javascript:void(0);" onclick="expandcollapse('favoritos')"><img border="0" src=" Endereço da Imagem que vai servir como botão" /></a><br/><br /><ul id="favoritos" class="texthidden">Endereços dos Links, Texto, Imagem, etc... </ul>

» Para que a gadget de MARCADORES do seu blog seja o botão expansível, você deve:

2ª Parte

1º - Configurar o código CSS do Título da Sidebar:

1- Vá em Modelo → Editar HTML.

2 - Colocar em cima do código [ .sidebar h2 { ] estes códigos que indicam que seu título da sidebar é um link.

.sidebar h2 a{
color:$sidebarcolor;
font: $linkfont;
text-decoration:none;
}
.sidebar h2 a:hover{
color:$visitedlinkcolor;
text-decoration:underline;
}

3 - Clique em SALVAR ALTERAÇÕES.

OBSERVAÇÕES IMPORTANTES:
1ª - Sua widget MARCADORES já deve ter sido criada pela página: Elementos de página do blogger.
2ª- color:$sidebarcolor;→ Se seu template não tem a variável sidebarcolor pode colocar uma cor, ex #000000=preta, de preferência a cor definida no grupo de códigos do [ .sidebar h2 { ] para ficar igual aos outros títulos das sidebars, porém este vai ser um link.
3ª- color:$visitedlinkcolor;→ Se seu template não tem a variável visitedcolor pode colocar uma cor, ex #018101=verde

3ª Parte

2º - Agora você vai → Selecionar a caixinha Expandir Widgets:

Para que a widget MARCADORES seja um botão expansível a partir do seu título encontre a linha com a palavra label1, use Ctrl+F para encontrar mais rápido, veja os códigos abaixo:

<b:widget id='Label1' locked='false' title='Marcadores' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
  <span expr:dir='data:blog.languageDirection'>
    <data:label.name/>
  </span>
<b:else/>
  <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
    <data:label.name/>
  </a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

1 - Na linha

<h2><data:title/></h2>

O código <data:title/> deve ser substituído por:

<a href='javascript:void(0);' onclick='expandcollapse("marcadores")'><data:title/></a>

2 - A linha <ul> deve ser substituída por:

<ul id="marcadores" class="texthidden">

3 - Clique em SALVAR ALTERAÇÕES.

IMPORTANTE:A palavra 'marcadores' deve ser alterada sempre que colocar outro botão expansível e corresponder nas duas linhas a 1ª e a 2ª.
<ul id="_____" class="texthidden">► Esta é a identidade do seu botão expansível e devem iguais para as duas partes do código seu botão não expandirá.
Cada botão Expansível deve ter a sua Identidade.

Exemplo - Clique na figura para ampliar

Não Se Esqueça:
» Essas configurações demandam algum conhecimento em códigos HTML e CSS. Portanto:
♥ Sempre tente antes num blogue de testes.
♥ Salve o seu template antes de começar, clicando em Baixar modelo completo.
♥ Leia o tutorial até o fim e tenha certeza de ter entendido.

Obs: Estou republicando este post atualizado e corrigido, o post original foi publicado em 03/12/07 e foi apagado.