Videotutorial de optimización de AdSense

Un excelente videoturial donde nos exponen varios temas para optimizar nuestro AdSense.
En el video se tocarán dos grandes temas , divididos cada uno en varios apartados :

► Optimización del sitio:

» Ubicación de los anuncios.
» Formato de anuncios.
» Uso de la paleta de colores.

► Uso de la cuenta AdSense:

» Tipo de anuncios.
» Uso de criterios de seguimiento.

Click en la imagen para ver video

Escribiendo sobre una imagen.

Hace tiempo veíamos la forma de añadir texto sobre una imagen, al parecer el tema no quedó demasiado claro respecto como por ejemplo estilos para la fuente del texto o posicionar ese texto a nuestro antojo.

Lorem Ipsum is simply dummy text of the printing and typesetting industry..

Lorem Ipsum has been the industry's standard dummy text...

Para el ejemplo añadimos lo siguiente:

<div style="float: left; position: relative;">

<img alt="texto-imagen" src="url de la imagen" />

<div style="color: black; font-family: Courier; left: 20px; position: absolute; top: 55px; width: 150px;">

Lorem Ipsum is simply dummy text of the printing and typesetting industry..

Lorem Ipsum has been the industry's standard dummy text...

</div>

</div>

Y entendemos lo que añadimos.
-Subimos la imagen al editor de entradas, en la pestaña de Edición de HTML copiamos la url de la imagen y la añadimos donde dice "url de la imagen"
-Con la propiedad float estamos adaptando el texto respecto al fondo, al escoger left lo adaptamos a la izquierda, si fuera a la derecha sería right.
-En la propiedad position escogemos absolute para ubicar el texto en un lugar concreto.
-En style="color: black; font-family: Courier; es el sitio que podemos añadir estilos para la fuente siempre separados por por punto y coma ";"
-En la misma línea de los estilos de fuente añadimos el espacio de separación del extremo ya sea izquierdo (left) o derecho ( right)  indicando los pixels (left: 20px; para el ejemplo)
-Al igual que dimos un espacio de separación a los extremos lo hacemos del borde superior top: 55px; si el texto cubre todo el espacio de alto de la imagen añadimos espacio inferior con bottom: xx;
-Decidimos también el ancho que medirá el texto, lo haremos añadiendo width: 150px a más o menos anchura para el texto modificamos el valor de 150px

De regreso

De regreso después de una semana en la que no he podido conectarme y respondiendo a las preguntas interesándose por mi ausencia...

Lamento de veras esos comentarios y mails sin responder que en breve tendrán respuesta.

Expandir/contraer gadget de Archivos con efecto deslizante

Habíamos visto como expander y contraer partes de la sidebar para ahorrar espacio; ahora vamos a ver algo similar, pero usando dos librerías de Google API : Prototype y Scriptaculous, que nos permitirá expander y contraer nuestros gadgets con un efecto deslizante. Por cierto, un ejemplo lo pueden ver en mi blog, en el gadget "Archivo [+/-]" que se encuentra en la sidebar.

Si bien la forma de expandir y contraer es casi la misma para cualquier gadget, he notado que a muchos les parece más difícil hacerlo en el gadget de etiquetas y de archivos, quizás porque la estructura del gadget es diferente a los de cualquier otro que agreguemos. Así que hoy vamos a ver cómo expandir y contraer el gadget de Archivos con un efecto deslizante y más adelante haremos lo mismo con el gadget de etiquetas y finalmente con los de cualquier otro gadget.

Ahora empecemos:

1.§ Vamos a Diseño - Edición de HTML y Expandir plantillas de artilugios.

2.§ Con ayuda de CTRL+F buscamos </head> y antes de éste pegaremos el siguiente código:

<!-- Prototype y Scriptaculous-->
<script src='http://www.google.com/jsapi'/>
<script>
google.load("prototype","1.6.0.3");
google.load("scriptaculous", "1.8.2");
</script>
<!-- Prototype y Scriptaculous-->

Sí ya tenemos este código en nuestra plantilla no será necesario agregarlo de nuevo.

3.§ Ahora , nuevamente con ayuda de CTRL+F buscaremos el nombre que le dimos al gadget de nuestra sección archivos. Puede que le hayamos puesto simplemente "Archivo" (como en mi caso) u otro nombre (Mis archivos, Blog Archive,etc).
Por ejemplo, digamos que mi sección de archivos se llama Archivo del blog,el nombre deberemos de buscarlo en la plantilla, pero al buscar nos encontraremos con dos o tres, así que el que usaremos será el que tenga la siguiente estructura:

<b:widget id='BlogArchive1' locked='false' title='Archivo del blog' type='BlogArchive'>

4.§ Con mucho cuidado insertamos lo que está resaltado en negrita, sin olvidar el </div> que está casi al final; debemos de tener en cuenta que el código puede cambiar un poco según cada plantilla, pero nos guiaremos por el código que está debajo de las líneas que pegaremos:

<b:widget id='BlogArchive1' locked='false' title='Archivo del blog' type='BlogArchive'>
<b:includable id='main'>
<a href='#' onclick='Effect.toggle("Archivo","slide"); return false'>
<b:if cond='data:title'>
<h2>&#9660;&#47;&#9650; <data:title/></h2>
</b:if>
</a><div align='center' id='Archivo' style='display: none;'>
<div class='widget-content'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>

Damos click a guardar y listo !

Enlaces para visitar

• Cambiar una palabra por un logo o una imagen

• Aviary edición de imágenes online

• Navbar transparente Blogger

• Live Banner Maker

• FREE CSS - templates y plantillas GRATIS

• Guía para ofrecer suscripción por email paso a paso

• Destacar los enlaces

• Utiliza jQuery & Scriptaculous... simultáneamente
  

• ¿Cómo roban las contraseñas de Hotmail, Gmail, Yahoo y Facebook?

• Otimizar as imagens - tamanho e formato

Opacidad en imagen al pasar el mouse

En una entrada anterior habíamos visto cómo añadir opacidad a una imagen y agregarle texto encima; lo que vamos a ver hoy es algo similar , sólo que la imagen se va a poner opaca al pasar el mouse:



Para conseguirlo es muy sencillo, bastará con usar el siguiente código:

<img src="URL-imagen" width="500" height="375" onmouseout="this.style.opacity=1;this.filters.alpha.opacity='100';" onmouseover="this.style.opacity=0.2;this.filters.alpha.opacity='20';"/>

» Cambiaremos width="500" height="375" por el ancho y el alto de la imagen respectivamente.

A este código podemos darle infinidad de usos: por ejemplo para añadir el efecto a las banderitas de un traductor o a los marcadores sociales, todo esto lo veremos en próximos post.

Oh, The Temptation

"Si te doy una nube y no te la comes te regalo otra nube"