Minimiza el espacio de un gadget de tu blog (1)

Si quieres ahorrar espacio en tu blog, ocultando algunos elementos de él, este truco de El Escaparate de Rosa te vendrá muy bien.

Siguiendo un método sencillo pero muy eficaz, podemos mantener oculto un gadget y ofrecer la opción de que el visitante lo maximice. Puedes ver un ejemplo en este blog de pruebas.
Hemos cambiado y modificado algunas cosas del truco original. Éstos son los pasos:

1. Nos dirigimos a  Diseño > Edición de HTML de la plantilla y Expandimos artilugios.
En éste caso vamos a buscar una lista de enlaces (como deseaba Seashell), aunque el procedimiento es el mismo para cualquier elemento (Texto, HTML, Archivo del Blog...). Localizamos el gadget buscando su título (Ctrl + F), por ejemplo, Enlaces o Lista de Enlaces, etc., y añadimos en el lugar correspondiente la parte de rojo.

<b:widget id='LinkList1' locked='false' title='Enlaces' type='LinkList'>
<b:includable id='main'>
<script type='text/javascript'>
//<![CDATA[
if(typeof(rnd) == 'undefined') var rnd = '';
rnd = Math.floor(Math.random()*1000);
rnd = 'id-' + rnd;
document.write('<a href="javascript:void(0)" onclick="tmp = document.getElementById(&quot;' + rnd + '&quot;); tmp.style.display = (tmp.style.display == &quot;none&quot;) ? &quot;block&quot; : &quot;none&quot;; return false;" style="float:left;margin-right:6px;">');
//]]>
</script>[+/-]
<script type='text/javascript'>
//<![CDATA[
document.write('<\/a>');
//]]>
</script>

<b:if cond='data:title'><h2><data:title/></h2></b:if>
 <div class='widget-content'>
<script type='text/javascript'>
//<![CDATA[
document.write('<div id="' + rnd + '" style="display:none;">');
//]]>
</script>
   <ul>
     <b:loop values='data:links' var='link'>
       <li><a expr:href='data:link.target'><data:link.name/></a></li>
     </b:loop>
   </ul>
   <b:include name='quickedit'/>
 </div>
</b:includable>
</b:widget>

2. También podemos sustituir los caracteres [+/-] por los que deseemos, por ejemplo:

↑↓ ⇅ ⇕ △▽ ▼

(Recuerda que algunos puede que no se vean correctamente en determinados ordenadores)


3. Por último, también puedes colocar una imagen en lugar de símbolos. Para ello, sustituimos [+/-] por <img src="AQUI-LA-URL-DE-LA-IMAGEN"/>


Además, en próximas entradas, os mostraremos otras formas de expandir y contraer elementos en Blogger, siguiendo otros procedimientos.

Imagen que se ilumina utilizando JQuery

Siguiendo unos sencillos pasos, se puede conseguir un efecto realmente increible, con el cual podremos lograr que al pasar el cursor sobre una imagen (en este caso un boton de RSS) esta se ilumine o recupere su color original.

Puedes ver el ejemplo en nuestro blog de pruebas, en el boton grande de RSS.
Es imprescindible tener dos imágenes: una en blanco y negro (con el Modo Escala de Grises en Photoshop, por ejemplo), y otra en color.
En primer lugar, debemos aplicar el script JQuery en nuestra plantilla; para ello nos dirigiremos a Diseño>Edición de HTML y añadimos antes de </head> el siguiente bloque:

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

<script src='http://sites.google.com/site/latrucoteca/a/fade-desvanecimiento%5B1%5D.js' type='text/javascript'/>

ATENCIÓN! La parte en azul incluye el Script de JQuery, es decir, si ya lo tienes integrado en tu plantilla no hace falta que lo vuelvas a poner. En este caso solo debes agregar la segunda parte.

2. Coloca antes de la etiqueta ]]></b:skin>el siguiente código:

