Os tutoriais e templates aqui apresentados são voltados para os Modelos de layout (lançados em 2006). A eficácia das dicas aqui apresentadas não foram testadas nos novos modelos de templates do Blogger (2010).

21 maio 2008

Hack para menu suspenso

Mais um que encontrei no Hackosphere; como transformar os Marcadores num menu suspenso. Para fazer esta mudança, será necessário mexer no código do template, por isso meus queridos, sempre, sempre antes de qualquer modificação, salvem uma cópia de seus templates ou testem antes, em blogs sem conteúdo. Visualizem várias vezes para se certificar de que está tudo ok no template, que não desapareceu nada e só então, salvem as modificações!

Para transformar a lista de Marcadores em um menu suspenso, (óbviamente você deverá primeiro já ter uma lista de Marcadores ativos em seu blog), vá no HTML do seu template, clique em Expandir Modelo de Widget e procure por este trecho do código (utilizem o ctrl+F para facilitar):

<ul>
<b:loop values="'data:labels'" var="'label'">
<li>
<b:if cond="'data:blog.url">
<data:label.name/>
<b:else/>
<a href="'data:label.url'"><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>

e substitua todo ele por:

<br />
<select onchange='location=this.options[this.selectedIndex].value;'>
<option>Selecione um marcador</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>


Vizualize e estiver do mesmo jeito que ficou meus marcadores aí na Sidebar, salve.

Então, como sou muito xereta, pensei em usar o mesmo hack para lista de links... Às vezes temos listas enormes na sidebar, sejam de parceiros, sejam de amigos, e que acabam ocupando um espaço quilometrico. Pensei que seria muito interessante usar este mesmo recurso para listas de links e como não encontrei nada a respeito no Hackosphere, fiz umas modificações, uns testes e deu certo. Então, para transformar uma lista de links em um menu suspenso, procure por este trecho:

<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='LinkList1' locked='false' title='' type='LinkList'>
<b:includable id='main'>

<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>

<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>



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

Substitua o que está em vermelho por:

<br />
<select onchange='location=this.options[this.selectedIndex].value;'>
<option>Select a label</option>
<b:loop values='data:links' var='link'>
<option expr:value='data:link.target'><data:link.name/>
</option>
</b:loop>
</select>

Visualize e se a lista de links tiver se tornado um menu suspenso, salve. Onde está Select a label você poderá colocar o título que quiser.

É isso.

Artigos Relacionados

28 comentários:

# Sampa.exe disse...

olá,tudo bem?
Dá pra aumentar o espaço da onde fica escrito "selecione seu marcador"??
Obrigado!^^

filipe bruck basso disse...

olá eu estava pensando esses dias e queria fazer um menu destes só que com os links das postagens do blog, só que não tenho idéia de como fazer, se você quiser se dispor a fazer porque acho que ainda não invetaram seria muito legal e ficaria grato.

Elba Pessanha disse...

Vim te agradecer por ter disponibilizado essa aula aqui.
Se puder, passe por meu blog e veja se gostou do resultado.
Eu achei que ficou bem bacana.
Obrigada.
P.S. Agora vou tentar colocar aquele menu horizontal, abaixo do título. :)

* disse...

Cara você é Demaisss!

QUERIDO DIÁRIO disse...

Oi, ando apanhando muito com esse negocio de blog, mas, acho fascinante. O meu blog era no modelo layout mas... sei la o que eu fiz e ele voltou ao modelo antigo e eu nao tenho a minima ideia de como fazer ele voltar no modelo layout. Mas, andei vendo no codigo html dele, pque eu queria fazer essa modificação que vc ensinou aqui, mas nao tem nada parecido com o que vc citou. Pode me ajudar?

Anônimo disse...

oi tudo bem? essa é a 3º vez que coloco um post no seu blog, espere que este apareça nas postagens, os codigos pra inserção de elementos nos blogs dão certo em qualquer template? pois estou tentando colocar um menu suspenso no meu blog e todos os códigos que tenho usado tem dado erro, nenhum dá certo, os códigos que vc apresenta no seu blog são para templates especificos? serve para qualquer template ou não? por favor responda a minha duvida, obrigado..

Anônimo disse...

