21 de ago de 2011

Marcadores em forma de menu expandível no novo Blogger


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
  Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011
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='http://4.bp.blogspot.com/_FXIne2ZDJII/SoNssr9MaQI/AAAAAAAABDI/88yCb4lpiaY/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='http://2.bp.blogspot.com/-pE5jdRAnJ5w/TlBy1MnS76I/AAAAAAAAAnw/TdXIGbd1aMY/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='http://3.bp.blogspot.com/-2KMa_GtrTGs/TlBxyWSHXJI/AAAAAAAAAns/C9hUCG_h8_s/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;
}

Um comentário:

  1. Oi Elke,
    menina me diz como eu faço pro menu voltat,
    quando o bicho se expande não volta mais.

    ResponderExcluir

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube