19.9.11

Quitar barra de BLOGGER

Hoy una entradita simple, y muy sencilla, vamos a explicar como ocultar la fea barra de blogger.


En dos pasos y muy sencillo. Vamos a Edición HTML (en diseño), buscamos en el código de la página <head> (Control + F, os saldrá una pestañita, ahi lo pegáis, y os saldrá solo). Y justo encima de <head>, pegáis el siguiente código:


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

Así podréis ocultarla, y darle un toque más profesional a vuestro Blog-web, un saludo a todos, ¡Y hasta la próxima!

Ah!, y de regalo, os dejo como hacer estas tablas que utilizo últimamente, es muy fácil, solo tenéis que pegar este código, en la Edición de HTML de vuestra entrada:

<table border=1><td>Columna 1, fila 1</td><td>
Columna 2, fila 1</td><td>
Columna 3, fila 1</td><tr><td>
Columna 1, fila 2<td>
Columna 2, fila 2<td>
Columna 3, fila 2</td></table>

Si queréis un solo cuadro, pues solo necesitáis:

<table border="1"><tbody>
<tr><td>Columna 1, fila 1</td></tr>
</tbody></table>

Ahora si, buenas noches, y espero volver con algo un poco más audiovisual que estos códigos empiezan a oscurecer mis entradas.

14.9.11

¡Menu de imágenes desplazable!, Lo que estabas buscando.

A pesar de que en el título de la entrada ponga "Menu", no se trata de esto exactamente, aunque hace una función muy parecida.
En realidad se trata de un "Slide", una galeria de imagenes, que ademas se desplaza lateralmente.
Como habréis notado, soy bastante aficionado de este tipo de menus. Se trata de una forma fácil y rápida de llamar la atención antes que un simple título como "Cosas" o "Tecnologías". Son del tipo que podéis ver en marca:

Y como podéis ver mi blog cuenta con algo parecido arriba, pero eso en verdad es un banner con enlaces de entradas destacadas creado en Banner Snack (muy recomendable, y que acaba de renovar y mejorar su interfaz totalmente on-line), y del que ya hablamos en una de nuestras entradas sobre banners hace ya tiempo.

Pues bien, vamos a lo que interasa, lo que os traigo, para que nadie se confunda es esto que veis aquí debajo:



Es parecido a esto, lo que pasa es que es un Gadget o widget (como queráis llamarlo), y en las entradas no suele funcionar, por eso no os lo pongo en su máximo esplendor, podéis verlo en esta página para la que lo he creado.

Su funcionamiento es muy sencillo, se desplaza lateralmente (desde el principio de la página, no desde 0, que muchas veces queda una franja en blanca y queda feo), y cuando sitúas el cursor sobre una de las imágenes se detiene, sale el nombre de la sección (saliendo la manita, que nos dice que ahí hay algo) y al pulsar nos redirecciona al sitio que tengamos puesto.

Lo bueno sobretodo, es que es un solo código, y sin tocar nada de la "Edición Html" ni nada de la página o blog. El código es el siguiente:

<script type="text/javascript">
//Ancho (en pixeles)
var sliderwidth="650px"
//Alto
var sliderheight="150px"
//Velocidad 1-10
var slidespeed=2
//Color de fondo:
slidebgcolor="#000000"


//Vínculos y enlaces de las imágenes
var leftrightslide=new Array()
var finalslide=''
leftrightslide[0]='<a href="http://www.ENLACEdelaENTRADA.blogspot.com" target="blank" title="Aquí el título"><img border="0" src="http://ENLACEdelaIMAGEN.jpg" height="Xpx"></a>'
leftrightslide[1]='<a href="http://www.ENLACEdelaENTRADA.blogspot.com" target="blank" title="Aquí el título"><img border="0" src="http://ENLACEdelaIMAGEN.jpg" height="Xpx"></a>'
leftrightslide[2]='<a href="http://www.ENLACEdelaENTRADA.blogspot.com" target="blank" title="Aquí el título"><img border="0" src="http://ENLACEdelaIMAGEN.jpg" height="Xpx"></a>'
leftrightslide[3]='<a href="http://www.ENLACEdelaENTRADA.blogspot.com" target="blank" title="Aquí el título"><img border="0" src="http://ENLACEdelaIMAGEN.jpg" height="Xpx"></a>'
leftrightslide[4]='<a href="http://www.ENLACEdelaENTRADA.blogspot.com" target="blank" title="Aquí el título"><img border="0" src="http://ENLACEdelaIMAGEN.jpg" height="Xpx"></a>'


