TV Chrome: miles de canales de TV en tu navegador web

TV Chrome es una excelente extensión gratuita para Google Chrome que nos permite ver canales de TV directamente en nuestro navegador.

Una vez la instalado veremos que se agrega un pequeño botón mediante el cual podemos acceder al listado de canales disponibles por categoría o por país.

Por el momento son 2870 canales de todo el mundo divididos en varios géneros como deportes, noticias, música, entretenimiento, infantiles, negocios, películas, religiosos y educación entre otros.

Para que este plugin funcione correctamente tenemos que tener instalado el Windows Media Player Plugin que se puede descargar desde aquí.

Descarga: TV Chrome

Fuente: adictosalared.com
--> Leer Más...

Blogger Backup, haz una copia de seguridad de tu blog

Si tienes un blog en Blogger (la plataforma de blogs de Google), el programa que ahora te vamos a presentar seguro que te interesa. Se llama Blogger Backup y permite de forma sencilla realizar una copia de seguridad de todos los contenidos de nuestro blog de blogger para evitar que desaparezcan en caso de suceda algún problema con el mismo.

Su funcionamiento es muy sencillo y nos permite logearnos con nuestra cuenta de Blogger para poder seleccionar cualquiera de los blogs que tengamos creados con ella. Una vez seleccionamos un blog, nos permite guardar todos los post de dicho blog en un único fichero o crear un fichero por post, facilitándonos de la misma manera poder realizar backups incrementales (sólo los posts nuevos desde el último backup). De la misma forma, también nos permite guardar los comentarios de las entradas, para no perder lo que nos comentan nuestros usuarios.

Además, si por cualquier motivo desaparecen los post originales o borramos algún post por error, podemos restaurarlos fácilmente desde nuestra copia de seguridad a través de la opción “Restore Posts”.

Blogger Backup es totalmente gratuito y está disponible el código fuente del mismo por si queremos mejorar sus funcionalidades.

Descarga: Blogger Backup
--> Leer Más...

ConvertIcon: transforma una imagen PNG en un icono fácilmente

Para añadir un favicon a nuestro blog o página web no basta con subir una imagen y enlazarla. La imagen debe tener una extensión del tipo .ico y para crear un favicon.ico a partir de una imagen lo más fácil es hacerlo de forma online, ya que podrás crear tu favicon en un minuto sin tener que instalar nada en tu ordenador.

Existen varias utilidades para crear un favicon.ico de forma online, como puede ser FavIcon Generator que es el que utilizo yo normalmente pero hay un inconveniente que aveces lo genera con un fondo blanco. Por eso ahora opte por hacerlo con ConvertIcon

ConvertIcon es un simple y sencilla aplicación web para convertir formatos PNG a ICO.

Realiza una conversión online desde un fichero o desde una URL. Dirección útil para tenerla en favoritos. Y lo interesante de esta herramienta es que te genera el favicon con fondo transparente.

--> Leer Más...

Modificar o personalizar el formulario de comentarios

Al dejar un comentario en un blog de blogger nos podemos encontrar con tres métodos: encontrar el formulario de comentarios incrustado bajo el artículo, un enlace que abre el formulario en una ventana emergente u otro que nos conduzca directamente a una página aparte en la que está el formulario.

En cualquier caso y suponiendo que tienes configurado el formulario de comentarios incrustado bajo las entradas, comenzaremos a sacarle el máximo partido para editar prácticamente todo lo que lo compone.

Diseño>Edición de HTML>expandimos artilugios


1) El primer paso será centrar el formulario de comentarios. Para ello, busca la etiqueta ]]></b:skin> y pega este bloque de CSS encima:
/* Formulario coment personalizado */

.comment-form {
width:412px;
margin:0px auto;
}
Si deseas enmarcarlo y añadirle un fondo de imagen o color, utiliza este otro bloque:
.comment-form {
color: #000000;
background: #99CC66;
border:2px solid #cccccc;
height:430px;
margin:0 auto;
padding:10px;
width:400px;
}
color: #000000; Representa el color del texto (negro). Puedes editarlo al reemplazar #000000 por el código del color escogido en la tabla de colores

background: #99CC66; Representa el fondo del recuadro (verde). Puedes editarlo con ayuda de la tabla de colores

