Embedr » crear listas de videos

Embedr es un sitio web que nos permite crear, deforma sencilla, listas de videos. No es necesario crear una cuenta, pero si en el futuro quisieramos editar el playlist serís bueno que crearamos una cuenta.

Para agregar los videos sólo será necesario la URL de los mismos, ya sea de Youtube o de otro sitio similar.
El resultado es muy bueno y elegante, aquí un playlist de ejemplo.

Build your own custom video playlist at embedr.com

Introduciendo la plantilla para blogger: “Cuentos de Noche”

¡Hola!, hoy les tengo lista una nueva plantilla y aquí la tengo para compartir con todos ustedes, la puedes usar para tu blog personal, para un blog de cuentos, el fondo negro hace resaltar los elementos que la componen, haciendo un vibrante contraste con el blanco del contenido,  como de costumbre he utilizado imágenes de mi querida amiga Mar, espero que les guste.



Demo   Bajar la plantilla  Download EN version



Características:

• Plantillas con dos columnas, la principal y la lateral izquierda


• Resumen automático en los post, en este caso lo he configurado para que muestre las entradas no muy cortas, pero se puede personalizar según tus gustos, igualmente la imagen principal del post


• Icono RSS añadido en la cabecera o header


• Archivo deslizable


• Flechas con la función de ir hacia arriba con efecto deslizante, en el post y al lado izquierdo de la plantilla con posición fija


• Como siempre, hecha con mucho cariño y dedicación para que la puedan disfrutar Gratis

Importante:Esta plantilla ha sido registrada bajo la licencia de creative commons, hacerla representa horas de trabajo, por favor respeta los créditos correspondientes, ¡Muchas Gracias por tu comprención y apoyo!.

Nota: Plantilla Actualizada el 18/Marzo/2010 (alojando las imágenes en Blogger), si la bajaste antes de esta fecha, te recomiendo ampliamente que la vuelvas a bajar, ó bien alojar las imágenes en el servidor de hosting de tu preferencia.

Probada en: IE6, IE7, 1E8, Firefox y Google Chrome.

Introduciendo la plantilla Blogin con gadget listo para mostrar SlideShow

Hola, aquí les tengo una nueva plantilla, que esta hecha con detalles de papel y botones, ideal para un blog de manualidades, la he diseñado pensando en mostrar un SlideShow debajo de la cabecera, en la demostración puedes ver como funciona, en este caso, estoy usando un script, que encontré en el Escaparate de Rosa  mismo que es muy sencillo de editar y además, no tendrás que ingresar a la edición HTML de tu plantilla para implementarlo.

                                          

                                        [DEMO]                           [BAJARLA]



Características:

• 2 columnas en la parte principal, una pensando en un pequeño espacio para escribir algo sobre ti o sobre tu sitio, y la otra para el slideshow


• Plantilla de dos columnas


• 3 columnas adicionales en el Footer


• Archivo en forma de calendario

Si tienes dudas sobre las intrucciones de como instalar la plantilla puedes ir a  este post.



Importante:

Recuerda que al cambiar tu plantilla se pierda la información contenida en tus gadgets, por eso antes de bajarla, guarda todo su contenido en un archivo de tu compu, para luego volverlos a poner en la nueva plantilla.

IMPORTANTE: Para que funcione el Archivo tienes que configurarlo, es muy fácil, para ello tienes que ir a: Diseño►hacer clic en editar el gatget que contiene el archivo,  y luego selecciona lo siguiente:



En estilo: Lista .

En Frecuencia de Archivo: Mensualmente .

En Formato de fecha: Enero 2006.

 Intrucciones para Personalizar el menú de Navegación:

Para personalizar el menú de navegación tienes que ir  a Diseño►Edición de  HTLM, y luego identifica el siguiente código:

<div id='menunav'><ul>

<li><a expr:href='data:blog.homepageUrl' title=' Inicio'>Inicio</a></li>

<li><aexpr:href=' data:blog.homepageUrl+&quot;feeds/posts/default&quot;'  title: ‘Entradas Rss’>RSS</a></li>

   <li><a href=' tu link1 aqui '  title='tu link'>Link1</a></li>

    <li><a href='tulink2 aqui' title='tu link2'>Link2</a></li>                     <li><a href='tu link3 aqui' title='tu link'>Link3</a></li></ul> 

*Color Azul = el nombre de los enlaces que aparecerán en el menú de la plantilla.

*Color Verde = La URL o dirección del enlace en cuestión.

*Color Rosa = El texto que aparece al poner el puntero sobre el enlace.



Instrucciones para colocar las imágenes del Slideshow en el gadget correspondiente.



Opción 1. Usar el siguiente Script para el slideshow.



Paso 1 Ir a : Diseño► elementos de la página, y agrega  el siguiente script al gatget específico para el slideshow, eligiendo la opción HTML o JavaScript:

  

<div style="height:340px; text-align:center; width: 100%;">

<div id="slideshow1" class="slide">

<div>

<a href=”URL DEL ENLACE”> <img

src="URL_ DE TU IMAGEN AQUI"/> </a></div>

</div>

<div id="slideshow2" style="display: none;" class="slide">

<div>

<a href="URL DEL ENLACE"> <img

src="URL_ DE TU IMAGEN AQUI"/></a></div>

</div>

<div id="slideshow3" style="display: none;" class="slide">

<div>

<a href="URL DEL ENLACE"> <img

src="URL_DE TU IMAGEN AQUI"/> </a></div>

</div></div>

<script type="text/javascript">

start_slideshow(1, 3, 2000);

function start_slideshow(start_frame, end_frame, delay) {

setTimeout(switch_slides(start_frame,start_frame,end_frame,

delay), delay);

}

