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:

Códigos

#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.