Os tutoriais e templates aqui apresentados são voltados para os Modelos de layout (lançados em 2006). A eficácia das dicas aqui apresentadas não foram testadas nos novos modelos de templates do Blogger (2010).

08 setembro 2008

Marcadores como lista expansível

Esta dica eu encontrei no excelente Vagabundia e vou repassar para vocês.

É possível transformar cada um dos seus marcadores em uma espécie de menu drop-down, ou seja, ao clicar em um marcador, será mostrado um determinado número de posts relacionado à ele. Testei no meu blog de receitas e o resultado pode ser conferido aqui.



1º Passo:

Vá em Ediat HTML, clique em Expandir Modelo de Widget e procure por:



<b:widget id='LabelX' locked='false' title='Título(Pode estar como Marcadores ou Labels)' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
.......
.......
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

As únicas coisas que estarão diferentes no seu código é o título que você deu ao gadget Marcadores (pode ter sido Marcadores mesmo, Labels, etc) e o número em Label (onde está LabelX).

2º Passo: Substitua tudo o que está entre <ul> e </ul> por:

<script type='text/javascript'>
// <![CDATA[
home_page = 'http://NOMEDOSEUBLOG.blogspot.com/';
max_rc_posts = 10;
function showentry(json){
var maxp = (max_rc_posts <= json.feed.entry.length) ? max_rc_posts : json.feed.entry.length;
var text = "<ul>";
for (var i = 0; i < maxp; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
text += "<li><a href='"+posturl+"'>" + posttitle + "</a></li>";
}
text += "</ul>";
document.getElementById("showItemLabel").innerHTML = text;
}
function showPostLabel(sPL_label,e){
var isDOM = (navigator.appName.match("Microsoft Internet Explorer") || navigator.appName.match("MSIE")) ? false : true;
var check = document.getElementById("showItemLabel");
if(check) {
if(!isDOM) { check.removeNode(true); }
else {check.parentNode.removeChild(check);}
}
var elm;
if(e.target) elm = e.target;
else elm = window.event.srcElement;
var div = document.createElement('div');
div.innerHTML = "";
div.id = "showItemLabel";
if(!isDOM) { elm.insertAdjacentElement('afterEnd', div); } else { elm.parentNode.insertBefore(div, this.nextSibling); }
var elm2 = document.getElementById("showItemLabel");
elm2.style.display = "inline";
elm2.innerHTML = "<br/>Carregando...";
var script = document.createElement('script');
script.src = home_page+"feeds/posts/summary/-/"+sPL_label.replace(/ /g,"%20")+"?start-index=1&max-results="+max_rc_posts+1+"&alt=json-in-script&callback=showentry";
script.type = "text/javascript";
document.getElementsByTagName('head')[0].appendChild(script);
}
// ]]>
</script>
<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 dir='ltr'>(<data:label.count/>)</span> <a expr:onclick='"showPostLabel(\"" + data:label.name + "\",event)"' href='javascript:void(0)'>&#9658;</a>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
<span dir='ltr'>(<data:label.count/>)</span> <a expr:onclick='"showPostLabel(\"" + data:label.name + "\",event)"' href='javascript:void(0)'>&#9658;</a>
</b:if>
</li>
</b:loop>
</ul>

Coloque o nome do seu blog onde está indicado no código. Você também pode alterar o número de postagens que serão mostradas, em max_rc_posts = 10; lembrando que quanto mais postas você determinar, maior será o tempo de carregamento da lista.
Para retirar a numeração ao lado do Marcador, como já foi ensinado aqui, apague a linha <span dir='ltr'>(<data:label.count/>)</span>
Você também podem substituir a seta que ao ser clicada expande a lista [ ► ]. Procure por ► no código e substitua por:
[ ▼ ]
[ ◄ ]

3º Passo: Estilo

Para dar estilo ao marcador, acrescente no CSS:
#LabelX ul { ....... }
#LabelX ul li { ....... }
#LabelX ul li a { ....... }

Não esqueça de substituir o X pelo número da Label

Para dar estilo à lista expandida, acrescente:

#showItemLabel { /* área completa da lista */ }
#showItemLabel ul { /* a lista */
padding:0;
margin:0;
}
#showItemLabel ul li { /* cada item da lista */
background-color: #343F4A;
list-style-image: url();
padding: 0 0 0 10px;
margin: 2px 0;
width: 85%;
}
#showItemLabel ul li a, #showItemLabel ul li a:visited { /* cada link da lista */
color: #FF9933;
font-weight: normal;
}
#showItemLabel ul li a:hover { /* efecto rollover sobre los enlaces */
color: #FFFFFF;
}

Obs: faça sempre qualquer experiência ou modificação em um blog de testes primeiro. Salve uma cópia do seu template antes de qualquer 'experiência'.

A estilização da lista requer um conhecimento básico de css que você pode aprender aqui.

Artigos Relacionados

61 comentários:

Provisório disse...

Ola...
muito boa a dica parabens...
sempre utilizo este blog...

uma pergunta...
como eu poderia alinhar a minha sidebar?
a minha segunda sidebar fica desalinhada...e vai para o meio do template...
gostaira muito que me ajudasse

Anônimo disse...

Ótima dica Ariane. Há bastante tempo procurava como deixar a lista de categoria expansível.

Abraço
Wallace

Anônimo disse...

Muito bom!
Estava hoje mesmo procurando algo sobre isso...

Só não consegui identificar qual parte eu mudo para alterar a seta, pois gostaria de usar uma outra diferente...

Agradecimentos a você, que tanto me salvou para a criação do meu blog =]

Anônimo disse...

Ah, e tem outro probleminha...
Depois que expandida, a lista não volta mais.

Tem alguma maneira de se resolver isto?

Ariane disse...

Web, basta clicar em outro marcador que a lista anterior se recolhe

Samuel disse...

poderia tambem apagar o "cargando entradas" e por "carregando..." apenas.. acho que fica melhor.. cargando entradas é estranho...

valeu pela dica.. ja está em meu blog ;))

Cláu disse...

Querida Ariane,
Há algum tempo tive a sorte de encontrar o seu blog, e venho acompanhando-o desde então. Devo dizer que você tem me ajudado muito na construção dos meus blogs, e que felizmente eu sou dessas pessoas que acreditam que é muito melhor aprender as coisas "na marra" do que ficar esperando que alguém nos entregue tudo mastigadinho. Então só me resta agradecer muuuuito, e te desejar toda a sorte do mundo! Um super beijo.

Unknown disse...

Olá Ariane,

Ótima postagem!!!

Gostaria de saber se você conhece algum código de Switch Menu (Menu Sanfona) em javascript

Abaixo segue um exemplo:

http://www.dynamicdrive.com/dynamicindex1/switchmenu.htm

OBS: Este código do exemplo não funciona no IE, somente no Firefox

Abraço e parabéns pelo trabalho

Anônimo disse...

Ariane,
Ao invés de ter que clicar na seta, não teria uma maneira dos artigos aparecem quando apenas se passa o mouse por cima da categoria/marcador?
Acho que facilitaria para os visitantes...
Valeu!

Rick Sardella disse...

Leitor assíduo!!! Muito bom!!!

Samuel disse...

eu insisto em dizer que este codigo está com um erro.. ele tem uma seta para baixo que faz esconder de volta as postagens relacionada.. eu achei um blog aki que tem isso, veja: http://blogdorovida.blogspot.com/

voce nao ta aceitando minhas postagens pq ?

Ariane disse...

Samuel, o que tem neste blog são os arquivos originais do blogger, não este código para os marcadores....tbem não publiquei os cinco ou seis comentários seguidos que vc fez, pois todos eram a variação de dois únicos, os que eu publiquei.

nani, andei quebrando a cabeça com isso tbém, mas ainda não obtive resultado. Mas, por hj chega que já está saindo fumaça das orelhas :-) assim q descobrir como, postarei. abraço!

Anônimo disse...

Ariane,
A Rô colocou no Blog a La Carte um tutorial de título "Menu drop-down simples na vertical". Apesar de não trabalhar com os marcadores/categorias, a Rô conseguiu esse efeito do mouse. Mas não sei em que parte do código disponibilizado estaria o efeito.
Abraços!

Fabio Inacio - Art Inc disse...

Ola Ariane, tudo bem...
Ontem recebi um selo de uma amiga, a Alessandra Attuy do blog
http://praamigos.blogspot.com/
gostaria de compartilhar essa alegria com você.
Por isso repasso esse selo e espero que goste...
Passa la no meu blog e pegue seu presente, repasse e compartilhe a alegria com seus amigos....
Um grande abraço....
Valeu!!!

