Ventanas multimedias en nuestra Web con Shadowbox

Shadowbox es un clon de Lightbox, pero a diferencia de éste no sólo sirve para visualizar imágenes en ventanas modales,sino también páginas web, archivos en flash, galerías, mapas, y videos en varios formatos de distintos servicios.

Implementarlo es bastante sencillo, primero descarga este archivo, descomprímelo y sube los archivos a un hosting.

Luego entra en
Diseño > Edición de HTML y pega antes de </head> lo siguiente:
<link href='URL del archivo.css' rel='stylesheet' type='text/css'/>
<script src='
URL del archivo.js' type='text/javascript'/>
<script type='text/javascript'>
Shadowbox.init({
overlayColor: "#000",
overlayOpacity: &quot;0.6&quot;,

});
</script>

Cambia lo que está en
color verde por las URL de los archivos que subiste, en el primero va la URL del achivo shadowbox.css y en el segundo la del shadowbox.js

Con esto ya tenemos todo lo necesario para que Shadowbox funcione, ahora sólo hay que poner el atributo
rel="shadowbox" dentro del código del elemento, por ejemplo:

Imagen

<a href="URL de la imagen" rel="shadowbox" title="Imagen">Imagen</a>
Galería de imágenes

<a href="URL de la imagen" rel="shadowbox[galeria1]" title="Imagen">Imagen 1</a>
<a href="
URL de la imagen" rel="shadowbox[galeria1]" title="Imagen">Imagen 2</a>
YouTube

<a rel="shadowbox;width=405;height=340;" title="YouTube" href="http://www.youtube.com/v/CCwVb9Faxdc&amp;rel=0&amp;autoplay=1">YouTube</a>
Vimeo

<a rel="shadowbox;width=405;height=340;" title="Vimeo" href="http://vimeo.com/moogaloop.swf?clip_id=8711928&amp;autoplay=1">Vimeo</a>
Video Google

<a href="http://video.google.com/googleplayer.swf?docid=-1941725100819420671&autoplay=1&hl=es&fs=true" title="Video Google" rel="shadowbox;width=405;height=340">Video Google</a>
Archivo SWF

<a rel="shadowbox;width=400;height=300" title="SWF" href="URL del archivo.swf">Animación SWF</a>
Página Web

<a rel="shadowbox;width=700;height=500" title="Página web" href="URL de la página">Página web</a>
Mapa

<a rel="shadowbox;width=425;height=350" title="Mapa" href="URL del mapa">Mapa Google</a>
Cambia la URL de la imagen, del mapa, del archivo o de la página web, según corresponda.
En el caso de los videos sólo hay que agregar donde está en color rojo la ID del video, esa aparece al final de la dirección del video.

Como ven, en el atributo rel="shadowbox" también se han añadido unos parámetros,
width=405 es el ancho del reproductor o página web y height=340 es el alto.
En el caso de las galerías de imágenes se agrega entre corchetes el nombre de la galería, por ejemplo
rel="shadowbox[galeria1]"

Respecto al color de la pantalla cuando está en ventana modal puede cambiarse en el primer código que pegamos antes de </head> donde está en
color azul, overlayColor es el color de la pantalla, y overlayOpacity es la intensidad de la opacidad del color, un número más bajo hace más transparente el color.

Sin duda Shadowbox es un sistema de ventanas modales bastante completo en el que podremos presentar distintos archivos multimedia de forma más dinámica y elegante.

Descargar | archivos Shadowbox

Enlace | Shadowbox - CiudadBlogger
--> Leer Más...

Como Administrar el blog desde otra cuenta

Quizá tienes una nueva dirección de email y ya no quieres usar la actual para administrar tu blog, o tal vez ya se te acabó el espacio de almacenamiento de imágenes en Picasa y no puedes subir más fotos.

En cualquiera de esos casos no hace falta crear otro blog, sólo hacer un "cambio de propietario" para que el blog pueda administrarse desde tu otra cuenta de correo electrónico.

Con cambiar la cuenta con la que administras tu blog no perderás ni el blog, ni tus entradas ni nada, lo único que cambiará es que ya no entrarás desde tu cuenta de correo actual, sino con la nueva.

El proceso no es difícil pero sí hay que iniciar y cerrar sesión varias veces, así que no te desesperes.

Primero entra a tu cuenta de Blogger con tu correo que ya no quieres usar (la llamaremos cuenta UNO).

Luego dirígete a Configuración > Permisos y haz click en Añadir autores.
A continuación agrega tu nueva cuenta de correo electrónico (a esta la llamaremos cuenta DOS) y dale click en Invitar.

Cierra la sesión, entra a tu correo electrónico de la cuenta DOS y verifica que tengas un mail de Blogger, haz click en el enlace que viene ahí.