function switch_slides(frame, start_frame, end_frame, delay) {

return (function() {

Effect.Fade('slideshow' + frame);

if (frame == end_frame) { frame = start_frame; } else { frame =

frame + 1; }

setTimeout("Effect.Appear('slideshow" + frame + "');", 850);

setTimeout(switch_slides(frame, start_frame, end_frame,

delay), delay + 850);

})

}

</script>

                                                       Paso 2. Agrega los enlaces de tus imágenes, para eso tienes que identificar el código que dice:



<img

src="URL_DE TU IMAGEN AQUI"/>



Sustituye lo marcado con verde por los enlaces de tus imagenes respectivamente.



Ten cuidado con las comillas, no los vayas a borrar.



Paso 3. Después, identifica el código que dice:





<a href="URL DEL ENLACE">







..y pega la URL del enlace a donde te llevará al hacer click sobre la imagen..



El Script  de ejemplo, esta listo solo para mostrar 3 imágenes,  cada vez que quieras añadir una imágen tendrás que agregar este código completo con sus enlaces correspondientes, para cada imágen que quieras mostrar…, como nos quedamos en la  3, ahora sigue:





<div class="slide" id="slideshow4" style="display: none;">

<div>

<a href="Url del enlace"><img src="url de la imagen" /></a></div>

</div>





Si continuas agregando imágenes, seguirá slideshow5, slideshow6 y así sucesivamente después de cada imágen que agregues.



Importante: para que el slideshow luzca bien, deberás usar imágenes del mismo tamaño. Yo usé imagenes de: 540x292 px, ya que el espacio disponible en el gadget así lo permite.



Paso 4. Muy bien, ahora identifica en el Script el código que dice:



start_slideshow(1, 3, 2000);



El número 3 es una variable que cambiarás según el número de imágenes que tengas en el slideshow, en este caso el script tiene tres, si por ejemplo agregas 10 imágenes, entonces tendrás que cambiar el 3, por el número 10.



Paso 5. Guarda los cambios.



 OPCIÓN 2. Si cuentas con una cuenta como Flickr  puedes agregar en el gadget el código que te facilitan para el Slideshow, solo tendrás que ajustarlo a la medida del gadget.

Marcadores de redes sociales en Blogger

Han sido varios los que me han preguntado como agregar íconos de redes sociales a su blog. Hoy vamos a ver cómo hacerlo y más adelante veremos como darle algunos "efectos" (pushbutton, transparencia,etc.)


Para colocar los íconos haremos lo siguiente:

♠ Vamos a Diseño - Edición de HTML y Expandir plantilla de artilugios.
♠ Con ayuda de CTRL+F buscaremos lo siguiente:

<p class='post-footer-line post-footer-line-3'/>

♠ Antes del código anterior, pegaremos lo siguiente:

<a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Del.icio.us' src='http://img30.imageshack.us/img30/1893/delicious24x24s.png'/></a>
<a expr:href='"http://digg.com/submit?phase=2&amp;amp;url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a DiggIt!' src='http://img30.imageshack.us/img30/8708/digg24x24.png'/></a>
<a expr:href='"http://www.google.com/bookmarks/mark?op=edit&amp;output=popup&amp;bkmk=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Google' src='http://img17.imageshack.us/img17/6836/google24x24.png'/></a>
<a expr:href='"http://www.technorati.com/faves?add=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Technorati' src='http://img2.imageshack.us/img2/1722/technorati24x24.png'/></a>
<a expr:href='"http://ma.gnolia.com/beta/bookmarklet/add?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Magnolia' src='http://img30.imageshack.us/img30/3479/magnolia24x24.png'/></a>
<a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Reddit' src='http://img30.imageshack.us/img30/7517/reddit24x24.png '/></a>
<a expr:href='"http://www.blinklist.com/index.php?Action=Blink/addblink.php&amp;Description=&amp;Url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Blinklist' src='http://img14.imageshack.us/img14/5392/blinklist24x24.png'/></a>

Damos click a guardar y eso sería todo. Si queremos podemos agregar más redes sociales o cambiar los íconos que les proporcione por otros.

Por cierto si desean alojar directamente los íconos, aquí les dejo el link de la colección de íconos que usé » Descargar

► Iconos vía Fasticon

Cbox » tagboard para blog

Desde hace tiempo las tagboards o chats están de moda en los blog. Hay diferentes servicioes que nos ofecen la posibilidad de incluir esta aplicación en nuestros blog. Y uno de los más conocidos y usados es Cbox

Para usarlo, sólo habrá que llenar un pequeño formulario, escoger algún color para el tagboard y listo.
Cuando ya hayamos creado nuestra cuenta, sólo haremos click en Publish!, copiaremos el código que nos proporcionan y lo pegaremos en nuestro blog como nuevo elemento HTML.
Como ven, es muy sencillo incluir uno de estos chat en nuestro blog

Proximamente Plantilla "La playa de mi vida"

Hola, en este momento estoy trabajando en la siguiente plantilla, pueden ver la parte de la cabecera, la cual casi esta lista, solo necesito añadir un pescadito bailarín, el cual estoy biscando, también necesito ultimar algunos detalles del footer, pero pronto lo haré...

El tema, "mar sol y arena"..., ya le he puesto un título que es: La playa de mi vida, en cuanto este lista la publico.

¡Hasta luego y que tengas un excelente día!

Muchos íconos en ICON Stick

ICON Stick es una web que nos ofrece sets de íconos gratuitos de alta calidad y de diferemtes temas.
La página cuenta con un buscador interno, lo que nos permitirá encontrar algún set en especial de forma sencilla y además tenemos la posibilidad de votar por el set que más nos guste.


► ICON Stick