Slideshow sencillo en Javascript

Ir a Diseño, Elementos de la página y añadir un gadget HTML/Javascript.

Poner el siguiente código:

<div id="cambiaimg-vku" style="text-align: center;"></div>
<script type="text/javascript">
//<![CDATA[
var cont = 0;
var arr = [
["http://loseasi.blogspot.com/", "http://URL IMAGEN 1/como-se-hace-lo-se-asi-cabezera.png"],    
["http://melmysweetworld.blogspot.com/", "URL IMAGEN 2/meli.jpg"],      
["http://vitua.blogspot.com/", "URL IMAGEN 3/vitua.png"]

]
function cambiaimg_vku() {
var d = document.getElementById("cambiaimg-vku");
cont = cont % arr.length;
d.innerHTML = "<a href='"+arr[cont][0]+"' target='_blank'><img border=0 src='"+arr[cont][1]+"'></a>";
cont++;
}
function inicioimg_vku() {
cambiaimg_vku();
setInterval(cambiaimg_vku, 3000);
}
window.onload=inicioimg_vku;
//]]>
</script>

Cambiar los link que se dirigirán al hacer clic sobre la imagen. (color azul)

Cambiar los link de las imágenes. (color rojo)

Ajustar la velocidad (3000). (negrita) Mayor es mas lento.

Para mostrar mas imágenes agregar la siguiente línea: (la ultima línea colocada no tiene que llevar la coma al final)

["http://loseasi.blogspot.com/","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg3bixEWjvbUgUTPNyKN4rHR6p2dJLq3ghGY5_20s2heqALqSM6B2yVjwUFZTWIhZjiipzzjj8Pvc_qKqdvNLDNfgkmjxBzxT5eCz4X7avNAhbLwdmBMlOqcz0S6Iy1wWyjHSUhkES8IKi/s570/como-se-hace-lo-se-asi-cabezera.png"],

Colocar el gadget en el lugar que más les guste para mostrar las imágenes.

Fondo del blog en movimiento tipo 'Disco'

Hace poco veíamos cómo poner el fondo del blog en movimiento al estilo groovy, ahora veremos cómo ponerle movimiento con unas luces de colores al estilo Disco de los 70s que están siempre en movimiento.

Puedes ver un ejemplo en este blog de pruebas.

El procedimiento es muy sencillo sólo basta insertar un script en el blog, para ello vamos a Diseño | Edición de HTML y antes de </body> pegamos lo siguiente:

<script type='text/javascript'>
// <![CDATA[
var colsel=new Array('#E80F02', '#DB52EE', '#45E350', '#E7E61A', '#0B82DE', '#D7DF01');
var speed=100;

/*
Blob space Graphic Effect
(c)2010 mf2fm web-design
http://www.mf2fm.com/rv
DON'T EDIT BELOW THIS BOX
*/

window.onload=whizzy;
var div;
var ring=new Array();
var swide=screen.width;
var shigh=screen.height;
var count=0;
var roun=0;
var nour=0;
function whizzy() {
var i, dvs;
div=document.createElement('div');
dvs=div.style;
dvs.position='fixed';
dvs.left='50%';
dvs.top='50%';
dvs.width='1px';
dvs.height='1px';
dvs.overflow='visible';
dvs.zIndex='-1';
i=document.body.style.backgroundColor;
if (document.body.parentNode) {
if (i) document.body.parentNode.style.backgroundColor=i;
document.body.style.backgroundColor="transparent";
}
document.body.insertBefore(div, document.body.firstChild);
for (i=0; i<30; i++) ring['col'+i]=new Array();
add_blobs();
zoomer();
}

function add_blobs() {
var f, h, i, j, k, w;
for (i=50; i<swide*1.5;) {
f=Math.floor(10+140*(i/swide)); // De 10 a 150
ring['row'+count]=new Array();
for (j=0; j<30; j++) {
h=-f/8+i/2*Math.cos(Math.PI*j/15);
w=f/5+i/2*Math.sin(Math.PI*j/15);
if (h-f/2>shigh/2 || h+f/2<-shigh/2 || w-f/2>swide/2 || w+f/2<-swide/2) continue;
k=document.createElement('div');
dvs=k.style;
dvs.position='absolute';
dvs.left=w-f/2+'px';
dvs.top=h-f/2+'px';
dvs.color=colsel[colsel.length-1];
k.appendChild(document.createTextNode(String.fromCharCode(9679)));
k.style.fontSize=f+'px';
ring['row'+count][j]=k;
ring['col'+j][count]=k;
div.appendChild(k);
}
count++;
i+=f*2;
}
nour=count;
}

function zoomer() {
for (var i=0; i<30; i++) {
var tc=Math.abs(-nour+roun)%(count-2);
if (tc<colsel.length && ring['col'+i][roun]) ring['col'+i][roun].style.color=colsel[tc];
}
if (++roun==count) {
roun=0;
nour++;
setTimeout('zoomer()', speed);
}
else zoomer();
}
// ]]>
</script>

Al inicio del código, en var colsel están los códigos de los colores de las luces, puedes agregar tantos colores como quieras, sólo ten en cuenta que el último color siempre será el color de las luces que se ve en forma pausada.

En var speed podemos controlar la velocidad del efecto, con un número menor se verá más rápido.

Lo he probado en Safari, Opera, Firefox, Chrome e Internet Explorer y en todos funciona, sin embargo en Firefox los círculos se ven más pegados.
Y ahora sí, ¡a sacar los pantalones acampanados!

Agregar últimos comentarios usando el feed, y personalizarlos con icono de persona

En la entrada pasada les mostraba la forma de añadir viñetas y estilos a la lista de enlaces de las etiquetas, considerando que son listas, ahora haremos algo similar, solo que usaremos un ícono,  cosa que también es muy rápida de implementar en su blog;  ahora, ya tienen trabajo para este fin de semana :)

Este truquillo de usar los últimos comentarios usando el feed, hace mucho lo uso en mi blog, aunque no le había agregado el ícono de persona, pero como ya estoy más animada a hacer cambios con mi nueva plantilla, hoy lo hice, y creo que a alguien le puede servir y gustar.



Yo aprendí a usar los feeds para mostrar los comentarios con Rosa, (que en paz descanse) es una manera muy sencilla y práctica de  mostrar los últimos comentarios en el blog, (además de las últimas entradas) ya que no habrá necesidad de usar ningún script.

Lo único que haremos nosotros es, colocar un icono de persona, para que se identifiquen los comentarios como tal, y eso, lo vamos a lograr muy fácil, ya que utilizaremos una propiedad de CSS llamada list-style-image para usar el ícono de persona, ya que los últimos comentarios se muestran en forma de lista.



La demostración, la puedes ver ahora mismo en mi blog.

Entonces, empecemos...

Paso 1. Ve a diseño►Elementos de la página►Agregar gadget, y elige la opción del Feed

 Luego dentro del campo, vas a escribir el enlace necesario para que se lean los los últimos comentarios del blog, que es este...

http://mi_blog.blogspot.com/feeds/comments/default

...en donde dice mi_blog escribe el nombre de tu blog.



...luego, ahí mismo, le pones el título que más te guste al widget, y selecciona las opciones que te presenta a tu gusto.




 Paso 2. Guarda los cambios

Ahora  los últimos comentarios se mostrarán en tu blog, y cada uno de ellos tendrá viñeta, entonces lo que haremos, es cambiar esa viñeta por una imagen que será nuestro ícono, también agregaremos algunos estilos para resaltar ese widget.

Paso 3. Ve a Diseño►Diseñador de plantillas►Avanzado►Añadir CSS y escribimos en el campo correspondiente el código CSS para personalizar el widget de los últimos comentarios que es este: (puedes personalizarlos según tus gustos y necesidades siguiendo las indicaciones que estan entre /*...*/, también, si es tu segundo widget de feed que usas será #Feed2, o si es el tercero #Feed3 etc. y deberás cambiarlo en el código)

/* Estilos para los últimos comentarios */

#Feed1 ul li{

/* aqui ponemos la imagen del icono */

margin: 0;

padding: 0 0 0 2px;

list-style-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo7wl0LN0p0Q8QSuSloiq7xGuPc2vjpwAfUCWQuDmjOceRXxlM3oyrqAPmDPWdChD02zJGf5WLtAF-X9HVxi7OQIhYKIDMg_HW_RZvJU15LiIR4a-PWHwKtuvYIY0WsUrp0lLITEgbC-rZ/s400/icono_de_persona.gif ); 

line-height: 1.1em;

}

#Feed1 li{

margin:0;

padding:0;

}

#Feed1 li a{

color: #241802; /* este es el color de la letra de los enlaces de los comentarios */

font-size: 16px;/* este es el tamaño de la letra de los enlaces de los comentarios */

padding:0;

margin:0;

text-decoration: none;

}

#Feed1 li a:hover {

color: inherit; /* aqui pones el color del enlace del comentario al poner el puntero arriba */

font-weight: normal; /* si en lugar de normal pones bold la letra se verá negrita al poner el puntero del ratón encima */

}

Paso 4. Desde ahí puedes ver los cambios aplicados, una vez que te gusten los resultados, guarda los cambios en APLICAR AL BLOG.

Nota: Recuerda ubicarte después de }, por ejemplo y dar click a la tecla enter, para que se lea el código que agregaste, ya que al pegar contenido en ese campo, no se interpreta.

En el código anterior, he puesto el ícono que yo uso, pero, puedes escoger entre estos (los dos con fondo transparente)

Si ninguno de ellos te cierra el ojo, puedes encontrar miles de íconos de personas aquí; también si lo prefieres, puedes usar una burbuja como imagen.

Nota: Recuerda guardar en tu propio servidor la imagen del ícono de los cometarios, por ejemplo en blogger o photobucket.

Referencias

Para leer más sobre la propiedad list-style-image, puede visitar esta página.

El icono azul que uso, me lo trajé de www.webdesign.org. 





Muy fácil y mono ¿verdad?

El autismo pieza a pieza

Hoy, 2 abril se conmemora el 4º año del Día Mundial de Concienciación del Autismo.

Un año más alzando la voz para que se les mire como personas y luchando por lo que les corresponde.

Un año más agradeciendo ser una pieza más de ese gran puzzle.

REFERENCIA: Hasta la luna ida y vuel...TA

Image Tools para Firefox

Image Tools es una extensión para Firefox que amplia las posibilidades de manejar las imágenes que vemos en cualquier página web, agregando entrads al menú contextual que nos permiten acceder a un visor con varias opciones.

Una vez instalado, vasta hacer click con el botón derecho sobre la página para que detecte las imágenes que contiene, mostrando dos tipos básicos, aquellas que se ven (standard Images) como alquellas enlazadas (linked images). Cualquiera de ellas nos abrirá una nueva pestaña donde podremos navegarlas en un visor independiente.

Desde allí, una serie de íconos nos permiten rotarlas, hacer zoom, copiarlas, guardarlas o incluso editarla a través de Pixlr.com

REFERENCIAS:ghacks.net

Personalizar los enlaces de las etiquetas con viñetas y crear efecto hover

Hoy les voy a mostrar la manera de personalizar los enlaces de las etiquetas usando las viñetas y las vamos a cambiar de color,  para que estas no se vean igual que el texto de los enlaces, además jugaremos un rato aplicando efecto hover a dichas viñetas, cambiándolas de forma y color etc.

El  DEMO lo puedes ver ahora mismo en mi blog, sin embargo puedes cambiar los colores de los enlaces,  el tipo de viñetas y los colores a tu gusto y necesidad para que se adapten al diseño tu plantilla.

Ventajas

• No necesitas crear ninguna imagen


• Puedes aplicarlo en el blog inmediatamente y con resultados visibles


• Crearás un efecto hover interesante en las viñetas 


• Una vez que lo uses en tu blog, puede cambiar las viñetas, colores etc.

Limitaciones

• La viñeta se limita a 3 estilos diferentes, el círculo, el cuadrado y el disco


• El efecto hover no funciona en IE6 (Internet explorer 6) eso es problema del navegador

Antes que nada, vamos a partir del hecho de que usas el widget de las etiquetas, si es que aún no tienes en tu blog hay que colocarlo yendo a Diseño ►elementos de la página y harás click en agregar  gadget, seleccionando la opción etiquetas, y donde dice mostrar elige la opción lista, (aunque si no la cambias a nube, ya viene marcada de ese modo) pensando en que usas etiquetas en tus entradas claro.

Una vez colocado el widget de las etiquetas,  los enlaces se mostrarán con los estilos definidos en la plantilla, específicamente los estilos que tiene la barra lateral  para las listas, (si es que ahí lo colocas)  entonces lo que haremos es crear nuestros propios estilos, aprovechando que ya blogger tiene ese widget identificado.



Empecemos.



Paso 1. Ve a Diseño►Diseñador de plantillas►Avanzado►Añadir CSS y luego agrega ahí en el campo, el siguiente código (puedes cambiar  colores y estilo de viñetas a tu gusto)

/*ESTILOS DE LOS ENLACES DE LAS ETIQUETAS*/



#Label1 ul{

margin:0;

padding:0 0 20px 30px;

}

#Label1 ul li{

margin: 0;

padding:2px 0 5px 0;

list-style-type: circle; /*este es el tipo de viñeta*/

font-size: 24px; /*este es el tamaño de la viñeta*/

color: #f8b22a;  /*este es el color de la viñeta*/

}

#Label1 ul li:hover { 

/* aquí van los estilos que se verán al poner el puntero sobre el enlace*/

list-style-type: disc; /*este es el estilo de la viñeta*/

color: inhrit; /*aquí pones el color que se verá la viñeta al poner el puntero encima "efecto hover" */

} 

#Label1 li{

margin:0;

padding:0;

}

#Label1 li a{

color: #241802; /*este es el color de la letra de la etiqueta*/

font-size: 16px;/*este es el tamaño de la letra de la etiqueta*/

padding:0;

margin:0;

text-decoration: none;

}

#Label1 li a:hover {

color: inherit; /*aqui pones el color del enlace de la etiqueta al poner el puntero arriba*/

font-weight: normal; /*si en lugar de normal pones bold la letra se vera negrita al poner el puntero del ratón encima*/
}

            

Nota: Label1 es la forma que blogger identifica el widget de las etiquetas, cada vez que agregas este widget,  se va numerando de forma consecutiva, si es el segundo será Label2, el tercero Label3 etc., si no estás seguro puedes verificar en el código HTML de tu plantilla usando CTRL F, escribiendo ahí el nombre que le asignaste al título de tus etiquetas, por ejemplo Categorías, luego ves como esta identificado, está dentro de esta linea de código: 

<b:widget id='Label1' locked='false' title='Categorías' type='Label'/>

Si no quieres hacerlo de ese modo, puedes pegarlo antes de ]]></b:skin> , es lo mismo, solo que del otro modo, vemos los cambios desde ahí, en el diseñador de plantillas y sin tener que poner vista previa cada vez que necesitemos.

 

Paso 2. Desde ahí puede ver los resultados, cuando pegues el código haz click en la tecla enter después de } por ejemplo, para que sea interpretado lo que has agregado, edita los colores y las formas guiándote con las indicaciones que escribí arriba en el código, entre /*...*/.



Paso 3. Una vez que consigas los resultados que quieres, guarda los cambios en APLICAR AL BLOG.

¿Cuáles son los distintos tipos de viñetas que puedo usar?

Podemos cambiar los valores de esta propiedad usada en las listas llamada: list-style-type, estos son los tipos de viñetas que puedes usar:



En forma de disco (este es por defecto en las listas) y se escribe así:



list-style-type: disc;



Y se ve así ( le cambié el color para crear el efecto hover)...

• Cosa 1


• Cosa 2


• Cosa 3

También puede verse como círculo, si lo escribimos así (cambié la viñeta a un disco en el hover)



list-style-type: circle;

• Cosa 1


• Cosa 2


• Cosa 3

...o en forma de cuadrado (cambié la viñeta a un disco en el efecto hover)



list-style-type: square;

• Cosa 1


• Cosa 2


• Cosa 3

Sabiendo todo eso, podemos hacer algunos cambios en los valores de esa propiedad para crear los efectos que queramos, también, como usamos enlaces, es posible poner el color del texto diferente al color de la viñeta y poner el tamaño de la viñeta diferente a la del texto, cambiar la viñeta en el  hover etc.



Para cambiar los colores a tu gusto, usa esta tabla de colores .



¿Te gustó? dime que piensas...



Referencias: (ahí puedes ver los valores de la propiedad list-style-type y otra información)

w3schools

Guía SEO disponible en más de diez idiomas - Español incluido

Google anuncia que la última versión de la "Guía para principiantes sobre optimización para motores de búsqueda" está ya disponible en diez nuevos idiomas: español, francés, alemán, ruso, turco, finlandés, sueco, húngaro, chino tradicional y chino simplificado.

En ésta nueva entrega, han revisado y actualizado el contenido existente, además de añadir une nueva sección sobre páginas webs para móviles con diversas recomendaciones.

Puedes descargarte la versión en español de esta guía de 32 página en formato PDF desde este enlace: Descargar Guía SEO