Hoje vou ensinar a adicionar a famosa lista expansível mais conhecida como " menu sanfona " no blogger.
Para quem não conhece pode ver o resultado parcial aqui nas tags no Criar blog basta clicar na seta ( ►)
Vá em Layout > Editar HTML e Faça um Dowload do seu template para que caso ocorra algum erro ele não fique danificado.
Clique em expandir Widgets e procure pelo trecho:
<b:widget id='LabelX' locked='false' title='Menu(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>
Substitua o que está entre <ul> e </ul> por :
<script type='text/javascript'>
// <![CDATA[
home_page = 'http://SEUBLOG.blogspot.com/';
max_rc_posts = 5;
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)'>►</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)'>►</a>
</b:if>
</li>
</b:loop>
</ul>
Onde esta SEU BLOG digite apenas o nome do seu blog e onde esta max_rc_posts = 5 o número de posts que você quer que apareça quando o visitante clicar recomendo no máximo 10 pois quanto mais posts mais demora para carregar.
Para retirar os números do lado dos marcadores basta apenas procurar o techo <span dir='ltr'>(<data:label.count/>)</span> e apagalo
Para retirar os números do lado dos marcadores basta apenas procurar o techo <span dir='ltr'>(<data:label.count/>)</span> e apagalo
0 comentários:
Postar um comentário
- Todo comentário obsceno, ilegal, ofensivo, anônimo, escrito todo em maiúscula, contendo gírias em excesso ou estritamente publicitários, serão "apagados".
- Somente inclua links no comentário se ajudar a explicar o seu comentário.
- Se precisa de ajuda, procure deixar o máximo de informação possível.
- Não peça para adicionar ao MSN.
- Spam não será tolerado.