Usando falso iFrame

Novamente, hoje irei postar um tutorial que foi pedido através do formulários de sugestões. O tutorial ensina como fazer um “falso iFrame”.

A primeira coisa a fazer antes de começar o tutorial (por favor, não se esqueçam de fazer isso, pois depois não poderão reclamar que seus posts sumiram…): Guarde uma cópia do código do seu theme no seu computador.

Depois de salvar a cópia, você precisará descobrir qual o ID da DIV que delimita seus posts. Esta ID pode variar bastante de theme para theme, mas tem uma “dica” que pode te ajudar a descobrir:

Procure por {block:Posts} no seu theme, logo acima dele, deverá haver uma tag desta forma (não se esqueça que “{block:Posts}” pode aparecer várias vezes no theme, você tem que perceber quando é o certo): <div id=”NOME DA ID“>

Pronto, copie este nome da ID (guarde-o nom bloco de notas em algum outro lugar para não esquecer). Agora você precisará substituir o texto em negrito abaixo pelo NOME DA ID e colar o código antes de </head>:

<script type="text/javascript">
function changeNavigation(id) {document.getElementById('NOME DA ID').innerHTML=document.getElementById(id).innerHTML}
</script>

Agora, procure a parte do código onde você quer que apareça o menu para alternar entre os iFrames falsos, e cole isso:

<span onClick="changeNavigation('01')">Nome do link</span>
<span onClick="changeNavigation('02')">Nome do link</span>
<span onClick="changeNavigation('03')">Nome do link</span>

Obs.: O menu não se restringe a apenas 3 itens, para criar mais, basta copiar alguma das linhas do menu, aumentando apenas o número (por exemplo, para criar mais um, você deve por um com o número 04).

Agora cole isso antes de </body>:

<div id="01" style="display:none">
Conteúdo do iFrame 1
</div>

<div id="02" style="display:none">
Conteúdo do iFrame 2
</div>

<div id="03" style="display:none">
Conteúdo do iFrame 3
</div>

Obs.: Se você criou mais um item no menu, não se esqueça de criar mais um iFrame, para isso, basta copiar algum dos itens da lista de conteúdos e susbtituir o número (pelo mesmo número que está no menu).

Depois é só salvar =)

Este tutorial foi baseado em um tutorial deste Tumblr: She was Lo <33

E sugerido por este Tumblr: Chuva de Amor