Pop Up personalizado com CSS [001]

Ohayoo!!! Como vão? Eu estou com olhos de coruja e com manchinhas de panda nos olhos. Passei a madrugada lendo um livro, estava tão bom! Mas tão bom, tão bom que não conseguia parar de ler. Mas vamos lá! Hoje trago um tutorial pedido a bastante tempo... um dos motivos da demora foi "aprimoramento do código", muitas vezes quando crio um código faço ele todo bagunçado e enrolado, então finalmente arrumei ele bonitinho para passar a vocês.

Eu já vi esse menu Pop Up em alguns blogs, mas nunca soube como fazer, mas pesquisando aqui e ali, alguns foruns desativados, mais teimosia, depois de muitos erros de códigos e gadget bungados, consegui o resultado. Mas nem sei se esse que eu criei é realmente a forma correta dos códigos, mas funcionou isso que importa rs 

Ele é exatamente como um Pop Up comum com a diferença que abre como uma janelinha personalizada e a frente de seu blog, você pode por um botão de fechar e abrir como colocar tempo para ficar aberto por um tempinho e fechar sozinho depois de alguns segundos ou minutos. Se desejar colocar algo muito grande dentro dele pode por barra de rolagem, como aumentar sua altura e largura. Pode ficar fixo como rolar com a pagina. Você pode colocar qualquer coisa dentro, seja menus, imagens, videos, player de música, enquetes, brevia de postagens, código de fontes, seguidores muita coisa basta usar a imaginação e algumas manipulações de códigos. Exemplo no meu eu usei: Pop Up + Menu de afiliados + Menu barra longa, pouca coisa até. Agora para personalizar o Pop Up usei, background semi transparente + PNG com opacidade no fundo+ botão de fechar (imagem) + Mini banner como imagem para abrir + tempo para fechar + manipulação de posição. Então como eu disse é questão de imaginar é adicionar o que desejar nele.  Eu decidi desmembrar o código para poder explicar melhor cada parte dele e como  personalizar, vai parecer um tutorial grande mais é só a explicação, o tutorial fica ao final da postagem.

Corpo do Pop Up:

#popup{

top: 50%;

left: 50%;

width: 400px;

height: 116px;

display: none;

position: fixed;

margin: -295px 0 0 -327px;

padding: 20px 20px 20px 20px;

background: #555555;

}

Vermelho: São os códigos principais, eles mudam a posição geral da caixa. Quanto menor o top mais vai subir, assim como o left, não é aconselhável mudar seus parâmetros, pois eles deixam a caixa  ao centro do gadget que estiver. Se muda-los em muitos computadores sua caixa pode aparecer torta ou fora do lugar. Você poderá mover a caixa com o margin, então não edite essas partes.

Azul forte: Largura (width) e largura (height). 

Amarelo: Para esconder o elemento, para  o navegador não gerar um box para ele. Assim ele não é visto na tela e não interfere com o layout da página. 

Verde: Posição da caixa ao mover a pagina, como fixed ele ficará fixo, ou seja, você descera e subirá a pagina e ele sempre ficará fixado na frente da pagina sem se mover, apenas o que se passa atrás dele(a pagina). Se deseja que ele ele role com a pagina basta trocar fixed por absolute. 

Rosa: É a margem de toda a caixa, você pode move-lá com eles. Se deseja subir ou descer a caixa basta mexer nos números -295 para mover ao lado é só mexer no -327. 

Laranja: Espaço de dentro da caixa se deseja deixar uma borda maior em torno dos elementos é só aumentar os números, se ao contrario diminuir. 

Azul claro: Fundo de cor

OBS: Se deseja colocar mais elementos no pop up, basta adicionar como cor de fonte, cor de links etc... é só adicionar os códigos e ir arrumando ao seu gosto. Se deseja por uma barra de rolagem como no exemplo acima, basta adicionar o código abaixo no corpo do pop up:

overflow: scroll;

Fique atento na altura, é aconselhável a largura ficar um pouco maior e a altura. E a altura um pouco menor que a extensão do que colocará dentro da caixa. Assim a barra vai aparecer e não vai ficar torto o conteúdo de dentro. O lado ruim de usar barra é que muitas vezes o botão de fechar pode não funcionar. 

Botão de fechar e abrir com menu CSS: Preview

  <script type="text/javascript">
   function fechar(){
     document.getElementById('popup').style.display = 'none';
   }

   function abrir(){
     document.getElementById('popup').style.display = 'block';
   }
  </script>

<p><small class="fechar"><a href="javascript: fechar();">
<exit>Abrir Pop Up</exit></a></small></p>
</div>

<p><a href="javascript: abrir();">
<open>Fechar Pop Up</open></a>
<a href="javascript: fechar();"></a></p></center>

Vermelho: é a parte do botão de abrir o pop up.
Azul: é a parte do botão de fechar o pop up.
Laranja: botão de abrir o pop up. O botão é um pequeno código de CSS que pode ser personalizado com HTML.
Verde: botão de fechar o pop up. O botão é um pequeno código de CSS que pode ser personalizado com HTML.

Botão de fechar e abrir com imagem: Preview

<p><small class="fechar"><a href="javascript: fechar();">
<img border="0" src="IMG" /></a></small></p>
</div>

<p><a href="javascript: abrir();">
<img border="0" src="IMG /></a>
<a href="javascript: fechar();"></a></p><center>

Vermelho: é a parte do botão de abrir o pop up.
Azul: é a parte do botão de fechar o pop up.
Laranja: botão de abrir o pop up como imagem.
Verde: botão de fechar o pop up como imagem.

Botão de fechar e abrir como CSS: Preview

nome do menu{
margin:1px;
padding:1px;
margin-bottom:1px;
margin-left:-26px;
padding-top: 5px;
display: inline-block;
font-family: 'Georgia';
font-size: 17px;
color: #fff;
float: center;
text-align: center;
line-height:32px; 
border: 1px solid #3b3b3b;
background:#3b3b3b;
box-shadow: inset 0px 0px 8px #555555;
width: 220px;
height: 22px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}

Amarelo: Você coloca o nome do menu para abrir (open), para fechar (exit).
Vermelho: Margens do botão
Verde: Sombra do botão
Azul forte: Largura (width) e largura (height).
Laranja: Espaço interno do menu
Rosa: Nome da fonte
Azul claro: Tamanho de fonte
Roxo: Cor da fonte
Laranja suja: Posição do menu
Verde escuro: Posição do texto
Vinho: Posição da fonte, aumente ou diminua para poder deixar ao centro do menu.
Verde claro: Raio de bordas
Rosa escuro: Borda e cor de fundo.

Tempo do Pop Up:

Se deseja adicionar função fechar automaticamente,  acima de  </script> adicione o código abaixo:

setTimeout ("fechar()", 3000);
}

O código em azul é o tempo que vai se fechar o pop up, timeout é uma função que faz chamar  a função fechar() seja chamada após 3 segundo (3000 porque o tempo é passado em milissegundos). Quanto mais tempo quiser que demore a ser chamado maior deve ser o número.

Elementos do Pop Up em texto: Preview

<center>
<div id="popup" class="popup"> 
<p><center>
<div style="margin-left: -21px; margin-top: -33px;">
<div style="text-align: center;">
Elementos de dentro do Pop Up, exemplo como texto.Elementos de dentro do Pop Up, exemplo como texto.Elementos de dentro do Pop Up, exemplo como texto.Elementos de dentro do Pop Up, exemplo como texto.</div>
</center></p>

Verde: Posição da caixa, é mais para dar um esforço na posição. Não mexa se não tiver necessidade.
Roxo:Nome da tag do Pop Up, não mexa.
Azul forte: Quebra de menu, fechamento do código.
Rosa: É a margem dos elementos para move-los, não a necessidade de mexer pois já estão alinhados para um tamanho padrão, só se tiver necessidade.
Laranja:  Área para colocar o texto que ficará dentro do pop up.
Vermelho: Texto que fica dentro do pop up, troque pelo o que deseja.

Elementos do Pop Up em códigos (menus, enquetes, gadget de seguidores etc...): Preview

<center>
<div id="popup" class="popup"> 
<p><center>
<div style="margin-left: -21px; margin-top: -33px;">
<a href="LINK_BLOG"><menu>Nuttela ?</menu></a>

<a href="LINK_BLOG"><menu>Nuttela ?</menu></a>

<a href="LINK_BLOG"><menu>Nuttela ?</menu></a>

<a href="LINK_BLOG"><menu>Nuttela ?</menu></a>

<a href="LINK_BLOG"><menu>Nuttela ?</menu></a>

<a href="LINK_BLOG"><menu>Nuttela ?</menu></a>

<a href="LINK_BLOG"><menu>Nuttela ?</menu></a>

<a href="LINK_BLOG"><menu>Nuttela ?</menu></a>
</div></center></p>

Não muda quase nada no exemplo anterior a única coisa que muda é o trecho em laranja.

Barra superior para por um título:  Preview

Esse é outro menuzinho... eu chamo isso de manipulação. Você deixa ele no inicio do pop up, é usando o margin muda sua posição para fica como um título, também pode deixar só como texto, vai de acordo com o gosto.