var imagegap=""
var slideshowgap=5




var copyspeed=slidespeed
leftrightslide='<nobr>'+leftrightslide.join(imagegap)+'</nobr>'
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span>')
var actualwidth=''
var cross_slide, ns_slide


function fillup(){
if (iedom){
cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2
cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3
cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide
actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth
cross_slide2.style.left=actualwidth+slideshowgap+"px"
}
else if (document.layers){
ns_slide=document.ns_slidemenu.document.ns_slidemenu2
ns_slide2=document.ns_slidemenu.document.ns_slidemenu3
ns_slide.document.write(leftrightslide)
ns_slide.document.close()
actualwidth=ns_slide.document.width
ns_slide2.left=actualwidth+slideshowgap
ns_slide2.document.write(leftrightslide)
ns_slide2.document.close()
}
lefttime=setInterval("slideleft()",30)
}
window.onload=fillup


function slideleft(){
if (iedom){
if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8))
cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px"
else
cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+slideshowgap+"px"


if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8))
cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed+"px"
else
cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+slideshowgap+"px"


}
else if (document.layers){
if (ns_slide.left>(actualwidth*(-1)+8))
ns_slide.left-=copyspeed
else
ns_slide.left=ns_slide2.left+actualwidth+slideshowgap


if (ns_slide2.left>(actualwidth*(-1)+8))
ns_slide2.left-=copyspeed
else
ns_slide2.left=ns_slide.left+actualwidth+slideshowgap
}
}