En caso de querer añadir una imagen de fondo, cambia dicha línea por esta otra:
background: transparent url("DIRECCION DE LA IMAGEN") repeat top left;
Introduce la dirección de tu imagen donde dice DIRECCION DE LA IMAGEN.
border: 1px solid #cccccc; Es el borde que tendrá el recuadro. El grosor, 1 píxel, puede aumentarse o disminuirse, así como el estilo solid, que puede cambiarse haciendo uso de esta entrada (en la cual se explican los tipos de borde). Será de color gris al no ser que sustituyas dicho valor hexadecimal (#cccccc) por el de tu color favorito.

height:430px; Indica la altura que tendrá la caja que enmarca el formulario (430 píxeles)

padding: 10px; Es la distancia existente entre el borde del recuadro y el contenido (texto). Puedes aumentar esta distancia cambiando el valor 10.

width: 400px; Representa el ancho del recuadro (400). Modifícalo hasta ajustarlo a tu blog.

2) Seguidamente vamos a editar el texto "Publicar un comentario en la entrada" que aparece encima de nuestro formulario.

Para ello, visita
esta otra entrada
3) Otra opción será la de editar el recuadro que contiene el mensaje del formulario (que previamente hemos escrito en el apartado Configuración > Comentarios > Mensaje del formulario de comentarios).
Antes de comenzar a personalizarlo a tu gusto, añade este bloque justo debajo del que insertaste en el paso 1, antes de la etiqueta
]]></b:skin>
.comment-form p{
color: #000000;
border: 1px solid #cccccc;
background:
#99CC66;
padding: 10px;
width: 368px;
}
Puedes editarlo a tu gusto y personalizar los colores. Para descubrir como hacerlo revisa este codigo.


color: #000000; Representa el color del texto (negro). Puedes editarlo al reemplazar #000000 por el código del color escogido en la tabla de colores.

border: 1px solid #cccccc; Es el borde que tendrá el recuadro. El grosor, 1 píxel, puede aumentarse o disminuirse, así como el estilo solid, que puede cambiarse haciendo uso de esta entrada (en la cual se explican los tipos de borde). Será de color gris al no ser que sustituyas dicho valor hexadecimal (#cccccc) por el de tu color favorito.

background: #99CC66; Representa el fondo del recuadro (verde). Puedes editarlo con ayuda de la tabla de colores.

En caso de querer añadir una imagen de fondo, cambia dicha línea por esta otra:

background: transparent url("DIRECCION DE LA IMAGEN") repeat top left;

Introduce la dirección de tu imagen donde dice DIRECCION DE LA IMAGEN.

padding: 10px; Es la distancia existente entre el borde del recuadro y el contenido (texto). Puedes aumentar esta distancia cambiando el valor 10.

width: 368px; Representa el ancho del recuadro (368). Modifícalo hasta ajustarlo a tu blog.

color: #000000; Representa el color del texto (negro). Puedes editarlo al reemplazar #000000 por el código del color escogido en la tabla de colores.

border: 1px solid #cccccc; Es el borde que tendrá el recuadro. El grosor, 1 píxel, puede aumentarse o disminuirse, así como el estilo solid, que puede cambiarse haciendo uso de esta entrada (en la cual se explican los tipos de borde). Será de color gris al no ser que sustituyas dicho valor hexadecimal (#cccccc) por el de tu color favorito.

background: #99CC66; Representa el fondo del recuadro (verde). Puedes editarlo con ayuda de la tabla de colores.

En caso de querer añadir una imagen de fondo, cambia dicha línea por esta otra:

background: transparent url("DIRECCION DE LA IMAGEN") repeat top left;

Introduce la dirección de tu imagen donde dice DIRECCION DE LA IMAGEN.

padding: 10px; Es la distancia existente entre el borde del recuadro y el contenido (texto). Puedes aumentar esta distancia cambiando el valor 10.

width: 368px; Representa el ancho del recuadro (368). Modifícalo hasta ajustarlo a tu blog.

Guarda la plantilla para terminar.

Fuente: elbalcondejaime
--> Leer Más...

Gadget para incluir un formulario de Contacto en tu Blog

Contact EMailer es un gadget que podemos incluir en la sidebar o en cualquier parte del blog y que nos proporciona un formulario de contacto simple y gratuito.

Pueden configurarse los campos a agregar, su tamaño y aspecto gráficos varios; además está disponible en varios idiomas e incluye un filtro anti-spam.

El código lo podemos obtener desde clearspring.com, widgetbox.com o desde el mismo Google (recomendado).

En este último, vamos agregando los datos, seleccionando las distintas opciones y previsualizandoel resultado.

