Papo de Princesa ______ Tutoriais _____

Colocando Iframe

O que é um Iframe

Um exemplo de Iframe é este que tem aqui no blog, quando clicamos em algum link do menu, ele abre no meio da página, sem mudar a URL (observe a barra de endereço).

Como fazer

Para você ter o iframe é preciso de 2 blogs! Um é para ficar o layout do blog (seu perfil, menu, reloginho, calendário etc) e o outro é para colocar as postagens. Então vamos lá...

1º) Faça o 1º blog só para o layout. ex: http://www.papodeprincesa.zip.net

2º) Faça o 2º blog só para as postagens. ex: http://www.papodeprincesapost.zip.net

3º) No blog de postagens você vai precisar de um código HTML para sua página. Abaixo tem o modelo que você precisa, copie o HTML de acordo com o seu servidor e salve (como se fosse o layout) no blog de postagens.

Uol (zip.net)

<html>
<head>

/*JavaScript error stopper-for javascript
capable browsers compliments of ghost,
©ghostc@mediaone.net
*/

function stoperror(){
return true
}

window.onerror=stoperror

</script>

<STYLE type=text/css>
BODY,TABLE,TR,TD,P,DIV,SPAN {
	font-style: normal;
	font-weight: normal;
	font-size: 11px;
	color: #808080;
	font-family: tahoma;
        line-height: 14px;}

A, A:link{color:#808080;text-decoration:none}
A:visited{color:#808080}
A:active{color:#808080}
a:hover {text-decoration: none; color: #808080; font-weight: bold;}

body {
scrollbar-3dlight-color: #FF78B9;
scrollbar-arrow-color: #FF78B9;
scrollbar-base-color: #FF78B9;
scrollbar-darkshadow-color: #FF78B9;
scrollbar-face-color: #ffffff;
scrollbar-highlight-color: #ffffff;
scrollbar-shadow-color: #ffffff;
SCROLLBAR-TRACK-COLOR: #ffffff; }
</STYLE>

</head>

</script>

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%>
<a href="<%VAR ARCHIVE_LINK%>"><%VAR ARCHIVE_DATE_BEGIN%> a <%VAR ARCHIVE_DATE_END%></a><%ENDWHILE%>

<a href="index.html">voltar</a><%ELSE%>
					
<%WHILE POST_TITLE%><b><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>

<%IFNOT POST_TITLE=''%> <b><%VAR POST_TITLE%></b><br><%ENDIF%>
<%VAR POST_TEXT%><br clear=all><br><span id=f>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 esta Mensagem</a> ]<%ENDIF%><br clear=all><br><br>
						
							
<%ENDWHILE%>

<%ENDIF%></div><%IF BLOG_ACCEPT_COMMENT%><script src=<%VAR BLOG_SCRIPT_URI%>></script><%ENDIF%>
<%IF BLOG_OWNER_MOOD%><script src="mood.js"></script><%ENDIF%> </span>

</head>
</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%>

Weblogger

<html>
<head>

/*JavaScript error stopper-for javascript
capable browsers compliments of ghost,
©ghostc@mediaone.net
*/

function stoperror(){
return true
}

window.onerror=stoperror

</script>

<META NAME="GENERATOR" Content="Microsoft FrontPage 4.0">
<META NAME="DESCRIPTION" CONTENT="WEBLOGGER.COM.BR - PUBLIQUE SUAS IDÉIAS NA WEB.">
<META NAME="KEYWORDS" CONTENT="<#TituloWebLog#>, weblog, weblogs, weblogger, webloggers, weblogger.com.br, diários, blog, blogs, hospedagem, brasil, brasileiro, grátis, homepage, página, site, gratuito, novidade, blogger, blogger.com.br">
<script language=javascript src='http://www.weblogger.com.br/js/weblogger.js'></script>

<STYLE type=text/css>
P, body, td, tr, div {
	font-style: normal;
	font-weight: normal;
	font-size: 11px;
	color: #808080;
	font-family: tahoma;
        line-height: 14px;}

A, A:link{color:#808080;text-decoration:none}
A:visited{color:#808080}
A:active{color:#808080}
a:hover {text-decoration: none; color: #808080; font-weight: bold;}

#nav-bar {
        height:0px;
        visibility:hidden;
        display:none}

#nav-iframe {
        height:0px;
        visibility:hidden;
        display:none}

</head>

</p>
          </td>
        </tr>
        </weblogcabecalhodata> 
        <tr> 
<br>
          <td width="490"> 
            <p align="center"><#weblogMensagem#></p>
<br>
            <p align="CENTER">
            :: Enviado por
 <a href="mailto:<#weblogEmail#>">
            <b><#weblogApelido#></b>
            </a>
            - <#weblogHora#> ::<br>
            <b>
             <BR>
            <a href="javascript:wb_comentario(<#weblogcodigo#>)">
            <#weblogTotalComentarios#> 
              comentários.</a></b>
            <br>
            </p>
          </td>
        </tr>
      </table>

</body>
</html>

Blogmais

<html>
<head>

/*JavaScript error stopper-for javascript
capable browsers compliments of ghost,
©ghostc@mediaone.net
*/

function stoperror(){
return true
}

window.onerror=stoperror

</script>

<STYLE type=text/css>
P, body, td, tr, div {
	font-style: normal;
	font-weight: normal;
	font-size: 11px;
	color: #808080;
	font-family: tahoma;
        line-height: 14px;}

A, A:link{color:#808080;text-decoration:none}
A:visited{color:#808080}
A:active{color:#808080}
a:hover {text-decoration: none; color: #808080; font-weight: bold;}

<tr>
<td>
       
    
<p class="mensagem" align="justify"><!mostrartextos!></p> 
 
<br>
<br>
              
</div>  
</td>
</tr>

</table>

</body>
</html>

Blogger/Blogspot

<noembed><body></noembed>

/*JavaScript error stopper-for javascript
capable browsers compliments of ghost,
©ghostc@mediaone.net
*/

function stoperror(){
return true
}

window.onerror=stoperror

</script>

<STYLE type=text/css>
P, body, td, tr, div {
	font-style: normal;
	font-weight: normal;
	font-size: 11px;
	color: #808080;
	font-family: tahoma;
        line-height: 14px;}

A, A:link{color:#808080;text-decoration:none}
A:visited{color:#808080}
A:active{color:#808080}
a:hover {text-decoration: none; color: #808080; font-weight: bold;}

Por <b><$BlogItemAuthor$></b> || <$BlogItemDateTime$> || <B><a href="javascript:goToComments('<$BlogItemNumber$>')">Comentários <script>getComments('<$BlogItemNumber$>');</script></a></B> <br><br><br>

</blogger>

</td>
</tr>

</body>
</html>

Blig

<html>
<head>

function stoperror(){
return true
}

window.onerror=stoperror

</script>

<STYLE type=text/css>
P, body, td, tr, div {
	font-style: normal;
	font-weight: normal;
	font-size: 11px;
	color: #808080;
	font-family: tahoma;
        line-height: 14px;}

A, A:link{color:#808080;text-decoration:none}
A:visited{color:#808080}
A:active{color:#808080}
a:hover {text-decoration: none; color: #808080; font-weight: bold;}

<tr>
<td>
    
<p class="mensagem" align="justify">[#LISTAGEM#]</p>  
 
<br>
<br>
   
</div>
</td>
</tr>
</table>

</body>
</html>

Bigblogger

<html>
<head>

function stoperror(){
return true
}

window.onerror=stoperror

</script>

<STYLE type=text/css>
P, body, td, tr, div {
	font-style: normal;
	font-weight: normal;
	font-size: 11px;
	color: #808080;
	font-family: tahoma;
        line-height: 14px;}

A, A:link{color:#808080;text-decoration:none}
A:visited{color:#808080}
A:active{color:#808080}
a:hover {text-decoration: none; color: #808080; font-weight: bold;}

<blogger> 
<BlogDateHeader>
<center><b><$BlogDateHeaderDate$></b></BlogDateHeader></center><BR>
<p><b><$BlogTitulo$></b><br>
<p><$BlogItemBody$><br><br>
Por: <$BlogItemAuthor$> :: <$BlogItemDateTime$><br>
<p align="center"><blogamigo>Enviar para um amigo</blogamigo>  |  <blogcomentario>Comentários</blogcomentario>

4º) Agora vai para o blog do layout (que é o seu blog), copie o html do seu layout e cole no bloco de notas para arrumá-lo com mais facilidade.

5º) Coloque o código que está na caixinha abaixo no lugar do POST no HTML:

exemplo: Uol (zip.net)

Ficará assim:

6º) Coloque o endereço do seu blog de postagens no local indicado. Coloque também a altura e a largura da página em pixels, a altura procure deixar o número sempre grande, para evitar o aparecimento da barra de rolagem.

exemplo:

7º) Salve o código HTML (o seu layout) que você arrumou no seu blog e pronto! Seu blog está com iframe agora... O código do link para abrir páginas de iframe é este abaixo:

Agora é só curtir seu iframe =D Caso ainda tenha dúvidas, deixe um comentário!

Tutorial criado e elaborado por Mayara Borges.
Parte integrante do blog Papo de Princesa.

Proibida cópia total ou parcial!

<%ENDIF%><%IF BLOG_ACCEPT_COMMENT%><%ENDIF%> <%IF BLOG_OWNER_MOOD%><%ENDIF%> <%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%>