Feliz año Nuevo: Especial Los mejores Post del 2010

W3 Tricks Nació el septiembre de este año con la expectativa de crear un Blog que ayude a los usuarios de otros Blogs y diseñadores de paginas web a encontrar soluciones sencillas para uno que otro problema con algunos Trucos o Widgets que resultan de mucha ayuda. Ya sumamos cerca de 3.000 visitas y 53 Post, continuamente en crecimiento los cuales esperamos que suban más en el 2011 gracias a Uds nuestros amigos y visitantes.

Feliz Año les desea W3 Tricks, aquí nuestras Entradas con mas visitas:

Comenzamos con el Acuario Zen el cual gusto mucho, otros que también gustaron fueron los Trucos de Javascript entre los que se encuentran Botones de avanzar y Retroceder, Obtener el IP y Cambiar Puntero de Mouse, Otro que recibió muchas visitas fue Donaciones via PayPal, para los que les gusta la red social Facebook aparecen en primeros lugares con los post Me Gusta y Botón Me Gusta, otro que entra en el ranking de visitas y que es tal vez uno de los mas útiles (lo se por experiencia propia) es Textarea a Editor de Texto, también el Widget de Puntuación por estrellas, Localizar Direcciones Ip en un Mapa y para cerrar el conteo el juego que recibió mas visitas fue el Widget de Fútbol 3D.

Otros que, según nuestros amigos, son también los mejores Post de W3 Tricks del año son:

Entre los mas Útiles para tu Página web están: Tu propia sala de Chat, Traductor para tu página web el cual es Automático, Test de Velocidad del ancho de banda de Internet y el tutorial HTML de la Etiqueta Marquee para hacer textos deslizables.

Los Trucos para Blogger que modifican apariencia, usabilidad y que dan un aspecto mas profesional: Optimizar Títulos, Quitar la Barra y "Leer Más" Automáticamente, muchos de los cuales ya realize en mi propio blog.

Otros trucos de Javascript que son muy útiles son: Obtener el Nombre del Sistema Operativo, Deshabilitar el Menú del Click Contrario y Obtener el Nombre del Navegador, también algo que no debes dejar de hacer es Darte de Alta en los Buscadores.

Los Widgets de ESPN con la mejor información del mundo del Fútbol: Resultados y Noticias e Insignia de tu Equipo.

Entre los juegos mas sobresalientes están: Tic Tac Toe, Los clásicos Asteroids y Snake, el navideño Ayuda a Santa a Llegar a su destino, Fútbol con Robots, Poker y Hockey de Mesa.

Otros widgets realmente divertidos son: Radio Online, Mascotas Virtuales y uno de los que más me gusta de Rock RadioBar el Widget de Noticias del Rock

Agradecemos a todos los visitantes de este año y esperamos que sigan visitándonos en el 2011, seguiremos agregando nuevos trucos para que todos Uds tengan soluciones para sus paginas web y blogs.

Feliz Año!

Leer más...

Navidad: Ayuda a Santa a llegar a su Destino

Snowline es un excelente Widget de un juego de navidad, en el cual debes Dibujar una Linea de Nieve y presionar Play, para que Papá Noel recoja los regalos en su trineo y los lleve a su destino, Realmente muy divertido.

Prúebalo:



Código:
<script type="text/javascript" src="http://cdn.widgetserver.com/syndication/subscriber/InsertWidget.js"></script><script type="text/javascript">if (WIDGETBOX) WIDGETBOX.renderWidget('c9a9c3e3-29b3-4dba-91a0-1ef968ddbd42');</script><noscript>Get the <a href="http://www.widgetbox.com/widget/snow-line">Snow Line</a> widget and many other <a href="http://www.widgetbox.com/">great free widgets</a> at <a href="http://www.widgetbox.com">Widgetbox</a>! Not seeing a widget? (<a href="http://docs.widgetbox.com/using-widgets/installing-widgets/why-cant-i-see-my-widget/">More info</a>)</noscript>

Creo que es uno de los mejores juegos de Navidad que e visto y lo mejor es que lo puedes agregar a tu Página web o Blog Gratis. Feliz Navidad!!

Leer más...

Widgets Navideños: Juego y Cuenta Regresiva

Hoy, a 4 dias de Navidad, me he encontrado un par de Widgets o Gadgets que pueden animar mucho tu web para estas fiestas. El primero se trata de un Juego en el cual debes tratar de tomar todos los Regalos que puedas mientras Caen, pero ten cuidado por que también caen bombas que te paralizan.

Pruébalo:


Código:

<script type="text/javascript" src="http://cdn.widgetserver.com/syndication/subscriber/InsertWidget.js"></script><script type="text/javascript">if (WIDGETBOX) WIDGETBOX.renderWidget('3cb970d8-f645-4a69-b4ca-9acf0863d615');</script><noscript>Get the <a href="http://www.widgetbox.com/widget/xmasdrop">xmasdrop</a> widget and many other <a href="http://www.widgetbox.com/">great free widgets</a> at <a href="http://www.widgetbox.com">Widgetbox</a>! Not seeing a widget? (<a href="http://docs.widgetbox.com/using-widgets/installing-widgets/why-cant-i-see-my-widget/">More info</a>)</noscript>

El segundo es un Widget de Cuenta Regresiva para navidad, el cual te cuenta Los días, horas, minutos y Segundos que faltan para que sea navidad.

Pruébalo:

Código:

<script type="text/javascript" src="http://cdn.widgetserver.com/syndication/subscriber/InsertWidget.js"></script><script type="text/javascript">if (WIDGETBOX) WIDGETBOX.renderWidget('653e2a80-288f-4136-b6d3-c32123613337');</script><noscript>Get the <a href="http://www.widgetbox.com/widget/countdown-christmas">COUNTDOWN CHRISTMAS</a> widget and many other <a href="http://www.widgetbox.com/">great free widgets</a> at <a href="http://www.widgetbox.com">Widgetbox</a>! Not seeing a widget? (<a href="http://docs.widgetbox.com/using-widgets/installing-widgets/why-cant-i-see-my-widget/">More info</a>)</noscript>

Y no queda mas por decir que Feliz Navidad para Todos!!!!!

Leer más...

Texto e Imágenes Deslizables y Animados (Tutorial)

Es muy fácil hacer que tu texto se desplace de un lado para el otro horizontalmente o también verticalmente, para esto no necesitas un widget o un gadget ya que lo puedes hacer solo con la Etiqueta <Marquee>, que te puede dar grandes efectos de animación para tu pagina web o blog.

Pruébalo:

Entra ya a
W3 Tricks - Tu Sitio de Trucos Web


Código:

<marquee direction="up" style="border: thin solid rgb(0, 0, 0); height: 200px; width: 200px;"><center>Entra ya a <br /><a href="http://trucosw3.blogspot.com/">W3 Tricks - Tu Sitio de Trucos Web</a><br />
<a href="http://trucosw3.blogspot.com/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAZtRQnZ0sDNrHwe4gXBY7toN6bjciZNc3FhjY-1ddoha51qGhpNn5nb6QrQa4TcK4EfDCh60IPd4PHHEF0vAmZEYP2RHoRVSzT4d9LcBM1O0VISN4-7Mhef3MnLI2vbY_TofNza4MJtoW/s1600/w3tricks2p.gif" title="Entra ya" />
</a></center>
</marquee>

