Pop-Up personalizado em paginas especificas

Ohayoo queridos bunnie's, como estão? Hoje venho postar um pedido de tutorial feito por Bunny do blog Animes Espetacular. Irei ensinar como colocar um Pop-Up personalizado em paginas especificas, assim como utilizo na pagina de layout grátis. Já havia ensinado como usar um pop-up personalizado, porém ele aparece em todo blog não apenas em uma pagina. Mas usando o tutorial do Pop-Up junto com o de disponibilizar código com exemplos na postagem é possível fazer isso.

1. No canto direito terá um menu com essas opções "Marcadores, Programar, Links, Local, Opções" clique em Opções. O menu vai abrir mostrando algumas opções. Escolha a opção "Mostrar HTML literalmente" (passo 1) e clique em Concluído. Ao fazer isso vocês estará permitindo visualizar HTML em sua postagem. Se estiver marcado clique em Concluído. Para verificar se funcionou, escreva uma frase e centralize (somente para gerar um código). No topo da postagem ao lado esquerdo, clique em HTML como mostro na imagem abaixo (passo 2).

2. Agora dentro da área limpa onde você normalmente escrever coloque:

Códigos

<style type="text/css">

#aviso{

width:500px;

padding:5px; position:absolute; z-index:5000;}

.caja-aviso{

border:1px dashed #ad8ab8 ; /* 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/AVvXsEj2UPBmMgL-G_sXSwrbuM4NMwhZs6c6f9rG_uyIwxDr3mK2t_VIltGkOogM2NKjLhy4hrIyM8rm5ZGgEX1IMw-9xlQUUehG8J-Dw9XCPrpA4OxqfQL0bGwUiuoJ0T7m6I9kqFm4T7Tleck/s1600/12.png'); /* Background do fundo */

padding: 10px; font-family: Verdana, Geneva, sans-serif;

color: #7a6691; /* Cor do texto */

}

.letrero-aviso { /* estilo do aviso recadinho */

font-size:10pt;

font-weight:bold;

color:#7a6691;

text-shadow: 0px 0px 10px #d9cae0;}

</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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMiFOxe_d7B-oao1PDyF-gNoyvnkM7mlmtZ5bp2FvmuXYSNsZ7jiH34EcNogq2zyOwa33sT7isPopovcM4pTQYlYxxLvZBx4bFdoOIbCypUqv0EQvaPBFEXuVR8mLMGFOUOHnEOoESrxo/s1600/ox.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/AVvXsEhA3ac5-DvepgobSKhyphenhyphennMB-_Q0WB_mfX5Vlpz53WlQYqw90bcKMGbsA6KDzD4UULzyf6jX1K639BCBzcqCAUwGlszbeElhF9owfllG1fyDMsyGWnTlES9_5qdIjJ_SpgER_aI5L7VrxdAc/s1600/pretty_magic_power_by_missjediflip-d5myexk.png"align="left"/><br /><br />

Escreva aqui o aviso, regras ou outra coisa que queira. Aqui dentro você pode aplicar código de menus se desejar, fica uma gracinha. Eu amo usar esse poop up para avisos, você também pode personalizar, aplicar imagens ou mudar a cor. XoXo

<div align="right">

<a href=" Endereço da página no tumblr " target="blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZS5UJ_cGZD0hX9Gcy3W2Vnv5zonQgKe_DQci3F6UwylOhAUEK1narndBR-agFMULaQrryt4lPNHTK4-rQYtgcO_oJx4iGWi_d3zTnvMvTFNsvJRFB2BV-2QEFFjryX3ndkzNeYbNNSpU/s1600/tumblr.png" width="38"/></a>

<a href=" Endereço da página no Facebook " target="blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ8X4_5x63Nrq8XcO7B5r8I4-WA0zBUpzvlqktftjpxxmKN2AuYzlk8FI7ptoYObjs0uZPDKzJnpmFbY90FsF84ac5yBBGIV31RRgYY5WbsZgzUDIRsc6IvLaAZIL5cTkjYQUySPQiirM/s1600/facebook.png" width="36"/></a>

<a href=" Endereço da página no We Heart" target="blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpnZh54OKn4llHeuiBp9gIi3Lve6KNBB3cI-W5dtWmoUD5iEEVRAQdb6i2qNXEIj_NKrF0V-nVF_58nHcUqPJ4UJb9J-_7X8WBCgdHN7Y5k5Buog_vQwLPll73SmX9Esgt50eqOfC0TGw/s1600/heart.png" width="36"/></a>

<a href=" Endereço da Página no Instagram " target="blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHn74ip2Esz_JNuZKQn3_nQ63baZy7jA9vRdUA7sscLLR48UtS-LRRJWswc9e6QPtNEqGrqtNQdB3je-LhFffu526GehnZpTl2QorPswFRujHOvzKHfHFEfz1v5xVFInvQ-kVSEn7biM4/s1600/insta.png" width="33"/></a></div>

<div align="right">

<a href="ENDEREÇO" target="blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil3d4rMMPwMDziBQAmwDU0jtOYiZlXns36bXGzq3HDjWF8Q504mpMBVxGh-iTHmb16EntrRvI2Yzr8X1c21KP1q48dWGWCZc-VtU0FgcUfYpuNoacd-au7G5Gu30nmb7gbJPscNjvWViQ/s1600/tumblr_m7j3boHe0O1r6yzvz.png" width="114"/></a></div>

</fieldset>

<script>

function closeit(){

document.getElementById("aviso").style.visibility = "hidden";

}

</script>

</div><div class="clear"/></div>

Agora é só personalizar as imagens e o conteúdo. Deixei um modelo simples para personalizarem mais fácil.