Divisor

Éste sitio web usa cookies, puedes ver la política de cookies, Aquí. ⤵ ⤵


Cómo evitar que tú web se abra en una ventana IFRAME



Evitar IFRAME en una Web




Para empezar este post, me gustaría describir qué es un IFRAME y para qué se utiliza: Un IFRAME es una etiqueta HTML para abrir una ventana que nos muestra otro lugar externo dentro de tu página web o blog, es decir, abre la ventana dentro de tu contenido de tu página web, para ver el contenido de otra web. Es cómo si abriéramos un agujero dentro de tu web, para visualizar el contenido de otra página, sin tener ningún control sobre la misma, claro está. Ésta etiqueta HTML permite incrustar CSS y también algunos atributos, pero sólo se podrán usar para el marco de la ventana, no para el contenido que queráis visualizar dentro de ella. Prosiguiendo con el tema veremos un IFRAME de los 40 principales en demostración:









En algunos sitios o lares, incluido éste, pero no con el cometido que se explica a continuación, aclarado está. La etiqueta IFRAME la han utilizado para lucrarse o beneficiarse del contenido de otros, incrustando un IFRAME en un servidor gratuito, que te permita crear una página web, le ponen alrededor del IFRAME, publicidad, y voilà, negocio niquelado. Esto que os acabo de mencionar, se está poniendo de moda, y se está haciendo popular. Para ello lo mejor es protegerse, para que eso no te ocurra, si estás interesado en protegerte, claro está. Lo que vamos ha hacer a continuación, es añadir en la cabecera de tu site, dentro de tú documento HTML, entre: (<head> y </head>). El script que verás a continuación, y lo que hace es redireccionar cualquier sitio que coloque un IFRAME con nuestra URL, para que lo envíe de nuevo a casa, es decir a nuestra página web. El script es el siguiente, y así se mostrará en todo el espacio de la ventana, al cargarse la página entera, se expandirá a todo el espacio de la ventana. Para ser más concisos y aclararlo un poco, vamos allá, con el script que sirve para lo dicho y el efecto se logra con el javascript siguiente que ves seguidamente:







Éste script lo debes de añadir entre <head> y </head> en una página web:


<script language="JavaScript"> 
<!--// Así evito que se cargue en otro frame 
if (top.location != self.location)top.location = self.location; 
//--> 
</script>




Y ahora viene para la plataforma Blogger, para evitar que usen iframes de nuestro sitio, es totalmente diferente al anterior, ya que es para Blogger cómo dije, y es algo más complejo, lo mejor es colocarlo inmediatamente después de <head> para que el redireccionamiento sea inmediato y no se demore demasiado, así qué vayamos al tajo, y a continuación verás las pautas ha seguir para lograr lo mencionado o citado anteriormente, enjoy this tip!




Éste script lo debes de añadir entre <head> y </head> en Blogger:




  1. Ves a Blogger.
  2. Ahora a Plantilla.
  3. Editar HTML.
  4. Y buscas con cautela la etiqueta <head>
  5. Y Debajo de ella pegas lo siguiente, y listo, ya no podrán poner iframes de tu sitio.




<script type='text/javascript'>
//<![CDATA[
  var laURL, blogger;
  laURL= window.location.href;
  blogger = laURL.indexOf("token=");
  if(blogger==-1) {
  if (top.location != self.location) { top.location = self.location; } 
  }
//]]>
</script>





Aizum Blog, miércoles, diciembre 24, 2014

Efecto Zoom con Subtítulos para las Imágenes con CSS3





Efecto Zoom con Subtítulos para las Imágenes con CSS3




En está ocasión me gustaría mostraros un efecto de animación, para vuestras imágenes, que al pasar el cursor por encima, procederá a visualizarse un título con la descripción de la fotografía empleada, en dicha ocasión, empleando dicho efecto zoom, en este caso citado. Éste truco, se elaborara mediante estilos CSS3, transiciones, transformaciones de escalas, antes y después (before and after) y hover (encima), en resumidas cuentas, cómo podréis ver en el siguiente ejemplo de demostración y su respectivo código de estilos CSS3, para su correcto funcionamiento. Ahora la demostración, y luego, el código CSS y el HTML para dar la llamada al mencionado efecto, si os gusta lo podéis copiar y pegar. Enjoy this tip!