Tutorial:

<marquee direction="up"
//Marquilla con dirección hacia arriba, puede cambiar la dirección usando estas palabras: Up arriba, Down abajo, Left Izquierda, Rigth Derecha

style="border: thin solid rgb(0, 0, 0);
//estilo, en este caso con un borde solido de color negro

 height: 200px; width: 200px;"
//Height es Altura, Width es Ancho

<center>Entra ya a <br /><a href="http://trucosw3.blogspot.com/">W3 Tricks - Tu Sitio de Trucos Web</a>  

//<center> para que quede centrado, como puedes ver se pueden usar enlaces <a href=...

<br />   

// usa enteres para que se vea bien el texto

<a href="http://trucosw3.blogspot.com/">

<img border="0" src="http://urldirecciondelaimagen" title="Entra ya" /> 

// puedes agregar imágenes también con la etiqueta <img> cambiando la fuente de la imagen en src

</a></center></marquee> 

// fin del código

En el siguiente ejemplo puedes ver una Marquilla en la cual esta modificado la velocidad de la animación y ademas si le pasas el mouse se detiene.

Pruébalo 2:

W3 Tricks - Tu Sitio de Trucos Web

Código 2:

<marquee direction="right"  scrollamount="5" onmouseover="this.stop();" onmouseout="this.start();"><a href="http://trucosw3.blogspot.com/">W3 Tricks - Tu Sitio de Trucos Web</a></marquee>

Tutorial 2:
<marquee direction="right"
//una nueva marquilla, en este caso sin estilo para el tamaño o borde, la dirección en este caso hacia la derecha

scrollamount="5"
//velocidad de la animación, entre mas alto el número mas rápido viaja el texto

onmouseover="this.stop();" onmouseout="this.start();">
//cuando tiene el mouse encima se detiene, cuando se quita el mouse vuelve a moverse

<a href="http://trucosw3.blogspot.com/">W3 Tricks - Tu Sitio de Trucos Web</a></marquee>
//otra vez agregamos un enlace y cerramos la marquilla.

Espero que estos 2 ejemplos te hallan ayudado y que lo puedas usar en tu página web o blog.

Leer más...

Buscador de Iconos, Están todos los que Necesitas!

Hoy voy a Recomendar una gran Pagina web, un buscador de Iconos, el cual tiene cerca de 142.000 iconos Gratis a tu disposición: IconFinder.com es una gran herramienta para encontrar esos iconos que tanto andabas buscando, en el tamaño que quieras.

Licencias: como una página web que apoya la legalidad te pedimos que tengas en cuenta lo siguiente: mira bien en que vas a usar estos iconos y mira que licencia tiene ese icono, algunos son solo para uso no comercial, otras piden que de "buena fe" agregues un link para su uso comercial y otras si permiten su uso comercial sin nada a cambio, pero no los redistribuyas a terceros, esto se refiere a que los puedes usar en tu programa o web pero que no los vendas, regales, intercambies con otros sin el permiso del diseñador.

Leer más...

Insignia y Noticias de tu Equipo de Fútbol Favorito

ESPN nos trae otro widget muy interesante para los amantes del Fútbol, es una insignia de tu equipo favorito que incluye ademas del Escudo, los Resultados Diarios y Noticias de Transferencias y todo lo relacionado con tu Club.

Pruébalo:

Código:

Aquí dejo el código de algunos equipos

Arsenal - Liga Inglesa:

<object width="300" height="387" type="application/x-shockwave-flash" data="http://a.espncdn.com/deportes/community/widgets/swfs/team_soccer.swf"><param name="flashVars" value="teamID=359&amp;pid=espndeportesteam_1292389100249111552&amp;share=embed"><param name="movie" value="http://a.espncdn.com/deportes/community/widgets/swfs/team_soccer.swf" ><param name="wmode" value="transparent"><param name="allowScriptAccess" value="always"><param name="allowNetworking" value="all"></object>

Real Madrid - España:

<object width="300" height="387" type="application/x-shockwave-flash" data="http://a.espncdn.com/deportes/community/widgets/swfs/team_soccer.swf"><param name="flashVars" value="teamID=1068&amp;pid=espndeportesteam_129238917409384266&amp;share=embed"><param name="movie" value="http://a.espncdn.com/deportes/community/widgets/swfs/team_soccer.swf" ><param name="wmode" value="transparent"><param name="allowScriptAccess" value="always"><param name="allowNetworking" value="all"></object>

Barcelona - España:

<object width="300" height="387" type="application/x-shockwave-flash" data="http://a.espncdn.com/deportes/community/widgets/swfs/team_soccer.swf"><param name="flashVars" value="teamID=83&amp;pid=espndeportesteam_1292389220418576148&amp;share=embed"><param name="movie" value="http://a.espncdn.com/deportes/community/widgets/swfs/team_soccer.swf" ><param name="wmode" value="transparent"><param name="allowScriptAccess" value="always"><param name="allowNetworking" value="all"></object>

Manchester United - Inglaterra:

<object width="300" height="387" type="application/x-shockwave-flash" data="http://a.espncdn.com/deportes/community/widgets/swfs/team_soccer.swf"><param name="flashVars" value="teamID=360&amp;pid=espndeportesteam_129238926932736531&amp;share=embed"><param name="movie" value="http://a.espncdn.com/deportes/community/widgets/swfs/team_soccer.swf" ><param name="wmode" value="transparent"><param name="allowScriptAccess" value="always"><param name="allowNetworking" value="all"></object>

Chelsea - Inglaterra:

<object width="300" height="387" type="application/x-shockwave-flash" data="http://a.espncdn.com/deportes/community/widgets/swfs/team_soccer.swf"><param name="flashVars" value="teamID=363&amp;pid=espndeportesteam_1292389318244933237&amp;share=embed"><param name="movie" value="http://a.espncdn.com/deportes/community/widgets/swfs/team_soccer.swf" ><param name="wmode" value="transparent"><param name="allowScriptAccess" value="always"><param name="allowNetworking" value="all"></object>

AC Milan - Italia:

<object width="300" height="387" type="application/x-shockwave-flash" data="http://a.espncdn.com/deportes/community/widgets/swfs/team_soccer.swf"><param name="flashVars" value="teamID=103&amp;pid=espndeportesteam_1292389414826253719&amp;share=embed"><param name="movie" value="http://a.espncdn.com/deportes/community/widgets/swfs/team_soccer.swf" ><param name="wmode" value="transparent"><param name="allowScriptAccess" value="always"><param name="allowNetworking" value="all"></object>

Inter de Milan - Italia:

<object width="300" height="387" type="application/x-shockwave-flash" data="http://a.espncdn.com/deportes/community/widgets/swfs/team_soccer.swf"><param name="flashVars" value="teamID=110&amp;pid=espndeportesteam_1292389456058429293&amp;share=embed"><param name="movie" value="http://a.espncdn.com/deportes/community/widgets/swfs/team_soccer.swf" ><param name="wmode" value="transparent"><param name="allowScriptAccess" value="always"><param name="allowNetworking" value="all"></object>

Si quieres Agregar la Insignia de Otro Club sigue estos Pasos:

-Mira arriba en "Pruébalo:", tengo la demostración del Widget con mi equipo favorito el Arsenal :)

-En la esquina inferior izquierda del Widget hay un botón que dice "[+] Añádelo", dale Click

-Aparecen 2 botones, dale a "Cambiar de Equipo".

-Busca la liga y tu equipo, dale click.

-Ahí te aparecen 4 botones para agregarlo mediante asistente a algunas paginas, pero debajo de esos botones hay un link que dice "Embed Code", al cual le vas a dar click.

-Y ahí ya aparece el Código  personalizado según el club que escogiste y del cual eres fanático.

Una vez con tu código, cópialo y pégalo en donde tu quieras en tu pagina web o agrégalo como gadget en tu Blog y apoya así a tu equipo favorito.

Leer más...

A Rockear con esta Batería

Un nuevo widget musical entra en W3 Tricks, se trata de una batería personalizable,  traída desde la pagina LocalHealers.com, la cual la puedes agregar a tu web y comenzar a hacer mucho ruido.

Pruébalo:


Código:

<script type="text/javascript" src="http://cdn.widgetserver.com/syndication/subscriber/InsertWidget.js"></script><script type="text/javascript">if (WIDGETBOX) WIDGETBOX.renderWidget('fbe06979-df33-4189-8457-47b80dfe870b');</script><noscript>Get the <a href="http://www.widgetbox.com/widget/play-the-drums">Play the Drums</a> widget and many other <a href="http://www.widgetbox.com/">great free widgets</a> at <a href="http://www.widgetbox.com">Widgetbox</a>! Not seeing a widget? (<a href="http://docs.widgetbox.com/using-widgets/installing-widgets/why-cant-i-see-my-widget/">More info</a>)</noscript>

Solo debes copiar este código y listo. Disfrútala. 

Leer más...

Optimizar los Títulos en Blogger

Generalmente en Blogger los títulos de tus entradas aparecen en este formato "Nombre del Blog: título de la entrada", para cambiar esto a un formato mas amigable en el cual lo primordial sea el titulo de la entrada,  de este estilo "Título de la entrada | Nombre del Blog" solo debes agregar un poco de código al Html de tu Blog.

Este truco lo aprendí de CiudadBlogger.com y es muy útil debido principalmente a que este título es el que aparece en los buscadores y en los navegadores, es mas agredable para tus usuarios entrar a un blog en el cual el nombre de la entrada sea algo que tu buscaste en particular y no el nombre del blog en general, ademas si compartes el enlace, por ejemplo en Facebook, te aparece el título con el nuevo estilo.

Primero debes entrar a Diseño, después das click en Edición de HTML, una vez ahí, busca la etiqueta:

<title><data:blog.pagetitle/></title>

y solo debes reemplazarla por  el siguiente Código:


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/> | <data:blog.title/> </title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>

y ya, un truco muy recomendado para tu Blog.

Leer más...

Como quitar la Barra de Blogger

Si deseas quitar la barra superior de Blogger, ya sea por que para ti no se ve profesional o simplemente no te gusta, se puede desaparecer agregando algo de código de estilo de tu Blog.

Primero debes entrar a Diseño, después das click en Edición de HTML, una vez ahí, busca la etiqueta <Head> la cual se encuentra generalmente entre la primera pantalla de las lineas de código, y solo tienes que pegar después de <head> el siguiente Código:

<style type="text/css">
#navbar-iframe{
height: 0px;
visibility: hidden;
display: none;
}
</style>

Y así desaparece la barra de Blogger de Tu Blog, como lo puedes ver aplicado aquí.

Leer más...

Lorem Ipsum: Texto de Prueba de Páginas Web

Cuando quieres probar algo de Diseño y quieres ver como se ve lleno de texto se usa Lorem ipsum, Como muchos creen el texto no esta escrito en Latín, pero el texto original del cual se saco sí (Finibus Bonorum et malorum de Cicerón 45 A.C.). 

Este texto tiene muchas ventajas enfrente de otras "Técnicas" para probar espacios de texto, como presionar teclas al azar, debido a que se ve como un texto real, con palabras compuestas por vocales y consonantes, lineas con palabras de varios tamaños reales y también parrafos de varias longitudes.

Pruébalo:

Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. In usu latine equidem dolores. Quo no falli viris intellegam, ut fugit veritus placerat per.

Ius id vidit volumus mandamus, vide veritus democritum te nec, ei eos debet libris consulatu. No mei ferri graeco dicunt, ad cum veri accommodare. Sed at malis omnesque delicata, usu et iusto zzril meliore. Dicunt maiorum eloquentiam cum cu, sit summo dolor essent te. Ne quodsi nusquam legendos has, ea dicit voluptua eloquentiam pro, ad sit quas qualisque. Eos vocibus deserunt quaestio ei.

Blandit incorrupte quaerendum in quo, nibh impedit id vis, vel no nullam semper audiam. Ei populo graeci consulatu mei, has ea stet modus phaedrum. Inani oblique ne has, duo et veritus detraxit. Tota ludus oratio ea mel, offendit persequeris ei vim. Eos dicat oratio partem ut, id cum ignota senserit intellegat. Sit inani ubique graecis ad, quando graecis liberavisse et cum, dicit option eruditi at duo. Homero salutatus suscipiantur eum id, tamquam voluptaria expetendis ad sed, nobis feugiat similique usu ex.

Eum hinc argumentum te, no sit percipit adversarium, ne qui feugiat persecuti. Odio omnes scripserit ad est, ut vidit lorem maiestatis his, putent mandamus gloriatur ne pro. Oratio iriure rationibus ne his, ad est corrumpit splendide. Ad duo appareat moderatius, ei falli tollit denique eos. Dicant evertitur mei in, ne his deserunt perpetua sententiae, ea sea omnes similique vituperatoribus. Ex mel errem intellegebat comprehensam, vel ad tantas antiopam delicatissimi, tota ferri affert eu nec. Legere expetenda pertinacia ne pro, et pro impetus persius assueverit.

Ea mei nullam facete, omnis oratio offendit ius cu. Doming takimata repudiandae usu an, mei dicant takimata id, pri eleifend inimicus euripidis at. His vero singulis ea, quem euripidis abhorreant mei ut, et populo iriure vix. Usu ludus affert voluptaria ei, vix ea error definitiones, movet fastidii signiferumque in qui.

Vis prodesset adolescens adipiscing te, usu mazim perfecto recteque at, assum putant erroribus mea in. Vel facete imperdiet id, cum an libris luptatum perfecto, vel fabellas inciderint ut. Veri facete debitis ea vis, ut eos oratio erroribus. Sint facete perfecto no vel, vim id omnium insolens. Vel dolores perfecto pertinacia ut, te mel meis ullum dicam, eos assum facilis corpora in.

