Hey gente! é tão bom voltar a postar novamente :3 como estão vocês? espero que bem. Como estou de "férias" estou me organizando para o TF e outros projetinhos que estão por vir :3 em breve vocês irão saber.
Bom o post de hoje é bem rápido, um tutorial que alguém está cobrando na ask, peço sinceras desculpas por não ter postado antes ok? de verdade. Então, é o tutorial do famoso menu de abas, na postagem vou postar dois modelos diferentes ♥
Então vem.
Primeiro modelo
Esse é um "pouquinho" mais complicado (mentira gente,super fácil de fazer) São somente dois passos :
1 - Entre no HTML do seu blog, clique em alguma parte do código e dê ctrl+f, irá aprecer uma caixinha, nela cole <head> e logo ABAIXO desse código cole o seguinte;
<!--- 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>
2 - Em layout adicione um gadget de HTML/Javascript e nele 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>
Modifique onde se pede onde tem título (é o titulo obviamente) do texto, e onde fica conteúdo do menu você coloca o HTML do gadget que quiser (ex:afiliados) salve e pronto!
Segundo modelo
Esse é o modelo atual aqui do blog, gosto muito desses menus porque polpam bastante espaço, e deixam o blog mais organizado.
Esse é mais simples que o primeiro para instalar
Apenas um passo (você pode modificar a cor dos links)
Em layout adicione um gadget de HTML/Javascript e nele cole o código abaixo:
<script type="text/javascript">document.write('<style type="text/css">.tabber{display:none;}< \/style>');</style></script><script type="text/javascript" src="http://static.tumblr.com/dlelfro/DZqmha795/javascriptkw.js"></script><link rel="stylesheet" href="http://static.tumblr.com/dlelfro/Ic9mha75p/abas.css" type="text/css" media="screen" /><div class="tabber"><div class="tabbertab" title="Aba 1">Coisas da aba 1</div><div class="tabbertab" title="Aba 2">Coisas da aba 2</div><div class="tabbertab" title="Aba 3">Coisas da aba 3</div><div class="tabbertab" title="Aba 4">Coisas da aba 4</div><div class="tabbertab" title="Aba 5">Coisas da aba 5</div></div><br />
A parte em negrito é o css da cor dos links, (aqui no blog usamos roxo) para mudar é só substituir essa parte por algum dos codigos abaixo, lembre-se somente esse trecho.
(http://static.tumblr.com/dlelfro/Ic9mha75p/abas.css)
Linhas de css e cores:
http://static.tumblr.com/cxinapq/AbKmkp0le/menuazul.css
http://static.tumblr.com/cxinapq/9Uumkp0zs/menurosa.css
http://static.tumblr.com/cxinapq/ZlLmkp19x/menuverde.css
http://static.tumblr.com/cxinapq/P8Dmkp1ds/menuroxo.css
Modifique onde pede e salve! Eu recomendo editar em algum editor HTML antes de colocar direto no blogger, fica mais fácil para editar. Recomendo esse editor.
Créditos: Karine in Júpiter e Kawaii World
Oi c:
ResponderExcluirGostei muito dos modelos, o tutorial foi bem explicadinho :3
Acho que irei usar algum deles em um layout novo.
Até depois õ/
||Crazy Cake ||
Eu também adoro esses modelos :3 são super úteis
ExcluirOlá.
ResponderExcluirEu gostei dos dois modelos,mas principalmente do segundo.
Realmente gostei,pena que já terminei meu layout e instalei se não colocaria-o .
Realmente gostei do segundo modelo.
Sarang Cute
Eu gosto dos dois também, quando fiz o layout eu não lembrava onde /em que blog tinha o código do primeiro ai instalei o segundo ahauhaa é muito útil mesmo
ExcluirOi amôura... vim agradecer e retribuir a visitinha. Obrigada viu !
ResponderExcluirBeijão !
| O Blog Que Não é Blog |
| Sorteios Na Web |
| Cadastre-se no Egrana |
Oi querida! Obrigada!
ExcluirAdorei o tutorial , vou tentar fazer no meu blog de testes ai se der certo eu coloco e dou os devidos créditos *-*
ResponderExcluirBeijos Isa ♥
Visita ?
Uma Madrugada
Que bom que gostou querida ♥ é super fácil mesmo, com certeza dará certo
Excluiroi flor , adorei o post , o tutorial ficou ótimo , desculpe por não aparecer , mas é que eu estava sem internet !
ResponderExcluirbeijos
http://garotaantenadas2.blogspot.com.br/
Eu também estava sem internet esses dias, quem bom que gostou do post <3
Excluireu estava procurando esse tuto!
ResponderExcluirbjs
meninas na web {diversão,lays,tutos..é aqui}
Que bom que lhe será útil querida!
Excluiroiiin gente eu quero fazer rsrsr bem simples ^^
ResponderExcluirquero afiliaçao ><
visita----> estilonyu.blogspot.com.br
É super simples mesmo :3 voce vai adorar o resultado, o seu blog não está abrindo no meu navegador :(
ExcluirAmeii! Não sabia como fazia isso. Agora sei huhuah.
ResponderExcluirwww.creativep4nda.blogspot.com
Que bom que gostou querida! é muito fácil ahahsa
ExcluirQue fofo, adorei♥
ResponderExcluirMuito sucesso
http://sonhosejovens.blogspot.com.br/
já vi, fica lindo :3
ResponderExcluirhttp://thesweetmomentts.blogspot.com.br/
Sim, fica ótimo!
ExcluirOlá...
ResponderExcluir:)
Deixei um recado para você em:
http://jaquevirtual.blogspot.com.br/2015/03/look-do-dialooks-para-querer_22.html
Aguardo você no link acima....
Até, mais...
JaqueVirtual...
Olá querida! irei ver sim o recado, obrigada!
ExcluirEstamos de volta, de casa nova e já tem post novinho esperando por você!!
ResponderExcluirCurta a nossa página no Facebook, é só clicar: https://www.facebook.com/blogrolamuito
Muitos beijinhos..
♥ www.rolamuito.com
Que bom que voltaram! vou ver o blog agorinha!
Excluir