Ooi pessoas c; Uma pessoa havia me pedido na ask um tutorial do menu do gadget "Extras" aqui do blog. Ele pode servir como créditos, ou o que vier á calhar para você.
Ele é bem simples, e é do blog Bad Reputation. Então se usar, credite ele e se quiser á mim tambem C: ashaus'
Vamos ao tutorial? Clique em Leia Mais
1º Vá em Modelo > Editar HTML > Prosseguir e aperte CTRL + F e pesquise por: <head>
2º Cole o código acima dá tag <head>:
<!--- 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>
3º Salve e vá para design > Adicionar um gadget > HTML/Javascript e cole o seguinte código onde você queira que o menu apareça:
<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>
Agora basta editar onde manda! Bem facinho! E caso você queira pular uma linha, igual onde tem os Créditos no meu, você escreve <br></br> na frente.
Por exemplo:
<div id="rabbit" style= "display:none">
Muito obrigada: <br></br>
Kawaii-World <br></br>
Jackie Dream <br></br>
</div>
Ou seja, o código <br> pula uma linha no html. Espero que tenham entendido e gostado! Se brotar alguma dúvida, eu estou aqui!
OMG! Seu blog é lindo! As cores... tudoo *O*
ResponderExcluirAwwwn que fofo o seu blog! Está de Parabéns viu? Este paraíso aqui, aaawn tudo de bom! ♥
Adorei o post sua Linda ~~ <3 Parabéns mesmo!!!! ^-^
Beijos e obrigada pela visita ^^
#Seguindo esta Belezura amore ~~ :3
kawaiitheworld.blogspot.com
OMMMG MUUUITO OBRIGADA *U* Eu amo MUIIITO seu blog *u* Muito obrigada mesmo pela visita *-----*
ExcluirAiin, que bom mesmo que gostou *u*
Muiito obrigada denovo KKK' #emocionada *--------------*
Aaain' adorei o Tuto o menu e lindo *-*
ResponderExcluirAaah eu percebi o novo lay hsuahsa, ficou lindo adorei !
aushaus' MUIIITO obrigada amre :3
Excluir