Código CSS para añadir en blogger los estilos CSS!


  1. Ir a Blogger
  2. Después a Plantilla.
  3. Y ahora ir a Editar HTML.
  4. Añade el siguiente código antes de ]]></b:skin>:



.titlezoom{display:inline-block;overflow:hidden;position:relative;text-decoration:none}
.titlezoom:before{display:block;background-color:#000;content:"";height:100%;opacity:0;position:absolute;width:100%;z-index:2}
.titlezoom:after{display:block;background-color:rgba(255,255,255,0.8);color:#000;content:attr(title);left:-100%;position:absolute;text-align:center;text-transform:uppercase;top:5%;width:94%;z-index:3;padding:2% 3%}
.titlezoom img{border:none;display:block;z-index:1}
.titlezoom:before,.titlezoom:after,.titlezoom img{-webkit-transition:all 200ms ease;-moz-transition:all 200ms ease;-o-transition:all 200ms ease;transition:all 200ms ease}
.titlezoom:hover img{-webkit-transform:scale(1.8);-moz-transform:scale(1.8);-ms-transform:scale(1.8);-o-transform:scale(1.8);transform:scale(1.8)}
.titlezoom:hover:before{opacity:0.2}
.titlezoom:hover:after{left:0}




Código HTML para usar el efecto en imágenes cuando lo desees!



<div class="separator" style="clear: both; text-align: center;">
<a class="titlezoom" href="Aquí_la_URL_de_la_ruta_de_imagen_seleccionada" title="Título_de_la_fotografía_al_pasar_el_cursor"><img border="0" src="Repetir_ de_nuevo_la_URL_de_la_imagen_seleccionada" height="450" width="500" /></a></div>



  1. En el último código HTML, puedes modificar lo siguiente:
  2. Tamaño: height y width (alto y ancho) en pixeles sobre la imagen.
  3. Title= títul0 de la fotografía al pasar el cursor, al hacer hover.
  4. Y por último, debes de añadir la URL de las imágenes, dos veces, la ruta de las imágenes.





Aizum Blog, domingo, diciembre 21, 2014

Botones sociales flotantes con efecto hover



Botones sociales flotantes


De nuevo, después de una larga temporada sin publicar nada, hoy os traigo un nuevo cacharrito social, flotante, espero que os guste o sea de vuestro agrado. Trata de una barra social de botones sociales, que se posicionan en la parte lateral del blog o web, y están desarrollados con CSS3, HTML y Sprites de imagen al hacer hover o al pasar el cursor por encima del botón social. Y sirve para que tus seguidores o lectores de tu blog, o ya sea de una web, hagan o accionen con un clic en dicho icono social, para que te sigan en las distintas redes sociales. A priori, este gadget social, está realizado y ejecutado, para obtener más fans o seguidores de tu página web o blog, de tu site a las redes sociales. Los iconos están formados por los botones siguientes: Facebook, Twitter, Google+, Youtube, RSS. Bueno, después de una breve explicación, puedes ver la demo de los iconos a continuación.









Para añadir ésta barra social en Blogger, sigues estos pasos!



  1. Ir a Blogger
  2. Después a Plantilla.
  3. Añadir un Gadget.
  4. Y ahora ir a Editar HTML.
  5. Añade el siguiente código antes de ]]></b:skin>:


.social-sidebar-buttons {
width: 32px;
margin-left: 1100px;
}
.social-facebook {
    height: 48px;
    width: 48px;
    margin:0px 0 0 48px;
    float: left;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
    transition: all ease 0.3s;
 position:fixed;
 right:0px;
 z-index:1000;
 top:200px;

}
.social-facebook:hover {
    background-position: 0px -48px;
    box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
}
.social-twitter {
    height: 48px;
    width: 48px;
    margin:0px 0 0 48px;
    float: left;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
    transition: all ease 0.3s;
 position:fixed;
 right:0px;
 z-index:1000;
 top:250px;
 
}
.social-twitter:hover {
    background-position: 0px -48px;
    box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
}
.social-google {
    height: 48px;
    width: 48px;
    margin:0px 0 0 48px;
    float: left;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
    transition: all ease 0.3s;
 position:fixed;
 right:0px;
 z-index:1000;
 top:300px;
 
}
.social-google:hover {
    background-position: 0px -48px;
    box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
}
.social-youtube {
    height: 48px;
    width: 48px;
    margin:0px 0 0 48px;
    float: left;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
    transition: all ease 0.3s;
 position:fixed;
 right:0px;
 z-index:1000;
 top:350px;
 
}
.social-youtube:hover {
    background-position: 0px -48px;
    box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
}
.social-rss {
    height: 48px;
    width: 48px;
    margin:0px 0 0 48px;
    float: left;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
    transition: all ease 0.3s;
 position:fixed;
 right:0px;
 z-index:1000;
 top:400px;
 
}
.social-rss:hover {
    background-position: 0px -48px;
    box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
}
.twitter-hover {
    background-image: url('http://3.bp.blogspot.com/-aW0EJLzWqQQ/U-kFYKUFEPI/AAAAAAAAVZc/uFV9N6kQEts/s1600/twitter-hover.png');
}
.facebook-hover {
    background-image: url('http://1.bp.blogspot.com/-OUx8NjCmOPY/U-kFMvueC5I/AAAAAAAAVZU/c9GltNEzfwI/s1600/facebook-hover.png');
 
}
.google-hover {
    background-image: url('http://2.bp.blogspot.com/-eBa2XYdq3Z0/U-kFh6_wPmI/AAAAAAAAVZk/bYRySdPNLZs/s1600/google-hover.png');
}
.youtube-hover {
    background-image: url('http://3.bp.blogspot.com/-WgqHTGHIbwU/U-kFrohrovI/AAAAAAAAVZs/VDYpeZL4REA/s1600/youtube-hover.png');
}
.rss-hover {
    background-image: url('http://3.bp.blogspot.com/-fLZeQuFiekc/U-kF1msvhZI/AAAAAAAAVZ0/fHgCKPkPlBI/s1600/rss-hover.png');
}



Y ahora toca añadir los botones del HTML y la llamada al estilo CSS!



  1. Ir a Blogger
  2. Después a Plantilla.
  3. Editar HTML.
  4. Añade el siguiente código antes de </body>:
  5. Y remplaza todas las "#" por las URL de tus redes sociales, y listo!


<a href="#" alt="Facebook" target="_blank"><div class="social-facebook facebook-hover"></div></a><a href="#" alt="Twitter" target="_blank"><div class="social-twitter twitter-hover"></div></a><a href="#" alt="Google+" target="_blank"><div class="social-google google-hover"></div></a><a href="#" alt="Youtube" target="_blank"><div class="social-youtube youtube-hover"></div></a><a href="#" alt="Rss" target="_blank"><div class="social-rss rss-hover"></div></a>




Aizum Blog, lunes, agosto 11, 2014

Gadget social lateral profesional para que te sigan



Gadget social profesional lateral para que te sigan



En está pesquisa navegando por la red, me he topado con una widget social excepcional, que sé que os va a gustar, tanto cómo a mi, seguro que os gusta, no me cabe duda. Trata de un gadget social flotante, que se posiciona en la parte izquierda de tu blog en la plataforma Blogger, o también en la parte derecha, cómo lo prefieras, sólo debes de cambiar todos los "LEFT" del código CSS, por "RIGHT". Éste fantástico widget, lo he visualizado en el Blog: Digital Blog Inc, y me a parecido interesante compartirlo con todos ustedes. Se desliza mediante vayas bajando el scroll o barra de deslizamiento y sirve para que te sigan en tus redes sociales, básicamente, la barra social lateral, lleva consigo, las redes siguientes que verás escritas a continuación: Twitter, Google+, Facebook, y Feedburner. Ahora la demo:











Para añadir ésta barra social en Blogger, sigues estos pasos!




  1. Ir a Blogger
  2. Después a Diseño.
  3. Añadir un Gadget.
  4. Y ahora ir a HTML & Javascript.
  5. Y por último copiar y pegar el siguente código.
  6. Haz las modificaciones pertinentes, cambia las "#" por las URL de tus redes sociales.


<div id='social-sidebar'>
 <ul>
<li>
 <a class='entypo-twitter' href='#' target='_blank'>
 <span>Twitter</span>
 </a>
 </li>
<li>
 <a class='entypo-gplus' href='#' target='_blank'>
 <span>google+</span>
 </a>
 </li>
<li>
 <a class='entypo-facebook' href='#' target='_blank'>
 <span>facebook</span>
 </a>
 </li>
<li>
 <a class='entypo-rss' href='#' target='_blank'>
 <span>feedburner</span>
 </a>
 </li>
</ul>
</div>
<style type='text/css'>
/*<![CDATA[*/
@charset "utf-8";
/* CSS Document */
/* ---------- ENTYPO ---------- *//* ---------- Digital Hub Inc : http://www.digitalhubinc.com/---------- */
/* ---------- http://weloveiconfonts.com/ ---------- */
@import url(http://weloveiconfonts.com/api/?family=entypo);
[class*="entypo-"]:before {
font-family: 'entypo', sans-serif;
}
/* ---------- GENERAL ---------- */
#social-sidebar a { text-decoration: none; }
#social-sidebar ul {
list-style: none;
margin: 0;
padding: 0;
}
/* ---------- Social Sidebar ---------- */
#social-sidebar {
right: 0;
margin-top: -75px; /* (li * a:width) / -2 */
position: fixed;
top: 50%;
}
#social-sidebar ul li:first-child a { border-radius: 0 5px 0 0; }
#social-sidebar ul li:last-child a { border-radius: 0 0 5px 0; }
#social-sidebar ul li a {
background: #121212;
color: #fff;
display: block;
height: 50px;
font-size: 18px;
line-height: 50px;
position: relative;
text-align: center;
width: 50px;
}
#social-sidebar ul li a:hover span {
right: 130%;
opacity: 1;
}
#social-sidebar ul li a span {
border-radius: 3px;
line-height: 24px;
right: -100%;
margin-top: -16px;
 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
padding: 4px 8px;
position: absolute;
 -webkit-transition: opacity .3s, right .4s;
 -moz-transition: opacity .3s, right .4s;
 -ms-transition: opacity .3s, right .4s;
 -o-transition: opacity .3s, right .4s;
transition: opacity .3s, right .4s;
top: 50%;
z-index: -1;
}
#social-sidebar ul li a span:before {
content: "";
display: block;
height: 8px;
right: -4px;
margin-top: -4px;
position: absolute;
top: 50%;
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 -o-transform: rotate(45deg);
transform: rotate(45deg);
width: 8px;
z-index: -2;
}
#social-sidebar ul li a[class*="twitter"]:hover,
#social-sidebar ul li a[class*="twitter"] span,
#social-sidebar ul li a[class*="twitter"] span:before { background: #6CDFEA; }
#social-sidebar ul li a[class*="gplus"]:hover,
#social-sidebar ul li a[class*="gplus"] span,
#social-sidebar ul li a[class*="gplus"] span:before { background: #E34429; }
#social-sidebar ul li a[class*="facebook"]:hover,
#social-sidebar ul li a[class*="facebook"] span,
#social-sidebar ul li a[class*="facebook"] span:before { background: #234999; }
#social-sidebar ul li a[class*="rss"]:hover,
#social-sidebar ul li a[class*="rss"] span,
#social-sidebar ul li a[class*="rss"] span:before { background: #f57b05; }
/*]]>*/
</style>



Digital Hub Inc!




Aizum Blog, miércoles, julio 02, 2014


Divisor Star

✏ Buscador!

En las redes ⤵

✏ Vídeos!

 

Publicidad!

Subir hacia arriba ▲ Modificated & Designed by Iván Dangerfield © 2014. Converted by Bloggertheme9