Trucos Geek

HUMOR: Adaptador de USB a puerto PARALELO

2010-08-19T23:15:00.000-06:00

¿Quien dijo que el puerto paralelo había muerto? }:-]

Resulta que también puede ser usado como puerto USB, y si funciona!!! ;-D

Agregar opcion "Responder" a lo comentarios de Blogger

2010-08-04T13:53:00.004-06:00

Este truco es muy util, lo que hace es agregar un link que dice [Responder] a cada comentario de tu blog, al hacer click en "Responder" automaticamente se escribira un codigo en el formulario de comentarios con el link del usuario al que le quieres responder :-D

Pasos:

1. Debes buscar el ID de tu blog

Debes irte a tu panel de blogger, entra a Diseño > Edicion HTML ahora ahi mira la barra de direccion de tu navegador y los numeros que aparecen ahi son el ID de tu blog

2. Ahora ahi en tu panel de blogger en Diseño > Edicion HTML hazle click en Expandir plantillas de artilugio y debes buscar este codigo <data:commentPostedByMsg/> abajo de el pega lo siguiente:

<span><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=AQUI-LA-ID-DE-TU-BLOG&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450&quot;); return false;'>[Responder]</a></span>

3. Ahora solo cambia la ID de tu blog y guarda los cambios.

Como crear un tool-tip para blogger o cualquier web utilizando solo CSS

2010-08-04T11:51:00.037-06:00

Bueno para empezar si te estas preguntando ¿que es un tooltip? pues un tooltip es una cajita con un mensaje que es visible solo cuando pasas el mouse encima de un link

Esto es un tooltip:

Los pasos para crear un tooltip son los siguientes:

1. En Blogger debes ir a Diseño | Edición de HTML y antes de ]]></b:skin> pegas este estilo CSS:

a.tooltip {

position: relative; /* es la posición normal */

text-decoration: none !important; /* forzar sin subrayado */

}



a.tooltip:hover {

z-index:999; /* va a estar por encima de todo */

}



a.tooltip span {

display: none; /* el elemento va a estar oculto */

}



a.tooltip:hover span {

display: block; /* se fuerza a mostrar el bloque */

position: absolute; /* se fuerza a que se ubique en un lugar de la pantalla */

top:2em; left:2em; /* donde va a estar */

width:250px; /* el ancho por defecto que va a tener */

padding:5px; /* la separación entre el contenido y los bordes */

background-color: #66CCFF; /* el color de fondo por defecto */

border: solid 1px #0099FF; /* es el color del borde */

color: #FFFFFF; /* el color de los textos por defecto */

}

2. Ahora que ya tienes el estilo CSS en tu blog lo unico que queda es aprender a usar los tooltip. Para poner un tooltip debes utilizar este codigo html:

<a class="tooltip" href="#">

   Este es el link visible

<span>

   Aqui el texto invisible del tooltip

</span>

</a>

En el codigo del tooltip adentro de los tags <span> </span> no solamente puedes poner texto, tambien puede poner imagenes o cualquier cosa que se te ocurra

Fuente | Vagabundia

Como crear una tienda virtual con OsCommerce

2010-05-13T03:28:00.002-06:00

En este video se explica como subir una tienda virtual creada con OsCommerce a un web hosting gratuito

Direccion de la tienda:
http://oscommerce.net16.net/oscommerce/catalog/

Internet Explorer 9 es el navegador perfecto!!!

2010-05-11T11:30:00.004-06:00

¿Te estas riendo? ¿Piensas que esto es una broma? pues nada mas lejos de la realidad. Resulta que el nuevo Internet Explorer 9 va camino a ser el mejor navegador del mercado, dejando por lejos a navegadores como FireFox y GoogleChrome...

click para verla mas grande

Según los test realizados por los de Microsoft el IE9 obtuvo una calificación de 100% en todos los test.
El test consiste en 192 pruebas con colaboración de la World Wide Web Consortium (W3C) el test incluye pruebas de HTML 5, CSS 3, DOM Level, SVG... y un montón de cosas mas que sepa dios que son :-D

Bueno en si el resultado es 100%, pueden ver todo el test en el Windows Internet Explorer Testing Center yo todavía no me lo creo, como dice el dicho "ver para creer" pero bueeee... Esto seria un claro ejemplo de como pasar de ser el peor navegador del mercado a ser el mejor y en una sola versión.

Otro exelente buscador de iconos

2010-05-11T01:18:00.000-06:00

Con una coleccion de cerca de 300,000 iconos findicons.com es una de las mejores fuentes donde buscar y descargar iconos y de forma gratuita, todos los iconos tienen una exelente calidad

Con esta web seguro encontraras el icono que buscas, aunque si no te convence tambien te presento estas otras opciones:

http://www.iconfinder.com/

http://www.iconlook.com/

10 formas de ganar dinero por internet

2010-05-11T01:06:00.001-06:00

Esta entrada es gracias a 10puntos.com es una web de curiosidades muy buena

Con tu blog o Pagina web. Aquí tenemos muchísimas y diferentes formas de hacerlo, la mas popular sin duda Adsense. Este te paga por cada click que hagan tus visitantes en la publicidad que anteriormente debes agregar a tu sitio. Pero además de eso podemos vender enlaces/links mediante Text Link Ads o tal vez LinkLift(Hay muchas alternativas, es cuestión de googlear). La ventaja de estas ultimas es que te pagan a los 10 dólares, y adsense hasta los 100.
Escribiendo artículos. Es decir como blogger, mira podrás encontrar ofertas de “empleo” en Findablogger. Para que sepas un poco mas de que va esto te cuento que ahí algunos te pagan por escribir artículos de menos o mas de 200 palabras,estos artículos son según para quien vayas a escribir, hay blogs de distintas temáticas. La mayoría de estas ofertas son muy serias y casi todos pagan mediante paypal pero con algunos podrás elegir. Ahh y los pagos van desde .5 de dólar hasta los 5 euros, es lo máximo que he visto que paguen.
Clickeando y viendo publicidad (PTC). Esto tal vez no deja tanto como los demás pero puede dejarte muchísimo mas si inviertes en membresias y referidos. La cosa va que te pagan (La mayoría) 1 Centavo de dólar por cada anuncio que veas, y a lo largo del día hay alrededor de unos 10 anuncios. Perol o bueno esta cuando inviertes, aquí te pueden llegar a pagar unos 1500 dólares al mes, invirtiendo unos 400 dólares, es enserio. Yo actualmente he comprado un paquete de 100 referidos en Bux.to(Sitio altamente recomendado) me salió en casi 100 dólares y a mas de 1 mes de la inversión ya he recuperado casi el 150 por ciento. Los pagos de la mayoría son vía alertpay y paypal y el mínimo a cobrar es 10 dólares, aunque algunos PTCs aceptan menos. Si lo que quieres es que te recomiende sitios ya te dije bux.to, también recomiendo advercash ybux3.com.
Leyendo Mails. Un servicio que la verdad casi no deja nada, al igual que los PTC te paga por ver publicidad solo que desde tu correo. La pagina mas significativa para esto me parece que es es-facil en esta pagina te pagan 0.03 euros por cada e-mail leído, pero además posee una cadena de referidos de hasta 5 niveles, por estos te pagan 0.01 euros.
Respondiendo encuestas. Lo mas simple, la simple idea de que te paguen por responder encuestas ya es impresionante e increíble, peor ya no solo es una idea es todo una realidad. Aquí los servicios que te proporcionan estas encuestas pagadas son Paid Surveys Etc…! y Express Paid Surveys!. Estos sitios no te proporcionan las encuestas en si, si no que te ofrecen lisas de sitios que te proporcionan encuestas. La desventaja de esto es que necesitas realizar una inversión antes.
Vendiendo cosas. No creo que sea necesario explicárselo, para esto existe ebay,mercadolibre,etc. Pero hay algo mas que se llama clicxbak , un sitio donde solo puedes vender ebooks y servicios digitales, estos suele ser muy rentables según lo promociones.
Como Freelancer. Tal vez muchos no sepan que es esto, te explico que freelancer es “un trabajador por cuenta propia que ofrece sus trabajos a diversas empresas.” (Vía Wikipedia). Pero como ofrecer tus servicios de programador,diseñador,etc?, pues para eso existen varias paginas pero la mas popular yo creo trabajofreelance ,al igual que findablogger una especie de bolsa de empleo para freelancer, donde ofrecen trabajos de todo tipo.
Por apostar en internet. Seguramente habrás oído hablar de Bwin(Patrocinador del ya bicampeon de la liga español,lastima barca :S) , bueno pues Bwin es una web donde podemos apostar en la mayoría de los deportes. Lo que gusta de esta web de apuestas es que es segura y siempre tiene variadas apuestas. Desde luego que hay muchas mas webs de apuestas pero yo te he puesto a Bwin por que para mi es la que promete mas seguridad. Puedes leer este articulo de Sporty traderdonde mencionan las mejores paginas de apuestas.
Mediante los casinos online. Sin necesidad de explicárselo, solamente decirte que uno de los casinos mas populares y seguros son blackjackballroom y casino666.com, pero nada es seguro corres mucho riesgo,definitivamente no recomiendo estos, pero es bueno conocerlo.
Juntando todos los anteriores. La mejor forma de ganar dinero en Internet es participando en todos los servicios posibles, esto requiere mas tiempo pero es la mejor forma para hacer una pequeña fortuna.

Botones y links con estilo CSS

