Crea ventanas modales o pequeñas galerías (miniaturas) para entradas o portada del blog.

Este artículo fue publicado en el Balcón de Jaime por Jaime Trujillo Escobedo. Para verlo en su blog original

visitar: http://elbalcondejaime.blogspot.com/2010/11/ventanas-modales-para-mostrar-cualquier.html

Este clon de Lightbox conocido como Shadowbox nos permite, a diferencia del primero, abrir en ventanas modales tanto imágenes como páginas web, vídeos e incluso archivos en flash (como juegos).

Una herramienta con un sin fin de usos y de fácil instalación con la que podrás presentar en tu blog cualquier cosa sin hacer que éste se retrase al cargar el contenido.

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

Busca la etiqueta </head> y justo encima añade estos scripts:

<!-- Ventana modal ShadowBox Balcn-->
<link href='https://sites.google.com/site/scriptsbalcon/b/blccbx.css' rel='stylesheet' type='text/css'/>
<script src='https://sites.google.com/site/scriptsbalcon/b/bljjShadowbx1.js' type='text/javascript'/>
<script type='text/javascript'>
Shadowbox.init({
overlayColor: "#000",
overlayOpacity: "0.6",
});
</script>

Si lo deseas, puedes descargar el script que hace funcionar la ventana modal (bljjShadowbx1.js), así como las propiedades css y alojarlo en tu propio hosting para, posteriormente, incluir la dirección del nuevo archivo subido en el código (borrando antes la actual).

Guarda la plantilla.

Con esto ya tendremos implementado lo necesario en nuestra plantilla. Ahora tan tendrás que incluir el código necesario para mostrar cada elemento en una entrada o en un gadget html-javascript del apartado de Diseño>Elementos de la página de tu blog.

Una imagen

<a title="TITULO" rel="shadowbox" href="URL DE LA IMAGEN"><img src="URL DE LA IMAGEN" style="width: 100px;"></a>

Una galería de imágenes

<a href="URL DE LA IMAGEN 1" rel="shadowbox[blgal1]" title="TITULO"><img style="width:100px;" src="URL DE LA IMAGEN 1"/></a>

<a href="URL DE LA IMAGEN 2" rel="shadowbox[blgal1]" title="TITULO"><img style="width:100px;" src="URL DE LA IMAGEN 2"/></a>

Un vídeo de YouTube

<a rel="shadowbox;width=405;height=340;" title="YouTube" href="http://www.youtube.com/v/XT6XPHXK4e4&rel=0&autoplay=1">Ver el vídeo</a>

Un archivo SWF (como un minijuego -archivos Flash-):

<a rel="shadowbox;width=400;height=300" title="SWF" href="URL DEL ARCHIVO SWF">TITULO DEL ENLACE</a>

Una página web:

<a rel="shadowbox;width=700;height=500" title="TITULO" href="URL DE LA PAGINA">TITULO DEL ENLACE</a>

Reemplaza cuando sea necesario:

URL DE LA IMAGEN por la dirección de tu imagen (imágenes si se trata de una galería), TITULO DEL ENLACE por el texto que aparecerá en el enlace que abre la ventana modal (puedes utilizar una imagen en lugar de texto incluyendo esta línea de código: <img src="URL DE TU IMAGEN"/> e insertando la dirección de la imagen en miniatura que actuará como botón).

Cuando vayas a incluir una galería en tu blog, ten en cuenta que el atributo rel="shadowbox[blgal1]" pertenece a una galería, blgal1, por lo que las nuevas imágenes que incluyas utilizando este nombre aparecerán junto a las anteriormente publicadas. Para evitarlo, edita blgal1 tantas veces como desees de manera que puedas agrupar imágenes por separado en una galería (blgal1) o en otra (blgal2).

Las cifras del vídeo de YouTube (XT6XPHXK4e4) deben sustituirse por los carácteres que aparecen al final de la dirección del vídeo que has escogido.

En URL DEL ARCHIVO SWF incluye la dirección del archivo .swf que obtendrás al haberlo alojado en tu propio hosting.

Agrega la dirección de cualquier página web en URL DE LA PAGINA (siempre con el http://).
Este artículo fue publicado en el Balcón de Jaime por Jaime Trujillo Escobedo. Para verlo en su blog original visitar: http://elbalcondejaime.blogspot.com/2010/11/ventanas-modales-para-mostrar-cualquier.html

Gracias por tu visita al Blogger Magazine, las últimas novedades de los mejores maestros bloggers.

Read More

Cómo crear un anuncio o aviso flotante para el blog

Aviso o anuncio flotante que permanece fijo al navegar por el blog

 

 

Artículo publicado en el blog, ya cerrado, El Balcón de Jaime (2007-2011) donde encontramos una gran variedad de trucos de mucha ayuda para los bloggers. Visitar el Balcón de Jaime.

 

ARTÍCULO
Aviso o anuncio flotante que permanece fijo al navegar por el blog

Tras haber visto cómo incluir en el blog un cartel o aviso automático al pie de todas las entradas, descubriremos este otro truco de sencillísima configuración. Se trata de un recuadro que permanece flotando en una esquina del blog y que puede cerrarse con un solo clic.

Puedes ver el resultado en este blog de pruebas, desplazándote a través de la entrada para comprobar que el anuncio "flota" sea cual sea la posición a la que llegues.

Diseño>añadir gadget (elemento de página)>html-javascript

Pega el script:

<div id="blanuncio">
<a href="" onclick="blcartel_cierra(); return false"><img title="Cerrar nota" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimwCC3znP6SNf2XyoidMdRpukB6C0zP5su-25ARLhq7bH04-e0WGEf2W22QKxaVkwKln1WT_DAwfq3fV5nIOj-pQygdOU9twh89lWdOQGAkjhyphenhyphen6wwcol0U2uGHzXl2_EbxGHxTCpY08fyk/s320/blcerra.png" border="0" /></a> CONTENIDO AQUI
</div>

<script type="text/javascript">
var blbtn_cerrar=1.1
var blcartl_1 = 30
var blcartl_3="fromtop"
var blcartl_2 = 5
function blcartl_Activo(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function blcartl_nuevo(llamo) {
var blcartel_aparien = llamo + "="
var blcartel_cam = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(blcartel_aparien)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
blcartel_cam=unescape(document.cookie.substring(offset, end))
}
}
return blcartel_cam;
}
function blcartel_cierra(){
if (blbtn_cerrar)
document.cookie="remainclosed=1"
document.getElementById("blanuncio").style.visibility="hidden"
}
function blcartel_posicion(){
barheight=document.getElementById("blanuncio").offsetHeight
var blcartel1 = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var blcartt = document;
function blavis(id){
var bblaviso=blcartt.getElementById(id);
if (!blbtn_cerrar || blbtn_cerrar && blcartl_nuevo("remainclosed")=="")
bblaviso.style.visibility="visible"
if(blcartt.layers)bblaviso.style=bblaviso;
bblaviso.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
bblaviso.x = blcartl_1;
if (blcartl_3=="fromtop")
bblaviso.y = blcartl_2;
else{
bblaviso.y = blcartel1 ? pageYOffset + innerHeight : blcartl_Activo().scrollTop + blcartl_Activo().clientHeight;
bblaviso.y -= blcartl_2;
}
return bblaviso;
}
window.stayTopLeft=function(){
if (blcartl_3=="fromtop"){
var blcartel2 = blcartel1 ? pageYOffset : blcartl_Activo().scrollTop;
ftlObj.y += (blcartel2 + blcartl_2 - ftlObj.y)/8;
}
else{
var blcartel2 = blcartel1 ? pageYOffset + innerHeight - barheight: blcartl_Activo().scrollTop + blcartl_Activo().clientHeight - barheight;
ftlObj.y += (blcartel2 - blcartl_2 - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 6);
}

ftlObj = blavis("blanuncio");
stayTopLeft();
}
if (window.addEventListener)
window.addEventListener("load", blcartel_posicion, false)
else if (window.attachEvent)
window.attachEvent("onload", blcartel_posicion)
else if (document.getElementById)
window.onload=blcartel_posicion
</script>
<style type="text/css">
#blanuncio {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2tuhlMvCJKAU7oI7JkjJJSycf9iZxH2oX10oUfrD7gVkPfnRj8BuISwsw-hyXvRAlH9eZEf_912JYYU4J3qovLvF506w5Mp4DN26vCT9bsWfDE3OfXurZiviZCAj7YKaKcvApwQSMD0m1/s320/blfondd.png") repeat scroll left top transparent;
border:1px solid #CCCCCC;
padding:2px;
position:absolute;
visibility:hidden;
width:576px;
z-index:100;}
#blanuncio img {margin-right: 8px;}
#blanuncio a:link, #blanuncio a:hover, #blanuncio a:visited {color: #000000;}</style>

Reemplaza CONTENIDO AQUI por el contenido (texto) que tendrá el anuncio.

Puedes personalizar el ancho que tendrá el recuadro del anuncio editando el valor 576px en la línea resaltada en verde, al final del código.

Para cambiar la imagen de fondo del aviso, borra la línea marcada en azul e inserta la dirección de tu imagen.

Finalmente, si deseas editar la imagen de cierre borra la primera URL del script (resaltada en verde) e introduce la URL de tu icono.

En caso de no saber el procedimiento para obtener la URL de una imagen, accede a esta entrada.

Una vez editados los parámetros, procederemos a guardar el gadget.

Fuente: http://elbalcondejaime.blogspot.com/2010/04/aviso-o-anuncio-flotante-que-permanece.html

Gracias por tu visita al Blogger Magazine, las últimas novedades de los mejores maestros bloggers.

Read More