Tutorial - Menu Falso I-Frame


Konnichiwa, minna-san. (≧ω≦)/ Peço perdão a quem tanto esperava por este tutorial. Eu acabei molengando ontem e nem terminei de prepará-lo para ir ao ar. Sinto muitíssimo e peço que compreendam que eu tenho minhas necessidades e obrigações no "mundo real". Prometo tentar ser mais rápida.

Enfim, eu finalmente trouxe o tutorial do menu Falso I-Frame. Eu achei-o no antigo Empire PS, que fechou não muito mais de 2 meses. Felizmente, eu havia postado o tutorial no Beijos XOXO e o tinha salvo por aqui, no meu computador. Quase que o perdi, mas ainda o terei aqui no blog. Vamos?



Postagens Não Separadas:

Passo 1: Vá em Modelo > Editar HTML > Expanda a primeira setinha.
Passo 2: Dê Ctrl F ou F3 e procure por </head> e cole o seguinte código acima da tag:

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

Passo 3: Agora dê, novamente, Ctrl F ou F3 e procure por:

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='false' title='Postagens no blog' type='Blog'/>
</b:section>  

Quando encontrar o código acima, antes de abrir o <b:section [etc...] </b:section>, cole um <div id='frameph'> e no final um </div>, ficando deste modo:

<div id='frameph'><b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='false' title='Postagens no blog' type='Blog'/>
</b:section></div> 

Passo 4: Procure por /body e, acima da tag, cole o código abaixo:

<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>

Altere as partes destacadas em negrito, como se isso já não fosse de rotina.

Passo 5: Agora vá aonde quer que o menu localize-se e cole o seguinte código:

<span onclick="changeNavigation('01')"><CLASSEDOSEUMENU>Nome</CLASSEDOSEUMENU></span>
<span onclick="changeNavigation('02')"><CLASSEDOSEUMENU>Nome</CLASSEDOSEUMENU></span>
<span onclick="changeNavigation('03')"><CLASSEDOSEUMENU>Nome</CLASSEDOSEUMENU></span>

Caso não saiba o que é a classe do menu, clique aqui e visualize a imagem explicativa. Caso queira fazer o seu próprio menu, venha aqui e veja o tutorial que fiz ensinando a criar o seu próprio.

Postagem Separadas:



Volte e faça todos os três primeiros passos, caso possua as postagens separadas. Depois, dê Ctrl F ou F3 e procure por ]]></b:skin> e, acima da tag, cole o código abaixo:

.posts {
overflow: hidden;
text-align: justify;
color: #888;
font: 10px verdana;
background-color: white;
padding: 5px;
line-height: 19px;
box-shadow: 0 8px 6px -6px #BFBFBF;
border-radius: 3px;

Dê, novamente, Ctrl F ou F3 e procure por /body. E, assim, cole o seguinte código acima:

<div id='01' style='display:none'>
<div class='posts'>Conteúdo do iFrame 1</div>
</div>
<div id='02' style='display:none'>
<div class='posts'>Conteúdo do iFrame 2</div>
</div>
<div id='03' style='display:none'>
<div class='posts'>Conteúdo do iFrame 3</div>
</div> 

Altere as partes em negrito, como se isso já não fosse de rotina, de acordo com o que quer que apareça em cada aba do seu menu. Depois volte e faça o 5º Passo da primeira parte do tutorial e edite nas áreas indicadas.

Espero que consigas :3
Ana >3<

7 comentários:

  1. Nossa, nunca tinha visto esse tutorial o_o Bem fácil, até, UHSHUSA' c:

    Beijos,

    Juu-Chan do Nescau com Nutella.

    ResponderExcluir
    Respostas
    1. Ele é meio difícil de achar e passar para o Blogger. Sendo assim, é pouco achado na blogosfera e mais facilmente encontrado no Tumblr.

      É, até que é bem fácil. Mas postar o tutorial é um pouco extenso.

      Excluir
  2. Adorei o tuto. E o menu fica fofs ;3 Bjs, Dazzle ♥

    ResponderExcluir
  3. Não conheço, mas vou testar. Beijos, alpaca <3

    semprefuiestranha.blogspot.com | SEMPRE FUI ESTRANHA

    ResponderExcluir
  4. Nunca tinha visto esse tuto, é bem... Fofo! <3

    - HTML Secret

    ResponderExcluir