EN RETORNO ^_^
Muy pronto !!!
Por razones laborales casi no estaré por el blog, solo podré responder a los mails y consultas los fines de semana, asi que les pido paciencia ^_^

PREMIOS
Visiten Garilandia !!! • Importante !!! Leer sobre VillaRochel ^_^
Aportes varios CARATULWORLDZilfarionTutoriales Wed • Cabecera de OLOMAN
Mostrando entradas con la etiqueta Truco. Mostrar todas las entradas
Mostrando entradas con la etiqueta Truco. Mostrar todas las entradas

Efecto página doblada (?)

Como se abrán dado cuenta, estoy teniendo problemas para actualizar el blog.
Los tiempos realmente no me dan, ni siquiera estoy pudiendo contestar las consultas que me van llegando.
Como gran cantidad de las consultas son sobre el efecto que tengo en la parte superior derecha del blog, lo vuelvo a publicar.... no estaba segura de hacerlo, porque la idea es que naveguen por el blog, hay muchas notas y seguro alguna les va a servir tarde o temprano... pero como me siento en deuda con aquellos que a pesar que no estoy publicando siguen visitando este humilde espacio, aqui va el efecto que tanto piden ^_^
Miren también los comentarios que han dejado, son muy interesantes !!!
Espero pronto estar denuevo por aquí tan seguido como a mi me gusta .....



Este truco me llegó desinteresadamente, de mano de Jose Luis de Caratulworld, que ya lo aplicó a su blog, y me lo hizo llegar vía mail.
En realidad no se como se llama el efecto, pero lo que produce, es el efecto que pueden ver al acercar el puntero del mousse a la esquina superior derecha, la página se dobla y deja ver la siguiente, esa imágen es un link que te lleva a otra página, en mi caso a mi blogroll. ^_^
Me pareció genial, así que lo he colocado en el blog, por un rato.
Además es muy simple !!!

Es importante que siempre antes que hagas un cambio en la plantilla guardes una copia, por si el truco no te funciona o no te gusta puedas volver a lo que tenías.
Nada es infalible...^_^


Primero que nada debes descargar lo siguiente Descargar Zip
Una vez descomprimido, debes alojar los archivos Small.swf Small.jpg large.swf large.jpg en Google Pages Yahoo! GeoCities o algún servicio de alojamiento para conseguir las direcciones URL de cada archivo.
El archivo peel.js, lo tenés que editar, añadiendo las URL de los archivos anteriores, la URL de la imagen que se quiera visualizar al surgir el efecto de doblez (debe ser de 500 x 500 px), y la URL de la pagina a la que quieras dirigirte al hacer click en la imágen de fondo.
Como esto último entrevera un poquito, se los aclaro un poquito.
Lo siguiente es la transcripción de la parte del archivo peel.js que debemos modificar, fijarse en lo que está en negrita.

var jaaspeel = new Object();

jaaspeel.ad_url = escape('http://URL DE LA PAGINA A DIRIGIRNOS');
jaaspeel.small_path = 'http://URL DEL ARCHIVO small.swf';
jaaspeel.small_image = escape('URL DEL ARCHIVO small.jpg');
jaaspeel.small_width = '100';
jaaspeel.small_height = '100';
jaaspeel.small_params = 'ico=' + jaaspeel.small_image;

jaaspeel.big_path = 'http://URL DEL ARCHIVO large.swf';
jaaspeel.big_image = escape('http://URL DE LA IMAGEN DE FONDO GUARDADA COMO large.jpg');
jaaspeel.big_width = '650';
jaaspeel.big_height = '650';
jaaspeel.big_params = 'big=' + jaaspeel.big_image + '&ad_url=' + jaaspeel.ad_url;


Una vez modificado esto, lo gurdás y también lo alojás para conseguir la URL del archivo.
Cuando ya tenemos todo esto realizado, nos dirigimos a Diseño/Edición Html y en la plantilla ubicamos </head> y abajo pegamos:
<script src='http://URL DEL ARCHIVO peel.js' type='text/javascript'/>
Antes de guardar lo vemos con la Vista Previa, para asegurarnos que está todo bien, y luego lo guardamos.

Pronto, fácil e ingenioso no?
Lo pueden ver en práctica en este blog, y en el de Jose Luis
Suerte !!!! ^_^



Actualización 11/04/08
Mi querida Eulalia nos hace llegar su descubrimiento, y nos dice:
"No es necesario sacar el archivo large.jpg, basta con preparar la imagen a mostrar, subirla y colocar la url en el sitio donde pone large.jpg del código peel.
Además, si quieres ponerlo en más de un blog, preparas la 2ª imagen, la subes, cambias las dos direcciones, la del blog a mostrar y la de la imagen y lo guardas como peel1, lo subes y la dirección de éste es la que añades al código.
Acabo de hacerlo en este otro blog de esta manera y también ha funcionado bien."

Muchas gracias Eulalia por tu aporte !!! ^_^


Seguir Leyendo...[+/-]

--> Leer más...

[ ... ]

Buscador interno

Una herramienta super importante para los blogs, es la Búsqueda interna, con la cual nuestros visitantes podrán buscar aquella entrada, que una vez vieron pero que no se acuerdan hace cuanto, ni el nombre de a entrada, pero ingresando alguna palabra que la defina podrá encontrarla fácilmente.

Hasta ahora estaba utilizando un buscador interno basado en Google, pero estaba teniendo problemas, a veces buscaba cosas obvias y no encontraba nada, o encontrada algo que no tenía nada que ver.

Pero con el aporte desinteresado de Zilfarion mi problema se vió solucionado.



Es tan facil de aplicar como copiar y pegar.
El código sería así:
<form id="searchthis" action="URL DE TU BLOG/search" style="display:inline;" method="get">
<input id="b-query" maxlength="255" name="q" size="15" type="text"/>
<input id="b-searchbtn" value="Search" class="blue" type="submit"/>
</form>


Lo que está en rojo es lo que se modifica es decir todo se puede modificar, pero lo primero que marqué en color es en donde va la URL de tu blog, y lo segundo que marqué es el texto que aparecerá en el botón.

Lo pueden ver en funcionamiento en mi sidebar.

Desde ya muchas gracias a los aportes de
:D


--> Leer más...

[ ... ]

Favicon o imagen en la Url - Otra manera

En esta oportunidad Jorge del blog Jorge Key, me hace llegar esta interesante información.
Al parecer a implementado un código para que el Favicon pueda ser visto desde varios exploradores. (Hasta ahora solo se veía en Firefox)

Es importante que siempre antes que hagas un cambio en la plantilla guardes una copia, por si el truco no te funciona o no te gusta puedas volver a lo que tenías.
Nada es infalible...^_^



1- Creamos nuestro Favicon, con la imagen que queremos.
2- Importante es guardar el Favicon en formato ICO y PNG
3- Alojamos la imágen y conseguimos su URL
4- Nos dirigimos a Draft Blogger ingresamos a nuestra plantilla, Diseño/Edición HTML y buscamos el siguiente código:
<title><data:blog.pageTitle/></title>
inmediatamente después pegamos lo siguiente
<!-- Favicón-->
<link href='URL DE TU FAVICON ICO' type='image/x-icon'/>
<link href='URL DE TU FAVICON PNG' type='image/x-icon'/>

<link href='URL DE TU FAVICON ICO' rel='icon' type='image/png'/>
<link href='URL DE TU FAVICON PNG' rel='icon' type='image/png'/>

<link href='URL DE TU FAVICON ICO' rel='shortcut icon' type='image/x-icon'/>
<link href='URL DE TU FAVICON PNG' rel='shortcut icon' type='image/x-icon'/>
<!-- Termina Favicón -->


Nota: Como se darán cuenta está repetido, y es correcto, así debe ser para que funcione.

Pegamos las URL's que habíamos creado, y pronto.
Como siempre antes de guardar, nos fijamos en vista previa, para ver que todo funcione bien. ;)

Este es un excelente aporte de
pimp your myspace at Gickr.com Gracias !!! :D

IMPORTANTE:
En estos días a sucedido que los Favicon que teníamos, desaparecieron, esto se debe a un cambio que ha hecho blogger; podría explicarlo, pero Jmiur lo está explicando mucho mejor.
Lo importante a saber es que, el código que aplicamos para agregar el Favicon, <link href='URLIMAGEN' rel='shortcut icon'/"> lo debemos poner antes de </head> y listo, se soluciona el tema. ;)

--> Leer más...

[ ... ]

Desplegar y recoger - Otro modo

Ya anteriormente les había hablado de una genial forma de crear este truco.
Esta vez mi nuevo amigo Zilfarion, me hace llegar esta otra forma. (gracias por el aporte ^_^)
Sin necesidad de hacer cambios en la plantilla.
Con un simple script que pegamos en la entrada, e incluso es modificable.
Como suelo decir, con los códigos, el límite es el cielo ;)



<div><div><div class="pre-spoiler"><span style="float: left; padding-top: 2px;"></span><input value="Ver" style="margin: 0px; padding: 0px; width: 80px; font-size: 14px; font-family: trebuchet ms;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Ocultar'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Ver';}" type="button"> </div> <div> <div class="spoiler" style="display: none;"><span style="font-family:trebuchet ms;"><div style="text-align: center;"><div style="text-align: justify;"><u style="font-family: trebuchet ms;"></u>
TEXTO A OCULTAR
</span></div></div></span></div></div></div></div></fieldset>


Quedaría así:


Desde ya muchas gracias a los aportes de
:D


--> Leer más...

[ ... ]

Comentarios Reciente - Otra forma

Mi buen amigo Birdelo, me consulta sobre un truco que tengo en la sidebar, que es un botón que al clickearlo se desplegan los últimos comentarios.
Esta consulta me sirve de excusa, para comenzar a publicar nuevamente, después de 2 semanas sin poder conectarme.
Lo primero que debo explicar que son varios trucos, que fuí acomodando de modo tal que salió lo que salió ^_^
Bueno espesemos por el principio:
Como ya sabemos, Blogger nos da la posibilidad de desplegar en la sidebar los comentarios recientes de nuestros lectores, pero esta posibilidad no es compatible con el truco que generé.
1- Lo que debemos hacer es crear un widget de comentarios recientes, como los que utilizábamos antes de que Blogger lo hiciera por si mismo.
Para eso debemos visitar un generador creado por Blogger Templates, aquí podrás configurar el widget con tus caracterísiticas: Título, tu url, la cantidad de comentarios que quieres que se despleguen, si quieres la fecha y el titulo del post donde se comentó etc., es muy fácil.
Una vez que termines de confirgurarlo, le das al botón de agregar widget a tu blog y se abre otra pantalla, que te ayuda a añadirlo a tu blog, o simplemente copias el código que te da en la parte de "Editar" que sería mas o menos así:
<script style="text/javascript" src="http://giga.ovh.org/rc"></script><script style="text/javascript">var a_rc=5;var m_rc=true;var n_rc=true;var o_rc=100;</script><script src="URL DE TU BLOG/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>

a_rc=5;var m_rc=true;var n_rc=true;var o_rc=100 esta parte es lo que podrás modificar
a_rc=5; cantidad de comentarios cambiando el número
m_rc=true le pones "false" si no querés que aparezca la fecha
n_rc=true le pones "false" si no querés que aparezca el título del post
o_rc=100 longitud de los comentarios que se desplegarán

2- Muy bien, como verán, este generador crea el widget muy facilmente pero en ingles, para traducirlo debemos hacer algunos cambios.
Lo primero que debes hacer es alojar este archivo RC.js.
Ahora, debes buscar en el código del widget generado anteriormente, esta dirección http://giga.ovh.org/rc y reemplazarla por la URL del archivo que alojaste.

3- Para el efecto de "Desplegar" deben verlo AQUI que ya lo había explicado.

4- Para el efecto del Botón apretado deben verlo AQUI que también ya lo había explicado.

En fin luego de haber explicado y aplicado todo esto, el código quedaría mas o menos así:

<script type='text/JavaScript'></script>
<div class="EJ-COMENTARIOS">
<span class="pushbutton"><a href="javascript:desplegar('EJ-COMENTARIOS');">
<img src="URL DE LA IMAGEN DE BOTON"/></a></span>
<ul id="EJ-COMENTARIOS" class="ocultar_menu"><br/>
<script style="text/javascript" src="URL DEL ARCHIVO RC.js"></script>
<script style="text/javascript">var a_rc=5;var m_rc=true;var n_rc=false;var o_rc=50;</script><script src="URL DE TU BLOG/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>
<br/></ul></div>


En fin a probarlo, es una recopilación de trucos, como ya había dicho, asi que el cielo es el límite :D

--> Leer más...

[ ... ]

Imagenes para cabecera


En esta página hay más de 500 headres para poder cambiar nuestra cabecera.

Consejo: esta página te pide que te registres, aunque puedes copiar la imagen una vez que encuentres la que más te agrade, clickeando con el botón derecho del mouse le das a guardar como y ya está. Una vez que tienes la imagen la puedes modificar con el programa de imágenes que utilices.

Para cambiar la imagen de la cabecera nuevamente recurro a Gem@, que lo explica muy bien:
Las explicaciones son para la plantilla mínima, pero poniendo un poco de empeño puede servir para alguna otra.
Nos situamos en Plantilla/Edición HTML/ Expandir artilugios.
Una vez allí donde dice:
*/
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}


Cambia el valor border:1px de header-wrapper a border:0px y el de header también a border: 0px
(Lo anterior hace que el borde donde aparece el título desaparezca)

Más abajo a continuacion de: <div id='outer-wrapper'><div id='wrap2'> añadimos lo siguiente:
<div id='header'>

<a href='aquí-la-url-de-tu-blog'>
<img border='0' height='190' src='aquí-la-url-de-tu-imagen'
width='670'/></a>

(Con este cambio añadimos la imagen que hace enlace con nuestro blog de manera que al clicar en ella actualiza la página)


Por último debes buscar esta parte del código:
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='PruebaBlog (cabecera)'
type='Header'>
<b:includable id='main'>
<div class='titlewrapper'>
<h1 class='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>

<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</h1>
</div>

Eliminaremos los dos códigos <data:title/>guardamos los cambios y listo.
(Al eliminar <data:title/>estamos eliminando el título)

Yo lo realisé en el Blog de Recetas y quedó bastante bien, teniendo en cuenta que desde donde realizo este blog no puedo tener programas de imágenes :-(
--> Leer más...

[ ... ]

Cómo postear codigos HTML

Una herramienta fantástica es el que se encuentra en chuano.net ó simplecod.com
Se trata de un convertidor del código HTML para que podamos postearlo en nuestro Blog.
Es decir si nosotros quisieramos poner un código que represeta una imagen, por ej., lo que se publicaría sería la imagen y no el código, es en esa situación que utilizamos el convertidor.
Estas pàginas nos modifica el código HTML de manera tal que podamos verlo en el post que realisemos.

Ej:
si yo aplicara un código para añadir una imagen que a su vez sea enlace de una página, aplico el código para ello a continuación:


Obviamente no ven ningún código, sólo la imagen que si la pinchan lo llevan a este Blog.
Entonces lo que hacemos es ir al convertidor, copiar el código que nos dá y el resultado sería este:

<a href="http://keytrucos.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidKyt55zVSZ5ZSpemTBVQ_Agt9Dy_ez07w4e2GPs4ADblmHdnQCLn-1B6E8UiSkjFUe32IoepTEz71FoY7suVsFeVWrViFzi_rAAX9qCo16UrFJAWR8i0eSX7qq8tTiv3XyQBz35sc8i8/s320/keymu%C3%B1eca.png" /></a>

Y pronto !!!!
--> Leer más...

[ ... ]

Hotlinking?

Gracias a Gema@ me enteré de que se trata esto.
Sobre todo es una cuestión de respeto.
Copio y Pego ya que lo explica clarito:

"Siempre he recomendado a todo aquel que quiere oírlo que no es ético robar la Url de las imágenes, me explico...Una cosa es apropiarse de una imagen, es decir... guardarla y subirla a un servidor para más tarde exponerla en una página o blog .Otra muy distinta es copiar la Url de esa imagen y cómodamente añadirla al espacio donde uno desea exponerla, la diferencia es palpable, cuando robamos la Url de una imagen estamos también aumentando el ancho de banda, pudiéndole provocar al autor de esa web pagar más por el alojamiento.
Eso es a lo que se llama hotlinking, apropiarse de la url de las imágenes alojadas en un servidor ajeno, yo no le llamaba de ninguna forma pero claro pensaba que quien hiciera eso debía ser un comodón o estar en la ignorancia de lo que he explicado anteriormente.También quiero añadir que hay formas de saber si alguien ha añadido la url de nuestras imágenes, y es por medio de Technorati claro está no hay que confundir adueñarse de la url de una imagen con el gesto de enlazar nuestro blog con un botón tipo enlace invitando a ser enlazados, cosa dicho sea de paso es de agradecer.

Como decía en Genbeta nos han dado la solución, se trata de una pequeña aplicación Web que nos ahorrará tiempo y ancho de banda.

Funciona de la forma más sencilla, cuando deseamos llevarnos una imagen de algún lugar en vez de utilizar la url de esa imagen le añadimos justo delante: http://imgred.com/Cuando realizamos esto la petición la hace al servicio de ImgRed, pidiendo la primera vez la imagen original y devolviendo una versión cacheada de la misma.

[...] os invito a probar este nuevo sistema comprobando después en propiedades de imagen el funcionamiento de tan útil aplicación."

Esto es importante, si no lo sabías como yo, ahora ya lo sabes, y estaría bueno que lo apliquemos.
--> Leer más...

[ ... ]

Cambiar texto "Entradas Antiguas" por iconos de navegación

En GemaBlog encontré esto que está sumamente interesante, y aquí lo comparto.
Obviamente en algùn momento lo puse en practica en mis blogs.

Es importante que siempre guarden una copia de la plantilla, porque nada es infalible ^_^

Sustituir o cambiar por gráficos los datos que salen como:
*Entrada más recientes *Página principal *Entradas antiguas
Nos situamos en Plantilla/Edición HTML/Expandir artilugios hasta encontrar esta parte de código:
<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>
</div>

<div class='clear'/>
</b:includable>


Y lo sustituimos por esto otro:
<b:includable id='nextprev'>
<div id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<a expr:href='data:newerPageUrl' expr:title='data:newerPageTitle' id='blog-pager-newer-link'>
<img src='http://img58.imageshack.us/img58/8076/leftxv5.png'/>
</a>
</b:if>

<b:if cond='data:olderPageUrl'>
<a expr:href='data:olderPageUrl' expr:title='data:olderPageTitle' id='blog-pager-older-link'>
<img src='http://img260.imageshack.us/img260/9691/rightli5.png'/>
</a>
</b:if>

<a class='home-link' expr:href='data:blog.homepageUrl'>
<img src='http://img260.imageshack.us/img260/6710/homepngrg7.jpg'/>
</a>
</div>
<div class='clear'/>
</b:includable>


El resultado seria el siguiente:

--> Leer más...

[ ... ]