#rss {
width:300px;
height:225px;
margin:auto;
position:relative;
display:block;}
#rss a{
background-image:url(http://i825.photobucket.com/albums/zz180/latrucoteca/rss_bw-300x225.png);
background-repeat: no-repeat;
position:relative;
display:block;
width:300px;
height:225px;
}
#rss span.hover{
width:300px;
height:225px;
background-image:url(http://i825.photobucket.com/albums/zz180/latrucoteca/rss-300x225.png);
background-repeat: no-repeat;
position:relative;
display:block;
}

*Puedes cambiar el id (coloreado en azul) por el nombre que desees, pero recuerda que también deberás cambiar por el mismo nombre el que se encuentra establecido en el script del efecto, por lo que tendrías que editarlo y subirlo de nuevo (o no funcionaría).
También puedes cambiar las URL de las imagenes (primera, blanco y negro; segunda, con color), y los height y width, que deben encajar con las dimensiones de la imagen.

3. Ahora, Guarda los cambios, y añade este código en un nuevo elemento HTML:

<div id="rss"><a href="#" title="Titulo"></a></div>

Por último, puedes cambiar el id, si has decidido hacerlo en los pasos anteriores, y por supuesto el # por la URL del enlace, y Titulo, por el texto que saldrá al pasar el cursor por encima.

4. Guarda el gadget, y ya dispondrás de un magnífico efecto en tu blog (¡Por fin!)

Recuerda que si quieres este efecto, por encima de todo, lo que se necesita es el Script de JQuery, que causa conflictos con Scriptaculous, por lo que no os recomendamos tener los dos a la vez (a no ser que quieras probar la solución de Banaka Banaka!).

Visto en Pazos Blogger, gracias a Design-Notes.

Cambio de cursor sobre una imagen o cualquier otro elemento

Con este sencillo truco conseguirás que al poner sobre una imagen el cursor, éste cambie su aspecto.
Ejemplo:

Si bien el códido básico para conseguir la aparición de una imagen es éste:

<img src="AQUÍ-LA-URL-DE-LA-IMAGEN">

El código que tendrías que añadir para lograr el cambio del puntero sería el siguiente:

style="cursor:AQUÍ-LA-PROPIEDAD;"

1. Que añadido al código de la imagen quedaría así:

<img style="cursor:AQUÍ-LA-PROPIEDAD;" src="AQUÍ-LA-URL-DE-LA-IMAGEN">

• AQUÍ-LA-PROPIEDAD debe ser cambiada por: url(url-del-cursor) en caso de que quieras que el cursor sea uno alojado en internet como por ejemplo: http://cuw.iespana.es/archivos/bob08.cur, que tendría que sustituir a url-del-cursor, o bien por uno de los siguientes términos, que pertenecen a punteros predeterminados del sistema:

default
pointer
move
crosshair
nw-resize
ne-resize
n-resize
e-resize
help
wait
text

2. También puedes hacerlo sobre una imagen con enlace:

<a href="URL-DEL-ENLACE"><img style="cursor:AQUÍ-LA-PROPIEDAD;" src="AQUÍ-LA-URL-DE-LA-IMAGEN"></a>

3. O sobre un simple enlace de texto:

<a style="cursor:AQUÍ-LA-PROPIEDAD;" href="URL-DEL-ENLACE">TEXTO-DEL-ENLACE</a>

En resumen, cambiar el cursor es muy fácil, y se puede hacer en cualquier elemento (imágenes, textos, pero también tablas, divs, etc.), y basta con agregarle a él el atributo style con el "parámetro" cursor y a continuación su propiedad.

Continuando con los cursores, dentro de poco explicaremos como cambiarlo en todo el blog, siguiendo un procedimiento similar... 

¡Un saludo!

Visto en Hacktime

Crea y personaliza un Tooltip (Title) para los enlaces [1]

Si quieres que al poner el cursor sobre un enlace,  aparezca un pequeño Título o Title encima de este (que no es más que un cuadrito pequeño con una pequeña descripción) , este truco te permitirá crear y decorar los mismos fácilmente.
Si aún no sabes lo que es un Tooltip, coloca el cursor encima del siguiente texto:

