M
MixViral
Gamma
Buenas tardes a todos compañeros, hoy les traigo un nuevo pequeño tutorial de como poder agregar un popup hecho con HTML y CSS donde podrán poner sus LikeBox o cualquier otra cosa que mostrar.
PUEDEN VER UN DEMO EN MI WEB (en mi caso yo agrege esto solo para las entradas individuales): Dragon Ball: Goku visita el Universo Street Fighter | Mix Viral
INSTALCION:
1. Agregamos el CSS antes de ]]></b:skin>:
Insertar CODE, HTML o PHP:
.popup {
background-color: #ffffff;
color: #888888;
height: 155px;
padding: 20px;
position: fixed;
right: 30%;
top: 25%;
width: 340px;
z-index: 101;
-moz-box-shadow: 0px 0px 10px 1px #888888;
-webkit-box-shadow: 0px 0px 10px 1px #888888;
box-shadow: 0px 0px 10px 1px #888888;
border-radius: 10px;
-moz-border-radius: 10px;
}
.overlay {
background: #000000;
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 100;
opacity:0.5;
}
a.close {
background: url("http://i.imgur.com/ZSlkx6J.png") repeat scroll left top transparent;
cursor: pointer;
float: right;
height: 32px;
left: 32px;
position: relative;
top: -33px;
width: 32px;
}
#backpop{background-color: rgba(51, 51, 51, 0.81);width: 100%;height: 100%;z-index: 999;position: fixed;}2. Agregamos los JS antes de </head> (No soy programador, este codigo creo se puede simplificar.. si algun programador puede seria bueno)
Insertar CODE, HTML o PHP:
<script type="text/javascript">
function openDialog() {
$('#overlay').fadeIn('fast', function() {
$('#popup').css('display','block');
$('#popup').animate({'left':'30%'},500);
});
}
function closeDialog(id) {
$('#'+id).css('position','absolute');
$('#'+id).animate({'left':'-100%'}, 500, function() {
$('#'+id).css('position','fixed');
$('#'+id).css('left','100%');
$('#overlay').fadeOut('fast');
});
}
</script>
<script type="text/javascript">
function openDialog() {
$('#overlay').fadeIn('fast', function() {
$('#backpop').css('display','block');
$('#backpop').animate({'left':'30%'},500);
});
}
function closeDialog(id) {
$('#'+id).css('position','absolute');
$('#'+id).animate({'left':'-100%'}, 500, function() {
$('#'+id).css('position','fixed');
$('#'+id).css('left','100%');
$('#backpop').fadeOut('fast');
});
}
</script>3. Ahora agregamos la ventana en HTML este debe ser agregado despues de <body>:
Insertar CODE, HTML o PHP:
[COLOR="#FF0000"]<b:if cond='data:blog.pageType == "item"'>[/COLOR]
<div id="backpop">
<div id="popup" class="popup">
<a onclick="closeDialog('popup');" class="close"></a>
<div>
<div style="font-size: 14px;color: #333;line-height: 1.8em;text-transform: uppercase;text-align: center;font-weight: bold;">Apoyanos con un Like! es GRATIS! :D</div>
[COLOR="#0000FF"]AQUI CODIGO DE TU LIKEBOX[/COLOR]
</div>
</div>
</div>
[COLOR="#FF0000"]</b:if>[/COLOR]RESALTADO DE ROJO: Estas son las condicionales que indican que este elemento solo aparecera en las entradas individuales (si deseas cambiar esto puedes visitar la siguiente web para conocer las condicionales: Condicionales de Blogger | Ciudad Blogger - Trucos y tutoriales para tu blog)
RESALTADO DE AZUL: Aqui debes insertar el codigo de tu LikeBox.
bueno amigos eso seria todo.! 🙂 espero les sirva.. salu2 :encouragement:
