2 de jul de 2013

Tutorial - Menu "Extras"


 Com duas maneiras de colocá-lo, é uma ótima opção para economizar espaço em seu blog (encher seu blog de gadgets muitas vezes dispensáveis não é uma boa ideia).
 Aqui um "menu" que ajuda MUITO na organização do lay, trouxe dois modelos dele.
 Nós já estamos utilizando ele:




1º Método do site: Califórnia Girl.



Vá em seu HTML, dê Ctrl+F e procure por <head>
Colando logo abaixo


<link href='http://naah-oliver.zip.net/menu2.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='http://poisonedapple.awardspace.us/tabber.js' type='text/javascript'/>


Vá em um Gadget, escolha HTML/JavaScript e cole:


<!-- Ínicio Menu Abas ~ By Drikoti.Net -->
<div class="tabber">
<div class="tabbertab" title="Aba 1">
<br>
Conteúdo 1
</>
</div>
<div class="tabbertab" title="Aba 2">
<br />
Conteúdo 2
</div>
<div class="tabbertab" title="Aba 3">
<br />
Conteúdo 3
</div>
</div>
<!-- Fim Menu Abas ~ By Drikoti.Net -->
<center><br />


Aba1
Aba2
e Aba3
É o título, é o que irá aparacer escrito.
Enquanto que
Conteúdo 1
Conteúdo 2
e Conteúdo 3
São os códigos que você irá colocar para aparecer ao clicar no título.

2º Método do site: Have Things



ao clicar em uma das opções:




Vá em seu HTML, dê Ctrl+F e procure por <head>
Colando logo abaixo

<!--- Menu Deslizante -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script src='http://static.tumblr.com/ghoye6x/xBmloszst/colpaso.js' type='text/javascript'>
</script>
<script type='text/javascript'>
animatedcollapse.addDiv('jason', 'fade=1,height=80px')
animatedcollapse.addDiv('kelly', 'fade=1,height=100px')
animatedcollapse.addDiv('michael', 'fade=1,height=120px')
animatedcollapse.addDiv('cat', 'fade=0,speed=400,group=pets')
animatedcollapse.addDiv('dog', 'fade=0,speed=400,group=pets,persist=1,hide=1')
animatedcollapse.addDiv('rabbit', 'fade=0,speed=400,group=pets,hide=1')
animatedcollapse.addDiv('lion', 'fade=0,speed=400,group=pets,persist=1,hide=1')
animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
 //$: Access to jQuery
 //divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
 //state: "block" or "none", depending on state
}
animatedcollapse.init()
</script>

Vá em um Gadget, escolha HTML/JavaScript e cole:

center><a href="#" rel="toggle[rabbit]" data-openimage="collapse.jpg" data-closedimage="expand.jpg">Título 1</a> |<a href="#" rel="toggle[dog]" data-openimage="collapse.jpg" data-closedimage="expand.jpg">Título 2</a> |<a href="#" rel="toggle[cat]" data-openimage="collapse.jpg" data-closedimage="expand.jpg">Título 3</a></center><div id="rabbit" style="display:none">Conteúdo do Menu Deslizante 1</div><div id="dog" style="display:none">Conteúdo do Menu Deslizante 2</div><div id="cat" style="display:none">Conteúdo do Menu Deslizante 3</div>


Espero que tenham gostado e ajudado.

6 comentários:

  1. Adorei os menus, acho que um menu facilita bastante já que deixa o layout mais leve
    beijos

    ResponderExcluir
    Respostas
    1. Exatamente, esses servem para diminuir a quantidade de gadgets, muito úteis XD

      Excluir
  2. Ola, estou participando de um concurso cultural do blog A garota da casa das 12, e se vc ler a minha historia e gostar,vota em mim.

    Minha historia "A Lenda de Welville"
    Desde já obrigada!

    Link do concurso:http://agarotadacasa12.blogspot.com.br/2013/07/historias-do-concurso-para-votacao.html

    Beijos eternos

    "PRINCESA do ROCK!"

    ResponderExcluir
  3. Tem tag para vc no meu blog .
    http://diariodapricessadorockoficial.blogspot.com.br/
    Beijos eternos

    "PRINCESA do ROCK!"

    ResponderExcluir
    Respostas
    1. Obrigada, Ca, já recebi essa tag também de outros dois blogs XD

      Excluir

Não saia sem comentar!
Comentando vocês nos incentiva a continuar postando e podemos saber de sua opinião quanto ao post e/ou o blog!

OBS: Por favor. Vamos manter a postura.
Sem xingamentos com palavras de baixo calão