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.
Marcadores que Expandem Marcadores que Expandem Reviewed by Áurea on 12/15/2008 Rating: 5

8 comentários:

  1. Aurea, vim te desejar um Feliz Natal, um ano de 2009 maravilhoso e muita felicidade.

    Bjs no seu coração e inté ano que vem!

    ResponderExcluir
  2. Oii!
    Eu mais uma vez aqui para pedir uma ajudinha!
    kapokpaokpaokapo

    Eu estou com um probleminha no meu template, esse foi eu que fiz, e ficou perfeito no google chromes, mas no IE as colunas dele que era para ficar ao lado uma da outra ficam uma em cima e outra em baixo, será que vc poderia me dar uma ajudinha pra ver se consigo enfim resolver isso??

    Kisses
    Bom Natal!

    ResponderExcluir
  3. olha só sempre que fizerem uma postagem , insiram uma imagem de como ki fik o produto final, pois eu naum sei como que fica esse Marcadores que Expandem e nem esse Menu Expansível. Ai tipo, desanima o leitor a continuar lendo!!..flw..

    ResponderExcluir
  4. Eu uso imagens nos títulos dos marcadores, como você pode ver no meu blog. No caso de eu seguir este tutorial, como faço para manter as imagens nos títulos, teria como?

    É que com o tempo foram aumentando os marcadores, e veja só como a lista está imensa, fica difícil as clientes conseguirem ter acesso ao conteúdo de interesse, tem que ficar procurando e isto é bem chato...

    Desde já agradeço, gostei muito do blog e dos tutoriais. Bjs

    ResponderExcluir
  5. @Aline
    Atualizei o post de Lista de Links Expansível que pode ajudar você a fazer o que deseja.

    ResponderExcluir
  6. Muito Obrigada Aurea, com sua ajuda consegui melhorar bastante o visual do meu blog. Vai lá dar uma olhadinha! Bjs

    ResponderExcluir
  7. Ah é verdade, eu esqueci mesmo de colocar a setinha para baixo nas imagens... Vou fazer isto! Obrigada por tudo e tenha uma ótima semana! Bjks

    ResponderExcluir

Todos os comentários são lidos e moderados antes da publicação.
Para que seu comentário seja publicado leia a Política de Comentários do Blog no post Regras do Blog

Tecnologia do Blogger.