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('<style>.texthidden {display:none} </style>');</script><script type='text/Javascript'>function expandcollapse (postid) {whichpost = document.getElementById(postid);if (whichpost.className=="shown") {whichpost.className="texthidden";}else {whichpost.className="shown";}}</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>
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.
