Distinto CSS para cada Navegador

Un día tuve que buscar una solución para un diseño que estaba armando. El problema era que en Google Chrome se veía mal mi diseño, pero en IE y Firefox se veía sin problemas, la solución que encontré fue la siguiente:

CSS Browser Selector, un excelente script que nos permite utilizar distinto CSS en cada navegador.

Dependiendo del navegador podremos utilizar distintos diseños y lo único que necesitamos es agregar un script a nuestra página.

Copia y pega el siguiente código dentro de <head> y </head> de tu  página:

PLAIN TEXT
<script type='text/javascript' src='http://blooging.googlecode.com/files/css-selector.js'></script>

Modo de uso:

En este ejemplo usaremos el div #nav.

CSS distinto en Google Chrome:

PLAIN TEXT
.chrome #nav {aquí tus estilos}

CSS distinto en Opera:

PLAIN TEXT
.opera #nav {aquí tus estilos}

CSS distinto en Safari:

PLAIN TEXT
.webkit #nav {aquí tus esilos}

Es muy simple de aplicar y no necesita mayor conocimiento, sólo debemos agregar un "class" antes de cada "div" que queramos cambiar, en nuestra hoja de estilos.

Puedes ver más ejemplos en la web oficial:

Enlace: CSS Browser Selector

Publicado el: 03/04/2010
Publicado en la Categoria: CSS
Publicado en la Categoria: JuanK
Este post tiene: 9 Comentarios »

Post Similares


Lazy Load – Retrasar carga de Imágenes

Cómo ya sabemos el tiempo de carga de nuestro sitio es un factor SEO importante en este tiempo, es por eso que aprendimos a medir la velocidad de carga de un blog. Para disminuír aún más este tiempo, podemos usar Lazy Load.

Lazy Load es un script en jQuery que nos permite retrasar la carga de las imágenes hasta el momento que un usuario se acerqué a esa imágen, lo que nos disminuye considerablemente las peticiones http realizadas a un sitio.

Para agregar este excelente efecto debemos agregar el siguiente script a nuestro footer.php:

PLAIN TEXT
<script type='text/javascript' src='http://blooging.googlecode.com/files/lazyload.js'></script>

Pero debemos tener instalado jQuery en nuestro sitio, si no lo tienes agrega esto a tu footer.php:

PLAIN TEXT
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'></script>

Con esto ya tenemos la mayor parte hecha, sólo nos falta agregar el código que hará funcionar Lazy Load, que es este:

PLAIN TEXT
<!--Lazyload-->
<script type='text/javascript'>
jQuery(document).ready(function($){
  jQuery(".entry img").lazyload({
    effect:"fadeIn",
    placeholder: "http://img130.imageshack.us/img130/2134/ajaxloader.gif"
  });
});
</script>

En este caso usamos #entry img, para que haga el efecto solamente en las imágenes de los posts, aunque podemos usar img (sin # ni .) para que haga el efecto en todas las imágenes del sitio.

También podemos usar una imagen de fondo, para que ocupe el lugar de la imagen original antes de cargarla. Podemos usar la misma imágen que usamos en el efecto cargando que hacemos con CSS.

P.D: Usamos los servidores de Google para alojar scripts.

Publicado el: 23/03/2010
Publicado en la Categoria: SEO
Publicado en la Categoria: JuanK
Este post tiene: 10 Comentarios »

Post Similares


Alojar scripts en Google Code

Una forma de evitar sobrecargar tu hosting con tus propios archivos es subirlos a un servidor externo, el problema está en que no podemos confiarnos completamente de terceros, pero si se trata de Google ¿confiaremos?. Yo confío y es por eso que alojo mis scripts en Google Code.

Publicado el: 18/03/2010
Publicado en la Categoria: Asides
Publicado en la Categoria: JuanK
Este post tiene: 4 Comentarios »

Post Similares


Romper Iframes [Script]

Mientras me daba una vuelta por ForoBeta me encontré con un script que nos permite eliminar cualquier iframe, como por ejemplo, en los resultados de busqueda en las imágenes de google. Al entrar a una imágen se muestra una barra blanca, con el enlace hacia la imágen, pero aunque se cargue nuestro sitio, no nos envía visitas.

Bloquear Iframes [Script]

Para arreglar esto podemos implementar un script que nos elimine ese iframe, de tal forma que las visitas se vean obligadas a entrar a nuestro sitio.

Este código lo agregaremos dentro de las etiquetas <head> </head> (según los usuarios de ForoBeta deberíamos agregarlo justo debajo de <body>, pero al hacerlo se demora más en cargar el script y es una molestia para los usuarios. Ya probé que  funciona perfectamente dentro de <head>, no se preocupen)

PLAIN TEXT
<!--Romper Iframes-->
   <script type="text/javascript"><!--
   if(top.location!=this.location) top.location=this.location;
   //--></script>

Podrán sacarle mucho provecho si reciben hartas visitas desde Google Images, ya que ahora todas las visitas entrarán a nuestro sitio por obligación ;)

Espero que les sea igual de útil que a mí.

Publicado el: 20/09/2009
Publicado en la Categoria: SEO
Publicado en la Categoria: JuanK
Este post tiene: 8 Comentarios »

Post Similares


Página 1 de 3123