Samuel disse...

Ok Ariane, mas eu nao disse que tinha lá o código... era só p voce ver..

a minha insistência nao é pq nao tem a setinha p baixo, porque essa setinha p baixo aparece no seu codigo e nao entendi pq nao aparece quando a gnte coloca.. tipo, se nao tivesse o codigo da seta p baixo eu nao ia falar nada..

[e esses "5 ou 6 comentarios" que voce disse na verdade sao exatamente 2]

e a sua comunidade do orkut, voce ainda tem ? [repetindo novamente ja q voce nao aceitou minha postagem 'rudundante']

Samuel disse...

voce tem o costume de humilhar as pessoas que vem aki e eu nao acho isso legal..

[a nao ser que faça parte da panelinha, dai voce trata bem]

Samuel disse...

não usei a palavra certa, eu quis dizer ridiculalizar

Mandy disse...

Como eu mudo o background do novo blogger?
Quero colocar um desenho e não consigo

Anônimo disse...

Ihh Ariane eu tenho umas 50 marcadores...sao muitas, nao vai ficar bom.
Eu e minha mania de criar uma label para cada post;

Mauri disse...

Ola! Gostaria de saber porque o texto dos posts do meu blogger ficam oculto ou não aparece isto acontece seguidamente,as vezes ficam visivel outras não e quando eu passo o mouse sobre o titulo do post o post se mexe.Aguardo

Mauri disse...

Ola!Gostariam de saber porque o texto dos posts do meu blogger ficam oculto desaparecem seguidamente dos meus posts e porque quando passo o mouse no titulo do post ele treme,Aguardo

Ariane disse...

Mauri, não vi suas postagens ficarem ocultas. O título se move pq há um erro no css. onde está .post h3 e .post h3 a, tem valores de padding diferente. sugiro que procure a Aurea, criadora do template.

SLdrew disse...

Que legal, muito útil pra mim, que tenho 'n' marcadores.
Sabe o que seria muito legal, também? Esse mesmo código pro 'Histórico de Postagens', por exemplo, nos marcadores, quando se clica em algum ele expande as postagens com aquele marcador, no histórico seria legal se clicasse no mês e ele expandisse as postagens daquele mês.
Interessante isso, valeu. :)

Andréia Sant'Anna disse...

Oi Ariane!
Há um tempo atrás peguei aqui uma dica de como fazer uma lista de postagens no marcadores; e voltei a procurar, mas não achei. (se vc puder visitar meu blog e acessar qualquer categoria no marcador, vc vai entender que dica que foi)
Enfim, gostaria de saber como aumentar o número de título de postagens pra aparecer na lista, porque minhas post mais antigas não aparecem, aparece somente 20.
Espero que vc possa me ajudar; e te agradeço desde já.
Bjos e tenha um ótimo final de semana.

Júnior M. Alado disse...

Olá Ariane! Mto boa essa materia! Ja estou implementando em meu site.
Vc poderia me dizer, se não for incomodo, se ja viu algum modo de colocar uma figura no post q representaria o autor do post? Tipo um avatar.

Meu amigo axou nesse site do blogger *http://hentai3xtreme.blogspot.com/*, mas naum conseguiu identificar no codigo-fonte como isso foi feito.
*Desculpe pelo site, mas foi o unico do blogger q vi com esse recurso.*

Ja pesquisei muito e só axei algo utilizando o Gravatar, mas só funciona no Wordpress.
Haveria outro jeito?
Desde já, obrigado!

Presidente disse...

Oi...
Primeiramente, PARABENS pelo excelente conteudo que tu colocou praticamente 25% do meu blog consigui montar pela ajuda do seu. Amiga, estou com um PROBLEMAO, nao consigo diminuir as letras da coluna lateral, EX: MARCADORES; ARQUIVOS; QUEM SOU EU ... E assim por diante, nao é o texto e sim o titulo (cabeçario). Estas letras estao muito grandes e ta "brabo" reduzir. Pelo WORD da para se comparar com o tamanho vinte e alguma coisa ... Segue abaixo uma parte de minha pagina para auxilio (pq ta brabo). Nao sei o que fazer. Preciso muito de tua ajuda.
Washington Assis
e-mail: washington_parana@ig.com.br
No Aguardo.
Obrigado

