Iframes
IframesGente Iframe não é simples mas também não é impossível de fazer.
Eu havia colocado um tutorial no orkut explicando mas creio que ele ficou muito
confuso então refiz o tutorial e creio que esse aqui saiu milhões de vezes mais
fácil que o outro!
Vamos lá!
Programas necessários:
* Front Page ou Dreamweaver
O Que é Iframes?
R: São páginas dentro de páginas como o nome mesmo diz. É o
mesmo sistema de links do meu site, os links abrem dentro da área do post.
Para colocar Iframes você precisa de dois blogs ou um blog (para postar) e uma página html pois no caso um blog será somente para postar e outro para o layout e links. Entenderam até aqui??? Espero que sim…
1ª Parte
Vamos criar uma página lisa (sem template) que vai ser a área dos posts.
* Não criei para o weblogger porque pra variar ele estava fora do ar no dia em
que fiz esse tutorial. Mas para criar a página lisa sem template, apenas com a
área dos post é fácil.
Basta colocar as TAGS principais de postagem
No caso do Weblogger são:
- Utilizada para iniciar a seleção dos Posts.
- Utilizada para iniciar a data do cabeçalho do Post.
<#weblogDataCabecalho#> - Utilizada para exibir a data do cabeçalho do Post.
- Utilizada para finalizar a data do cabeçalho do Post.
<#weblogMensagem#> - Utilizada para exibir a mensagem do Post.
<#weblogAutor#> - Utilizada para exibir o nome do autor do Post.
<#weblogApelido#> - Utilizada para exibir o apelido do autor do Post.
<#weblogEmail#> - Utilizada para exibir o e-mail do autor do Post.
<#weblogHora#> - Utilizada para exibir a hora em que o Post foi gravado
<#weblogcodigo#> - Utilizada para controle interno do WebLog.
<#weblogEnviarTexto#> - Utilizada para disponibilizar o envio de seus textos por
e-mail.
<#weblogTotalComentarios#> - Utilizada para disponibilizar o total de
comentarios sobre este texto.
- Utilizada para finalizar a seleção dos Posts.
BLOGGER
UOL
* Não esqueça que esses moldelos lisos vc pode fazer suas configurações (barra de rolagem colorida, colocar efeitos de links etc)
2ª Parte
Agora que vc já tem a sua página de posts limpinha sem template, é hora de
criar a página principal onde vai ter o seu lindo template e seus links certo?
Você vai utilizar um código de HTML normal para o seu template
só que nesse código não vai ter as tags de postagem ok?! Na parte de postagem
vai ter o IFRAME!!!
CÓDIGO DO IFRAME
Pegue o código do iframe
AQUI
* Configure do tamanho desejado e substitua www.endereçodapaginadeposts.com.br
pelo endereço da página de post criada anteriormente.
Pronto! Seu site já tem a área de IFRAMES agora todo link que vc abrir você precisa configurar em HIPERLINK e colocar para abrir em IFRAME (nome do seu iframe)
3ª Parte - Transparência do Iframe e fim!
Última parte ok?!
Já está tudo pronto. Você fez o iframe, ele abriu, os links abrem, tudo no lugar
certo, você vê o blog pelo iframe e tal.
Mas a página principal tem um fundo legal e o iframe está com um fundo branco…
Eu quero que apareça o fundo da minha página principal no iFrame, para as
páginas ficarem bonitas!
Então vamos lá!
Lembrando a TAG do Iframe…
< iframe id=meuframe name="iframe" xsrc="página que vai aparecer dentro do
iframe" frameborder="no" width="500" height="500" scrolling="Yes" marginwidth="0"
marginheight="0"> < /iframe>
Ok! Então vamos incluir mais uma coisinha nessa tag!
Vamos incluir ela por último (nesse caso, depois de marginheight=”0″).
allowtransparency=”true”
Allow transparency quer dizer ‘permitir transparência’.
Então a tag vai ficar:
< iframe id=meuframe name="iframe" xsrc="página que vai aparecer dentro do
iframe" frameborder="no" width="500" height="500" scrolling="Yes" marginwidth="0"
marginheight="0" allowtransparency="true">< /iframe>
Mas… Espera aí, a página que vai abrir ainda num vai mostrar o fundo
transparente. ‘Neutralizamos’ o iFrame, agora vamos neutralizar as páginas que
abrirão nele (todas que abrirão nele, incluindo blogs, terão que ter o seguinte
parâmetro se quiserem que o fundo fique transparente).
Para o ‘allowtransparency’ funcionar, tem que ter um atributo que ‘responda’ a
ele.
style=”background-color:transparent”
E onde vai isso? Tudo bem, sei que é na página que abrirá no iFrame, mas em
qual tag?
Na tag !
E não ‘abaixo’ dela. É ‘dentro’ dela, mesmo!
Uma tag que abre o body, geralmente é assim:
Pois todos sabem que é entre e que tudo acontece. =P
Coloquem o atributo logo após da palavra ‘body’. Vai ficar assim:
PS: Não coloque imagem ou cor de fundo nesses casos, se quiser realmente deixar o iframe transparente. Porque não vai aparecer.
Ponto gentem! Iframe prontinho!!!