Pop-Up Personalizado para Blog

Pessoas trago um tutorial super fofo de como colocar Pop-Up Personalizado no Blog, eu trouxe esses dpois modelos e esse tutu de pop-up super fofinho.

Para o primeiro Pop-Up, é só seguir os seguintes passos abaixo.

Vá no Painel do seu blog, depois em Layout e clique "Adicionar um Gadget" e depois adicione um "HTML/JavaScrip" dentro dele adicione o seguinte código:

<style type="text/css">
#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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv3SZPpjE6ne_ijXbsbVUdfAb0LkKpwFhG54IZNm9BUZjbr7zPryRq5lz9mXwL1w_h3DzhF2GI4swWAVAhdPJJr5WsMMxGJXIaXqUkW-iDFOmRyea1-8Frtsqir1Q3VdAHsDE9LwUkrEte/s1600/01.png" width="20"/></a>
<a href=" endereço da página no facebook " target="blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGePSb51lnvqIHnkFG2Nm7pwFt4SlLg2O3fTBV5wJoYGvDQy2bF1iBo9hJ0m-tYtpg_bdEAXL-RZA9oWo-FOYa7CldiRqCHQt089ZMU-gEd-SKLyyq-jMZ_TX4Mi5mBYCkm7dKK80-BioH/s1600/12.png" width="22"/></a>
<a href=" endereço da página no flickr" target="blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq0E5kGhY0Io5OyGJ9lF5zTM-45VRpK-CLH8F-OeLN9FzTWsbJY7MmQbn_iv8xUI2EL9TXNn5a-BxYx4CjDWNm3atOPrVL_MelCtqD5IN70BtsfO5cHP3XWIaPUOE5mXP4qAH_xs-Bj737/s1600/cats.png" width="24"/></a>
<a href=" endereço da página no twitter " target="blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcD_IWCzrnnbORcTdhEdUJN01Xu1Rp-rX7qTGiHXhKiaRkRUMNQ9cmC32mbuxDEOIQvh-JsVGXDYPlpg5mh0J12ZjrbnTOIpo5jpFXw_k45oCG8VtUVr9my90ahY3-oUZOKRtk92Z6oV-w/s1600/cats1.png" width="26"/></a></div>
</fieldset>
<script>
function closeit(){
document.getelementbyid("aviso").style.visibility = "hidden";
}
</script>
</div><div class="clear"/></div>

<style type="text/css">
#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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiizbyy_QUU1CBCIdKup7BpFXzywdINxRXgNI3GE88oMY50TUhthDJQYi3lX57c7vGrgqz2g3W28Hzjew5bv8fhQyXnoYMpxeslqNqN6sZJdI1I9VDwvGp3_c6ONTlPF9pdvQPHR8dt30W8/s1600/cupcakes2.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:-500px; top:-500px; 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5PyhFdV1xucjPj8tRKNlJOInS7JhNcoM2X0sU27505ozWeEL45ZUtYdImtFStb7Um_romTVvgFuJ9STJf-uuLOtdhVbK006zHJT8mNpksguKjun0rVX89ojv_mVgta96i8lBNRUXIJzPL/s1600/desenhos-coracao-dia-dos-namorados-3.png"align="left"/><br /><br />
Seja bem vindo(a) ao meu blog!!!
<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>