2010-05-11T00:24:00.005-06:00

A todos los amantes del CSS y del diseño web les va a ecantar este truco ;-)

Se trata de darle estilo CSS a los botones o enlaces, el resultado es impresionante, los botones quedan como si estubieran hechos con Flash.

El truco es facil de implementar, aqui van los pasos:

1. Lo primero que hay que hacer es añadir el siguiente estilo CSS a tu blog o a tu web



/* --------------- BOTONES --------------- */



.button, .button:visited { /* botones genéricos */

background: #222 url(http://sites.google.com/site/zavaletaster/Home/overlay.png) repeat-x;

display: inline-block;

padding: 5px 10px 6px;

color: #FFF;

text-decoration: none;

-moz-border-radius: 6px;

-webkit-border-radius: 6px;

-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);

-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);

text-shadow: 0 -1px 1px rgba(0,0,0,0.25);

border-top: 0px;

border-left: 0px;

border-right: 0px;

border-bottom: 1px solid rgba(0,0,0,0.25);

position: relative;

cursor:pointer;

}



button::-moz-focus-inner,

input[type="reset"]::-moz-focus-inner,

input[type="button"]::-moz-focus-inner,

input[type="submit"]::-moz-focus-inner,

input[type="file"] > input[type="button"]::-moz-focus-inner {

border: none;

}



.button:hover { /* el efecto hover */

background-color: #111

color: #FFF;

}



.button:active{  /* el efecto click */

top: 1px;

}



/* botones pequeños */

.small.button, .small.button:visited {

font-size: 11px ;

}



/* botones medianos */

.button, .button:visited,.medium.button, .medium.button:visited {

font-size: 13px;

font-weight: bold;

line-height: 1;

text-shadow: 0 -1px 1px rgba(0,0,0,0.25);

}



/* botones grandes */

.large.button, .large.button:visited {

font-size:14px;

padding: 8px 14px 9px;

}



/* botones extra grandes */

.super.button, .super.button:visited {

font-size: 34px;

padding: 8px 14px 9px;

}



.pink.button { background-color: #E22092; }

.pink.button:hover{ background-color: #C81E82; }



.green.button, .green.button:visited { background-color: #91BD09; }

.green.button:hover{ background-color: #749A02; }



.red.button, .red.button:visited { background-color: #E62727; }

.red.button:hover{ background-color: #CF2525; }



.orange.button, .orange.button:visited { background-color: #FF5C00; }

.orange.button:hover{ background-color: #D45500; }



.blue.button, .blue.button:visited { background-color: #2981E4; }

.blue.button:hover{ background-color: #2575CF; }



.yellow.button, .yellow.button:visited { background-color: #FFB515; }

.yellow.button:hover{ background-color: #FC9200; }

2. Una ves que ya tengas el estilo CSS en tu blog lo unico que falta es aprender a aplicar el CSS a nuestros botones o links, en si lo unico que debes hacer es añadir la clase CSS a tu boton o link.

la clase que tienes que agregar seria asi:

class="button medium green"

ahi en la clase hay dos propiedades que podemos variar a nuestro gusto, que son el tamaño y el color

PARA CAMBIAR EL TAMAÑO: por ejemplo en la donde dice class="button medium green" medium es el tamaño, tenemos 4 tamaños disponibles: small, medium, large y super

PARA CAMBIAR EL COLOR: donde dice class="button medium green" green es el color, tenemos 6 colores disponibles: green, red, yellow, orange, pink y blue

Si lo aplicas a un boton el codigo queda asi:
<input type="button" value"Boton CSS" class="button medium red">

Si lo aplicas a un ink el codigo seria este:
<a href="trucosgeek.blogspot.com" class="button medium yellow">Boton CSS</a>

Bueno aqui les dejo ejemplos de como se ven los botones

Estos son los tamaños:

class="button small blue"

class="button medium green"

class="button large pink"

class="button super yellow"

Estos son los colores:

class="button medium green"

class="button medium blue"

class="button medium red"

class="button medium yellow"

class="button medium pink"

class="button medium orange"

Tabla de propiedades CSS3 aceptadas por cada navegador

2010-03-23T20:11:00.000-06:00

CSS3 supone para muchos de nosotros un gran adelanto con respecto a otras versiones anteriores de las hojas de estilo, cuenta con una serie de propiedades que van a lograr una gran mejora en el diseño web, mas facilidad, mejor rendimiento y menos consumo de recursos.

El problema de CSS3 es que apenas es adoptado por la mayoría de los navegadores, sacando el caso de Chrome que prácticamente reconoce por completo la gran mayoría de las nuevas propiedades el resto de los navegadores solo incorporan algunas. Para saber que propiedades acepta cada navegador basta con utilizar la tabla que realizaron en Find Me By ip.

Click para ver mas grande

Me imagino que la tabla se ira actualizando en cuanto aparezcan las nuevas versiones de los navegadores. No obstante ya con la información que esta disponible ahora mismo vamos a tener unos cuantos meses de vigencia, al menos hasta que las nuevas versiones de navegadores capten porciones importantes del mercado.

Fuente | Kabytes.com

Review Windows Live Messenger 2010

2010-03-23T19:51:00.001-06:00

La beta de la siguiente generación de programas Live ya circula por la Red. Windows Live Messenger 2010 será de nuevo el protagonista de la suite doméstica de Microsoft. Gracias a BitTorrent y páginas de descarga ha sido fácil conseguir una copia y evaluarla.

El año pasado, Messenger 2009 supuso una revolución que muchos rechazaron de cuajo. Tanto es así, que publicamos instrucciones para seguir usando Messenger 8.5. Ahora, en pleno auge de las redes sociales y de Facebook, Microsoft juega cartas distintas. ¿Cómo es la nueva versión de Messenger, la 2010? Vamos a echarle un vistazo.

Instalación y primeras impresiones

Empezamos por una noticia poco agradable: Windows Live 2010 no es compatible con Windows XP. Con la mirada puesta en Windows 7, el nuevo Messenger no estará disponible para la versión de Windows más popular hasta la fecha. Éste es el mensaje que verán los usuarios de XP al intentar la instalación de la nueva suite:

No tuvimos más remedio que instalar la suite en una máquina con Windows 7. El proceso de instalación es muy similar al del paquete actual e incluye, además de Messenger, las demás utilidades Live: Writer, Movie Maker, la Galería de Fotos, el cliente de correo Mail, el filtro parental y la barra Bing.

Al ejecutar Windows Live Messenger 2010, cuál fue nuestra sorpresa al comprobar que, por fin, Microsoft “socializa” su cliente de mensajería instantánea. La que se carga por defecto, de hecho, es la nueva vista “Social”, con las actualizaciones de estado y la actividad de tus contactos:

El mensaje de estado de Messenger se convierte así en una actualización similar a la Twitter y otras redes sociales. Los elementos destacados aparecen en el panel izquierdo, mientras que los contactos se listan a la derecha.
Muy interesante es el botón que vemos en la esquina inferior derecha: aparece el icono para la integración con Facebook. ¿Se añadirán más redes en ese menú?

Conversaciones en pestañas y la vista Contactos

Por supuesto, la vista clásica sigue disponible. Ahora se llama “Vista Contactos” y se activa haciendo clic en el icono con forma de panel de la esquina superior izquierda.

Hay una mayor limpieza visual, con etiquetas de texto en lugar de los botones poco comprensibles de antaño. La parte inferior sigue destinada a la publicidad, mientras que el botón de correo, el que notificaba la llegada de mensajes a Hotmail, ha desaparecido.

La ventana de chat se mantiene fiel a la versión 2009, con avatares de gran tamaño y bordes que muestran el estado a través de colores. La gran novedad está en la parte superior. ¿La ves? Sí, finalmente, Messenger 2010 soporta pestañas. Parece que Microsoft les tiene algún tipo de alergia a estos elementos de interfaz tan útiles (en Internet Explorer aparecieron a partir de la versión 7).

Nuevos emoticonos e integración con Windows 7

Algunos emoticonos de Messenger 2010El estilo de los emoticonos de Messenger 2010 ha cambiado. Los hay nuevos (como el rostro con gafas y bigotes postizos o las caras de desaprobación), pero ninguno supone un cambio radical. Es muy posible que algunos echemos de menos los iconos antiguos, y es que Microsoft engendra tradiciones difíciles de cambiar.

La integración de Messenger 2010 con la barra de Windows 7 es mucho mejor

La polémica está servida

Tras haber probado esta nueva versión, nos quedamos con más interrogantes que certezas. El primero, la incompatibilidad con XP: ¿realmente Windows Live Messenger 2010 supone un cambio de código tan radical? Sospechamos que el requisito de sistema operativo se debe a los demás programas del paquete -sobre todo Movie Maker- y que no tardaremos en ver un instalador no oficial de Messenger 2010 para XP.

Estamos todavía antes una beta, concedido, pero la escasa cantidad de novedades nos ha dejado perplejos. ¿Podemos acusar a Microsoft de timidez? ¿O se trata de sana precaución ante un fenómeno -la integración de mensajería y redes sociales- ante el cual la empresa de Redmond se siente escéptica? Esperaremos la versión completa antes de soltar un veredicto.

¿Qué te ha parecido la nueva versión de Windows Live Messenger?

Descargar MSN Messenger 2010 Beta

2010-03-22T20:00:00.002-06:00

Apareció una versión Beta para Descargar del MSN Messenger 2010, mejor conocido como Windows Live Messenger 2010 que trae muchas de las cosas que se esperaban. Repito no es una versión oficial, de hecho requiere de un parche para funcionar correctamente, asi que lo prueban bajo su responsabilidad.

Los cambios mas importantes son en el diseño, con mejoras de iconos, ubicación y agregado de solapas para mostrar mas información en poco espacio.

Link | Descargar – Descargar Parche

Generador automatico de codigo CSS3 en linea

2010-03-16T02:53:00.001-06:00

Todo programador web o aficionado a los blogs deberia conocer sobre el CSS3, si eres novato aveces se nos complica aprendernos codigos, pero para eso existen buenisimas herramientas que nos facilitan las tareas, una de ellas es CSS3 Generator

El CSS3 Generator es una herramienta en linea que crea el código que deberías utilizar en tu hoja de estilos a partir de unos pocos datos que ingreses, funciona con las propiedades de sombras, bordes redondeados, transparencias, entre otras.

Lo mejor es que posee una zona donde te mostrará una vista previa de los efectos que coloques sin necesidad de recargar la página, al mismo tiempo te mostrará el código que debes insertar en tu hoja de estilos y las versiones de navegadores en los que funcionará.

Una aplicación bastante útil que seguramente te ahorrará valiosos segundos de tu tiempo.

Link de la web

http://css3generator.com/

Fuente | BdeBloggers.com

Como evitar que te copien un post

2010-03-16T02:35:00.000-06:00

Me he dado cuenta que a mucha gente le gusta proteger el contenido de sus blogs aunque es muy difícil de hacer no es imposible en este caso estos códigos puede ayudarte a proteger de forma muy fácil y para usuarios comunes el contenido de tu blog para usuarios expertos es pan comido copiar contenido así que no hay una forma 100% segura de proteger el contenido del blog.

Repito los usuarios promedio no podrán copiar el contenido de tu blog o se les va a complicar mas hacerlo para los usuarios expertos es pan comido copiar el contenido aun que le pongas los mejores códigos es muy fácil evadirlos

Código para evitar que copien el texto, imagenes, deshabilita el boton derecho del raton y evita el facil copiado de imagenes en firefox de tu blog o web:

Nota para instalar copia el codigo en su totalidad y ve a Elementos de la página/Añadir un gadget/Configurar HTML/JavaScript pega el codigo gusrdalo y listo.

<script language="JavaScript">



var message="";



function clickIE() {if (document.all) {(message);return false;}}



function clickNS(e) {if



(document.layers||(document.getElementById&&!document.all)) {



if (e.which==1||e.which==2||e.which==3) {(message);return false;}}}



if (document.layers)



{document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;}



else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;}



document.oncontextmenu=new Function("return false")



function disableselect(e){



return false



}



function reEnable(){



return true



}



document.onselectstart=new Function ("return false")



if (window.sidebar){



document.onmousedown=disableselect



document.onclick=reEnable



}



</script>

Funciona exelentemente para firefox. Bueno yo no estoy en contra del Copy-Paste de hecho yo lo hago ;-) pero yo siempre enlazo la fuente y pues eso es lo que me molesta, bueno espero que les sirva MALDITOS COPIONES!!! }:-] X*

Como poner imagenes en vez de "Entradas recientes" y "Entradas antiguas" en blogger

2010-03-16T02:21:00.000-06:00

Para sustituir los links "entradas antiguas, entradas recientes e inicio" por las imágenes que queramos debemos seguir los siguientes pasos:

1) Vamos a Diseño

2) Edición HTML

3) Marcamos la casilla "expandir artilugios"

ENTRADAS RECIENTES

4) Buscamos la siguiente parte del código: data:newerPageUrl (para buscar más rápido tecleamos Ctrl + F)

5) Una vez localizado nos aparecerá algo así:

<b:if cond='data:newerPageUrl'>



<span id='blog-pager-newer-link'>



<a  class='blog-pager-newer-link' expr:href='data:newerPageUrl +  &quot;?max-results&quot; ' expr:id='data:widget.instanceId +  &quot;_blog-pager-newer-link&quot;'  expr:title='data:newerPageTitle'><data:newerPageTitle/></a>



</span>



</b:if>

Tan sólo debemos cambiar <data:newerPageTitle/> por <img src='URL de la imagen'/>

En <img src='URL de la imagen'/> deberemos cambiarlo por el link de la imagen que queramos. Recomiendo subir tus imágenes en un servidor gratuito como imageshack.

ENTRADAS ANTIGUAS
Un poco más abajo encontraremos lo siguiente:

<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>

Al igual que en entradas recientes tan sólo debemos cambiar <data:olderPageTitle/> por <img src='URL de la imagen'/>

INICIO
Por último, para sustituir el inicio de página principal deberemos buscar más abajo la siguiente parte de código:

<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>

Al igual que en entradas recientes y entradas antiguas tan sólo debemos cambiar <data:homeMsg/> por <img src='URL de la imagen'/>

El nuevo diseñador de plantillas de blogger

2010-03-14T23:08:00.000-06:00

en el blog oficial de Googleanunciaron la disponibildiad, como siempre, primero en Blogger Draft, de una nueva herramienta llamada Template Designer, que no es más que una especie de editor WYSIWYG para crear tus propias plantillas.

Básicamente la herramienta tiene disponible un stock de 15 plantillas predefinidas y muy flexibles a la hora de personalizarlas, todas ellas nos dan la posibilidad de elegir un layout para el diseño, ya sea de una, dos o tres columnas y distintas formas de organizar los contenidos. Y por otro lado, podemos elegir fondos o patrones desde iStockPhoto, un lugar con infinidad de imágenes de calidad para personalizar nuestro diseño en unos clicks.

Para utilizar esta herramienta tenemos que entrar desde Blogger Draft, y en la pestaña “Diseño”, seleccionamos la opción “Diseñador de plantillas”.
A mí me parece que es una de las mejoras herramientas que han agregado a Blogger, sobre todo para aquellos que no tienen nada de conocimientos de diseño y no tienen ni idea de cómo editar un estilo para agregar fondos pesonalizados, cambiar los layouts de un diseño, etc.

Fuente | PuntoGeek.com y fue un copy-paste porque no tenia ganas de escribir

Relojes para tu blog

2010-03-14T22:56:00.000-06:00

Estos son codigos para poner relojes en tu blog, para ponerlos puedes hacerlo añadiendo un nuevo gadget tipo HTML/Javascript

Relojo 1

Codigo

<embed style="" src="http://www.creatupropiaweb.com/Recursos_Flash/reloj1.swf" wmode="transparent" type="application/x-shockwave-flash" height="100" width="100"><param name=wmode value=transparent></embed>

Relojo 2

Codigo

<param name=wmode value=transparent><embed style="" src="http://www.creatupropiaweb.com/Recursos_Flash/reloj3.swf" wmode="transparent" type="application/x-shockwave-flash" height="100" width="100"><param name=wmode value=transparent></embed>

Reloj 3

Codigo

<param name=wmode value=transparent><embed style="" src="http://www.creatupropiaweb.com/Recursos_Flash/reloj2.swf" wmode="transparent" type="application/x-shockwave-flash" height="100" width="100"><param name=wmode value=transparent></embed>

Script de Post Relacionados en Blogger con imagen miniatura sin LinkWithin

2010-03-14T22:19:00.002-06:00

Este script sirve para poner post relacionados con una imagen miniatura. Antes ya habia hablado de un widget llamado LinkWithin pero lo malo de ese widget es que no era nada personalizable y nos limitabamos a sus opciones por un momento me gusto pero muy limitado :-(

asi se veran tus post relacionados:

Aqui puedes ver una web que los utiliza

Ahora les muestro esta otra opcion para poner post relacionados con miniatura, es mucho mejor ya que lo podemos personalizar a nuesta manera, podemos poner cuantos post queremos que salgan y personalizar hasta los colores, bueno aqui estan los pasos:

1. Lo primero que tienes que hacer es buscar(CTRL+F para buscar codigos) este codigo

<div class='post-footer-line post-footer-line-1'>

Si no lo encuetras es porque tu plantilla esta distinta, puedes encontrarlo tambien como esta linea

<p class='post-footer-line post-footer-line-1'>

Bueno yo lo que recomiendo es que mejor busques solo el termino post-footer-line-1 asi no tendras problemas ;-)

2. Luego despues de esa linea debes pegar abajo el script

<!-- Related Posts with Thumbnails Code Start-->

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div id='related-posts'>

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.isLast != &quot;true&quot;'>

</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a>

<script type='text/javascript'>

var currentposturl=&quot;<data:post.url/>&quot;;

var maxresults=5;

var relatedpoststitle=&quot;Articulos relacionados&quot;;

removeRelatedDuplicates_thumbs();

printRelatedLabels_thumbs();

</script>

</div><div style='clear:both'/>

</b:if>

<!-- Related Posts with Thumbnails Code End-->

Puedes configurar cuantos post quieres que se muestren cambiando el valor de var maxresults=5; por defecto se muestran 5, pero puedes poner los que quieras solo cambiando el numero

Puedes cambiar el titulo, por defecto dice Articulos relacionados cambia el titulo por el que tu quieras

3. El siguiente paso es añadir el estilo CSS, debes buscar el codigo

]]></b:skin>

y arriba de el pegar este codigo

/* related posts

-----------------------------------------------*/

#related-posts {

width:420px;

margin:0 auto;

text-align:center;

text-transform:none;

height:100%;

min-height:100%;

padding-top:5px;

padding-left:5px;

}



#related-posts h2{

font-size: 15px;

font-weight: bolder;

color: #525252;

font-family: Georgia, “Times New Roman”, Times, serif;

margin: 0;

padding: 10px 0 10px 0;

}



#related-posts a{

background: #F4F8FD;

border: 1px solid #E5F0FB; 

color:black;

}



#related-posts a:hover{

color:black;

}



#related-posts a:hover {

background-color: #81BEF7;

}

Para cambiar los colores:

en esta parte del estilo CSS

#related-posts a{
background: #F4F8FD; este es el color del fondo del cuadrito con la imagen
border: 1px solid #E5F0FB; este es el codigo del color del borde
color:black;
}

#related-posts a:hover {
background-color: #81BEF7; este es el color del cuadrito con la imagen cuando esta el mouse encima
}

Para ayudarte, aqui puedes ver todos los codigos de los colores hexadecimales

4. Bueno ahora solo falta que guardes tu plantilla y listo!!!

Paginas estaticas en Blogger

2010-01-24T22:04:00.000-06:00

Blogger.com se toma en serio eso de “a paso lento pero firme” y ahora luego de mucho esperar por parte de sus usuarios tiene la posibilidad de agregar paginas estaticas usadas por lo general para dar información del sitio “acerca de” y similares.

Hasta ahora la salida para lograr ello era crear una entrada con fecha vieja y linkearla manualmente desde algún menu, ahora y solo si ingresamos desde Blogger Draft podremos ver esta nueva opción “Editar páginas” que nos mostrara un editor igual al que usamos para los articulos pero con la diferencia de que no podras agregarle Tags.

Las url son algo más cortas, ya que no contienen la fecha de publicación y son del tipo dominio.blogger.com/p/acerca-de.html, además nos permite agregar un widget o gadget como le llaman para mostrar las paginas creadas y tenemos un limite de 10 paginas por ahora.

Fuente | CodigoGeek.com

Maldito Photobucket!!!

2010-01-19T14:22:00.002-06:00

Desde hace ya varios dias mi cuenta de photobucket ha llegado a su limite de transferencias mensuales, debido a eso el blog no se visualiza correctamente, pido mil disculpas a los seguidores.

He recibido algunos correos de que tambien debido al maldito photobucket los trucos de los emoticones y de los sexy bookmarks no se estan visualizando bien en los otros blogs que han aplicado mis trucos, repito, pido disculpas por los inconvenientes.

En 4 dias me resetearan mi cuenta de photobucket, eso quiere decir que todas las imagenes volveran a visualizarse asi que tambien todos los trucos tambien funcionaran correctamente.

Para evitar futuros problemas estare cambiando de alojamiento las imagenes de mi blog y tambien debido a que hay ya un gran numero de personas que utiliza mis imagenes de los trucos abrire una cuenta en photobucket para cada truco, espero poder asi liberar de trafico mi cuenta actual.

Bueno eso era todo lo que queria decir, tambien los invito a que si tienen alguna sugerencia de trucos o necesitan algun hack para su blog me pueden escribir a mi direccion de contacto. Adios!

Efecto sombra en los titulos de los posts

2009-12-20T04:38:00.007-06:00

Este truco consiste en aplicar un estilo CSS a los totulos de los posts para que tengan un efecto de sombra. Cabe aclarar que este efecto por "desgracia" no se puede visualizar en IE XD pero en los demas navegadores se ve perfectamente.

Pasos:

Lo primero que hay que hacer es irse a la plantilla y buscar (recuerda CRTL+F para buscar) el tag ]]></b:skin> y arriba de el debes colocar el siguiente codigo:

.post-title {

text-shadow: #6374AB 10px -10px 3px;

}

Eso hara que tus titulos se vean de la siguiente manera:

Titulo de un post con efecto sombra

Explicacion del codigo: #6374AB 10px -10px 3px

#6374AB este es codigo hexadecimal del color de la sombra

10px esta es la distancia en el eje X de la sombra con respecto a las letras

-10px esta es la distancia en el eje Y de la sombra con respecto a las letras

3px esta es la difuminacion o densidad de la sombra

Jugando con el efecto CSS TEXT-SHADOW

El efecto se ve muy bien, pero tambien se puede jugar un poco con el efecto "text-shadow" a mi me gusta simular un efecto tipo "iluminacion" al pasar el mouse sobre el texto, aqui un ejemplo:

Titulo de un post con efecto sombra

Para aplicar ese efecto a los titulos lo que deberias hacer es aplicar un estilo del tipo :hover el codigo CSS quedaria de la siguiente manera:

.post-title:hover {

text-shadow: #6374AB 0 0 10px;

}

Si te fijas lo que se hace es ponerle una distancia 0(cero) a los ejes "X" y "Y" y ponerle una difuminacion de 10px a la sombra y el color de la sombra tu lo decides, aqui en esta web puedes ver los codigos hexadecimanes de los colores para que se te facilite tu tarea.

Estos efectos le dan un realce a tus titulos y le dan un estilo muy elegante ;-)

Widget de "Ultimos Post" pero con imagen

2009-12-19T18:11:00.000-06:00

Bueno este truco yo no lo sabia y lo posteo por si alguien tampoco lo conocia.

Poner un widget o gadget con los ultimos post de tu blog es muy facil, no necesitas instalar ningun script, solamente tienes que añadirlo ya que esta en los gadgets de blogger.

Para instalarlo:

1. Irte a tu panel de Blogger a Diseño > Elementos de la pagina

2. Click en Añadir un gadget

3. Ahi vete a la opcion de Destacados

4. buscalo mas abajo y selecciona el gadget que se llama Recent Posts hay dos gadgets que se llaman igual pero el que tiene las imagenes tiene un icono distinto, dice Recent Posts y abajo la palabra Advanced fijate en el icono como el de la imagen:

5. Luego se te desplegara una ventana de configuracion

la configuracion es muy facil e intuitiva, hay varias opciones interesantes que te permiten darle la apariencia que tu quieras a tu gadget, luego que ya lo configuraste solo lo guardas y listo!!!

Usuarios online con el plugin whos.amung.us para Firefox

2009-12-14T16:44:00.000-06:00

El plugin de whos.amung.us para Firefox te permitira saber cuantos usuarios online hay en tu blog en todo momento. Al instalar el plugin en tu Firefox se cargara una pequeña aplicacion en la barra de estado con los usuarios online del famoso contador whos.amung.us

Para utilizarlo simplemente copiamos la parte en negrita de cualquier dirección de los datos de Whos.amung.us y agregarlo a la extensión.

http://whos.amung.us/stats/le0vug6b1p43

Queda muy bonito, y si tienes una mania por saber cuantos usuarios hay en tu blog, con este plugin puedes hacerlo sin tener que estar en tu blog :-D

Link | whos.amung.us Users Online Counter

La tabla del PageRank

2009-12-13T00:13:00.001-06:00

Revisando el PageRank del blog me entro la curiosidad de saber cuantos links nesecito para tener un determinado PageRank. Me dedique a Googlear un poco y encontre esta famosa tabla de links

Si se quiere un PR5 se necesitarían 555 enlaces de páginas con PR3 o sólo una de PR7. Esto sólo es cierto si no hay más de 50 enlaces externos en esa página.

Una buena herramienta para saber cuantos enlaces salientes hay en tu blog es Tools Live.

Para calcular mi PageRank utilice prchecker.info aqui esta el resultado

Es de 2, nesecito mejorar :-(

Como subir varias imagenes a la vez en Blogger

2009-12-12T23:25:00.002-06:00

El asistente para subir imágenes en Blogger te permite subir bloques de hasta 5 imágenes, regularmente esto es suficiente, pero si acostumbras subir cantidades mayores el proceso puede ser cansado. Para librarse de este límite una alternativa la provee Firefox y el plugin DragDropUpload, tan sencillo como:

Descarga DragDropUpload, instálalo en Firefox y reinicia el navegador.
Abre el asistente de imágenes de Blogger y desde el explorar de archivos arrastra todas las imágenes que quieras. Al hacer esto, podría parecer que solo 5 imágenes se arrastraron, pero en realidad el resta se encuentra en campos adicionales ocultos que crea el navegador.
Sube los archivos.

Hay que tener en cuenta que Blogger tiene problemas para subir algunas imágenes, por ejemplo aquellas con 1px de largo y más de 100px de alto.
Si te da un error al subir mucho archivos, blogger te dará una lista con las imágenes que se intentaron subir, la primera es la del error, entonces solo intentar subir de nuevo omitiendo esa primer imagen.
También este plugin funciona en otros sistemas de upload con campos html como gmail, así que vale la pena tenerlo instalado.

CopyPaste | BlogAndWeb.com

Como evitar el limite de MEGAVIDEO

2009-12-12T23:16:00.002-06:00

Hay sitios que nos permiten ver series online como estos(click para ver) este tipo de sitios son muy buenos para pasar horas viendo series de tv online, pero lo malo es que algunas o la mayoria de series se encuentra alojadas en MEGAVIDEO en donde si no disponemos de una cuenta "premium" solo podemos ver 72 minutos al dia :-(

Para resolver este problema podemos hacer uso de estos dos sitios que nos permiten saltarnos la restriccion de MEGAVIDEO

>> VeoSeries.com

>> MegaStreaming.org