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.