Pop-Up Personalizado para Blog

janeiro 19, 2015


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="http://1.bp.blogspot.com/-9OQitnpiJ7g/VL0578Qy1VI/AAAAAAAAEQM/UxBFRxcYRUo/s1600/01.png" width="20"/></a>
<a href=" endereço da página no facebook " target="blank"><img src="http://4.bp.blogspot.com/-8JEMDiGa24M/VL05793QwRI/AAAAAAAAEQQ/a9_RAsSOE5M/s1600/12.png" width="22"/></a>
<a href=" endereço da página no flickr" target="blank"><img src="http://2.bp.blogspot.com/-EaTzv3OdScQ/VL0577r5JbI/AAAAAAAAEQI/9XjONK6W6Kg/s1600/cats.png" width="24"/></a>
<a href=" endereço da página no twitter " target="blank"><img src="http://2.bp.blogspot.com/-iNiGaFlg_xU/VL059zflMUI/AAAAAAAAEQg/G0SDxpyuJ0M/s1600/cats1.png" width="26"/></a></div>
</fieldset>
<script>
function closeit(){
document.getelementbyid("aviso").style.visibility = "hidden";
}
</script>
</div><div class="clear"/></div>
Agora, para o segundo Pop-Up, é só fazer da mesma maneira mas adicionando o seguinte código 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://4.bp.blogspot.com/-KazcC4UQdvE/UZJ-RZse0eI/AAAAAAAADao/-Ver8CPOkY8/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="http://1.bp.blogspot.com/-mcGv9cV3kBs/UZJ5kUZ0osI/AAAAAAAADaE/9avCCIony80/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>
 Eu recomendo que coloque o gadget no lado esquerdo do blog em uma parte de cima. Espero ter ajudados. Foi testado.

You Might Also Like

0 comentários

Like us on Facebook

Pinterest Images

Follow us on Twitter