Mea te unum viderer dolores, nostrum detracto nec in, vis no partem definiebas constituam. Dicant utinam philosophia has cu, hendrerit prodesset at nam, eos an bonorum dissentiet. Has ad placerat intellegam consectetuer, no adipisci mandamus senserit pro, torquatos similique percipitur est ex. Pro ex putant deleniti repudiare, vel an aperiam sensibus suavitate. Ad vel epicurei convenire, ea soluta aliquid deserunt ius, pri in errem putant feugiat.

Sed iusto nihil populo an, ex pro novum homero cotidieque. Te utamur civibus eleifend qui, nam ei brute doming concludaturque, modo aliquam facilisi nec no. Vidisse maiestatis constituam eu his, esse pertinacia intellegam ius cu. Eos ei odio veniam, eu sumo altera adipisci eam, mea audiam prodesset persequeris ea. Ad vitae dictas vituperata sed, eum posse labore postulant id. Te eligendi principes dignissim sit, te vel dicant officiis repudiandae.

Id vel sensibus honestatis omittantur, vel cu nobis commune patrioque. In accusata definiebas qui, id tale malorum dolorem sed, solum clita phaedrum ne his. Eos mutat ullum forensibus ex, wisi perfecto urbanitas cu eam, no vis dicunt impetus. Assum novum in pri, vix an suavitate moderatius, id has reformidans referrentur. Elit inciderint omittantur duo ut, dicit democritum signiferumque eu est, ad suscipit delectus mandamus duo. An harum equidem maiestatis nec. At has veri feugait placerat, in semper offendit praesent his. Omnium impetus facilis sed at, ex viris tincidunt ius. Unum eirmod dignissim id quo. Sit te atomorum quaerendum neglegentur, his primis tamquam et. Eu quo quot veri alienum, ea eos nullam luptatum accusamus. Ea mel causae phaedrum reprimique, at vidisse dolores ocurreret nam.

Ahi esta el texto conocido como Lorem Ipsum úsalo y veras lo útil que puede llegar a ser para probar tus diseños.

Leer más...

Bubble Shooter: Revienta las Burbujas

El popular juego clásico de reventar burbujas Bubble Shooter se encuentra disponible en este Widget o Gadget para que tu lo puedas agregar a tu Página Web o Blog, gracias a Absoutist.com.

Pruébalo:




Código:


<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
width="640" height="480">
<param name="movie" value="http://absolutist.com/online/bubbleshooter/bubble_shooter2.swf" />
<embed type="application/x-shockwave-flash" src="http://absolutist.com/online/bubbleshooter/bubble_shooter2.swf"
width="640" height="480"
pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

Importante: como ya hemos explicado en muchos otros widgets se puede controlar el Ancho y el Alto modificando el valor de las variables Width para Ancho y Height para Alto, pero debes tener en cuenta que hay algunos widgets compuestos como este en el cual debes cambiar el valor en 2 partes en la etiqueta <object> y la etiqueta <param>

Leer más...

Un Clásico Reloj Pendular

ABowman.com ha diseñado un widget el cual tiene un muy clásico reloj con péndulo para que tu no te pierdas del tiempo y como todos, se puede agregar a tu web y/o blog para que tus usuarios lo usen.

Pruébalo:



Código:
<object type="application/x-shockwave-flash" style="outline:none;" data="http://hosting.gmodules.com/ig/gadgets/file/112581010116074801021/pendulumClockV2.swf?" width="300" height="200"><param name="movie" value="http://hosting.gmodules.com/ig/gadgets/file/112581010116074801021/pendulumClockV2.swf?"></param><param name="AllowScriptAccess" value="always"></param><param name="wmode" value="opaque"></param><param name="scale" value="noscale"/><param name="salign" value="tl"/></object>

Leer más...

"Leer Más" en tu Blog Automáticamente

Si no quieres que en la Página de Inicio de tu Blog de Blogger aparezcan las entradas completas, y solo quieres los titulares y una pequeña descripción, hay un Script que te permite hacer esto de manera automática y no entrada por entrada. Este script fue Diseñado por Anvho y es muy completo, tanto que yo lo uso como lo puedes ver en mi pagina de inicio :).

Primero debes entrar a Diseño, después das click en Edición de HTML, chequea la casilla Expandir plantillas de artilugios y busca: "<data:post.body>" (Usa Ctrl+F no la busque manualmente por que el código es muy extenso) y sustituimos esa etiqueta por el siguiente Código:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'>Leer más...</a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

También debes pegar el siguiente Código en Head:


<script type='text/javascript'>
summary_noimg = 400;
summary_img = 300;
img_thumb_height = 125;
img_thumb_width = 125;
</script>

<script type='text/javascript'>
//<![CDATA[

