domingo, 20 de abril de 2014

Menu Accordion (sanfona)

Olá pessoas linda.
Vou colocar hoje um menu accordiano ou seja igual aquelas sanfona dos Velhos do intério. Enfim vamos ao que interessa o/ 

-1) Vá em layout e Clique em add gadgets Como sempre Use a opção Html/javascript 


E colé esse código abaixo 







Adicionando Ou Removendo itens do menu

Embora seja um código longo ele se repete varias vezes para criar cada item do menu e submenu (menu accordion), então para editar os links do menu recomendamos que faça por partes e salve as alterações a cada trecho que terminar de editar assim não correrá o risco de perder seu trabalho.

O trecho a seguir é repetido varias vezes apenas trocando os nomes dos links (texto que aparece no menu):

<li class="title"><a href="#" >Blogger</a></li> 
<li class="downlistie">
<ul>
<li><ahref="#" >Templates</a></li>
<li><ahref="#">Widgets</a></li>
<li><a href="#">Guides</a></li>
</ul></li></ul></li>


<li class="title"><a href="#" >Blogger</a></li>
 Altere somente o texto Blogger que será o texto visível no seu menu. Mas não apague o sinal # que está no lugar do link senão o menu não funciona.

Os itens do menu (links) que aparecem são as linhas:
<li><ahref="#" >Templates</a></li> 

Que você pode ver que são repetidas varias vezes apenas com um texto diferente, portanto edite cada uma delas trocando a palavra templates pelo que deseja mostrar no seu menu.

E também altere o link apagando o sinal # e colocando no lugar dele o endereço da pagina que deseja abrir quando alguém clicar no menu. Veja abaixo um exemplo deste trecho de código alterado com links do nosso site:


<li class="title"><a href="#" >Dicas para Blogs</a></li> 
<li class="downlistie">
<ul>
<li><ahref="http://www.hqmdesign.blogspot.com/p/novas-dicas-para-blog-atualizacoes.html" >Posts Recentes</a></li>
<li><ahref="http://www.hqmdesign.blogspot.com/p/dicas-para-blogs-no-facebook.html">Mais Curtidas no Facebook</a></li>
<li><a href="www.hqmdesign.blogspot.com/2010/03/mostrar-slides-com-as-postagens.html">Criar Slides</a></li>
</ul></li></ul></li>


Créditos :
Dicas Para blogs


0 comentários:

Postar um comentário