Ejemplo de TooltipAyuda para Blogger

Para agregarlo sólo debes seguir los siguientes pasos:

1.  Nos dirigimos a Diseño>Edición de HTML y Expandimos Artilugios

2. Añadimos antes de ]]></b:skin> el siguiente código:

a.tooltip{
position: relative;
z-index: 24;
color: #0080FF;
text-decoration: none;
}

a.tooltip:hover{
z-index: 24;
color: #002AFE;
text-decoration: none;
}

a.tooltip:visited{
text-decoration: none;
color:#08088A;
}

a.tooltip:active{
z-index: 24;
color: #0000FF;
text-decoration: none;
}

a.tooltip span{ display: none;
}

a.tooltip:hover span{
border: 2px solid #088A08;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
display: block;
position: absolute;
top: 2.5em;
left: 3em;
width: 10em;
background-color: #74DF00;
color: #0B0B0B;
font-size: 8pt;
font-family: Comic Sans MS;
text-align: left;
padding-left: 2px ;
padding-right: 2px;
}

Por cierto, este código es también el empleado en la plantilla de La Trucoteca de Blogs para los Tooltips, y puedes decorarlo a tu gusto. Para ello te indicaremos algunas partes del Css que puedes modificar:

• color: #0080FF;     -> Color del enlace.

• color: #002AFE;     ->Color del enlace al pasar el cursor por encima.

• color: #08088A;     ->Color del enlace mientras se hace clic en él.

• border: 2px solid #088A08;  ->2px (grosor del borde del tooltip), #088A08 (color del borde del tooltip), solid (estilo del borde del tootltip), que también puede ser (y si tu quieres):

none - Objeto sin borde
hidden - Borde del objeto oculto
dotted - Borde punteado · · ·
dashed - Borde discontinuo - - -
solid - Borde continuo (este es el borde que utilizaremos)
double - Borde doble
groove - Borde con sombra oscura
ridge - Borde con sombra clara
inset - Borde 3D hacia afuera
outset - Borde 3D hacia adentro

• background-color: #74DF00;    ->color de relleno/fondo del tooltip.
• color: #0B0B0B;   ->color de la letra del tooltip.
• font-size: 8pt;   ->tamaño de la letra del tooltip.
• font-family: Comic Sans MS;   ->Fuente (puede ser Segoe UI,  Trebuchet MS, etc).
• text-align: left;   -> Alineación del texto del tooltip.

3. Tras personalizarlo a tu medida, GUARDAMOS CAMBIOS.
4. Ahora, cada vez que queramos usar los tooltips en un enlace deberemos emplear este código:

<a href="URL-DE-LA-PAGINA" class="tooltip">TITULO-DEL-ENLACE<span>CONTENIDO-TEXTO-DEL-TOOLTIP</span></a>

Y sustituye, URL-DE-LA-PAGINA, por la dirección de la página a la que quieres enlazar, como, por ejemplo," http://blogger.com".
TITULO-DEL-ENLACE, por el texto que aparecerá antes de poner el cursor, como, por ejemplo, "Blogger".
CONTENIDO-TEXTO-DEL-TOOLTIP, por el texto que saldrá al poner el cursor sobre el enlace, es decir, lo que saldrá dentro del Tooltip, como, por ejemplo, "en esta página creé mi blog".

¡Y ya podrás disfrutar de un bonito y decorado título para tus enlaces!

Evita que te copien el contenido de tu blog

Uno de los grandes problemas existentes en la actualidad del mundo de los blogs es el "Copypast". Al igual que su traducción al español (copiar y pegar), esta "odiosa técnica"  realizada por los bloggeros más deshonestos ha fastidiado seguramente más de una vez a alguien (experiencia propia...).
Pues bien, hoy vamos a exponer un sencillo truco que vimos hace un tiempo en Ciudad Blogger, que, deshabilitando la selección de texto, puede impedir en cierto modo este tipo de aprovechamiento.

• Nos dirigimos a Diseño> Edición de HTML

Ahora, antes de </head>  pegamos el siguiente código:

<script language="JavaScript1.2">

function disabletext(e){
return false
}

function reEnable(){
return true
}
//if the browser is IE4+
document.onselectstart=new Function ("return false")

//if the browser is NS6
if (window.sidebar){
document.onmousedown=disabletext
document.onclick=reEnable
}
</script>

Tras esto solo tenemos que pinchar en GUARDAR CAMBIOS y ya tendremos una pequeña protección en el blog.

Problemilla: En Mozilla Firefox, este script impide que el cursor pueda pinchar y seleccionar en el buscador de Google.

ATENCIÓN: Este truco no impide totalmente que se pueda copiar y usar el texto. Es solo una utilidad más que puedes poner en tu blog si quieres una "pequeña" protección.

¡¡Saludos!!


● También puedes ver... Evitar que te copien una imagen

● Visto en Ciudad Blogger

Ampliar imágenes al pasar el cursor por encima (onmouseover):

Con este sencillo truco podremos lograr que una imagen se amplie al pasar el cursor por encima de ella.
Solo tenemos que copiar y pegar el siguiente código donde queremos que se produzca el efecto, ya sea en una entrada o en un Elemento HTML/Javascript:

<img src="URL DE LA IMAGEN" onmouseover="this.width=500;this.height=400;" onmouseout="this.width=200;this.height=150;" width="200" height="150" />

1.   "this.width=400;this.height=300;"  > Indica el ancho (width) y el alto (height) de la imagen cuando el cursor está encima de la imagen (Cambialo por las medidas de la imagen original).

2.  "this.width=200;this.height=150;" width="200" height="150" > Indica el ancho (width) y el alto (height) de la imagen cuando el cursor está fuera de la imagen (Cámbialos por las medidas que desees, para que quede mas pequeño que la original).

3. Y por supuesto, cambia URL DE LA IMAGEN, por la dirección correspondiente.

4. También puedes cambiar (aunque no es obligatorio), onmouseover, por onclick, por ejemplo, consiguiendo asi que la imagen se aumente al pinchar sobre ella.

Aquí un ejemplo:

Esperamos que os sea útil el truco. Saludos!!!!

WigFlip: Generador de herramientas y efectos online para tu blog

Se trata de WigflipWigflip.com una página que te permite realizar, entre otras cosas, "Super Stickies", textos animados, "Screedbots", TinyTags, etc.

Y como una imagen vale más que mil palaras, aquí unos ejemplos de herramientas que puedes conseguir:

"Superstick":

(Además, puedes personalizar el color de fondo de la nota, y el color del texto).

Texto animado:

(También puedes personalizar el color del fondo [bg], y el color de la letra [fg] )

"TinyTag":

"Screedbot":

"Signbot":

Para conseguir éstas y muchas más fantásticas imágenes personalizadas a tu gusto, ya sabes que solo tienes que acudir a la página wigflip.com

Suerte!!!! :-)

Cambiar la imagen al pasar el cursor por encima:

Con este truco, y teniendo dos imágenes del mismo tamaño, puedes conseguir que al pasar el cursor por encima de ella, se muestre la segunda.

Puedes ver un ejemplo colocando el cursor encima de la imagen del elemento "Configuración" de la sidebar de este blog, o bien en la siguiente imagen:


1. Colocaremos en el lugar de la entrada o en un Elemento HTML donde queremos conseguir este efecto el siguiente código:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="URL DEL ENLACE"><img style="display: block;" src="URL DE LA PRIMERA IMAGEN" onmouseover="this.src='URL DE LA SEGUNDA IMAGEN'" onmouseout="this.src='URL DE LA PRIMERA IMAGEN'" /></a>

 2. Cambiamos simplemente 2 veces la URL DE LA PRIMERA IMAGEN y una vez URL DE LA SEGUNDA IMAGEN.

Además, si queremos que al pinchar en la imagen, esta te dirija a algun sitio, cambiamos URL DEL ENLACE por la dirección deseada. Si queremos que la imagen no dirija a ningun sitio, simplemente eliminamos esta parte: href="URL DEL ENLACE"

¡Suerte!

Título del blog en movimiento:

Con este truco vamos a hacer que el título del blog que aparece en la barra de título del navegador se mantenga en movimiento (tipo marquesina).
Puedes ver como funciona en Nuestro blog de pruebas

Realizar este truco es muy sencillo: simplemente tienes que ir a Diseño> Edicion de HTML y antes de
</body> pegas el siguiente código:


<SCRIPT LANGUAGE='JavaScript'>
var txt=" AQUÍ EL TÍTULO DEL BLOG ";
var espera=100;
var refresco=null;
function rotulo_title() {
document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
refresco=setTimeout("rotulo_title()",espera);}
rotulo_title();
</SCRIPT>

Y como es evidente, tienes que cambiar el TÍTULO DEL BLOG por el tuyo.

Saludos!!!

Efecto de "opacidad" en las imágenes

Gracias a El Potro, de Ciudad Blogger, he descubierto un truco que le puede dar un toque mágico a una imágen.
Se trata de aplicar el efecto opacidad a una imágen, y que, al pasar el cursor por encima, ésta recupere su color original.
Aquí un ejemplo:

Para poder utilizar este efecto debes entrar a  Diseño> Edicion de HTML y pegar antes de
]]></b:skin> el siguiente código:

/* OPACIDAD EN IMAGENES
----------------------- */
a.opacidad img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;
}

a.opacidad:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0;
}

Una vez pegado este código en el sitio correspondiente, GUARDAMOS CAMBIOS

Y finalmente, para utilizar éste efecto en una imagen; ya sea dentro de una entrada o en un Elemento HTML, debes usar éste código:




<a class="opacidad" href="URL del enlace" src="URL de la imagen"><img src="URL de la imagen"></a>

Sólamente debes de sustituir la URL de la imagen dos veces, y ésto se debe a que una es para mostrar la imagen con opacidad, y la otra con el color original.

Si tu imagen no tiene URL del enlace, elimina ésta parte: href="URL del enlace"

Espero que les sirva éste truco.

Saludos!!!!

Efecto pushbutton (pulsar botón) en imágenes y enlaces

Este es un truco muy sencillo pero que a su vez puede proporcionar un efecto muy agradable a una imágen o a un enlace.
Para ver un ejemplo pasa el cursor por encima de la siguiente imagen:

Interesante, ¿verdad?.

Para poner este truco en tu blog tenemos que seguir los siguientes pasos:
1. Vamos a Diseño > Edición de HTML de la plantilla
2. Allí buscamos el siguiente código (con la ayuda de Ctrl+F):
]]></b:skin>

3. Antes de ese código pegamos el siguiente:

.pushbutton a:hover{
position: relative;
top: 1px;
left: 1px;}

Y guardamos los cambios...

4. Ahora, cada vez que queramos poner ese efecto a una imagen o texto, pegamos el siguiente código:

<span class="pushbutton"><a href="URL-DE-LA-PÁGINA"><img src="URL-DE-LA-IMAGEN"></a></span>

Y cambiámos la URL DE LA PÁGINA y la URL DE LA IMAGEN por el contenido correspondiente.
Éste código podemos utilizarlo en cualquier elemento HTML, en una entrada, un texto...

5. Para que un enlace de texto tenga éste efecto debemos reemplazar <img src= "URL-DE-LA-IMAGEN"> por el texto que queramos

Ejemplo: <span class="pushbutton"><a href="http://latrucotecadeblogs.blogspot.com"><La Trucoteca de blogs></a></span>

Espero que les haya gustado este truco.
Saludos!!!!

Visto en  Diversas y Variadas Blog