Se abrirá la página de Blogger y te pedirá que inicies sesión, ingresa con tus datos de tu cuenta DOS.

En tu panel de control ya podrás ver que aparece tu blog, pero aún no lo puedes administrar, así que continuémeos y cierra la sesión.

Inicia de nuevo la sesión en Blogger con tus datos de la cuenta UNO y dirígete otra vez a Configuración > Permisos.

Ahí verás que aparecen dos autores, tú y el de tu otra cuenta que agregaste, junto a ella hay un enlace que dice otorgar privilegios de administrador, haz click ahí y nuevamente cierra la sesión.

Ahora entra de nuevo a Blogger con tus datos de la cuenta DOS y verás en tu panel que ya tienes todas las opciones normales para administrar el blog, ya sólo dirígete a Configuración > Permisos y del lado extremo derecho del nombre de tu cuenta UNO haz click en Eliminar.

Listo, ya puedes administrar tu blog desde tu otra cuenta de correo.

Para quienes ya no tenían espacio en Piacasa verán que ya cuentan con otro Giga de almacenamiento que pueden utilizar para seguir subiendo más fotos a su blog.

Puedes seguir publicando tus entradas de forma normal tal como lo hacías antes.

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

Añadir Slider (Carrusel de Imágenes) para Blogger

Hace tiempo ya hablamos sobre como poner un slideshow con imágenes que iban pasando automáticamente y otro slideshow con los títulos de las entradas, así como también una marquesina de imágenes gracias al atributo marquee. Un slideshow colocado debajo de la cabecera de nuestro blog otorga un estilo diferente y una profesionalidad increíble. Por eso mismo, hoy de mano de anshuldudeja, voy a explicar cómo poner en Blogger un slidesow (carrusel de imágenes) que se pueden ir pasando al hacer clic, mejor mira esta imagen para entenderlo:

Para colocar este slideshow (carrusel de imágenes) en nuestro blog de Blogger deberemos seguir las siguientes acciones:

1) Vamos a Diseño
2) Edición de HTML
3) Buscamos </head> y antes pegamos el siguiente código:
<script src='http://pmsc.free.fr/gb/J/1039115625.js' type='text/javascript'/>
<script src='http://pmsc.free.fr/gb/J/1039115553.js' type='text/javascript'/>
<style type='text/css'>
#mygallery{overflow: hidden;}
</style>

<script type='text/javascript'>
stepcarousel.setup({
galleryid: &#39;mygallery&#39;, //id of carousel DIV
beltclass: &#39;belt&#39;, //class of inner &quot;belt&quot; DIV containing all the panel DIVs
panelclass: &#39;panel&#39;, //class of panel DIVs each holding content
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 3, leftnav: [&#39;http://1.bp.blogspot.com/_v5IxGTiMTD8/SxOlAIA_ZZI/AAAAAAAAAfg/
ELVwF1qY8M8/s400/left.jpg&#39;, -48, 0], rightnav: [&#39;http://1.bp.blogspot.com/_v5IxGTiMTD8/SxOlAVn-OvI/AAAAAAAAAfo/kMJcmlXZKCs/s400/right.jpg&#39;, 0, 0]},
statusvars: [&#39;statusA&#39;, &#39;statusB&#39;, &#39;statusC&#39;], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: [&#39;external&#39;] //content setting [&#39;inline&#39;] or [&#39;external&#39;, &#39;path_to_external_file&#39;]
})

</script>
Estos dos scripts los he subido a un servicio gratuito para subir scripts. Te recomiendo que los guardes por si algún día fallan.

4) Ahora buscamos el código ]]></b:skin> y añade encima lo siguiente:
#myslides{
background:#000 url(http://1.bp.blogspot.com/_xfdD6S9fOk4/Sd1SjSaUrXI/AAAAAAAAA20/ndvDf0nTslY
/s1600/mslid.jpg) repeat-x;
width: 650px;
height:165px;
margin-bottom:5px;
}

.stepcarousel{
position: relative; /*leave this value alone*/
overflow: scroll; /*leave this value alone*/
width: 554px; /*Width of Carousel Viewer itself*/
height: 160px; /*Height should enough to fit largest content's height*/
margin: 0px 48px 5px 48px;
}

.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}

.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 20px 10px ; /*margin around each panel*/
width:170px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
background:#0e1829;
height:120px;
border:1px solid #1d2c44;
}

.stepcarousel .panel p{
text-align: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 5px 5px ; /*margin around each panel*/
}

.stepcarousel .panel h2{
text-align: left; /*leave this value alone*/
height:20px;
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 2px 5px ; /*margin around each panel*/
font-size:16px;
font-weight:bold;
text-align:center;
font-family:Georgia,century gothic,Arial,verdana, sans-serif;
}

.stepcarousel .panel img{
float: left; /*leave this value alone*/
background:#0E1829; /*clip content that go outside dimensions of holding panel DIV*/
margin: 5px 5px 5px 5px; /*margin around each panel*/
padding:0px 0px;
}
5) Ahora clicamos en vista previa y si no hay ningún error, guardamos la plantilla.

6) Finalmente vamos a Diseño> Elementos de página> Añadir un gadget> HTML/Javascript y allí pegamos el siguiente código:
<div id="myslides">
<div id="mygallery" class="stepcarousel">
<div class="belt">
<!-- 1st imagen -->
<div class="panel">
<a href="http://www.
ENLACEENTRADA.html" target="blank" title="TITULO"> <img width="160" alt="DESCRIPCION" src="http://ENLACEIMAGEN.jpg" height="110"/> </a>
</div>
<!-- end code of 1st -->

<!-- 2nd imagen -->
<div class="panel">
<a href="http://www.ENLACEENTRADA.html" target="blank" title="TITULO"> <img width="160" alt="DESCRIPCION" src="http://ENLACEIMAGEN.jpg" height="110"/> </a>
</div>
<!-- end code of 2nd -->

<!-- 3rd imagen -->
<div class="panel">
<a href="http://www.ENLACEENTRADA.html" target="blank" title="TITULO"> <img width="160" alt="DESCRIPCION" src="http://ENLACEIMAGEN.jpg" height="110"/> </a>
</div>
<!-- end code of 3rd -->

<!-- 4th imagen -->
<div class="panel">
<a href="http://www.ENLACEENTRADA.html" target="blank" alt="DESCRIPCION" title="TITULO"> <img src="http://ENLACEIMAGEN.jpg"/> </a>
</div>
<!-- end code of 4th -->

</div></div></div>
Si nos fijamos en ese último código, en él es donde incluiremos cada imagen del slideshow (carrusel de imágenes). Cada bloque de código por imagen esta diferenciada por <!-- 1st imagen --> y <!-- end code of 1st --> y entre ese código ese está el enlace de la imagen que deberemos incluir, concretamente en http://www.ENLACEENTRADA.html deberemos poner el enlace al que queramos que se nos dirija cuando hagamos clic en una imagen determinada; y en http://ENLACEIMAGEN.jpg deberá ir el enlace de la imagen que queramos incluir. Y así con todas imágenes predefinidas.

No te olvides DE la descripción y título del SEO imágenes para Blogger. Si queremos añadir o eliminar imágenes basta con fijarse en el código y ver cómo está formado. No guarda ningún secreto.

Todo listo, espero que te guste el resultado final.

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

Fuentes gratuitas para tu Web con FonTs2U

Cuando vamos a realizar algún trabajo llegamos al punto de escoger un tipo de fuente para el título.

No siempre es sencillo encontrar una fuente acorde con el diseño así que damos vueltas y más vueltas hasta encontrar alguna, lo malo es que no todas las fuentes son gratuitas.

Ese problema no lo tendremos en FonTs2u allí podemos descargar multitud de fuentes gratuitas que encontraremos clasificadas por categorías y un menú lateral para informarnos de las nuevas fuentes que se van añadiendo o las más descargadas.


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

Imágenes gratuitas para decorar nuestra Web

Imágenes y más imágenes es lo que siempre necesitamos para ilustrar nuestras entradas para decorar esto de aquí y lo otro de más allá:

¿libres de derechos de autor?
¿tendrá copyright?
¿es necesario hacer referencia del sitio?

para no hacernos estas preguntas una y otra vez en Photo Laboratory tenemos la oportunidad de descargar libremente hasta 35 Mb diarios de imágenes libres de derechos y totalmente gratuitas tanto para uso comercial como personal.
Fuente: gemablog
--> Leer Más...

Programa Online para crear Logos - Supalogo

Supalogo es una herramienta online que nos ayudará a crear logos y personalizar texto en un abrir y cerrar de ojos.

En Option podemos escoger tipo de fuente, tamaño, grosor, color de fondo o transparencia si así lo deseamos y la posibilidad de dejar el texto simplemente de color o añadir un agradable efecto glossy o gradient.

Aqui les muestro varios tipos de letras, colores y diseños.

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

Un gadget para mostrar el clima en nuestra Web con YoWindow

YoWindoW es un gadget que nos muestra el estado del clima en nuestro sitio, mostrando los datos y una imagen acorde. Es divertido y simple de agregar ya que se trata de un archivo SWF.

Para crear el gadget, entramos al sitio y luego hacemos click en Add to web-page; allí, definimos los datos a usar: ubicación (país y ciudad), lenguaje, tamaño, formato de fecha, hora y temperatura, etc.

Los cambios, los veremos inmediatamente y luego, basta copiar y pegar el código que nos ofrecen en cualquier elemento HTML de la plantilla. Eventualmente, estos datos pueden ser modificados manualmente, cambiando las variables del parámetro flashvars.

Además del gadget, disponen de una aplicación para agregar a Facebook, otra para iGoogle y otra para myspace. También podemos descargarlo como salvapantallas e instalarlo en nuestra PC.

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

Miles de íconos gracias a FindIcons

¿Algunos íconos? No, cientos de miles. findicons reune cantidades impresionantes de packs para descargar de forma gratuita y además, es un buscador muy eficiente porque permite filtrar los resultados de muchas maneras, seleccionando tamaños o colores.

Un accesorio muy útil es el conversor.

Desde allí, podemos subir cualquier imagen y convertirla a diferentes formatos y diferentes calidades.

Por ejemplo, a formato ICO.

El resultado, es un ZIP que descargamos y que contendrá varios archivos con íconos en distintos tamaños (8x8, 16x16, 24x24, 32x32, 40x40, 48x48, 56x56, 64x64, 72x72, 80x80).

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

Traductor Google con banderas

Un gadget de fácil instalación, que nos facilitan en AllBlogTolls solo hay que copiar y pegar el código en un gadget HTML/Javascript.

Detecta de forma automática el idioma del blog y lo traduce al idioma escogido usando el traductor de Google.

Soporta 12 idiomas diferentes: Inglés, francés, alemán, español, italiano, neerlandés, brasileño, ruso, japonés, coreano, árabe y chino.

Se ajusta de forma automática al espacio donde se coloca, es decir, si lo ponemos en un lugar estrecho las banderas se verán en dos o tres filas, si hay mucho espacio (debajo del header por ejemplo) las banderas de traducción se mostrarán en una única hilera.

Código
<style>

.google_translate img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
}
.google_translate:hover img {
filter:alpha(opacity=30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
.google_translatextra:hover img {
filter:alpha(opacity=0.30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
</style>

<div>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="24" src="http://4.bp.blogspot.com/_5jbh95HruKA/S1YVBORD9bI/AAAAAAAAACs
/XkaLmmin4zg/s200/United+Kingdom(Great+Britain).png" style="cursor: pointer;margin-right:8px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="24" src="http://4.bp.blogspot.com/_5jbh95HruKA/S1YVBrDZLrI/AAAAAAAAAC0
/Kc6eDMT9LFI/s200/France.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="24" src="http://1.bp.blogspot.com/_5jbh95HruKA/S1YVBzoFF2I/AAAAAAAAAC8
/WgvMK3zP1Rk/s200/Germany.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="24" src="http://3.bp.blogspot.com/_5jbh95HruKA/S1YVCdHp5VI/AAAAAAAAADE
/lWHzr5znExU/s200/Spain.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="24" src="http://4.bp.blogspot.com/_5jbh95HruKA/S1YVCskNubI/AAAAAAAAADM
/ChdHC6vYT4s/s200/Italy.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="24" src="http://3.bp.blogspot.com/_5jbh95HruKA/S1YWRkFo9UI/AAAAAAAAADU
/4AzKfc6Oyxg/s200/Netherlands.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="24" src="http://4.bp.blogspot.com/_5jbh95HruKA/S1YWR-jg9pI/AAAAAAAAADc/vYZrPOzazHU/s200/Russian+Federation.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cpt&hl=en'); return false;"><img alt="Portuguese" border="0" align="absbottom" title="Portuguese" height="24" src="http://1.bp.blogspot.com/_5jbh95HruKA/S1YWSGHcxOI/AAAAAAAAADk
/ElHZBjDCZn8/s200/Brazil.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="24" src="http://1.bp.blogspot.com/_5jbh95HruKA/S1YWSR2_wYI/AAAAAAAAADs
/GtKdPLKUluE/s200/Japan.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="24" src="http://2.bp.blogspot.com/_5jbh95HruKA/S1YWSrlfMyI/AAAAAAAAAD0/_MACsRIW8wg
/s200/South+Korea.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Car&hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" height="24" src="http://3.bp.blogspot.com/_5jbh95HruKA/S1YWq7SrDkI/AAAAAAAAAD8
/ZE8A1isEZrw/s200/Saudi+Arabia.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Czh-CN&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="24" src="http://1.bp.blogspot.com/_5jbh95HruKA/S1YWrMQAw9I/AAAAAAAAAEE/r-DEVtWXp50/s200/China.png" style="cursor: pointer;margin-right:8px" width="24"/></a> </div>

<div 0px 0pxâ?? style="â??font-size:10px;margin:8px" 3px></div>

<br/>

<a href="http://www.bloggerarticle.com/"><font size="1px">this widget by www.AllBlogTools.com</font></a>
Fuente: elescaparatederosa
--> Leer Más...

Publicaciones recientes

 

  © 2009 Crea tu Blog

True Contemplation Blogger Template by M Shodiq Mustika