• NATXHYPY's LAYSHOP

Tutorial: Iframe
Feito Por: Natxhypy

Iframe é uma espécie de sistema de links, em que as páginas do blog abrem no lugar dos posts. Aqui no Layshop do Natxhypy.zip.net tem Iframe, por exemplo, quando você clica em 'PSD's' eles abrem no lugar dos posts. Bom, Iframe não é tão fácil nem tão simples, mas também não é impossivel de se fazer (: Então vamos lá que eu vou ensina-los á fazer Iframe!

1. Primeiramente , temos que ter a parte que fica o lay.
Vamos fazer todo o HTML só que sem o código dos posts.
No lugar dos posts vai esse código:

<iframe src="http://www.PAGINADEIFRAMEAQUI!" width="410" height="575" frameborder="0" border="0" name="iframe" style="filter: chroma (color=#00FF00)"></iframe>

Agora vou explicar esse código ai de cima:
*Onde diz "http://www.PAGINADEIFRAMEAQUI!", você vai colocar o link da sua página de Iframe.
Pode ser subpágina ou um novo blog.

*Onde diz "style="filter: chroma (color=#00FF00)" , onde tá o símbolo da cor, (color=#00FF00), vamos colocar a cor que vai ser o plano de fundo que vai ficar transparente.

Depois, no HTML, abaixo dessa caixa que vai ficar, coloque esse código:

<%DEFINE POST_TEXT STRING NULL%> <%DEFINE POST_TITLE STRING NULL%> <%DEFINE POST_DATE STRING NULL%> <%DEFINE POST_USER STRING NULL%> <%DEFINE POST_DATE_HEADER STRING NULL%> <%DEFINE BLOG_POST_QTTY INTEGER 0%> <%DEFINE BLOG_LINK_QTTY INTEGER 0%> <%DEFINE LINK_URL STRING NULL%> <%DEFINE LINK_TITLE STRING NULL%> <%DEFINE BLOG_NEIGHBOOR_QTTY INTEGER 0%> <%DEFINE NEIGHBOOR_URL STRING NULL%> <%DEFINE NEIGHBOOR_TITLE STRING NULL%> <%DEFINE BLOG_OWNER_NAME STRING NULL%> <%DEFINE BLOG_CURRENT_DATE STRING NULL%> <%DEFINE ARCHIVE_DATE_BEGIN STRING NULL%> <%DEFINE ARCHIVE_DATE_END STRING NULL%> <%DEFINE ARCHIVE_LINK STRING NULL%> <%DEFINE BLOG_ARCHIVE_QTTY INTEGER 0%> <%DEFINE BLOG_ARCHIVE_LINK BOOLEAN FALSE%> <%DEFINE BLOG_ARCHIVE_PAGE BOOLEAN FALSE%> <%DEFINE BLOG_ARCHIVE_LINK_URL STRING NULL%> <%DEFINE BLOG_ID STRING NULL%> <%DEFINE BLOG_SCRIPT_URI STRING NULL%> <%DEFINE POST_ID STRING NULL%> <%DEFINE BLOG_EMOTICON_HEAD STRING NULL%> <%DEFINE BLOG_EMOTICON_BODY STRING NULL%> <%DEFINE BLOG_EMOTICON_FOOT STRING NULL%> <%DEFINE BLOG_VOTE BOOLEAN FALSE%> <%DEFINE BLOG_RECOMMEND_BLOG BOOLEAN FALSE%> <%DEFINE BLOG_RECOMMEND_POST BOOLEAN FALSE%> <%DEFINE BLOG_ACCEPT_COMMENT BOOLEAN FALSE%> <%DEFINE POST_HAS_COMMENT BOOLEAN FALSE%> <%DEFINE BLOG_TITLE STRING NULL%> <%DEFINE BLOG_TEXT_NO_COMMENT STRING Sem comentários%> <%DEFINE BLOG_TEXT_ONE_COMMENT STRING Um comentário%> <%DEFINE BLOG_TEXT_MORE_COMMENTS STRING Comentários%> <%DEFINE BLOG_COUNTRY STRING NULL%> <%DEFINE BLOG_STATE STRING NULL%> <%DEFINE BLOG_CITY STRING NULL%> <%DEFINE BLOG_DISTRICT STRING NULL%> <%DEFINE BLOG_REGION STRING NULL%> <%DEFINE BLOG_GENDER STRING NULL%> <%DEFINE BLOG_AGE STRING NULL%> <%DEFINE BLOG_LANGUAGE1 STRING NULL%> <%DEFINE BLOG_LANGUAGE2 STRING NULL%> <%DEFINE BLOG_INTEREST1 STRING NULL%> <%DEFINE BLOG_INTEREST2 STRING NULL%> <%DEFINE BLOG_INTEREST STRING NULL%> <%DEFINE BLOG_IM_TYPE STRING NULL%> <%DEFINE BLOG_IM_ID STRING NULL%> <%DEFINE BLOG_OWNER_MOOD BOOLEAN FALSE%> <%DEFINE POST_LINK STRING NULL%> <%DEFINE BLOG_HISTORY_LINK BOOLEAN TRUE%>

Esse código fica na página inicial, onde fica o lay com as postagens.
Agora se você for usar um novo blog para postagens, coloque esse código no novo blog (se for usar subpáginas para postar, não precisa esse código):

<html> <head> <SCRIPT> var zeroComm = "<%VAR BLOG_TEXT_NO_COMMENT%>"; var humComm = "<%VAR BLOG_TEXT_ONE_COMMENT%>"; var enesComm = "<%VAR BLOG_TEXT_MORE_COMMENTS%>"; var url; function abre(url,w,h,scr) { window.open(url,'comentarios','width='+w+',height='+h+',directories=0,location=0,menubar=0,resizable=0,scrollbars='+scr+',status=0,toolbar=0,marginleft=0,margintop=0,left=25,top=25'); } function commentText(qtd) { if(qtd == "0") {txtFinal = "("+qtd+") "+ zeroComm;} else if (qtd == "1") {txtFinal = "("+qtd+") "+ humComm;} else {txtFinal = "("+qtd+") "+ enesComm;} return txtFinal; } </SCRIPT>  <%IF BLOG_ARCHIVE_PAGE%> <%WHILE ARCHIVE_LINK%> <body bgcolor="#00FF00"> <a href="<%VAR ARCHIVE_LINK%>"><%VAR ARCHIVE_DATE_BEGIN%> a <%VAR ARCHIVE_DATE_END%></a> <%ENDWHILE%> <br><a href="index.html">voltar</a> <%ELSE%>  </table> <b><%WHILE POST_TITLE%> <script> dataPost = "<%VAR POST_DATE_HEADER%>"; if (dataPost != "") {document.write("<tr><td height=20 id=head><a name=<%VAR POST_ID%>></a><%VAR POST_DATE_HEADER%></td></tr>");} else {document.write("<tr><td id=head><a name=<%VAR POST_ID%>></a><%VAR POST_DATE_HEADER%></td></tr>"); } </script></b> <br> <%IFNOT POST_TITLE=''%> <b><%VAR POST_TITLE%></b> <br><%ENDIF%> <%VAR POST_TEXT%><br clear=all><br>- <span id=f>Postado por: <b><%VAR POST_USER%></b> às <%VAR POST_DATE%><br> <%IF BLOG_ACCEPT_COMMENT%>[ <a id=b href="javascript:abre('http://navblog.uol.com.br/comment.html?postFileName=<%VAR POST_ID%>&idBlog=<%VAR BLOG_ID%>','356','478','1');"><span id="post<%VAR POST_ID%>"></span> </a> ] <%ELSE%> <%IF POST_HAS_COMMENT%>[ <a id=b href="javascript:abre('http://navblog.uol.com.br/comment.html?postFileName=<%VAR POST_ID%>&idBlog=<%VAR BLOG_ID%>','356','478','1');"><span id="post<%VAR POST_ID%>"></span> </a> ]<%ENDIF%> <%ENDIF%> <%IF BLOG_RECOMMEND_POST%>[ <a id=b href="javascript:abre('http://navblog.uol.com.br/recommend.html?idBlog=<%VAR BLOG_ID%>&postFileName=<%VAR POST_ID%>','340','400','1');">Envie</a> ]<%ENDIF%>  [ <a href="<%VAR POST_LINK%>" class="permalink">Link</a> ]  <br clear=all><br> <p align="center"><b>~. Fim do Post .~ <br></b> <%ENDWHILE%> <%ENDIF%> <%IF BLOG_ACCEPT_COMMENT%><script src=<%VAR BLOG_SCRIPT_URI%>></script><%ENDIF%> <%IF BLOG_OWNER_MOOD%><script src="mood.js"></script><%ENDIF%> </span>  </DIV> </font> </span> </b> </BODY> </html> <%DEFINE POST_TEXT STRING NULL%><%DEFINE POST_TITLE STRING NULL%> <%DEFINE POST_DATE STRING NULL%> <%DEFINE POST_USER STRING NULL%> <%DEFINE POST_DATE_HEADER STRING NULL%> <%DEFINE BLOG_POST_QTTY INTEGER 0%> <%DEFINE BLOG_LINK_QTTY INTEGER 0%> <%DEFINE LINK_URL STRING NULL%> <%DEFINE LINK_TITLE STRING NULL%> <%DEFINE BLOG_NEIGHBOOR_QTTY INTEGER 0%> <%DEFINE NEIGHBOOR_URL STRING NULL%> <%DEFINE NEIGHBOOR_TITLE STRING NULL%> <%DEFINE BLOG_OWNER_NAME STRING NULL%> <%DEFINE BLOG_CURRENT_DATE STRING NULL%> <%DEFINE ARCHIVE_DATE_BEGIN STRING NULL%> <%DEFINE ARCHIVE_DATE_END STRING NULL%> <%DEFINE ARCHIVE_LINK STRING NULL%> <%DEFINE BLOG_ARCHIVE_QTTY INTEGER 0%> <%DEFINE BLOG_ARCHIVE_LINK BOOLEAN FALSE%> <%DEFINE BLOG_ARCHIVE_PAGE BOOLEAN FALSE%> <%DEFINE BLOG_ARCHIVE_LINK_URL STRING NULL%> <%DEFINE BLOG_ID STRING NULL%> <%DEFINE BLOG_SCRIPT_URI STRING NULL%> <%DEFINE POST_ID STRING NULL%> <%DEFINE BLOG_EMOTICON_HEAD STRING NULL%> <%DEFINE BLOG_EMOTICON_BODY STRING NULL%> <%DEFINE BLOG_EMOTICON_FOOT STRING NULL%> <%DEFINE BLOG_VOTE BOOLEAN FALSE%> <%DEFINE BLOG_RECOMMEND_BLOG BOOLEAN FALSE%> <%DEFINE BLOG_RECOMMEND_POST BOOLEAN FALSE%> <%DEFINE BLOG_ACCEPT_COMMENT BOOLEAN FALSE%> <%DEFINE POST_HAS_COMMENT BOOLEAN FALSE%> <%DEFINE BLOG_TITLE STRING NULL%> <%DEFINE BLOG_TEXT_NO_COMMENT STRING Sem comentários%> <%DEFINE BLOG_TEXT_ONE_COMMENT STRING Um comentário%> <%DEFINE BLOG_TEXT_MORE_COMMENTS STRING Comentários%> <%DEFINE BLOG_COUNTRY STRING NULL%> <%DEFINE BLOG_STATE STRING NULL%> <%DEFINE BLOG_CITY STRING NULL%> <%DEFINE BLOG_DISTRICT STRING NULL%> <%DEFINE BLOG_REGION STRING NULL%> <%DEFINE BLOG_GENDER STRING NULL%> <%DEFINE BLOG_AGE STRING NULL%> <%DEFINE BLOG_LANGUAGE1 STRING NULL%> <%DEFINE BLOG_LANGUAGE2 STRING NULL%> <%DEFINE BLOG_INTEREST1 STRING NULL%> <%DEFINE BLOG_INTEREST2 STRING NULL%> <%DEFINE BLOG_INTEREST STRING NULL%> <%DEFINE BLOG_IM_TYPE STRING NULL%> <%DEFINE BLOG_IM_ID STRING NULL%> <%DEFINE BLOG_OWNER_MOOD BOOLEAN FALSE%> <%DEFINE POST_LINK STRING NULL%> <%DEFINE BLOG_HISTORY_LINK BOOLEAN TRUE%>

Terminada a primeira parte vamos a segunda :D

2. Depois de terminada a primeira parte vamos ao segundo passo.
O segundo passo é menos "complicado" que o anterior.
É o seguinte:
Na segunda parte vamos fazer as subpáginas, que vão ficar no lugar dos posts ou da onde você vai colocar o seu Iframe.
Vamos lá.

Agora, vamos usar um código padrão que vai se ajeitar perfeitamente ao código que eu mostrei anterioramente. Esse código se chama CSS, ele vai fazer a barra de rolagem e os links terem uma cor legal nas subpáginas:

</script> <meta http-equiv="Content-Language" content="pt-br"> <STYLE type="text/css"> P, body, td, tr, div { font-style: normal; font-weight: normal; font-size: 10px; color: #000000; font-family: tahoma; line-height: 12px; } } a:link{color:#000000; text-decoration:none;} a:visited{color:#000000; text-decoration:none;} a:active{color:#000000; text-decoration:none;} a:hover { text-decoration: none; color: #000000; background:#D1D1D1; cursor: hand; }--></style>  <body link="#000000" vlink="#666666" alink="#000000" bgcolor="#00FF00"> <p><font face="Verdana" size="1">a</font></p>

É só colocar ele na subpágina que ele vai fazer o trabalho dele (:

3. Agora vamos fazer os Sistema de Links.
O que seria os sistemas de Links?
Seriam os links que abririam dentro ou fora do seu Iframe.
PS: a única diferença dos links é que se você quer que abra fora do Iframe acrescenta target="_blank" após o link, e se quiser que abra dentro acrescenta target="Iframe" após o link..
Veja os códigos:

PARA FOTOS:
Para fotos abrirem dentro do Iframe:
<p>
<a href="http://www.LINK-DA-FOTO-AQUI!" target="Iframe">
<img border="0" src="" width="" height="400"></a></p>

Para fotos abrirem fora do seu Iframe:
<p>
<a href="http://www.LINK-DA-FOTO-AQUI!" target="_blank">
<img border="0" src="" width="" height="400"></a></p>

PARA PÁGINAS OU SITES:
(Esse código você usa para por exemplo colocar no seu menu "HOME" e você quiser que sua page Home abra dentro ou fora do Iframe).
Para abrir fora do Iframe:
<p><a href="http://www.LINK-DA-FOTO-AQUI!" target="_blank">NOME DO SITE AQUI!</a></p>

Para abrir dentro do Iframe:
<p><a href="http://www.LINK-DA-FOTO-AQUI!" target="Iframe">NOME DO SITE AQUI!</a></p>

Bom, acho que Sobre Iframe é isso (: Qualquer dúvida que você tiver, envie um e-mail para nathaliasaidellescunha@yahoo.com.br que eu responderei o mais rápido possivel (: Caso tenha aprendido Iframe aqui, não se esqueça de linkar o blog nos créditos, para que outras pessoas também possam aprender (: