01/12/2014

Tutorial: Pop Up personalizado com CSS

||

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.Minha mãe foi ao meu quarto umas quatro vezes na terceira ela até apagou a luz e continuei lendo no escuro rsrs, mas na quarta ela tomou meu livro... ela tomou meu livro... fiquei tão triste e sem nada para fazer que acabei dormindo. Na verdade não é nem bem um livro, mas um original de uma amiga minha, mas vamos ao assunto do dia, né? 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 CSSPreview

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:

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:

 

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:

 

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.

6 comentários:

  1. Olá, Wen-chan >..<
    Caramba, eu tava procurando esse tutorial há um tempão, mas quando achava, era sempre mal explicado e eu me confundia toda! Com certeza no meu próximo layout eu estarei fazendo-o, pois eu acho realmente muito lindo ^y^

    Besitos!
    HTMLittle || Aguardo sua visitinha, Wen-chan >..<

    ResponderExcluir
  2. Nossa, você conseguiu ler de madrugada? Eu leio de tarde e durmo asuhaushuas. O livro pode ser muito bom, mas eu sempre vou dormir no meio.
    Gente que tutorial gigante, eu achei que fosse menorzinho O.O. Tenho que te agradecer por posta-lo. Muito obrigada *OOOOO*.

    @P-Kpoppers

    ResponderExcluir
  3. Oii, estava esperando esse tutorial a muito tempo (rsrs). Obrigada vou colocar no meu blog, assim que puder.

    ~Kissus e até logo.

    http://reinodosbrigadeirosoficial.blogspot.com.br/

    ResponderExcluir
  4. Olá Wendy, como está? Eu fico parecendo um panda praticamente todos os dias, haha! Eu nunca me livro destas minha malditas olheiras. Eu não consigo ficar a madrugada acordada, se eu estiver lendo um livro fico no máximo até umas 2 horas da manhã e depois durmo com o livro na minha cara. Sobre o que o livro trata?

    Nossa, que tutorial cumprido, deve ter dado um trabalhão para explicar tudinho neste post! Eu gostei bastante, você explicou super bem! Fica mais organizado colocar estes pop-ups ou então ocultar quando o gadget é muito extenso.

    Abraço, Clara || n-found.blogspot.com

    ResponderExcluir
  5. Não sei se meu comentário foi, mas entendo isso do livro. Minha mãe também reclama quando leio até tarde.
    Adorei o tuto, apesar dele não ser útil para mim no momento.

    sugar-purry.blogspot.com

    ResponderExcluir
  6. Nossa que mega tutorial Wendy adorei ta de parabéns, acho que no meu proxímo layout vou usar abraços <3

    cherry--berry.blogspot.com

    ResponderExcluir

Hi guys!!!!
Hey aqui é Wendy, blogueira desde 2010! Viciada em animes, amante de livros e adora ver séries! Criei esse cantinho na intenção de ajudar na criação e personalização de blogs e sites.
Wattpad Facebook Tumblr Instagram