Terminado esto, copiamos el código que nos dan y lo pegamos en un elemento HTML o directamente en una entrada.

Fuente: vagabundia.blogspot.com
--> Leer Más...

Linea de Texto en movimiento con Marquee


Estuve pensando en algo "dinámico" para el blog, y encontré ésto!

Les gustó el efecto? Yo creo que sí; me encantó cuando los vi en el blog de Gem@ y decidí "jugar" con los códigos y obtener nuevos efectos:
  • El código base es éste:

  • Ahora, si queremos que nuestro texto tenga un color de fondo, agregamos ésto:


Y este es el resultado

Si desean,pueden reemplazar el #F778A1 por el color que más les guste.
  • Si queremos que el texto se desplace hacia la izquierda:

  • Si queremos que el texto se desplace de arriba hacia abajo usamos este código:


Resultado

Si desamos que el código se mueva de abajo hacia arriba, cambiamos "down" por "up".
  • Para que el texto se pare cuando pasamos el mouse sobre él, usamos este código:


El texto se verá asi cuando lo uses
  • Dseamos que el texto vaya más lento o más rápido?
Entonces, donde está scrollamount="1" cambiamos el número; si ponemos un número mayor (6,7...) el texto irá más rápido; si ponemos un número menos (1,2,...) el texto irá lento.

Lento
  • Pero también podemos usarlo para poner una lista de links, colocar nuestros post favoritos (como el ejemplo que sigue) o darle el uso que querramos:


Reader Widget Empezando con tu blog Free Blogger Templates

En fin, podemos personalizarlo como querramos, ya depende de nuestra imaginación y luego lo colocamos donde deseemos (en la sidebar, como título de algún post, usarlo como un anuncio especial.)

Fuente: diyva.blogspot.com
--> Leer Más...

Poner un Botón al lado Derecho o Izquierdo del Blog | Para Facebook, Twitter, Icono RSS y más

Este botón lo puedes poner tanto al lado derecho como al izquierdo, y puede ser de Facebook, Twitter, RSS, o de lo que ustedes quieran.

El código de este post, es un código de ciudad blogger, al cual simplemente le he añadido la propiedad width:px; para ajustar el botón y que este no tape los bordes de nuestro blog. 

Para este post utilizaré una imagen de Facebook ustedes pueden poner la imagen de su red social favorita.

Para añadirlo a tu blog ve a Diseño > Edición de HTML > con la ayuda del buscador de tu navegador (Ctrl + F) busca la etiqueta </body> y justo antes pega el siguiente código:

<a href='http://www.facebook.com/usuario' target='_blank' title='Sígueme en Facebook'><img src="http://3.bp.blogspot.com/_CJgyaq5cULk/S4J4hcZ
FYWI/AAAAAAAAArM/dIqF5xgzQdU/s320/Facebook-2.jpg" style="width:30px; display:scroll;position:fixed;bottom:225px;
right:0px" /></a>

Lo que está en color azul cámbialo por la dirección de tu Facebook, Twitter, Icono RSS, etcétera. En este caso tenemos facebook.

Si quieres poner tu propia imagen, cambia lo que está en color rojo por la url de tu imagen.

Lo que está en color celeste cámbienlo por el texto que ustedes quieran.

Si el botón te tapa parte del borde de tu plantilla ajusta los pixeles en width:30px se los dejo en color amarillo.

También pueden ajustar la altura a la que se verá el botón en bottom:225px y la alineación si lo quieren al lado izquierdo cambien right por left.

Fuente: pazosblogger.com
--> Leer Más...

Diseñar Plantillas en Blogger in Draft

Entre todas las nuevas funciones que Blogger ha ido incorporando en los últimos tiempos siempre se ha echado de menos el que no ofreciera un mejor y más variado surtido de plantillas. Durante años hemos tenido disponibles los mismos modelos para elegir desde nuestro panel.

Eso ha cambiado desde esta misma tarde según he podido saber a través del blog de Blogger in Draft, donde incluso han incluido un vídeo explicando la nueva función de Diseño de plantillas.

De momento solo tendremos disponible el uso del "Diseñador de plantillas" si accedemos a nuestro panel de Blogger desde
Blogger in Draft.

Una vez dentro de nuestro panel y en la parte de Diseño del mismo, podemos comprobar que se ha añadido una nueva pestaña llamada precisamente "Diseñador de plantillas".

