Marcadores em forma de menu expandível no novo Blogger

DEMO

Ter o marcador em forma de menu que se expande pode facilitar tanto para vc, quanto para seu visitante. lém de ficar bonito, fica muito organizado.


Vá até o Modelo de seu blog, clique em Editar modelo

Agora se a sua coluna é a esquerda procure por:


<b:section-contents id='sidebar-left-1'>


Se a sua coluna fica a direita procure por:


<b:section-contents id='sidebar-right-1'>


E coloque este código abaixo, depois do código citado acima. Não se esqueça de colocar o endereço de seu blog no local destacado em vermelho. Salve e prontinho.

<b:widget id='Label14' locked='false' title='Marcadores expandivel com imagem' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<script type='text/javascript'>
// <![CDATA[
home_page = 'ENDEREÇO DE SEU BLOG AQUI';
max_rc_posts = 2000;
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><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQWIY4ODAJa8TvfxWfZXnz4JQsoTHNIO6yqoeSj2ZakZBk4-3XtM-thWzZFFESkHcNDuLqmqam2yKgkFJ1UxNcRik948BXdOMpQ0jQ2kWAOGRZdbU7dzzx8h6PZd0ORXpPfpPeEZFpvwpF/s320/folder_open_16x16.gif'/><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/><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwO-BMheAL0JAs89pl47qh9QsbzT7MMX3nrltA_iC_0E6grdxJn1YKGVCjuyA1GFkc5Txxhtg85_R-cCdG7Q3sCfj31eaxt4Yvw32e70muKskNFyQsfJrxBtXJhmT7q1PsraWrHM565qQ/s1600/ev865e.gif'/>";
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'/> <a expr:onMouseOver='&quot;showPostLabel(\&quot;&quot; + data:label.name + &quot;\&quot;,event)&quot;' href='javascript:void(0)'>&#9660;</a>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEIG2rbAEHAOKf5XqUdrgki52_4hxvlXKdp-hMZXLIixIEH0k58k52GruOgmnW4yLYcglRsy_mwBOOMNxUcuzUpvy1tS9c6TdDr5qMPNbx0Xc15CQrNGPBDb9RBgeoLPENpnMYpT61ajA/s1600/folder_%2528add%2529_16x16.gif'/> <data:label.name/></a>
<a expr:onMouseOver='&quot;showPostLabel(\&quot;&quot; + data:label.name + &quot;\&quot;,event)&quot;' href='javascript:void(0)'>&#9660;</a>
</b:if>
</li>
</b:loop>
</ul>

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

Salve. Agora antes de:

]]></b:skin>

Cole o código abaixo:

/*Menu expandivel--------------------------------------------------*/
#Label14{
background: #fff;
border: 1px solid #ccc;
-webkit-box-shadow: 0px 0px 20px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 0px 20px rgba(0,0,0,0.4);
box-shadow: 0px 0px 20px rgba(0,0,0,0.4);
}
#Label14 h2{
font-size: 14px;
text-shadow: 1px 1px 1px #fff;
background: #ccc;
}
#Label14 li{
margin-left: -18px;
list-style-type:none;
border-bottom: 1px solid #eee;
}
#Label14 a{
color: #808080;
}
#Label14 a:hover{
color: #cc0000;
}

Gostou? Comente e Vire Um Seguidor!!