cosas para el blog

Hace tiempo uso unos cositos al final del post que te 'traducen' todo el post a una voz computarizada, ahi acabo de agregar uno a este blog tambien, fijate en 'el pie' de este post y otro al costado en la columna derecha del blog donde dice "Seleccioná un texto y clic aquí para oírlo".

Es algo que esta bueno, uno puede escuchar el post mientras ve otras cosas.. Estuve buscando opciones en google y las mejores que encontré son estas dos (las que estoy usando, si alguien sabe otra digame!!):

Vozme

sonowebs

En la página web de cada uno explica muy bien como agregarlos, en cualquier lado.

Como el de sonowebs suena mucho mejor y no genera un popup, es el que mas me interesa, el problema que tenia era que el reproductor muchas veces lee cosas que uno no quiere que se lean, como códigos html, enlaces, textos que no interesan, y en la web la unica opción que nos da es ponerlo bajo el post o bajo el título. Para leer textos específicos hay que usarlo como dice acá.
Y asi usando el script y el div que dice ahi, se pueden leer textos especificos como este


Pero como es una cosa que voy a usar mucho en blogs como este o este donde pueden ver ejemplos,
Con lo poco que se de java hice esto:

Puse el script en la plantilla del blog antes del /head, pero lo modifiqué un poquito asi:

<script src='http://www.sonowebs.com/scripts/sonowebs.js' type='text/javascript'/>
<script type='text/javascript'>
function Leemelafrase(id) {
    var id = id;
    var cualq = new printPlayer("flash","black","Escuchar Noticia","center","","es",id,"","","","","","","","",232,20);
  }
</script>


El id es lo que le paso y Leelafrase es el nombre de la función que lo agarra y lo usa, ese id no es otra cosa que el "sonowebs_audio_xx" que dicen en la página, tambien se le puede pasar el color del reproductor, el "Escuchar Noticia" y la posición donde esta (left,center o right) como dice en la pagina de sonowebs que puse antes, pero como no lo necesito no lo hice.

Despues de agregar el codigo anterior para usarlo hay que tan solo poner lo siguiente:
Llamar al script asi, donde se pone esto se muestra el reproductor:

<script type="text/javascript"> Leemelafrase("ID_A_CAMBIAR_PARA_CADA_REPRODUCTOR")</script>

Y lo siguiente en el texto que se quiere leer:


<div id="ID_A_CAMBIAR_PARA_CADA_REPRODUCTOR">
Texto a leer
</div>


Hace poco cree un nuevo blog para compartir frases que me gusten y quería que ademas de frases se muestren imágenes del autor de la misma, y encontré una forma bastante linda y fácil, se le agrega una dirección feed donde estén las imágenes y listo se ve algo asi:

Para usarlo hay que hacer esto:

Primero, necesitamos el script que llamamos desde la plantilla (antes del /head), desde un post o desde algún elemento HTML  que agregamos. En todos los casos, escribimos:

<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script src="http://www.google.com/uds/solutions/slideshow/gfslideshow.js" type="text/javascript"></script>


Segundo,  en el post o donde se quiera poner el cuadro, hay que implementar  un DIV con un ID, el ID es para diferenciarlo si usamos varios en la misma página.
Tercero, agregar la llamada al script, con todas las opciones. Esto se puede agregar junto con el DIV o en otra parte, el cuadro se muestra donde esta el DIV.


El código para usarlo sería algo asi:

<div id="slideShow" style="width:160px;height:160px;">Cargando ...</div>

<script type="text/javascript">
  function LoadSlideShow() {
    var feed  = "URL_delFeed";
    var options = {displayTime:2000, transistionTime:600, scaleImages:true};
    var ss = new GFslideShow(feed, "slideShow", options);
  }
  google.load("feeds", "1");
  google.setOnLoadCallback(LoadSlideShow);
</script>


Yo uso el Feed que te da la web de Picassa, ya que uso el software de Picassa para subir las imágenes.
Antes de usarlo, si se quiere se puede configurar el slideshow para personalizarlo un poco, en la web de google se explican todas las opciones pero está en inglés, si querés y no sabes inglés podes intentar leer la versión traducida.
algunas de las opciones (se agregan separadas con coma  en 'var options') son:

• la cantidad de imágenes: numResults:cantidad
• mantener o no la relación ancho/alto: scaleImages:true|false (por defecto es true)
• o bien maintainAspectRatio:true|false
• el tiempo que permanecen visibles: displayTime:valor (en milisegundos, por defecto 3000)
• el tiempo que dura la transición: transitionTime:valor (en milisegundos, por defecto 1000)
• transformar o no las imágenes en enlaces: linkTarget:google.feeds.LINK_TARGET_BLANK (por defecto no)
• habilitar o deshabilitar pausa con mouseover: pauseOnHover:true|false (por defecto es true)
• habilitar panel de control: fullControlPanel:true
• panel de control con íconos pequeños: fullControlPanelSmallIcons:true

• thumbnailSize: GFslideShow.THUMBNAILS_SMALL
• thumbnailSize: GFslideShow.THUMBNAILS_MEDIUM
• thumbnailSize: GFslideShow.THUMBNAILS_LARGE
  

Fuente: Vagabundia

Hace exactamente dos entradas publiqué como cambiar imágenes al pasar el mouse, pero noté que habia un problema con las imágenes que no son muy pequeñas.. tarda en cargar la segunda imágen.. y aveces tarda tanto que uno ni se da cuenta que al pasar el mouse se cambiaba de imágen... traté de solucionarlo con una precarga de imágenes pero no mejoró casi nada.

La solución y mejora a esto esta en utilizar lo que se llama botón, que no es otra cosa que una imágen con tres funciones:
inactivo: Primera imágen, que aparece
over: Segunda imágen (cuando se coloca el puntero del ratón sobre él)
activo: Tercera imágen (cuando se hace click)


Si bien hablo de tres imágenes el secreto esta en que es una sola, eso es lo que evita que tarde en cargar.

El código para hacer esto sería el siguiente:



<a href="URL IMAGEN" style="background:transparent url(URL IMAGEN) no-repeat left top; width:ANChOpx; /* la mitad o la tercera parte del ancho de la imagen */ height:ALTOpx; /* el alto de la imagen */ display: block; text-decoration: none"
   onmouseout="this.style.backgroundPosition='left top';"
   onclick="this.style.backgroundPosition='right top';"
   onmouseover="this.style.backgroundPosition='center top';">
</a>

El & # 160 ; (sin espacios) supuestamente es para que los navegadores no confundan la etiqueta con una vacia pero no importa, hay que agregarlo antes del </a>
, eso es lo importante a saber

Les dejo un ejemplo de como carga más rápido:
Efecto mouseover con dos imágnes separadas(mas lento, tu explorador no tiene que haber cargado ya esta imagen para notar el efecto):



Efecto boton, con una imagen dividida en tres(mas rapido :-) aparte de evitarnos usar Javascript:






Tambien se puede hacer este mismo efecto con un texto agregado, esto se hace creando un bloque div antes del código.. pero como todavía no lo use les dejo el enlace al blog de J.Miur donde lo ví para el que lo quiera

Sigo con otra entrada sobre efectos en imágenes.

Para ampliarla con un click y reducirla con dos click, de esta forma:



hay que usar este código, reemplazando lo necesario:




<img

src="URL DE LA IMAGEN"

width="ANCHO DE IMÁGEN REDUCIDA"

onclick="javascript:this.height=ALTO IMAGEN AMPLIADA;this.width=ANCHO IMAGEN AMPLIADA"

ondblclick="javascript:this.width=ANCHO IMAGEN REDUCIDA;this.height=ALTO IMAGEN REDUCIDA"/>

Estuve buscando esto bastante rato, sabía que era algo sencillo pero no lo sabia hacer asi que puede que tambien le sirva  a alguien mas..

Lo usé para hacer tipo como un menú en http://expresandome.com.ar, donde se puede acceder a cualquiera de mis blogs :).

El efecto es el siguiente:

Se pueden usar imágenes de diferentes tamaños y formatos

El código es el siguiente:




<img
src="ENLACE DE PRIMERA IMÁGEN" 

onmouseover="javascript:this.src='ENLACE SEGUNDA IMÁGEN';" 

onmouseout="javascript:this.src='ENLAE DE PRIMERA IMÁGEN U OTRA';"/>

Visto en: http://santyweb.blogspot.com/2008/08/ampliar-imgenes-con-mouse.html