La interfaz del Diseñador es muy intuitivo y fácil de manejar, contando además con una "vista previa" al estilo de "Fuentes y colores" desde donde podemos ir comprobando los cambios que vamos añadiendo a la plantilla escogida.

Además de la posibilidad de usar nuevos modelos de plantillas, podemos incluir desde el diseñador varios cambios personalizados, como el incluir una imagen de fondo o cambiar la gama de colores a usar en el diseño.

Modificar el diseño del cuerpo del blog, el pie de página y ajustar el ancho que necesitamos entre otras cosas, desde el menú Diseño.

Por último desde la pestaña
"Avanzado" del menú del Diseñador, nos será fácil modificar distintos aspectos del diseño.


Nota: Recomiendo cierta precaución al probar esta nueva función, aunque yo he estado "jugando" un buen rato y todo parece funcionar bien (incluso el deshacer los cambios), mejor lo hacemos desde un blog de pruebas para evitar sorpresas indeseadas, pues es sabido que todas las funciones incluidas en Blogger in Draft están en periodo de pruebas.


Fuentes: elescaparatederosa
--> Leer Más...

Iconos Profesionales gratuitos para tu Web

Web Icon Set ofrece un set de iconos de diseño profesional a los desarrolladores de aplicaciones como nosotros.

Ellos han relanzado si primer pack de íconos, Web Application Icon Set gratis. Puedes usar estos íconos en cualquier computador y aplicación web.

Application Icon Set incluye los íconos de Registro, Herramientas, Usuarios, Base de datos, Login, Chat, Añadir, Borrar, Editar y muchos más.

Podemos descargarlos en formato PNG y en diferentes tamaños (128, 64, 48 y 32px). Web Icon Set suele añadir nuevos íconos, por lo que no es mala idea visitar su web regularmente.

Desargar iconos

Fuente: baluart.net
--> Leer Más...

Menú de Navegación Lateral con Efecto Slide jQuery y CSS

Los menú de navegación son una parte vital del blog ya que contiene información importante o no, hoy día hay muchos tipos de menú, pero el que les mostraré hoy día lo podemos utilizar en nuestro blog o página web gracias a Tympanus, que nos enseña a crear un bonito menú de navegación con un bonito efecto slide. Pueden verlo en mi blog de pruebas.

Este menú desplegable casi no se verá ya que permanecerá escondido una parte de los botones hasta que los usuario de tu blog pasen el mouse por encima de cada elemento, cuando pasen el cursor por encima este se desplegará con un bonito efecto slide.

Para ponerlo en tu blog tienes que tener la librería jQuery v1.3.2 en tu plantilla es posible que ya la tengas si es que has puesto otro efecto con esta versión, si es así salta este paso, de lo contrario con la ayuda de (Ctrl + F) busca la etiqueta </head> y justo antes pega el siguiente código:

<script src='http://sites.google.com/site/pazosblogger/config/
pagetemplates/script/jQuery1.3.2.min.js' type='text/javascript'/>

Ya tenemos la librería jQuery en nuestra plantilla, ahora toca añadir el script que animará el efecto, para ello copia el siguiente código y pégalo justo después del código que acabas de pegar antes de </head>:

<script type="text/javascript">
$(function() {
$('#navigation a').stop().animate({'marginLeft':'-85px'},1000);
$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
},
function () {
$('a',$(this)).stop().animate({'marginLeft':'-85px'},200);
}
);
});
</script>

Ahora toca añadir el código CSS para darle estilo al menú, nuevamente con la ayuda de (Ctrl + F) busca la etiqueta ]]></b:skin> y justo antes pega el siguiente código:

Descargar codigo

Por último tenemos que agregar el código HTML para llamar a la hoja de css y al script, ve a Diseño > Añadir gadget > elije > HTML/Javascript y pega el siguiente código:

<ul id="navigation">
<li class="imagen1"><a href="#" title="nombre-imagen"></a></li>
<li class="imagen2"><a href="#" title="nombre-imagen"></a></li>
<li class="imagen3"><a href="#" title="nombre-imagen"></a></li>
<li class="imagen4"><a href="#" title="nombre-imagen"></a></li>
<li class="imagen5"><a href="#" title="nombre-imagen"></a></li>
<li class="imagen6"><a href="#" title="nombre-imagen"></a></li>
<li class="imagen7"><a href="#" title="nombre-imagen"></a></li>
</ul>