Essa parte fica dentro do gadget:

<div style="margin-left: -21px; margin-top: -33px;">
<div class="barra">Aqui você escreve o titulo</div>


Dentro do HTML:

.barra {
height: 17px;
width: 430px;
padding: 5px;
color: #ffffff;
font-size: 16px;
font-family: Oswald;
font-weight: lighter;
line-height: 16px;
border: 1px solid #3b3b3b;
background:#3b3b3b;
box-shadow: inset 0px 0px 8px #555555;
}

Azul forte: Largura (width) e largura (height).
Laranja: Espaço interno do menu
Roxo: Cor da fonte
Rosa: Nome da fonte
Azul claro: Tamanho de fonte
Vinho: Mover o texto dentro do menu
Verde claro: Borda da barra
Vermelho: Fundo de cor da barra
Amarelo: Sombra da barra

_______________________________________________________________________

Tutorial do Pop Up completo:

1. Finalmente chegamos a parte interessante rs vamos começar o tutorial de colocar o pop up em seu blog. Vá até seu HTML e procure por  ]]></b:skin> acima dele cole:

#popup{
top: 50%;
left: 50%;
width: 400px;
height: 116px;
display: none;
position: fixed;
margin: -295px 0 0 -327px;
padding: 20px 20px 20px 20px;
background: #555555;
}

Salve!

2. Agora vá até a pagina Layout e abra um novo gadget java script, dentro dele cole o seguinte código:

<center> <div id="popup" class="popup"> <p> <center> <div style="margin-left: -21px; margin-top: -33px;"> CODIGOS DO TEXTO OU DE MENUS AQUI LONGOS </div> </center> </p> <script type="text/javascript"> function fechar(){ document.getElementById('popup').style.display = 'none'; } function abrir(){ document.getElementById('popup').style.display = 'block'; setTimeout ("fechar()", 3000); } </script> <p> <small class="fechar"><a href="javascript: fechar();"> <exit>Fechar Pop Up</exit></a></small></p> </div> <p> <a href="javascript: abrir();"> <open>Fechar Pop Up</open></a> <a href="javascript: fechar();"></a></p> </center>

Salve!

E prontinho! Agora é só colocar o que deseja dentro do pop up. Se for usar o botão de abrir e fechar como menus siga o próximo tutorial:

3. Dentro do HTML procure por  ]]></b:skin> e acima dele cole:

exit{ margin:1px; padding:1px; margin-bottom:1px; margin-left:-26px; padding-top: 5px; display: inline-block; font-family: 'Georgia'; font-size: 17px; color: #fff; float: center; text-align: center; line-height:32px; text-transform:uppercase; border: 1px solid #3b3b3b; background:#3b3b3b; box-shadow: inset 0px 0px 8px #555555; width: 220px; height: 22px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } open{ margin:1px; padding:1px; margin-bottom:1px; margin-left:-26px; padding-top: 5px; display: inline-block; font-family: 'Georgia'; font-size: 17px; color: #fff; float: center; text-align: center; line-height:32px; text-transform:uppercase; border: 1px solid #3b3b3b; background:#3b3b3b; box-shadow: inset 0px 0px 8px #555555; width: 220px; height: 22px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } 

Salve!

OBS: Quando se usa o menu é necessário que os elementos do Pop up sejam um pouco grande, pelo menos dois dedos de tamanho. Quando o elemento é muito pequeno as vezes ocorre erro e é necessário editar o menu mexendo no line-height . Pois o erro o corre no menu de fechar, ele não seleciona. =( Algo que ainda tenho que acertar futuramente. Com imagem ocorre o mesmo, porém aguenta ficar menor que com botão de menu.

4. Vamos adicionar o título do pop up, essa parte do código é opcional. Vá  até seu HTML e procure por   ]]></b:skin> e acima dele cole:

.barra { height: 17px; width: 430px; padding: 5px; color: #ffffff; font-size: 16px; font-family: Oswald; font-weight: lighter; line-height: 16px; border: 1px solid #3b3b3b; background:#3b3b3b; box-shadow: inset 0px 0px 8px #555555; }  

Agora salve! Vá até a pagina Layout e abra o gadget de pop up. Dentro dele procure por:

<div id="popup" class="popup">
<p><center>

e abaixo dele cole:

<div style="margin-left: -21px; margin-top: -33px;">
<div class="barra">Titulo</div>

O tutorial no fim das contas é bem pequeno a explicação que ficou um pouquinho longa... pouco rsrs  mas espero que tenha ficado fácil de entender. Se tiverem dúvidas é só deixar um recadinho que responderei o mais breve possível.