Tan solo hay que elegir y despues añadir como un nuevo gadget Java/Hml desde la pestaña de diseño en blogger el traductor que nos ofrece Google.

Enlace al traductor

También podemos crear nuestro traductor con banderitas para hacerles click directamente, esto se hace facilmente tan solo hay que buscar una banderita y ponerle como enlace la url del traductor de google.

<div style="text-align: center;"><a href="URL Del Traductor><img alt="IDIOMA A TRADUCIR" src="URL DE LA BANDERITA">


Pero esta forma no me gusta porque no se traduce automáticamente la web sino que hay que copiar el enlace en la web de traduccion, cuando encuentre un sitio que lo haga directamente puede que cambie de opción.

 Acá les dejo un tutorial que me funciono 100% para realizar la popular forma de nube de etiquetas, como esta:


Una nube de etiquetas es una representación visual de las “etiquetas” o palabras clave usadas en un sitio web. Generalmente este listado de palabras se ordena alfabéticamente y con diferente tamaño según su relevancia.

Para empezar a poner nuestra nube de etiquetas en el blog tenemos que etiquetar todos nuestros post.

1. Ir a diseño de la plantilla, luego a Edición de HTML y clic en Expandir plantillas de artilugios y tendrás que pegar entre <b:skin><![CDATA[ y ]]></b:skin>. Preferible que lo pegues casi al final (antes de ]]></b:skin>).
/* Label Cloud Styles
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}

2. Después agregar el siguiente código entre ]]></b:skin> y </head>. Preferible que lo pegues casi al final (antes de </head>).
<script type='text/javascript'>
// Label Cloud User Variables
var lcBlogURL = 'http://cosasparaelblog.com.ar';
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>

3. Buscar el widget con el id Label1 y con el title Etiquetas. Esto lo encuentras donde dice:
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title><h2>
<b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><?xml:namespace prefix = data /></data:label.name></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

4. Una vez ubicado, tienes que reemplazar todo el código anterior por lo siguiente:
<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='labelCloud'/>
<script type='text/javascript'>
// Do not change anything past this point -----------------
function s(a,b,i,x){
if(a>b){
var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
}
else{
var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
}
return v
}
var ta=0
var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = "<data:label.name/>";
ts[theName] = <data:label.count/>;
</b:loop>
for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
tz = labelCount.length-1;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
for (var i=0;3 > i;i++) {
c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
}
var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
li = document.createElement('li');
li.style.fontSize = fs+'px';
li.style.lineHeight = '1';
a = document.createElement('a');
a.title = ts[t]+' Posts in '+t;
a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
a.href = lcBlogURL+'/search/label/'+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement('span');
span.innerHTML = '('+ts[t]+') ';
span.className = 'label-count';
a.appendChild(document.createTextNode(t));
li.appendChild(a);
li.appendChild(span);
}
else {
a.appendChild(document.createTextNode(t));
li.appendChild(a);
}
ul.appendChild(li);
abnk = document.createTextNode(' ');
ul.appendChild(abnk);
}
lc2.appendChild(ul);
</script>
<noscript>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
</noscript>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Explicación del paso Nº 2
- En lcBlogURL, se debe poner la dirección de tu blog.
- En maxFontSize, podemos modificar el tamaño de la fuente mostrada.
- En maxColor = [0,0,255], podemos modificar el color de la fuente mostrada.
Por ejemplo:
[255,0,0] = Rojo claro
[0,255,0] = Verde claro
[128,0,0] = Rojo oscuro
[0,128,0]= Verde oscuro
[0,0,128] = Azul oscuro
Mas combinaciones de colores en HYPE's Color Specifier.
- En minFontSize, podemos modificar el tamaño de la fuente mostrada.
- En minColor = [0,0,0], podemos modificar el color de la fuente mostrada.
- En lcShowCount (true o false) .- Si es true se mostrará una nube de etiquetas con el número de entradas que existen. Mientras que en false simplemente se vera una nube de etiquetas sin su respectivo número.


Fuente:
http://ayudaparaelblog.blogspot.com/2007/09/como-hacer-una-nube-de-etiquetas-73.html

La única cosa que hice que no está mencionada es cambiar el título

<b:widget id='Label1' locked='false' title='Label Cloud ' type='Label'>
Donde die title='Aca va el titulo de la nube'