Lembrando que esse tuto é feito para a plataforma tumblr.
Bom, primeiramente adicione o código abaixo entre <head> </head>
<!--falso iframe--->
<script type="text/javascript">
function changeNavigation(id) {document.getElementById('NOMEDAID').innerHTML=document.getElementById(id).innerHTML}
</script>
No lugar de "NOMEDAID", preste bem, você deve adicionar o nome da id já existente em seu css que corresponde ao local que voce quer que seu falso iframe apareça. Exemplo: Se tu for olhar algum código de um theme meu, irá perceber que no css existe tres div de nome: "conteudo" "bloco-direito" "bloco-esquerdo". Bom, essas divs existem para deixar o theme bem organizado. Voltando ao iframe, no lugar do "NOMEDAID", se fosse em um theme meu você iria colocar ou "bloco-esquerdo" ou "bloco-direito", dependendo de onde voce queria que o iframe aparecesse.
<a onClick="document.getElementById('NOMEDAID').innerHTML=document.getElementById('NOME-DE-SUA-CLASSE-VOCE-QUE-ESCOLHE').innerHTML"> Exemplo (textos)</a>
Deu para entender? Acho que sim, qualquer coisa me grita ai. Vamos ao restante. No menu, ou onde você quer clicar e aparecer o iframe, tu ira adicionar o codigo abaixo:
Daí, antes de </body> tu adiciona o codigo abaixo:
<div id="NOME-DE-SUA-CLASSE-VOCE-QUE-ESCOLHE" style="display:none;">
<div class="CLASSE DE TUA CAIXA QUE JA EXISTE NO CSS">
AQUI APARECE O QUE TU QUER NA IFRAME</div>
<div class="CLASSE DE TUA CAIXA QUE JA EXISTE NO CSS">
AQUI APARECE O QUE TU QUER NA IFRAME</div>
</div>
Explicações:
- Então, você repete o codigo do menu, quantas vezes tu quiser. Tipo, uma vez para "contato", outra para "tumblr" (...)
- Lembrando que quantas vezes tu repeti esse código do menu, tu ira repeti o codigo ali do "antes do </body>".
- O nome "NOME-DE-SUA-CLASSE-VOCE-QUE-ESCOLHE" deverá ser um nome para cada "menu" criado.
- Vamos ver como ficaria o meu exemplo:
Lugar do menu:
<a onClick="document.getElementById('NOMEDAID').innerHTML=document.getElementById('contact').innerHTML"> Contato</a><a onClick="document.getElementById('NOMEDAID').innerHTML=document.getElementById('tumblr').innerHTML"> Tumblr</a><a onClick="document.getElementById('NOMEDAID').innerHTML=document.getElementById('about').innerHTML"> about</a>
Lugar do iframe, antes de body:
<div id="contact" style="display:none;">
<div class="box">
Ask aqui</div>
<div class="box">
Submit</div>
</div>
____________________________________________
<div id="about" style="display:none;">
<div class="box">
Aqui falo sobre mim</div>
</div>
____________________________________________
<div id="tumblr" style="display:none;">
<div class="box">
Aqui falo sobre o tumblr</div>
</div>
____________________________________________
Então, eu acredito que está bem explicado, mas se tiver alguma dúvida me chame.
Se usar dê like e me credite. Não reblogue!
