12 de ago de 2009

Marcador expandivel com imagens


Para quem quer saber como fiz esta lista de marcadores que se expande, saibam que peguei a dica com a Ariane, no Templates para o Novo Blogger. O que fiz foi inserir as imagens e modificar um trecho do código original, sendo assim, ele se expande automaticamente, ao passar o mouse por cima. Se vc quer um marcador assim é claro que a primeira coisa a fazer é instalar o widget de "Marcadores" em seu blog.
Para isso, vá até Layout-->Elementos de página--> Adicionar um novo gadget--> Marcadores.

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.



Feito isso, vá até o HTML de seu blog e clique em "Expandir modelos de widget", depois clique em "F3" no seu teclado, ao abrir a janela, escreva "Marcadores"(deve ser o titulo de seu widget).

Agora, veja um código igual a esse.


<b:widget id='Label1' locked='false' title='Marcadores' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
<b:if cond='data:display == &quot;list&quot;'>
<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>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
</li>
</b:loop>
</ul>
<b:else/>
<b:loop values='data:labels' var='label'>
<span expr:class='&quot;label-size-&quot; + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
</span>
</b:loop>
</b:if>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>




Agora troque todo esse código por este próximo, fazendo as alterações onde se pede.


<b:widget id='Label1' locked='false' title='Marcadores' 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/';
max_rc_posts = 500;
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='ENDEREÇO DA IMAGEM PASTA FECHADA'/><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='ENDEREÇO DA IMAGEM 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'></span> <a expr:onMouseOver='"showPostLabel(\"" + data:label.name + "\",event)"' href='javascript:void(0)'>&#9660;</a>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><img src='ENDEREÇO DA IMAGEM PASTA FECHADA'/><data:label.name/></a>
<a expr:onMouseOver='"showPostLabel(\"" + data:label.name + "\",event)"' href='javascript:void(0)'>&#9660;</a>
</b:if>
</li>
</b:loop>
</ul>

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


1-Escreva o endereço de seu blog
2-Coloque aí o endereço de sua imagem com a pasta fechada
3-Coloque aí o endereço da imagem de "Carregando"
4-Coloque aí o endereço da pasta aberta.
5-Endereço da pasta fechada



Abaixo algumas imagens para serem usadas em seu menu.
*Não copie, salve em seu PC e depois hospede em um site, como o Tiny Pic





14 comentários:

  1. Obrigada, Elke!
    Estava esperando por isso um tempão.
    Há muito que eu tinha o código da Ariane, mas estava querendo com essa modificação que aperfeiçoou de 1 à 1000! Ficou mais rápido e bonito. Sem querer desmerecer a Ariane que é fera e ensina a pescar muito bem. Que seria de nós bloggeiros sem a Ariane?!
    Bj, Deus te abençoe!

    ResponderExcluir
  2. estes godigos de html não tem em todos os templates*
    fikdik

    ResponderExcluir
  3. não existe todos esses codigos em meu layout do template u.u

    ResponderExcluir
  4. Muito obrigado Elke! Eu vi o marcador expansivel com imagem e fiquei curioso pra saber como se faz, e vc como sempre tirando nossas duvidas! É assim blog ajudando blog!!! Abraços fraternos!!!!

    ResponderExcluir
  5. gostei muito de conhecer seu blog vc é atenciosa com seu site parabens

    ResponderExcluir
  6. Uhuul! Funcionou perfeitamente!! :) Obrigado pelas maravilhosas dicas! ;) Não usei apenas esse tutorial no meu template, estou usando vários...

    www.blogdojonathaan.blogspot.com/

    ResponderExcluir
  7. se eu expandir meus widgets não vou peder tudo?

    ResponderExcluir
  8. Muito bom!...

    + Muito bom Mesmo...

    Vc está de parabéns.

    ResponderExcluir
  9. è d+ visita la meu blog www.templetesemusicas.blogspot.com

    ResponderExcluir
  10. cara eu to faseno mais nao da nao acontece nada

    ResponderExcluir
  11. eu fis isso e aogra ccomoo amostra as postagens
    kinen ass sua acessorios ai aparece os acessorios no meu tala marcadores ai chat para visitantes*
    ai eu cliko na cetinha fica carregano e nao para

    ResponderExcluir
  12. dps ki eu faser isso pra poder aparecer as postagen como eu faço???????

    ResponderExcluir
  13. Oi não tem o 4ºparenteses p/colocar a pasta fechada? eu consegui inserir as pastas, mas algo saiu errado, não mostra o ccarregamento e a pasta aberta com os subitens de cada marcador, me ajuda !!!!
    grata aguardo

    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