Presidente disse...

Boa tarde,
Nao entendo muito de programação, como faço para inserir esta CSS (o que coloco, como add?), ajudaime por favor ...

No Aguardo.
e-mail: washington_parana@ig.com.br

Samuel disse...

Ariane..

tem como colocar essa setinha assim no categorias, tipo.. voce clica e dai aparece todos os nomes das cateorias.. dai ficaria aparecendo só escrito "categorias" ???

Jhonny Rotten disse...

Que beleza ariane era tudo que eu queria

Unknown disse...

Muito obrigado pela dica!
Procurei por isso durante 2 horas, e já estava prestes a desistir quando achei seu post.
Parabéns pelo blog!

Unknown disse...

me ajuda ai onde eu acho um template como o seu .. abraço ..

     ★Isαbєℓαα★        disse...

Como eu coloco uma imagem em cada item da lista do indice? ajuuuda, por favor!

Diêgo J. disse...

O meu naum apareceu a seta???
O que foi q houve???

vinicius disse...

não cosegui fazer isso alguem por favor ajuda.

Clara Atelier disse...

Olá,parabéns pela iniciativa.
Tenho um atelier filantropico e com SUA ajuda e com a ajuda de meu netinho, tenho tentado montar um blog a exatamente 1 ano..rsrs..
Agora estou tentando fazer o indice tipo: kits infantis, ao invés do números descrever cada um deles por nome, fiz td que vc falou, mas não está dando certo. Será que vc poderia dar uma espiadinha para me dar uma luz WWW.CLARAATELIER.BLOGSPOT.COM
muito obrigada. bjs. mariangela

Ariane disse...

Um atelier...no começo do scritp há um espaço para você colocar o link do seu blog (dá uma olhada, está em negrito 'nome do seu blog'). Só está faltando isso no código que vc colocou em seu blog para que o hack funcione, ok? Abraços e sucesso com seu projeto!

Clara Atelier disse...

Olá Ariane, vc realmente é iluminada, além de responder prontamente ainda deseja sucesso ao meu projeto,linda...obrigada.
Enfim,apesar de toda sua gentileza.. não consegui...OLHO PARA AQUELE MONTE DE COISA ESCRITA, E AQUELE MONTE DE COISA ESCRITA OLHA PRA MIM...rsrsrs...ficamos nos olhando assim por um dia inteiro e não encontrei o lugar para por o nome do blog.
Aliás, perceba que nem o nome do meu blog aparece aqui..rsrsrs....
Paciência amiguinha, sou novata e meu professor é meu netinho de 10 anos...rsrsrs.
Mil bjs, obrigada, boa páscoa muita luz
Mariangela

Ariane disse...

Um atelier, não desista não!

Tá bem no comecinho do script que você teve que colar para o hack funcionar. Olha por aqui no tutorial, tá em negrito, ok?

abraços!

Clara Atelier disse...

Ah...minha linda, vc tem sido hiper atenciosa, obrigada. Tô tentando não desistir, aliás continuo tentando, é que fica muito difícil pra mim e para o meu neto,pois não sei o que é script, hack, tutorial, css etc...
E estou morrendo de medo de colocar coisa em lugar errado e estragar meu blog, que como lhe disse levei exatamente 12 meses para conseguir montar, e só ficou bonitinho,por que achei seu blog, que vem me direcionando, vou ter que procurar mais um pouco,pois a "minha parte escrita" está totalmente diferente a sua!!!??? e olha que não procurei ovos em compensação passei a pascoa procurando um tal de "link"...rsrsrs

bjssssssssssss

Rodrigo Ramos disse...

Não entendi o passo 3 em que lugar do css eu ponho codigo

Marcos Crecchi disse...

Oi Gostaria que vc me ensinasse aonde eu ponho o codigo do passo 3, que eu não entendi.

Igor Andrade disse...

Gostaria de aprende rmelhor

Anderson disse...

Gostaria de saber se tem como colocar sub-marcadores dentro de marcadores, eu usei o código e quando clico na seta abre as postagens, gostaria de saber como fazer para abrir sub-marcadores?
Obrigado

Anônimo disse...

Olá ótimo post, tenho a mesma dúvida quanto ao comentário do anderson sobre subcategorias ex: Filmes (comédia, ação....). E quanto ao Pr. Marcos Crecchi tambem tive problemas com o passo 3 acabei descobrindo é só colocar logo acima da tag ]]> /b:skin

Vidanopc disse...

Cara amiguinha, este hack funciona muito bem, porém peço-lhe uma ajudinha, na minha humilde ignorância não consegui encontrar o botão, peço que me ajude a encontrá-lo no codigo. pcdomijadinha@gmail.com


Obrigado

PS- Seu blog é bonito, as vezes eu o visito só para admirá-lo (não estou puxando o saco)elogio sincero.

lucas disse...

Olá, primeiramente agradeço pelo tutorial,não conssegui entender como realizar o 3º passo.
É só copiar o código, colocar e númera-los?
Desde já grato pela ajuda

Unknown disse...

OI tudo bem seu blog e otimo aki encontrei mutas coisas boas, agora esse passo 3, que eu não entendi, vc poderia me dar uma ajuda? á e a questão com o numeros de postagem por marcado já digitei onde vc disse para trocar o 10 pelo tanto de postagem que quero mas eu troquei e continua aparecendo só 10 olha meu blog http://bandagenesis1.blogspot.com/

Unknown disse...

ariane estou com problema na hora de colocar quantas postagem eu quero que mostra já tentei de todo jeito mas só aparece as 10 em uma a mais nem a menos me ajuda?

Anônimo disse...

Oi, colega! Já coloquei mais esse negoço no meu blog. Adoro suas dicas. Elas fazem o meu blog parecer coisa de profissional. Coitado de mim, se tiver de trocar de template! KKKKKKK

Igor Nascimento disse...

Olá, minha duvida também é com o 3º passo, você poderia ajudar?

Obrigado.

Unknown disse...

Boa Noite Ariane!

Muito bom o seu blog.Vou tentar seguir suas orientações para melhorar o meu, pois ainda estou começando.
Obrigada por disponibilizar tanta coisa boa.
Abraços!!!

Reginaldo disse...

Parabens Ariane, com seu blog ja sai do zero, ja sei fazer muitas coisas, aprendendo com quem entende.

Anônimo disse...

oi...otima dica...
Só tenho uma duvida...

nao conseguir localizar a seta ►. Revirei o HTML e nao encontrei mesmo...Eu queria substitui-la por ▼ nos marcadores...

vc poderia me ajudar??

V. disse...

Marlon,vê se você clicou em 'Expandir Modelo de Widget'...

Ariane, coloquei no meu blog, ok!? (COLOQUEI UM LINK PARA O SEU BLOG)

Se quiser ver o post é esse:
http://dicasbw.blogspot.com/2009/08/marcadores-como-lista-expansivel_20.html

Anônimo disse...

vlw victor...só que ainda assim não deu certo...
procurei essa setinha a torto e a direita e não encontrei...
mesmo clicando em ''expandir modelo de widget''

alguem pode ajudar aee?

(desculpa fica enchendo o saco)

Anônimo disse...

*-* Seu blogger me ajudou muitissimo mesmo, só fico triste por está função exelente que vc postou não tem a opção de esconder o marcador depois que clica, só clicando em outro. Mas parabens!

Anônimo disse...

Ariane, não tem um jeito de em vez que o link da setinha, o link ser diretamente no marcador? Ou, você acha que eu poderia trocar a setinha por algum outro item? Brigadão!

konan disse...

Maravilhoso esse topico, mas eu vou pedir uma coisa se as categorias que eu criei no marcador se tem como adcionar sub links nelas tambem pra ficar mais organizado aindo se tiver como gostaria que me ajuda-se.

Unknown disse...

No meu fica carregando e não sai do canto!!!

Rafael Lima disse...

Eu edito no HTML do blog ou no HTML/javascript ??

Unknown disse...

Olá Ariane. Eu to com um problema em relação a margem do widget, não aparece. Eu gostaria de saber como e onde por o CSS, vc podia ser mais detalhada. Ou fazer um post explicando.

Obrigado.

Veja o caso das margens no meu blog.
http://livroland.blogspot.com

Postar um comentário

Os comentários são moderados.