9 Comentários
Html & Xhtml, Tutoriais Por tamara I-Frame é uma página a parte que abre dentro da sua área de posts.
01. A primeira coisa que você tem que saber é que para ter uma página com iframes, você tem que ter uma página somente para os posts, outra página para o template com o seu perfil e menu de navegação e outra para colocar o que quiser como créditos, etc. Vamos começar pela página de posts.
02. Faça uma página simples, apenas com as configurações das cores das letras tamanho, cor do background e as tags de cabeçalho e data, posts e comentários do servidor que você usa para postar (ex. blogger, uol, weblogger…). Veja o exemplo.
03.Agora vamos configurar a página do seu template que será outro blog que você irá cadastrar. Para facilitar o entendimento, vou fazer uma página com um dos meus lays free. Nessa página você colocará o seu template com o perfil, etc. Porém no lugar das area dos posts você colocará o código do iframe.
Se seu layout é feito em divs, coloque:
Altere a posição do iframe em top, left, width e height.Se ele é feito em tabela, coloque:
04. Clique aqui e veja como ficou. Agora vamos para a terceira página que seria para você colocar seus créditos, concursos que participa, goodies, enfim o que você quiser.
Essa página pode ser feita no geocities, weblogger, blogger, kit.net , onde você achar mais fácil. Essa página será igual a página de posts, porém sem as tags de post, data, e comentários. Vamos ver como ficou: Clique aqui
05. Esta é a fase final para que o link que abrirá sua página de créditos abra dentro da página de posts, no final do endereço use target="iframe" Aqui está como deve ficar seu link:
Veja o resultado final: Clique aqui. Não esqueça de clicar nos créditos para ver como sua página tem que ficar, ok?
Obs. Na página onde ficará o seu template, vá nas configurações do blog e coloque para exibir apenas 1 post.
4 Comentários
Css, Tutoriais Por tamara Modelo de menu vertical simples. Se você quiser pode variar o estilo mudando os atributos de borda, tamanho, cor, etc. Seu menu vai ficar assim:
01. Adicione ao seu css:
padding: 0px;
margin: 0px;
width: 100%;
list-style:none;
font-weight: bold;
height: 18px;
line-height: 18px;
vertical-align:middle;
}
#nav ul li {
display: block;
margin: 1px;
border:0px;
}
#nav ul li a {
display: block;
width: 150px;
font-size: 10px;
font-family : Verdana, Arial, sans-serif;
text-decoration: none;
text-transform: uppercase;
text-indent: 5px;
letter-spacing: 2px;
color: #FEC2E1;
background-color: #FFF1F9;
vertical-align:middle;
}
#nav ul li a:hover {
color: #c0c0c0;
background-color: #F8F8F8;
}
02. E no lugar em que você quer que apareça o menu coloque:
<ul>
<li><a href="http://www.link1.com">Link 1</a></li>
<li><a href="http://www.link2.com">Link 2</a></li>
<li><a href="http://www.link3.com">Link 3</a></li>
<li><a href="http://www.link4.com">Link 4</a></li>
</ul>
</div>
Ou, caso você esteja usando páginas com i-frame use:
<ul>
<li><a href="http://www.link1.com" target="iframe">Link 1</a></li>
<li><a href="http://www.link2.com" target="iframe">Link 2</a></li>
<li><a href="http://www.link3.com" target="iframe">Link 3</a></li>
<li><a href="http://www.link4.com" target="iframe">Link 4</a></li>
</ul>
</div>
Não esqueça de trocar "link" pelo endereço do seu link.
Tamara, casada há 8 anos com 
, paulistana, mora em 
, fronteira com o Paraguai, é dona do 
14/03 - Meu Aniversário 
20/03 - Início do Outono