Configuración:
Cambia lo que está en color rojo por la dirección de tus iconos.
Donde está la # en color verde tienes que poner la url de tu enlace.
También pueden cambiar la velocidad del efecto slide, esto está en milisegundos, para ello cambien lo que está en color celeste en el código javascript, pueden ver que está en 200 milisegundos.


Fuente: pazosblogger.com
--> Leer Más...

Botones con Efecto Burbuja con jQuery y CSS


En Aext.net nos enseñan a crear un Plugin jQuery, empezando desde cero, así que si les gusta trabajar con los códigos lean este tutorial.
El caso es que en dicho tutorial escrito por Lan Nguyen donde nos enseña a crear un plugin al cual le ha llamado "Bubble Up", tiene un efecto de burbuja, que al pasar el mouse por encima de una o varias imágenes dentro de una lista esta se ampliará con una animación suave, y al sacar el cursor de encima de la imagen esta volverá a su tamaño original con la misma animación suave. Este efecto lo podemos utilizar para ofrecer suscripción a nuestros usuarios, para hacer una barra Bookmarks, para un menú, o para cualquier otra imagen. Pueden verlo funcionando en mi blog de pruebas.


Para utilizar este efecto en tu blog primero tienes que tener la librería jQuery 1.3.2 en tu plantilla, es posible que la tengas, si es así salta este paso, de lo contrario con la ayuda de (Ctrl + F) busca la etiqueta </head> y justo antes pega el siguiente código:

<script src='http://sites.google.com/site/pazosblogger/config/
pagetemplates/script/jQuery1.3.2.min.js' type='text/javascript'/>

Ya tenemos la librería jQuery en nuestra plantilla, ahora añadiremos el script que dará vida a la animación, para ello tienes que pegar el siguiente código justo después del anterior código que acabas de pegar justo antes de la etiqueta </head> :

<script src='http://sites.google.com/site/pazosblogger/config/pagetemplates/
script/bubbleup.jquery.js' type='text/javascript'/>
<script type="text/javascript">
$(function(){
$("ul#menu li img").bubbleup();
});
</script>

Ahora añadimos la hoja de estilo CSS, con la ayuda de (Ctrl + F) busca la etiqueta ]]></b:skin> y justo antes pega el siguiente código:

/* CSS menu efecto burbuja */
ul#menu {
margin: 5px 0px;
}
ul#menu li {
padding: 0px;
display: inline-block;
*display: inline; /* IE 7 and below */
position: relative;
margin-left: 5px;
margin-right: 5px;
width: 48px;
height: 48px;
}
ul#menu li img {
width: 48px;
position: absolute;
top: 0px;
left: 0px;
padding: 0px;
margin: 0 8px 0 0;
border: none;
}

Por último ve a Diseño > Añadir gadget > elije > HTML/Javascript > y pega el siguiente código HTML:

<ul id="menu">
<li>
<a href="#" title="nombre-imagen">
<img src="url-de-tu-imagen" alt="descripción-imagen">
</a>
</li>
<li>
<a href="#" title="nombre-imagen">
<img src="url-de-tu-imagen" alt="descripción.imagen">
</a>
</li>
<li>
<a href="#" title="nombre-imagen">
<img src="url-de-tu-imagen" alt="descripción-imagen">
</a>
</li>
<li>
<a href="#" title="nombre-imagen">
<img src="url-de-tu-imagen" alt="descripción-imagen">
</a>
</li>
</ul>

Cambia la # por la dirección de tu enlace, y lo que está en color rojo por la dirección de tu imagen o icono.
No te olvides de ponerle nombre y descripción a tu imagen, la descripción es buena hablando de S.E.O.


Ver: Demo

Fuente: pazosblogger.com
--> Leer Más...

Optimizar imagenes Online

Particular mente creo que una de las cosas a las que tenemos que poner mucha importancia como bloguero a la hora de escribir un post, es la utilización de las imágenes, ya que puede ser que no la estés optimizando, y por ello tu blog tarda en cargar, debido a las imágenes pesadas que pones en cada post.

Pero no te preocupes, hoy te informo de varias herramienta potentes para que puedas optimizar tus imágenes y hacerlas lo más livianas que puedas.

Ahora que Google nos obliga a reducir el peso de nuestras páginas, no esta mal tener a la mano estas paginas para optimizar imágenes online.

A continuación varios sitios online:







5.- GifBot

Fuente: PizcosBlog
--> Leer Más...

Publicaciones recientes

 

  © 2009 Crea tu Blog

True Contemplation Blogger Template by M Shodiq Mustika