if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">')
write('<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onmouseover="copyspeed=0" onmouseout="copyspeed=slidespeed">')
write('<div id="test2" style="position:absolute;left:0px;top:0px"></div>')
write('<div id="test3" style="position:absolute;left:-1000px;top:0px"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width="+sliderwidth+" height="+sliderheight+" name="ns_slidemenu" bgcolor="+slidebgcolor+">')
write('<layer left="0" top="0" onmouseover="copyspeed=0" onmouseout="copyspeed=slidespeed" name="ns_slidemenu2"></layer>')
write('<layer left="0" top="0" onmouseover="copyspeed=0" onmouseout="copyspeed=slidespeed" name="ns_slidemenu3"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}
</script>

De acuerdo, se que el HTML da mucho miedo, a mi el primero, pero con pequeñas cosas de estas podemos ir aprendiendo poco a poco y sin prisas. Es muy sencillo.

Lo escrito en AZUL son orientaciones que debes eliminar cuando completes las demás partes de tu menú.
De las partes en rojo, el número del pirncipio, 650, será el ancho del menú o slide, no importa la suma de las imágenes, será el ancho desde el punto de donde empieza a salir hasta donde acaba (el ancho de tu web o blog lo más normal). Y el 150, el alto del menú o slide, este no debe ser mayor del alto de las imágenes que incluyas (pues se agrandaran y deformaran). Y la X es el alto de las imágenes, que debe corresponder con el 150, o el número que pongáis en su lugar según como lo queráis de alto, para que no salgan "cosas raras".

Si queréis personalizar el color de fondo ( #000000 ) y no sabéis mucho de colores en html, lo más sencillo (y lo que yo hago) es ir al diseñador de plantillas, poner el color que quiera a algo, y como te sale el código, lo copio y lo pego, así de fácil. 

Después lo que veis a partir de "leftrightslide[0]" es cada imagen, con su enlace y demás, solo es rellenar una por una, un poco pesado si quieres poner muchas, pero satisfactorio cuando ves el resultado.

Para añadir más imágenes es poner lo que sigue de "leftrightslide[siguiente número]".

Recomenaciones: Las imágenes que incluyáis en este menú o slide lo mejor es que sean del mismo tamaño todas, es decir, vais a poner 5 imágenes, pues ponlas del mismo tamaño al menos de alto, de ancho da un poco igual.

Si queréis que se parezca lo más posible a un menu, como el que os he enseñado aquí, pues lo que yo os recomiendo es que hagáis el menú con un programa de diseño gráfico, photoshop, gimp, power point (como sabéis muy aprovechable), paint o el que queráis, y que cuando lo tengáis como os gustaría que saliera, lo cortéis en varias imágenes hasta tenerlas todas y poderlo montar. 

Ejemplo de como hice ese que os he enseñado. Imagen completa: 



Imágenes recortadas:




ETC.

De esta forma, podréis mostrar vuestras fotos de la manera más original y dinámica posible, o hacer un menú también muy dinámico e interactivo.

Por otro lado, ya que estamos con este tema, si no te apetece montar tanto lio, y no quieres estar rellenando enlaces, tienes otra opción, que es usar esta clave Html:

<marquee>Hola</marquee>

Y veriaís una cosa como esta:

Hola

Pero si queréis que en lugar de una palabra, sea una imagen, solo tenéis que poner entre marquee y marquee el codigo de una imagen (lo más facil, es subir una imagen, ponerle el tamaño que queréir, y darle a "Edición Html", copiais ese código, y lo ponéis).



<marquee><div class="separator" style="clear: both; text-align: center;">
<a href="http://www.colorear.info/Dibujos-infantiles/house-mouse/images/goofi-en-coche.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="171" src="http://www.colorear.info/Dibujos-infantiles/house-mouse/images/goofi-en-coche.gif" width="200" /></a></div></marquee>

Y lo que veréis será algo como esto (esperad un poco a que aparezca):


Jajaja, ¡grande Goofi! (mucho a tardado en aparecer).

Igualmente, si cogéis varias imagenes, las "pegáis" y formáis una sola, podéis hacer una especie de galería con este último método, eso ya a gusto del consumidor.

Hasta aquí todo por hoy, un poquito más de Html.



Se que quizás es demasiado explicado par algo que puede parecer sencillo, pero como el blog es mio, y me gusta escribir, lo explico como me gustaría que me lo explicaran a mi, y de una manera que se entienda, al que le guste bien, y al que no también (jaja).


Un abrazo a todos, y a disfrutar del nuevo curso.

3.9.11

¡Anima y venceras!

Algunos os preguntaréis, que significa el título que habré de nuevo la temporada en mi más que humilde blog, y os diré, no es más que una forma de expresar lo que ya se ha hecho más que comun en la mayoría de las grandes empresas, y no es otra cosa que recurrir a todo tipo de animaciones para atraer al público o sector que les interesa.
Haciendo zapping, como muy a menudo, hace ya algunos meses me encontré con esta cortinilla en el canal Tve HD, y que posteriormente las usarían para casi todo sus canales del ente público:


Me llamo bastante la atención, e incluso me hizo ilusión el intentar hacer la mía, pero antes de ello, investigue un poco más.


¿Y que fue lo que conseguí?, pues lo primero y más importante, que no es original, pues es una copia (podemos decir). De la campaña de la empresa estadounidense Aol, llevada a cabo por Universal Everything, y que como veréis, se le parece bastante:


Aun no he conseguido averigüar como se hace o como se llama la técnica. Pero dos cosas si son ciertas, que en este mundo hay muy pocas cosas que sean originales al 100%. Y dos, que si Tve quiere que no la tachen de copiona, vaya a Universal Everything, porque al menos en lo que respecta a Aol, ha hecho una pedazo de campaña:







Esta última hecha con aviones simulando una nube de abejas es genial:


Aunque pensándolo bien, si la televisión pública es de todos, tampoco se tienen que gastar nuestros cuartos en algo nuevo... para todo lo de más, U.E.

Saludos, y buen curso a todos!