Marcadores Expandíveis

Sabe, aqueles marcadores com uma setinha na frente, que quando você aparece o contéudo do marcador embaixo?

Pois será desse tipo de marcador que estaremos falando:


1. Vá em Layout>Editar HTMLclique em "expandir modelo de widgtet" e procure por esse código:

<b:widget id='LabelX' locked='false' title='Labels(Bom agora em Labels depende do nome que estiver, marcadores etc)' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
lt;h2><data:title/></h2>
</b:if>
<div class='widget-content'>

<ul>

.......
.......

</ul>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

A única diferença é o nome que estara em label, e no label X que será o número em label.

Agora ache essas duas tags <ul> e <ul> selecione tudo o que esta entre essas duas tags, e substitua por isso:
 


<script type='text/javascript'>
// <![CDATA[
home_page = 'http://URL DO BLOG.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>


Aonde esta URL DO SEU BLOG coloque, o nome de seu blog, e o que esta em azul, substitua pelo número de posts que apareçam quando clicarem na setinha. Lembre-se de não estrapolar no número de posts, pois quanto mais posts colocar, mais lento ficará para aparecer as posts.

Pronto, agora você já tem seu marcador Expandível.

Customize sua lista como quiser.EX

#showItemLabel { /* Área da lista*/ }
#showItemLabel ul { /* a lista */
padding:0;
margin:0;
}
#showItemLabel ul li { /* itens 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 { /* cor do link*/
color: #FF9933;
font-weight: normal;
}
#showItemLabel ul li a:hover { /* efeito hover da lista *
color: #FFFFFF;
}