11/09/2013

Tutorial: Pop-Up personalizado no blog

||

Hi people, decidi fazer meus comprimentos diferente hoje. Bom venho trazer o pop-up que utilizei aqui no blog para anunciar o sorteio. Pessoalmente acho pop-ups chatos, feios, irritantes e muitas vezes da bug no site/blog, mas as vezes acontece de ser necessário usa lo. Então porque não usar uma pop-up bonitinho, né?
Eu achei esse pop-up no Dany Place ele pode ser personalizado como desejarem e o melhor é que não trava o blog. Ele é super útil, fácil de arrumar além de bonitinho então querem ver? Já sabem onde clicar. Vai, vai clica?!
Imagem obtida no Dany Place

Para aplica lo em seu blog, vá ate sua área de Layout. Abra um  gadget de HTML/Java Script e dentro dele cole o código abaixo:

#aviso{
width:500px;
padding:5px; position:absolute; z-index:5000;}
.caja-aviso{
border:1px dashed #FF1493 ; /* Cor da borda */
-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
-webkit-box-shadow: 5px 5px 6px #ffffcc; -moz-box-shadow: 5px 5px 6px #ffffff;
box-shadow: 5px 5px 6px #Ffffff;
background-image: url('http://i111.photobucket.com/albums/n159/docedani/back9.png'); /* Background do fundo */
padding: 10px; font-family: Verdana, Geneva, sans-serif;
color: #0B173B; /* Cor do texto */
}
.letrero-aviso { /* estilo do aviso recadinho */
font-size:10pt;
font-weight:bold;
color:#000000;
text-shadow: 0px 0px 10px #FFB6C1;}
</style>

<div id="aviso" style="left:250px; top:150px; padding:0;">
<div align="right" style="margin-bottom:-50px;">
<a href="javascript:closeit()" ><font face="lucida sans" size="1">
</font> <img valign="middle" src="http://i111.photobucket.com/albums/n159/docedani/marcadores/x-2.png" style="vertical-align:middle;"/></a></div>


<fieldset class="caja-aviso">
<legend class="letrero-aviso" align="left"> ❤ Recadinho</legend>
<img src="http://i111.photobucket.com/albums/n159/docedani/kawaiipng/pngbyannyzblog67.png"align="left"/><br><br>

Seja bem vindo, não esqueça de deixar um comentário!!

<div align="right">

<a href=" Endereço da página no tumblr " target="blank"><img src="http://i111.photobucket.com/albums/n159/docedani/icone/tumblr_m7j3b7yiQ01r6yzvz.png" width="20"/></a>

<a href=" Endereço da página no Facebook " target="blank"><img src="http://i111.photobucket.com/albums/n159/docedani/icone/tumblr_m7j3ahZEWs1r6yzvz.png" width="22"/></a>

<a href=" Endereço da página no Flickr" target="blank"><img src="http://i111.photobucket.com/albums/n159/docedani/icone/tumblr_m7j3appWPn1r6yzvz.png" width="24"/></a>

<a href=" Endereço da Página no Twitter " target="blank"><img src="http://i111.photobucket.com/albums/n159/docedani/icone/tumblr_m7j3boHe0O1r6yzvz.png" width="26"/></a></div>

</fieldset>
<script>
function closeit(){
document.getElementById("aviso").style.visibility = "hidden";
}
</script>
</div><div class="clear"/></div>
 
Ele é bem fácil de entender nem preciso dar explicações. Aconselho quando forem usa-los colocar em um gadgets que fique bem acima do blog. Porque de acordo a onde é o gadgets é a direção que ele aparece.

 Imagem obtida no Dany Place

Mas personalizem como desejarem, mas sempre creditando viu? Fugindo um pouco do assunto da postagem tenho recebi alguns comentários pedindo dicas de como mexer no Photoshop, então estava pensando o que acham eu fazer um big tutorial básico de como mexer em suas funções? Bom é só isso então ate a próxima babys kiss.

57 comentários:

  1. Também acho aqueles pop-ups feios, o seu ficou super lindinho :3
    É super útil quando se precisa avisar de alguma coisa, mas eu acho que fica chato aqueles outros tipos feios que trava e tudo mais e este tutorial é bem fácil de ser realizado :)
    Acho que seria legal você fazer um big tutorial do photoshop, quando eu precisar verei aqui c:

    Beijos~
    Panther Pink and Blue

    ResponderExcluir
    Respostas
    1. Obrigada Belly. Que bom que achou fácil a personalização, é super facil mesmo de arrumar. A única parte chata dele é ter que ficar fechando ele o tempo todo rsrs

      :D Eba!!! Então irei fazer

      Excluir
  2. Adorei esse tutu é uma boa dica.

    ResponderExcluir
  3. Ha, obrigado (: ajudou bastante e sobre o photoshop acho legal para algumas pessoas que não sabem mexer eu já sei mais é sempre bom ensinar aos iniciantes

    Wordab.blogspot.pt

    ResponderExcluir
    Respostas
    1. De nada Luca, que bom que pode lhe ajudar. Verdade por isso irei ensinar bem do inicio, então acho que ficara um pouquinho grande rsrs. Beijokas fofo

      Excluir
  4. Este comentário foi removido pelo autor.

    ResponderExcluir
  5. Nossa Vlw mesmo!
    Muito útil...
    Abrigado.

    ResponderExcluir
  6. Respostas
    1. De nada Pinkie, espero que seja útil.

      Excluir
  7. Adorei o tuto ^^ Me lembra o tumblr. Bjs, Dazzle ♥

    ResponderExcluir
  8. Adorei o tuto!
    Acho que seria uma boa fazer esse big tutorial, porque até eu mesma me atrapalho ás vezes.

    vidadeumasone.blogspot.com

    ResponderExcluir
    Respostas
    1. Obrigada Le-chan rsrs
      Eu também as vezes esqueço onde fica alguma ferramenta ou como faz alguma coisa kkk

      Excluir
  9. Awnnt, eu ia te perguntar como fazer, é muito fofo >< mas concordo contigo, as vezes irrita. n_n
    http://welcome-to-kawaii-land.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Hehe que bom que coloquei então. Ahh bastante xD eu fico estressada com pop ups

      Excluir
  10. Perfeito o tutorial!
    Sempre procurei pop-ups mas eles eram sempre simples de mais, até que achei este!
    Bye u.u

    ResponderExcluir
    Respostas
    1. Obrigada. Geralmente os pop-ups são realmente simples, mas legal que o conhece. ^^

      Excluir
  11. Esse pop-up realmente irrita,mas se necessário é legal colocar.
    Obrigada pelo tuto.
    Vou colocar nos favoritos caso eu venha precisar algum dia!

    http://sarang-cute.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Uhum, nada melhor que colocar um que possamos arrumar e deixar bonitinho.
      Não foi nada eu que fico grata por colocar nos favoritos *0*

      Excluir
  12. Realmente, isso é muito chato, mas vai que alguma hora precisa né? Ótimo tutorial ^-^

    ResponderExcluir
    Respostas
    1. Sim, sim :3 Não foi nada Júh. Lindo avatar!

      Excluir
  13. Amei pop-up ^^ Acho que vou usar,com os devidos créditos é claro .
    É, para iniciantes o photoshop é meio complicado,mas depois pega o jeito rs
    Beijinhos

    tudoparaseuphotoscapeface.blogspot.com

    ResponderExcluir
    Respostas
    1. Que bom, espero que use. Tem razão.

      Excluir
  14. Ótimo tutorial Wendy, não sabia como por, bem útil ♥

    ~ Beijos ;*
    cantinhodaslovelys.blogspot.com.br

    ResponderExcluir
  15. Legal fazer um big tuto para photoshop u3u
    Adoro pop-ups personalizados, são lindoos <33 igual um que teve aqui, avisando sobre o sorteio de domínio u3u
    Kiss
    With You

    ResponderExcluir
    Respostas
    1. Hihi thanks espero que possa ajudar a muitos.
      Eu usei o corpo desse para fazer aquele, apenas mudei o fundo e o botão. Mas fico muito lindinho! Obrigada.

      Beijinhos sua linda.

      Excluir
  16. Muito legal esse Pop-Up, gostei bastante... Kisses ;3

    ResponderExcluir
  17. Que lindo esse pop-up, eu adorei! É mega hiper kawaii *-*
    aprendiz-de-mangaka.blogspot.com.br/

    ResponderExcluir
  18. Wendy, visita o blog? tá de novo lay *uu*

    http://wordab.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Haa eu encontrei o layout pois não tenho tempo pra fazer só editar mesmo e os blogs de designs são daquele modelinho enjoativo os mesmos de sempre dificilmente encontrar diferentes mais né nas férias espero ter tempo pra relaxar e fazer 1 kk e as fotos talvez eu coloque em algum post o link pois achei desagradável só tinha 3 coisas reais que tava dentro do vasinho com um líquido ali sim já percebia ser verdade bom mais té maiis vou postar nestante lá ...

      Excluir
    2. Hehe então vou ficar esperando ansiosamente para ver como vai ficar o lay
      Entendo que pena.... mas posta sim ^^

      Excluir
    3. Prometo que qualquer dia eu posto (: hihi

      Excluir
  19. Adorei, vou usar assim que eu precisar..
    Bjks, e Obrigada!

    http://www.nmwhat.com/

    ResponderExcluir
  20. Que lindo *w* quando eu precisar por algum aviso no meu blog vou usá-lo U-U'

    - Lovely Zombies

    ResponderExcluir
    Respostas
    1. Hehe certo ^^ quando usar me diga vou amar ver como vai personaliza-lo.

      Excluir
  21. Mas que bacana! Eu sempre entrava em blogs que tinham esse negócio, mas sempre bugava tudo, era péssimo. Esse além de fofo não trava *u*

    http://kawaii-planeta.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Verdade, por isso que gostei dele.
      Os pop ups normais são horríveis mesmo ^^

      Excluir
  22. Eu odeio muito essas janelas mas algumas pessoas gostam...não há nada a fazer. Ao menos há uma maneira de ficarem bonitas. Ao menos isso
    querosabertudo-k.blogspot.com

    ResponderExcluir
  23. Wendy Chan,eu não consegui mudar o banner no meu blog do LAYOUT KARNEVAL.
    Poderia me ajudar ?
    Obrigada :3

    ResponderExcluir
    Respostas
    1. Ajudo sim já tem a imagem pronta? Se tiver entre dentro do seu HTML e procure por http://static.tumblr.com/xpo2exu/O8dmramxa/cabe.png e troque pela da sua imagem.

      Excluir
    2. Obrigadaaaaa
      <3

      Excluir
  24. Quando vc colocou o pop-up eu ja falei a mds que lindo Wendy tem que passar o tuto kk e vc passou, achei muito fofo, mais acho que ele so merece ser usado na hora certa hehe''

    ResponderExcluir
    Respostas
    1. Hehe xD que bom que coloquei então.
      Isso é verdade só merece ser usado na hora certa^^

      Excluir
  25. Bem legal seu tutorial <3
    retribui? >///< voltarei aqui o3o
    kiss~
    Charllote Maou||@Castle Madness

    ResponderExcluir
    Respostas
    1. Obrigada Maou, retribuo sim ^^

      Excluir
  26. Eu já conhecia esse pop-up, tentei usar mais achei super feio, da mesma forma que também é super útil para anunciar algo que está rolando no blog, beijocas.
    Eloísa do Having Cherry || Aguardo sua visita

    ResponderExcluir
    Respostas
    1. Entendo, verdade ele é bem útil para deixar recados, mas só deve ser usado para isso porque é bem irritante ficar fechando ele. Beijinhos.

      Excluir

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