/******************************************

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks
********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}

//]]>
</script>

Importante: al inicio de este script hay unas variables que puedes modificar: en summary_noimg puedes colocar el número de caracteres del resumen para los post que no tienen imágenes, en summary_img cantidad de caracteres del resumen de los post que si tienen imágenes, img_thumb_height y img_thumb_width alto y ancho de las imágenes del resumen respectivamente.

Disfrútalo y úsalo en tu blog para tener tus entradas resumidas como titulares.

Leer más...

Recibir Donaciones vía Paypal

Paypal.com, para los que no la conocen, es una empresa que te permite hacer transacciones con Dinero Real en un entorno Virtual Seguro, no es la única en su especie pero si la mas reconocida (creo), la puedes usar para Vender (ya que tiene muchas utilidades como Carrito de Compras) y Comprar (ya que varias otras páginas reciben dinero de PayPal por ejemplo Ebay.com), pero hoy nos vamos a concentrar en el Botón de Donaciones, Este botón es un widget que al presionarlo te envia un formulario para enviar una Donación mediante otra cuenta PayPal o una tarjeta de Crédito, si recibes donaciones puedes usar este dinero en tiendas electronicas o puedes solicitar que te giren un cheque y asi el dinero virtual se convierte en real (en algunos paises)

Primero, si no tienes cuenta PayPal, debes crear una dando click Aquí, entras y presionas "Registrarse Hoy Mismo", después ingresas tu País e Idioma y presionas "Abrir una Cuenta", y ahí te aparece un formulario el cual debes llenar con tus datos, el correo electrónico que uses es muy importante ya que es básicamente tu Nombre de Usuario (o Nickname) y lo usas para todas las transacciones.

Segundo, Una vez abres tu cuenta ya podemos crear el Botón de Donaciones da click Aquí para ir a esta ventana:

Como puedes ver en esta ventana se puede seleccionar ademas de Donaciones, Carro de Compras, Compra de Artículo, Regalos y Suscripciones, pero por ahora solo nos dedicaremos a Donativos, ademas en este formulario debes llenar lo que te pide en el primer paso como Nombre, Divisa y Tipo de Contribución, los otros 2 pasos son solo para Clientes Pro.

Una Vez hecho esto presionas "Crear Botón" y aparece el Código del Widget de Donativos, este al igual que cualquier Widget o Gadget lo puedes agregar en cualquier parte de tu web, y lleva a un formulario en el cual se hace el donativo

Pruébalo:

Código:

<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">

<input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----

">
<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypal.com/es_XC/i/scr/pixel.gif" width="1" height="1">

</form>

Este es mi código, para agregar dinero a mi Cuenta de Paypal, para tu propia cuenta debes hacer todos los pasos que te mencione antes y así generar tu propio Código, claro que si quieres hacer un donativo bienvenido sea :D

Leer más...

Jardín Zen

Otro gadget relajante de la pagina LocalHealers.com un Jardín Zen que puedes agregar a tu página web o blog para que "la energía virtual fluya", si le das click a los peces Koi saltaran para ti.

Pruébalo:


Código:
<script type="text/javascript" src="http://cdn.widgetserver.com/syndication/subscriber/InsertWidget.js"></script><script type="text/javascript">if (WIDGETBOX) WIDGETBOX.renderWidget('b19e56c7-89d7-4b31-8fa2-7269eea4c2a7');</script><noscript>Get the <a href="http://www.widgetbox.com/widget/magical-waterfall-and-fish-pond-by-buddhahands">Magical Waterfall and Fish Pond</a> widget and many other <a href="http://www.widgetbox.com/">great free widgets</a> at <a href="http://www.widgetbox.com">Widgetbox</a>! Not seeing a widget? (<a href="http://docs.widgetbox.com/using-widgets/installing-widgets/why-cant-i-see-my-widget/">More info</a>)</noscript>

Agrega este código en tu página para tener este jardín virtual en tu web o blog.

Leer más...

Cambiar puntero de Mouse con JavaScript

La forma más fácil de cambiar el tipo de cursor es agregar una propiedad style = "cursor: tipo de cursor" dentro de la etiqueta HTML a la cual le desea cambiar el cursor, puede ser en una imagen como <img style = "cursor: crosshair"> u otras etiquetas como <td>, <input>, <div>, etc... , En las siguientes 2 tablas estan los tipos de cursores que puedes usar:

Pruébalo:

auto	crosshair	default	pointer
help	move	text	wait

nw-resize	n-resize	ne-resize
w-resize	hand	e-resize
sw-resize	s-resize	se-resize

Código:


<table border="1" cellpadding="5" cellspacing="1"><tr>
    <td><p style="cursor: auto"     >auto</p></td>
    <td><p style="cursor: crosshair">crosshair</p></td>
    <td><p style="cursor: default"  >default</p></td>
    <td><p style="cursor: pointer"  >pointer</p></td>
  </tr><tr>
    <td><p style="cursor: help"     >help</p></td>
    <td><p style="cursor: move"     >move</p></td>
    <td><p style="cursor: text"     >text</p></td>
    <td><p style="cursor: wait"     >wait</p></td>
</tr></table>
 <br />
 <table border="1" cellpadding="5" cellspacing="1"><tr>
    <td><p style="cursor: nw-resize">nw-resize</p></td>
    <td><p style="cursor: n-resize" >n-resize</p></td>
    <td><p style="cursor: ne-resize">ne-resize</p></td>
  </tr><tr>
    <td><p style="cursor: w-resize" >w-resize</p></td>
    <td><p style="cursor: hand"     >hand</p></td>
    <td><p style="cursor: e-resize" >e-resize</p></td>
  </tr><tr>
    <td><p style="cursor: sw-resize">sw-resize</p></td>
    <td><p style="cursor: s-resize" >s-resize</p></td>
    <td><p style="cursor: se-resize">se-resize</p></td>
</tr></table>

Úsalos en tu web para lo que necesites, sirven en todas los navegadores en todas las etiquetas (creo, no los e probado todas).

Leer más...

Acuario Zen

La pagina LocalHealers.com nos trae un Widget un Acuario "Zen", unos pequeños peces virtuales que pueden relajarte. 

Pruébalo:

Código:

<script type="text/javascript" src="http://cdn.widgetserver.com/syndication/subscriber/InsertWidget.js"></script><script type="text/javascript">if (WIDGETBOX) WIDGETBOX.renderWidget('89ebeb54-f39b-4985-9dd9-c5a80ad9c3b8');</script><noscript>Get the <a href="http://www.widgetbox.com/widget/zen-fish-tank-aquarium-by-buddhahands">Zen Aquarium Fish Tank - Free!</a> widget and many other <a href="http://www.widgetbox.com/">great free widgets</a> at <a href="http://www.widgetbox.com">Widgetbox</a>! Not seeing a widget? (<a href="http://docs.widgetbox.com/using-widgets/installing-widgets/why-cant-i-see-my-widget/">More info</a>)</noscript>

Puedes agregar esta Mascota virtual a tu Web o Blog simplemente copiando este código en la parte que desees.

Leer más...

Test de Velocidad

Prueba toda la velocidad que tienes en Internet con este Test portátil de velocidad de Subida y Bajada, este widget de SpeedTest.net es un gran complemento para tu web o blog, el cual es muy fácil de usar solo debes dar Click en "Begin Test" y pasado un minuto tendrás la velocidad del Ancho de Banda de tu Internet.

Muy útil sobretodo si ofreces un servicio de mantenimiento por Internet o para muchos otros tipos de páginas de tecnología.

Prúebalo:

Código:

<script type="text/javascript" src="http://cdn.widgetserver.com/syndication/subscriber/InsertWidget.js"></script><script type="text/javascript">if (WIDGETBOX) WIDGETBOX.renderWidget('47d3b19b-44e7-4cd0-9893-9cfc6eb79957');</script><noscript>Get the <a href="http://www.widgetbox.com/widget/speed-test">Speed Test</a> widget and many other <a href="http://www.widgetbox.com/">great free widgets</a> at <a href="http://www.widgetbox.com">Widgetbox</a>! Not seeing a widget? (<a href="http://docs.widgetbox.com/using-widgets/installing-widgets/why-cant-i-see-my-widget/">More info</a>)</noscript>

Disfrútalo y prueba tu velocidad cuantas veces quieras, y agregalo a tu web para que tus usuarios también puedan hacerlo.

Leer más...

Acordes y Afinador de Guitarra

Este gadget de Música tiene los acordes principales de Guitarra y un modo afinador que te permite escuchar las notas de las cuerdas para que puedas afinar tu guitarra desde tu web o blog traído desde Guitar2ner

Pruébalo:


Código:

<!--[if IE]><object id="widget" width="354" height="256" type="application/x-shockwave-flash" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"> <param name="movie" value="http://www.guitar2ner.com/flash/widget-tuner.swf" />
<![endif]--><!--[if !IE]><!--><object id="widget" name="widget" width="354" height="256" type="application/x-shockwave-flash" data="http://www.guitar2ner.com/flash/widget-tuner.swf"><!--<![endif]--><param name="quality" value="high" /><param name="allowFullScreen" value="false" /><param name="allowNetworking" value="all" /><param name="allowScriptAccess" value="sameDomain" /><param name="wmode" value="transparent" /><param name="flashvars" value="playerMode=embedded" /></object>


Pégalo en tu web y listo tienes acordes y afinador en un solo Widget, perfecto para una página por ejemplo de música o de lecciones y partituras de guitarra.

Leer más...

Puntuación de 5 Estrellas

Aquí tienes un Widget que te permite agregar una puntuación a tu Web sin suscribirte, sin base de datos solo copiando el código y pegándolo en la parte de tu Web o Blog que tu prefieras, y puedes agregarlo más de una vez por que cada uno tendrá su propio contador por cada Url en el que se encuentre.

Pruébalo:

Código:

<script type="text/javascript" src="http://cdn.widgetserver.com/syndication/subscriber/InsertWidget.js"></script><script type="text/javascript">if (WIDGETBOX) WIDGETBOX.renderWidget('1d9d94ee-6d8a-40ec-8847-295068f392f6');</script><noscript>Get the <a href="http://www.widgetbox.com/widget/rating">Five-Star Ratings Control</a> widget and many other <a href="http://www.widgetbox.com/">great free widgets</a> at <a href="http://www.widgetbox.com">Widgetbox</a>! Not seeing a widget? (<a href="http://docs.widgetbox.com/using-widgets/installing-widgets/why-cant-i-see-my-widget/">More info</a>)</noscript>

Y listo tus usuarios podrán calificar tus temas, imágenes, vídeos etc.. y sin programar ni una sola linea.

Leer más...

Widget de Futbol 3D en tu Web

Un juego de fútbol la verdad muy bueno para tu web o blog, es tridimensional y aunque no tiene gran definición te puede dar mucha diversión con su diversidad de copas, inclusive tiene repeticiones, y apesar de todo no se demora mucho en cargar, diseñado por RadicalPlay.

Para jugar usa las flechas, z y x.

Pruébalo:



Código:
<script type="text/javascript" src="http://cdn.widgetserver.com/syndication/subscriber/InsertWidget.js"></script><script type="text/javascript">if (WIDGETBOX) WIDGETBOX.renderWidget('f3f0004b-c410-46f8-a553-6417464e28e0');</script><noscript>Get the <a href="http://www.widgetbox.com/widget/supersoccer">Super Web Soccer Game</a> widget and many other <a href="http://www.widgetbox.com/">great free widgets</a> at <a href="http://www.widgetbox.com">Widgetbox</a>! Not seeing a widget? (<a href="http://docs.widgetbox.com/using-widgets/installing-widgets/why-cant-i-see-my-widget/">More info</a>)</noscript>

Me parece un juego nostálgico por que me recuerda el Soccer de Family y algo a los primeros Fifa como el 95 o 96, Disfrútalo y has muchos goles.

Leer más...

Horóscopo del Día

iFate nos trae un widget para conocer nuestro destino, contiene todos los Signos Zodiacales y es muy fácil de usar y agregar.

Pruébalo:

tarot y horóscopos

Código:

<DIV id="ifate_widget" style="max-width:160px;"> <DIV style="text-align:center;color:#333366;font-family:arial;font-size:7pt;"><a style="color:#0000AA" href="http://es.ifate.com"> tarot</a> y <a style="color:#0000AA" href="http://es.ifate.com">  horóscopos</a> </DIV><script type="text/javascript" src="http://cdn.widgetserver.com/syndication/subscriber/InsertWidget.js"></script><script type="text/javascript">if (WIDGETBOX) WIDGETBOX.renderWidget('28399034-0797-44ac-84e4-1d18378cd536');</script></DIV><noscript>Get the <a href="http://www.widgetbox.com/widget/horscopos-del-dia">horóscopos del día</a> widget and many other <a href="http://www.widgetbox.com/">great free widgets</a> at <a href="http://www.widgetbox.com">Widgetbox</a>! Not seeing a widget? (<a href="http://docs.widgetbox.com/using-widgets/installing-widgets/why-cant-i-see-my-widget/">More info</a>)</noscript>

Con este código tendrás acceso a tu horóscopo diario en tu pagina web o blog, solo tienes que copiarlo y pegarlo en la parte que desees.

Leer más...

Rock RadioBar - Noticias del Rock

Nuestra página aliada Rock RadioBar lanzó su Widget de todas las noticias del mundo del rock para que puedas agregarlo a tu web o blog muy fácilmente.

Contiene todas las noticias del mundo del Rock: Lanzamientos, Reuniones, Conciertos y Recomendados 100% Rock todo el tiempo.

Pruébalo:

Código:
<script type="text/javascript" src="http://cdn.widgetserver.com/syndication/subscriber/InsertWidget.js"></script><script type="text/javascript">if (WIDGETBOX) WIDGETBOX.renderWidget('90adfb82-aa21-4c85-a729-2a101e754922');</script><noscript>Get the <a href="http://www.widgetbox.com/widget/rock-radiobar">Rock RadioBar</a> widget and many other <a href="http://www.widgetbox.com/">great free widgets</a> at <a href="http://www.widgetbox.com">Widgetbox</a>! Not seeing a widget? (<a href="http://docs.widgetbox.com/using-widgets/installing-widgets/why-cant-i-see-my-widget/">More info</a>)</noscript>

Agrega este código en tu pagina web y disfruta de todas las noticias del Rock minuto a minuto, y no olvides visitar Rock RadioBar.

Leer más...

Resultados de Fútbol de ESPN

ESPN Deportes nos trae día a día los resultados del Fútbol con un Widget en el cual puedes seleccionar la liga que quieras de cualquier continente que incluyen: la liga inglesa, española, italiana, alemana, mexicana, argentina, brasileña, colombiana, etc... lo cual es fantástico encontrarlo en un solo widget. 

Pruébalo:


Código:

<object data="http://a.espncdn.com/deportes/community/widgets/swfs/scoreboard_soccer.swf" height="387" type="application/x-shockwave-flash" width="300"><param name="flashVars" value="sport=mlb&amp;pid=espndeportessoccerscoreboard_1289801476301200530&amp;share=embed">
<param name="movie" value="http://a.espncdn.com/community/deportes/widgets/swfs/scoreboard_soccer.swf" >
<param name="wmode" value="transparent">
<param name="allowScriptAccess" value="always">
<param name="allowNetworking" value="all">
</object>

Agrégalo a tu web y obtén toda la información de tu deporte favorito minuto a minuto.

Leer más...

Toca Piano con tu Teclado o Mouse

Si te gusta la música te va a emocionar este gadget un pequeño piano de una octava que puedes agregar a tu web o blog tiene el espacio justo para ser agregado en una barra lateral y así tus usuarios pueden divertirse haciendo música , para tocarlo usa el Mouse o si quieres manejar el teclado puedes pulsar todas las teclas  de abajo ordenadas como un piano: z,s,x,d,c,v,g,b,h,n,j,m

Pruébalo:

Código:
<script type="text/javascript" src="http://cdn.widgetserver.com/syndication/subscriber/InsertWidget.js"></script><script type="text/javascript">if (WIDGETBOX) WIDGETBOX.renderWidget('6a1a98e7-760b-41bd-85c6-26ab7fd0a354');</script><noscript>Get the <a href="http://www.widgetbox.com/widget/mini-piano">Mini Piano</a> widget and many other <a href="http://www.widgetbox.com/">great free widgets</a> at <a href="http://www.widgetbox.com">Widgetbox</a>! Not seeing a widget? (<a href="http://docs.widgetbox.com/using-widgets/installing-widgets/why-cant-i-see-my-widget/">More info</a>)</noscript>

Leer más...

Simón Dice

El juego de Colores Simon Dice ya esta en widget para que puedas agregarlo a tu página web o Blog muy facilmente.

Pruébalo:

Simon made by Neave Games

Código:
<embed src="http://www.neave.com/games/get_game.php?swf=simon" name="neaveSimon" width="400" height="320" quality="high" pluginspage="http://get.adobe.com/flashplayer/" type="application/x-shockwave-flash" allowscriptaccess="always"></embed><p><a href="http://www.neave.com/games/">Simon made by Neave Games</a></p>

En el juego Simon (el aparato) te muestra los colores que debes pulsar en el mismo orden, en cada ronda se aumenta de a un color por eso es muy bueno para la memoria.

Disfrútalo.

Leer más...

Traduce tu página web en un Instante

Si quieres un gadget que Traduzca toda tu página web en un instante llegaste al lugar adecuado, aquí esta un complemento para tu web o blog realmente útil, el cual usa la tecnología de Google Traslator y con solo un click  tu pagina es traducida al instante.

Pruébalo:

Código:

<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'es'
  }, 'google_translate_element');
}
</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

Copia este código en cualquier lugar de tu web, puede ser en una barra superior o lateral y así tus usuarios siempre podrán traducir tu web algo muy bueno para acceder a otros mercados mediante la Internet.

Leer más...

A saltar con Frogger

El muy Clásico juego de Froger llego para que lo agregues a tu web creado por Neave, el juego es sencillo, eres una rana y tienes que ir a tu casa, lo malo es que tienes que pasar por una autopista muy congestionada y como si fuera poco pasar un rió saltando de tronco en tronco

Pruébalo:


Frogger made by Neave Games

Código:
<embed allowscriptaccess="always" height="484" name="neaveFrogger" pluginspage="http://get.adobe.com/flashplayer/" quality="high" src="http://www.neave.com/games/get_game.php?swf=frogger" type="application/x-shockwave-flash" width="448"></embed>

Copia este código en la parte de tu web en la que quieras que tus usuarios jueguen a ser Frogger, y listo un juego clásico más esta disponible en tu página.

Leer más...

Ocultar Email del Spam

Si quieres agregar tu Email de contacto en tu web, es importante que no lo agregues directamente en el Html por que los SpammerBots estan buscando direcciones de email mediante palabras claves como "mailto", "hotmail", "gmail" o "*@*.com", una vez almacenen la dirección de tu email la llenaran con miles de correos de publicidad y nadie quiere eso.

Por eso traigo una sencilla solución, mediante Javascript cortar la cadena e imprimirla.

Pruebaló:

Para Contactos comunícate al siguiente Email:


Código:

<script language="JavaScript">
document.write('<a href=mai'+'lto'+':'+'jaac'+'00'+'3'+'@'+'g'+'ma'+'il.'+'com>jaac'+'00'+'3'+'@'+'g'+'m'+'ail.'+'com</a>');
</script>

Importante: en href divide la cadena de tu email cortando las palabras claves "mailto", tu servidor de correo y tu nombre de usuario, tambien recomiendo que separes el @ y el Com del resto, y ya con Javascript concatenas usando 'cadena1'+'cadena2'. y listo, no es 100% efectivo ya que hay bots mas sofisticados pero te ayuda a reducir mucho el spam.

Leer más...

Tetris en tu Web

Si estas buscando el Gadget de Tetris para tu Web, llegaste al lugar indicado, uno de los juegos mas populares del mundo llega a este Blog gracias a Absolutist.com.

Pruébalo:

Código:


<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
width="500" height="380">
<param name="movie" value="http://absolutist.com/online/tetris/tetris.swf" />
<embed type="application/x-shockwave-flash" src="http://absolutist.com/online/tetris/tetris.swf"
width="500" height="380"
pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

Copiando este Código en tu web tendrás un Juego Online gratis muy bueno, Disfruta de Tetris y prueba hasta que Nivel llegas.

Leer más...

Mascotas 3: Llego la Navidad con Pingüinos

Vuelvo con Otra mascota de ABowman Especial para la época que se avecina, son unos pingüinos que caminan en el Helado polo norte siguiendo tu Mouse y lo puedes agregar a tu web o blog muy fácilmente solo copiando el código, para que tu pagina se contagie con la Navidad, Claro que si eres un Linux Lover lo podrías dejar todo el año xD.

Pruébalo:



Código:

<object type="application/x-shockwave-flash" style="outline:none;" data="http://penguinsgadget.googlecode.com/svn/trunk/penguins.swf?" width="300" height="200"><param name="movie" value="http://penguinsgadget.googlecode.com/svn/trunk/penguins.swf?"></param><param name="AllowScriptAccess" value="always"></param><param name="wmode" value="opaque"></param><param name="scale" value="noscale"/><param name="salign" value="tl"/></object>

Leer más...

Botón Me Gusta de Facebook

Facebook es una gran Herramienta para compartir tu pagina web, por eso hace algún tiempo ya hize una entrada sobre como diseñar un Cuadro Me gusta de facebook, ahora voy a indicarles como hacer un Botón, lo cual es un poco diferente ya que no necesita crear una página como el anterior.

Primero ingresa Aquí, como puedes es un asistente muy bueno y fácil de usar, lo mas importante es que puedes ver que no pide "Facebook Page Url" como la Caja de Me Gusta, simplemente pide "Url To Like", En el cual puedes ingresar el Url que Tu desees (No solo Fanpages de Facebook, por lo cual te evitas el paso de crearla), ahora una vez ingreses la Url de tu Página, Blog o Sección del mismo puedes cambiar las opciones que quieras como el color, tamaño y fuente, ahora presiona el Botón "Get Code" y listo copias toda la sección del IFrame y la pegas en el lugar de tu web que mas desees.

Puedes agregar Like Buttons ilimitados si quieres para cada una de las Url de tu pagina.

Pruébalo:

Código:

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Ftrucosw3.blogspot.com&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>

Y ya con eso tienes un Botón de "Me Gusta" para tu Url.

Leer más...

Nombre del Sistema Operativo

Como ya he mostrado antes se puede obtener mucha información del Cliente o Usuario de tu Página web o Blog como: Ip y Nombre del Navegador, entonces por que no obtener el nombre del SO, con JavaScript es muy fácil:

Pruébalo:

Código:

<script language="JavaScript">
var OSName="Sistema Desconocido";
if (navigator.appVersion.indexOf("Win")!=-1) OSName="Windows";
if (navigator.appVersion.indexOf("Mac")!=-1) OSName="MacOS";
if (navigator.appVersion.indexOf("X11")!=-1) OSName="UNIX";
if (navigator.appVersion.indexOf("Linux")!=-1) OSName="Linux";
document.write('Su Sistema Operativo es: '+OSName);
</script>

Y listo, ya puedes mostrar el sistema operativo en tu pagina web.

Leer más...

Video Poker para tu Web

Así como lo escuchas, gracias a Absolutist tenemos un Widget de videopoker para que lo agregues en tu Blog o Web muy fácilmente, y así puedas jugar muchas horas (sin perder un centavo), emula las maquinas de casino en la cual seleccionas tu apuesta, te dan 5 cartas y tienes que lograr la mejor combinación descartando las que no te sirven.

Pruébalo:


Código:


<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" height="380" width="500">
<param name="movie" value="http://absolutist.com/online/poker/pocker.swf" />
<embed type="application/x-shockwave-flash" src="http://absolutist.com/online/poker/pocker.swf"
width="500" height="380"
pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>
</object>

Puedes ajustar (como yo lo hice) el ancho y alto en width y height respectivamente.

y Disfruta este juego en tu propia web, puedes practicar poker y tus usuarios también.

Leer más...

Botones de Avanzar y Retroceder con JavaScript

Un truco muy sencillo pero muy útil, si deseas que el usuario pueda avanzar y devolverse, ir hacia atrás y hacia adelante es muy fácil con JavaScript.

Pruébalo:

Retroceder: Avanzar:

Código:

Retroceder: <input type=button value="Atrás" onClick="history.back()">
Avanzar: <input type=button value="Adelante"onClick="history.forward()">

Como vez es muy fácil solo debes agregar el evento onClick="history.back()" y "history.forward()" y lo puedes agregar a cualquier etiqueta por ejemplo:

en una celda en <td onClick="history.back()"> Atrás </td>
en una imagen en <img src="tu url de imagen" onClick="history.back()" />
etc..

Te recuerdo que este código te devuelve o adelanta en el historial del navegador, por lo cual no sirve para volver al home o inicio de tu pagina, si tienes el url ve hacia el por que ir hacia atrás te puede devolver a un buscador u otro enlace.

Leer más...

Deshabilitar el Menú del Click Contrario

Cuando das click con el botón derecho Aparece un menú contextual, si quieres que este no aparezca solo tienes que agregar los siguientes códigos:

En los nuevos navegadores se agrega el evento oncontextmenu false en la Etiqueta Body

Código:
<body oncontextmenu="return false;">

Pero si quieres validar también esto para Navegadores viejos por ejemplo los menores a Internet Explorer 5 copia el siguiente código en la cabecera del documento, o sea entre <HEAD> y </HEAD>

Código:

<script language="JavaScript">
<!--
function mouseDown(e) {
 if (parseInt(navigator.appVersion)>3) {
  var clickType=1;
  if (navigator.appName=="Netscape") clickType=e.which;
  else clickType=event.button;
  if (clickType!=1) {
   alert ('Right mouse button is disabled.')
   return false;
  }
 }
 return true;
}
if (parseInt(navigator.appVersion)>3) {
 document.onmousedown = mouseDown;
 if (navigator.appName=="Netscape")
  document.captureEvents(Event.MOUSEDOWN);
}
//-->
</script>

Como puedes ver no lo pude probar en todo el Blog ya que no puedo cambiar el Head ni el Body, pero te aseguro de que funciona y bloquea el menu en toda tu Web. Pero si quieres puedes evitar que salga el menú contextual en ciertas etiquetas como por ejemplo las imágenes para que no las puedan copiar, para esto se debe agregar el evento oncontextmenu como en el código del body.

Pruébalo:

Código:
<img oncontextmenu="return false;" src="url de imagen" title="Presiona Click Derecho" />

Solo cambia El Url y el Title de "presiona click derecho" y listo no podrán dar click a tus imágenes, Espero que este truco te sea de gran utilidad.

Leer más...

Localizar Ubicación de Ip en el Mapa

Hace poco publique una Entrada para Obtener el ip con Javascript, pero si quieres conocer el país y la ciudad e inclusive mostrar la ubicación de la Ip en un Google Map, Geoiptool nos puede ayudar con un widget o gadget muy bueno.

Pruébalo:

Código:

<script language="JavaScript" src="http://www.geoiptool.com/webjs.php?xl=es&amp;xt=1&amp;xw=200&amp;xh=275">

</script>
<noscript><a href="http://www.geoiptool.com/" target="_blank">Geo Web Tool</a></noscript>

Aparece directamente con la Ip del usuario, salvo algunas veces que no carga completamente y aparece en algún otro lugar como áfrica, y tiene un buscador de Ip en un Mapa muy útil.

Leer más...

Tu propia Sala de Chat

Si deseas tener una Ventana de Chat para tu Web o Blog para comunicarte con tus usuarios, Xat es una muy buena opción, ya que lo puedes personalizar como tu quieras, tiene muchos emoticonos y lo agregas solo copiando el código resultante.

Debes entrar a Make a Chat Box, una vez ahí puedes seleccionar el Fondo y el Tamaño, y listo abajo en "Embed Code" tienes el código para pegar en tu blog o web.

Un poco mas abajo puedes encontrar otras opciones, las cuales son para el control de los usuarios y grupo, por defecto este ofrece mucha libertad ya que permite a cualquier usuario y cualquiera se puede registrar, si no deseas esto explora mas a fondo tus opciones.

Mas abajo todavia en "edit chat box later" tienes el enlace para volver a editar tu sala de chat para realizarle cualquier cambio, te recomiendo que guardes ese Url . 

Pruébalo:

Get your own Chat Box! Go Large!

Código:

<img style="visibility:hidden;width:0px;height:0px;" border=0 width=0 height=0 src="http://counters.gigya.com/wildfire/IMP/CXNID=2000002.0NXC/bT*xJmx*PTEyODgwNTAxNzc3MzgmcHQ9MTI4ODA1MDUwNTQyOSZwPTUzMTUxJmQ9Jmc9MSZvPTYzZGM5YTNlZGU1NjQ2ZTI5M2E1/OTRmY2ZkYzRlNmM1.gif" /><embed src="http://www.xatech.com/web_gear/chat/chat.swf" quality="high" width="400" height="300" name="chat" FlashVars="id=119184846" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://xat.com/update_flash.shtml" /><br><small><a target="_BLANK" href="http://xat.com/web_gear/?cb">Get your own Chat Box!</a> <a target="_BLANK" href="http://xat.com/web_gear/chat/go_large.php?id=119184846">Go Large!</a></small><br>

Importante: Este es mi código de Mi propia sala de Chat, si lo copias en tu web te aparecerá mi sala de chat, por eso sigue todos los pasos y crea tu propio código ya que no toma ni 5 minutos.

Y a chatear se ha dicho.

Leer más...