Autor: Arthur Vinicius | Publicado: 2011-08-26T16:48:00-07:00





&nbsp;Esta dica eu encontrei no Velho e Bom Site TemplatesNovoBlogger&nbsp;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.1º Passo:Vá em Editar HTML, clique em Expandir Modelo de Widget e procure por:
&lt;b:widget id='LabelX' locked='false' title='Título(Pode estar como Marcadores ou Labels)' type='Label'&gt;&lt;b:includable id='main'&gt;&lt;b:if cond='data:title'&gt;&lt;h2&gt;&lt;data:title/&gt;&lt;/h2&gt;&lt;/b:if&gt;&lt;div class='widget-content'&gt;&lt;ul&gt;..............&lt;/ul&gt;&lt;b:include name='quickedit'/&gt;&lt;/div&gt;&lt;/b:includable&gt;&lt;/b:widget&gt;
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:&nbsp;Substitua tudo o que está entre&nbsp;&lt;ul&gt; e &lt;/ul&gt;&nbsp;por:&lt;script type='text/javascript'&gt;// &lt;![CDATA[home_page = 'http://NOMEDOSEUBLOG.blogspot.com/';max_rc_posts =&nbsp;10;function showentry(json){var maxp = (max_rc_posts &lt;= json.feed.entry.length) ? max_rc_posts : json.feed.entry.length;var text = "&lt;ul&gt;";for (var i = 0; i &lt; 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 &lt; entry.link.length; k++) {if (entry.link[k].rel == 'alternate') {posturl = entry.link[k].href;break;}}text += "&lt;li&gt;&lt;a href='"+posturl+"'&gt;" + posttitle + "&lt;/a&gt;&lt;/li&gt;";}text += "&lt;/ul&gt;";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 = "&lt;br/&gt;Carregando...";var script = document.createElement('script');script.src = home_page+"feeds/posts/summary/-/"+sPL_label.replace(/ /g,"%20")+"?start-index=1&amp;max-results="+max_rc_posts+1+"&amp;alt=json-in-script&amp;callback=showentry";script.type = "text/javascript";document.getElementsByTagName('head')[0].appendChild(script);}// ]]&gt;&lt;/script&gt;&lt;ul&gt;&lt;b:loop values='data:labels' var='label'&gt;&lt;li&gt;&lt;b:if cond='data:blog.url == data:label.url'&gt;&lt;span expr:dir='data:blog.languageDirection'&gt;&lt;data:label.name/&gt; &lt;span dir='ltr'&gt;(&lt;data:label.count/&gt;)&lt;/span&gt; &lt;a expr:onclick='"showPostLabel(\"" + data:label.name + "\",event)"' href='javascript:void(0)'&gt;&amp;#9658;&lt;/a&gt;&lt;/span&gt;&lt;b:else/&gt;&lt;a expr:dir='data:blog.languageDirection' expr:href='data:label.url'&gt;&lt;data:label.name/&gt;&lt;/a&gt;&lt;span dir='ltr'&gt;(&lt;data:label.count/&gt;)&lt;/span&gt; &lt;a expr:onclick='"showPostLabel(\"" + data:label.name + "\",event)"' href='javascript:void(0)'&gt;&amp;#9658;&lt;/a&gt;&lt;/b:if&gt;&lt;/li&gt;&lt;/b:loop&gt;&lt;/ul&gt;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&nbsp;max_rc_posts =&nbsp;10;&nbsp;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&nbsp;&lt;span dir='ltr'&gt;(&lt;data:label.count/&gt;)&lt;/span&gt;Você também podem substituir a seta que ao ser clicada expande a lista [ ► ]. Procure por ► no código e substitua por:▼&nbsp;[ ▼ ]◄&nbsp;[ ◄ ]3º Passo:&nbsp;EstiloPara dar estilo ao marcador, acrescente no CSS:#LabelX&nbsp;ul { ....... }#LabelX&nbsp;ul li { ....... }#LabelX&nbsp;ul li a { ....... }Não esqueça de substituir o&nbsp;X&nbsp;pelo número da LabelPara 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:&nbsp;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

Valeu Galera Um Abraço a Todos!

Céditos: TemplateNovoBlogger