En este tutorial mostraré cómo añadir una advertencia de contenido en un blog que contenga material no apto para menores de edad. La idea de este plugin es que mantenga un límite mediante un bloqueador de contenido basado en jQuery el cual se sobrepone delante del blog.Puedes ver un ejemplo visitando este blog de pruebas, o bien observando la imagen siguiente:
¿Cómo añadirlo a Blogger?
En ''Diseño | Edición HTML'' buscaremos la siguiente sección:
]]></b:skin>
Arriba de esta, pega el siguiente código:
/*Advertencia contenido CSS*/
#aceptar{
cursor: pointer;
text-decoration:none;
color: #fff;
}
#oculto{
display:none;
position:fixed;
_position:absolute; /* hack para internet explorer 6*/
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
border:1px solid #cecece;
z-index:1;
}
#advertencia{
display:none;
position:fixed;
_position:absolute; /* hack para internet explorer 6*/
height:600px;
width:400px;
background:#000;
z-index:2;
color:#fff;
padding:12px;
font-size:13px;
}
#advertencia h1{
text-align:left;
color:#fff;
font-size:22px;
font-weight:700;
border-bottom:2px solid #D3D3D3;
padding-bottom:2px;
margin-bottom:20px;
}
#advertencia a {
font-size:18px;
line-height:14px;
color:#fff;
font-weight:700;
}
#advertencia a{
cursor: pointer;
text-decoration:none;
color: #fff;
}
#aceptar{
font-size:18px;
line-height:14px;
color:#fff;
font-weight:700;
}
Paso 2: Añadiendo jQuery, el script y las funciones:
Ahora busca la siguiente sección en tu plantilla:
</head>
Arriba de ésta, pega el siguiente código:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script src="https://sites.google.com/a/blogsydescargas.co.cc/ayudabloggers/scripts2/jquery.cookie.js" type="text/javascript"></script>
<script type="text/javascript">
var popupStatus = 0;
//this code will load popup with jQuery magic!
function loadPopup(){
//loads popup only if it is disabled
if(popupStatus==0){
$("#oculto").css({
"opacity": "1"
});
$("#oculto").fadeIn("slow");
$("#advertencia").fadeIn("slow");
popupStatus = 1;
}
}
//This code will disable popup when click on x!
function disablePopup(){
//disables popup only if it is enabled
if(popupStatus==1){
$("#oculto").fadeOut("slow");
$("#advertencia").fadeOut("slow");
popupStatus = 0;
}
}
//this code will center popup
function centerPopup(){
//request data for centering
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = $("#advertencia").height();
var popupWidth = $("#advertencia").width();
//centering
$("#advertencia").css({
"position": "absolute",
"top": windowHeight/2-popupHeight/2,
"left": windowWidth/2-popupWidth/2
});
//only need force for IE6
$("#oculto").css({
"height": windowHeight
});
}
//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){
if ($.cookie("anewsletter") != 1) {
//centering with css
centerPopup();
//load popup
loadPopup();
}
//CLOSING POPUP
//Click the x event!
$("#aceptar").click(function(){
disablePopup();
$.cookie("anewsletter", "1", { expires: 1 });
});
//Press Escape event!
$(document).keypress(function(e){
if(e.keyCode==27 && popupStatus==1){
disablePopup();
}
});
});
</script>
Paso 3: Añadiendo el contenido:
Por último busca la siguiente sección:
</body>Arriba de esta, pega el siguiente código:
<div id='advertencia'>
<h1>Este sitio web contiene material sexual explícito.</h1>
<center>
<img border='0' src='http://3.bp.blogspot.com/-31VVSrpgzy4/TfmULHOu11I/AAAAAAAABHA/TuA9eFxhwtU/s1600/stop-icon.png'/></center>
<p id='contenido'>
Para poder entrar debes certificar lo siguiente:
<p>Bajo la ley de gobierno de mi país he llegado a la mayoría de edad requerida para ver material sexual explícito y estoy accediendo a esta web desde un lugar donde el contenido sexual explícito es legal y permitido. </p>
<p>No voy a permitir a cualquier persona a acceder a esta página web que no esté legalmente autorizado para hacerlo.</p>
<p>
<a href='javascript:history.back()'>¡Ir atrás!</a></p>
<p><a id='aceptar'>Soy mayor de edad, ¡ENTRAR!</a></p>
</p>
</div>
<div id='oculto'/>
Guarda los cambios y listo.
Importante:
- Al script se le ha seteado una cookie de 1 día, por lo que si presionas en ''Mostrar contenido'', la siguiente vez tomará un día en volver en aparecer. Para evitar presionar sobre el enlace para mostrar contenido, puedes presionar la tecla ESC de tu teclado ya que se le ha atribuido el evento de cierre sin cookie.
- Recuerda que si tienes demasiado sobrecargado el blog, es muy posible que el script tarde en aparecer, por lo tanto el contenido explícito tarde en ocultarse.
No hay comentarios:
Publicar un comentario