oi tudo bem? estou a vario dias tentando colocar um menu suspenso em meu blog, e não estou conseguindo, os códigos que vc passa é para templates especificos? ou serve para qualquer template? pois qd vc cita um trecho do código a ser procurado eu não acho esse trecho no meu HTML, sempre dá erro, o q posso fazer? por favor responda a minha duvida..obrigado

Ariane disse...

ditao, não tem a ver com o template, mas com a widget. ela tem que estar instalada no template (marcadores, lista, o que for). Se vc colocou no blog, tem que estar lá.

Nério Júnior disse...

Olá Ariane!

Seu blog é muito útil para nós, simples blogueiros que não entendem de html.
Não encontrei esses códigons no meu template, expandi modelos de widgets e nada.

Obrigado!

Carlos Alberto Barreto Campelo de Melo disse...

pq o meu nunca da certo??? ja fiz ctrl+F e nd
é uma pena! podes me ajudar? ve ai http://www.musicanaboa.blogspot.com/

obrigado!!

Ariane disse...

Digo, no caso do seu blog, vc vai encontrar o código (depois de expandir modelo de widget) depois deste trecho:
<<div id="Label1" class="widget Label">

César disse...

Ariane, eu também não estou conseguindo...
Help me!

Tiago Wakabayashi disse...

Ariana-sama uma perguntinha: E para listas normais, que não são uma lista de links, tem alguma mudança a ser feita no código eu posso aplicar o mesmo código do "lista de links" para isso?

Anônimo disse...

Olá obrigado por seu trabalho, muito bom mesmo.

eu tenho uma duvida, eu coloquei o menu suspenso so que o menu suspenso ficou maior que meu layout, gostaria de saber se tem como eu diminuir o tamanho do menu?
agradeço desde já

A. Ilha disse...

Adoro teu blogue!

Bruno disse...

Poxa, eu queria fazer um menu do meu site mas tipo o desse blog, só que os códigos do hack não aparecem no modelo HTML do meu Blogger... =/

Denison Junior disse...

como alterar larguda e tamanho da lista?

ComputerDicas disse...

Muito bom, consegui fazer com minha lista de parceiros que estava enorme.

Parabéns pelo trabalho.

Ana Luiza disse...

Não achei essa parte do código. O template do meu blog é o Thisway
Blue. O que eu faço?

Anônimo disse...

Mto bom seu bloog, pego todas as dicas q vc tem no seu site p/ incrementaar meu blog. Vlw e continuue assim!

By: Mateus Rodrigues.

Tiago Sena disse...

Olha, bem que poderia ser dito que primeiro é preciso inserir uma gadget de marcador através do layout do blog.

Poxa vida tem uns 2 meses que to tentando fazer isso e não sabia que tinha que colocar a gad de marcadores.

Aff.

Ariane disse...

Tiago:

'Para transformar a lista de Marcadores em um menu suspenso, (óbviamente você deverá primeiro já ter uma lista de Marcadores ativos em seu blog), vá no HTML do seu template...'

se você leu e não entendeu aí é outra história, mas a informação está lá, logo no início do tutorial.

Adá disse...

oi ariane, acontece o mesmo comigo - de não encontrar o tal código -, expandi os modelos widgest e tudo.
o meu layout é dos sugeridos pelo blog, tem que ser com um template estilizado? está dica me salvaria. abraço

Adá disse...

então ariane, consegui! fala pro pessoal procurar 'manualmente' o cógido. eu tentava tentava e nada, daí dei um ctr+f e apenas 'label' e fui procurando até encontrar o tal código.
quando li esta postagem (burro do jeito que sou!) pensei que os marcadores ficariam como 'menu' no cabeçalho, mas essa opção me ajudou em outro blog, inclusive, tem como eu fazer isso? abraço

Débora Warrior Whosoever disse...

Oi, eu fiz esse passo a passo na minha lista de marcadores e na lista de links, porem nao ficou que nem o menu suspenso do arquivo do blog, achei que o titulo ficou muito longe do menu suspenso, tem como aproximar??
obrigada

Gustavo disse...

Muito obrigado

LucianoMende disse...

Não funciona em todos os templates, coincidentemente está funcionando em alguns.....

Emprego Dinheiro disse...

Obrigado pela partilha, parabéns

Postar um comentário

Os comentários são moderados.