0

visibility: hidden y display: none

A muchos les será familiar estas propiedades porque las usaron para eliminar la barra de Blogger: visibility:hidden y display:none

#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}

La propiedad visibility con el valor hidden consigue hacer invisibles los bloques de cualquier elemento y muestra el bloque donde se encuentra.
La propiedad display con el valor none además de hacer invisibles los elementos no muestra el bloque donde se aloja y los elementos de su entorno se adaptan como si no existiera.

CONTINUAR

0

El elemento Header (4)

Para terminar con esta serie de posibilidades del header, un script de Dynamic Drive llamado Neon Lights Text y que podemos aplicar a cualquier texto como este:


Para usarlo en el header vamos a expandir los artilugios y buscar esto:
<b:includable id='title'>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <data:title/>
  <b:else/>
    <a expr:href='data:blog.homepageUrl'><data:title/></a>
  </b:if>
</b:includable>
Lo reemplazaremos por esto:
<b:includable id='title'>
<script type='text/javascript'>
//<![CDATA[

//Neon Lights Text II by http://www.dynamicdrive.com/dynamicindex10/neontext2.htm
var message = "el texto que queremos usar ";
var neonbasecolor = "#FFFFFF"; 
var neontextcolor = "#00FFDD";
var neontextcolor2 = "#DDFF00";
var flashspeed = 150; // velocidad en milisegundos
var flashingletters = 1; // cantidad letras del efecto neontextcolor
var flashingletters2 = 1; // cantidad letras del efecto neontextcolor2
var flashpause = 1; // pausa entre ciclos

var n=0;
if (document.all||document.getElementById){
  document.write('<font color="'+neonbasecolor+'">');
  for (m=0;m<message.length;m++)
    document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>');
  document.write('</font>');
}
else
  document.write(message);

function crossref(number){
  var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number);
  return crossobj;
}
function neon(){
  if (n==0){
    for (m=0;m<message.length;m++)
      crossref(m).style.color=neonbasecolor;
  }
  crossref(n).style.color=neontextcolor;
  if (n>flashingletters-1) crossref(n-flashingletters).style.color=neontextcolor2 
  if (n>(flashingletters+flashingletters2)-1) crossref(n-flashingletters-flashingletters2).style.color=neonbasecolor;
  if (n<message.length-1)
    n++;
  else{
    n=0;
    clearInterval(flashing);
    setTimeout("beginneon()",flashpause);
    return;
  }
}
function beginneon(){
  if (document.all||document.getElementById)
    flashing=setInterval("neon()",flashspeed);
}
beginneon();
//]]>
</script>
</b:includable>
El ejemplo online puede verse aquí.

0

Nuevas opciones del editor de entradas (Blogger in Draft)

Si accedes a tu panel de Blogger desde Blogger in Draft comprobarás que hay añadidas nuevas funciones en su editor.

Editor Draft


¿Qué es Blogger in Draft?
Es una versión de Blogger en la cual el equipo de Blogger va habilitando nuevas funcionalidades a modo de prueba. Para acceder a esta versión de Blogger, usamos los mismos datos que para acceder a nuestro panel de Blogger "normal", y una vez dentro lo usamos exactamente igual que hacemos en Blogger. La única diferencia es que a la hora de añadir un nuevo elemento a nuestra sidebar, veremos algunas opciones que en el otro Blogger no están disponibles aún.
Podría decirse que Blogger in Draft es como un laboratorio donde se prueban nuevas funcionalidades antes de sacarlas definitivamente al público.



Aunque la información respecto a las imágenes que vamos a subir aparece en inglés, no es difícil de entender, nos informa por ejemplo que podemos usar archivos de imagen en formato JPG, GIF o PNG.

Subir imágenes


Debajo aparece una frase que dice "Images will we added to this Picasa album" o lo que es lo mismo "Las imágenes han sido añadidas a este álbum de Picasa" y vemos el título del blog en el que estamos trabajando ya que el álbum que se crea en Picasa para las imágenes subidas al mismo, llevará el mismo título.

En ese mismo despegable, aparece una lista con el resto de blogs que tenemos en Blogger, aunque eso no quiere decir que si escogemos uno que no sea en el que estamos trabajando en ese momento las imágenes vayan al álbum de ese blog... las imágenes van a ir siempre al álbum de Picasa creado para el blog desde donde las subimos.

Si pinchamos a la derecha de la ventana, donde dice "Álbunes Web de Picasa veremos una vista previa de los albunes que tenemos allí alojados.

Álbunes Picasa


Para acceder a nuestra cuenta de Picasa y ver los albunes de imágenes subidas a nuestros blogs, lo hacemos con los mismos datos de acceso de nuestra cuenta de Blogger.

Nota:
Si aún no sabías que Picasa estaba integrado con Blogger te interesará leer esta información:
Usar Álbumes web de Picasa con Blogger


Para añadir un vídeo es tan sencillo como pinchar en el icono y una vez en la pantalla que se abre, pinchar en Examinar, localizar el vídeo en nuestro PC y pinchar al fin en Unpload.

Añadir vídeo

En cuanto al traductor dispone de dos opciones: Traducir y Definir.
Para usar el Traducir marcamos con el puntero del ratón donde vamos a incluir la palabra traducida en modo Redactar del editor, después escogemos el idioma del que vamos a traducir y el idioma que traduciremos el texto, nos mostrará una lista con las posibles traducciones, pinchamos sobre la que vamos a utilizar y damos en Insertar, la palabra que aparecerá de forma automática donde marcamos con el puntero.

He podido comprobar que en el caso de traducción de frases enteras, se traduce de forma automática, no presenta varias opciones como en el caso de una palabra sola.

El traductor usa la tecnología del Diccionario de Google así que la forma de usarlo es prácticamente la misma.


Traductor editor


En el caso de la opción Definir, los resultados te muestran una serie de resultados en Google a los que, si he de ser sincera, no encuentro ninguna utilidad...

0

El elemento Header (3)

Por defecto, el Header de Blogger no admite demasiadas posibilidades, podemos definir una imagen de fondo, un banner, un texto, no mucho más. En cuanto queremos intentar algo diferente, nos vemos en dificultades así que, para evitar lidiar con los códigos, lo mejor es elimiinar ese widget y empezar desde cero.

Normalmente, sin expandir la plantilla, veremos esto:
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='nombre sitio (cabecera)' type='Header'/>
</b:section>
</div>
Vamos a cambiarlo así:
<div id='header-wrapper'>
<b:section class='header' id='header' />
</div>
De esta forma, eliminamos el gadget que, llegado el caso, podemos agregar en cualquier otro momento, y tenemos la misma sección que teníamos antes, el mismo rectángulo en la parte superior del blog. Ahora, bastaría ir agregando elementos HTML o cualquier otro, tal mo hacemos en la sidebar.

Por ejemplo, vamos a colocar allí un banner de Flash; en este caso, usando las facilidades de una herramienta online como FlashVortex.

Los archivos de Flash son archivos de extensión SWF y como no es posible alojarlos en Blogger mismo, deberemos subirlos a otro servidor, por ejemplo, a Google Sites. Tendremos entonces una URL como esta:
http://sites.google.com/site/misitio/mibanner.swf
Ahora, en Diseño, agregamos un elemento HTML y allí pondremos el código:
<object id="bannerSWF" data="http://sites.google.com/site/misitio/mibanner.swf" width="valor" height="valor" type="application/x-shockwave-flash">
<param value="http://sites.google.com/site/misitio/mibanner.swf" name="movie"/>
<param value="transparent" name="wmode"/>
<param value="always" name="allowScriptAccess"/>
</object>
donde la URL la colocamos dos veces, en el atributo data y en el atributo movie para que se vea en cualquier navegador y reemplazamos los atributos width y height por los valores del ancho y alto de la animación.

Eso es todo.

Si hablamos de una plantilla mínima, no hace falta modificar el CSS. En todo caso, las definiciones elementales son las siguientes:
#header-wrapper {
  margin: 0 auto;
  width: valorpx; /* el valor del ancho de nuestro sitio */
}
#header { 
  text-align: center;
}
Aquí hay un ejemplo online con dos SWFs en el mismo elemento.

MASI INFORMACIÓN: Tratando de entender el Header [1] [2] [3]

0

Mejoras en el editor de entradas

Hasta ayer mismo cuando accedía por Blogger Draft el editor de entradas no mostraba la opción para subir vídeos, ahora ya es posible desde el icono de la barra de herramientas.


Hay otro cambio, han perfeccionado el sistema de subir imágenes donde se informa que los archivos permitidos son JPG, GIF o PNG. y algo que no todos saben, dónde van a parar las imágenes que subimos a Blogger.


Más o menos también nos dice:
"Estas imágenes estarán disponibles para ver y compartir en Álbumes Web de Picasa, servicio de alojamiento gratuito de Google"

Añadieron un desplegable para escoger el blog donde vamos a subir las imágenes, a simple vista perecería que podemos subir imágenes en un blog diferente al que estamos trabajando en ese momento pero no es así.

En Picasa, las imágenes se encuentran clasificadas, si tenemos más de un blog se mostrará una imagen para cada blog a modo de carpeta, si hacemos click sobre esa imagen nos mostrará las imágenes que subimos desde ese blog.
Si subimos una imagen desde el editor de imágenes de Bloger, independientemente del blog donde nos encontremos automáticamente la imagen será subida a Picasa en la carpeta del blog que escogimos al subirla.
Es una buena forma de tener clasificado todo para una fácil localización de imágenes.
En Picasa Web tenemos 1 GB de almacenamiento por cuenta, espacio suficiente para almacenar unas 4.000 fotos de resolución estándar, espacio  suficiente cuando se trata de darle uso personal.



Aquellos que tienen más de un blog por ejemplo de pruebas deben tener en cuenta que cuando se elimina un blog automáticamente se eliminan las imágenes en Picasa.
Está muy bien hacer pruebas en otro blog y escoger el sitio donde mostraremos las imágenes pero sería un problema si escogemos alojarlas en el blog de pruebas para utilizarlas en otro y más tarde eliminamos ese blog.

0

Emoticones y algo más

¿Emoticones en los comentarios? vale, pues alegremos esos comentarios.
¿Qué ya se ha dicho todo sobre ellos y es un tema muy visto? cada día surge una pregunta sobre cómo añadirlos y no hay nada mejor que tener respuesta a esas preguntas.
Los emoticones los añadí hace tiempo de forma muy sencilla, para más tarde eliminarlos y volver a añadirlos, esta vez siguiendo las explicaciones de J.Miur 1 luego hubo una siguiente explicación 2 con ella tenemos la posibilidad de añadir el script en una nueva sección de html.

Al final de su entrada J.Miur hace una observación:
"Si queremos usar otra imagen, la alojamos en algún lado y luego modificamos la dirección URL"
Esa observación fue la que me dió la idea de añadir otras imágenes.
Los comentarios de autor de mi blog, comienzan siempre con esta imagen nada del otro mundo pero me gusta, la añado al principio de cada respuesta y da sensación de orden.

Este sería un ejemplo de emoticon (secreto) en el script que añadimos a la plantilla:

// :-X
cualTexto = cualTexto.replace(/:-\X/g,'<img src="url-imagen-emoticon-secreto.gif" />');

Cada emoticon lleva la url de una imagen asociada al emoticón, podemos sustituir esa imagen por cualquier otra sustituyendo la url por la de nuestra imagen, puede ocurrir que alguna visita piense entonces que tenemos todas las imágenes de los emoticones y al teclear :-X en lugar del emoticon se muestre la imagen que lo sustituye.
Lo que hice fue cambiar la url y sustituir :-X por cualquier otras letras, pongamos por ejemplo X-X

Quedaría así:

// X-X
cualTexto = cualTexto.replace(/X-\X/g,'<img src="url-de-tu-imagen" />');

Para el ejemplo añadí una imagen grande, yo diría exagerada con la idea de ver la diferencia, lo recomendable es añadir imágenes pequeñas tipo favicon que nunca sea mayor al espacio que tenemos en los comentarios.

Es recomendable alojar las imágenes de los emoticones nosotros mismos y sustituir las del script por las nuestras, de esa forma nos evitamos posibles problemas con los archivos de imagen y el servidor donde se encuentran alojadas.

0

Un millón de clicks contra la pobreza


Un millón de clicks contra la pobreza porque para que desaparezca, primero hay que verla.


REFERENCIAS:www.1millionclicksagainstpoverty.org

Suscribirse a: Comentarios (Atom)
 

2009 ·ElHackerZ by TNB

PostsComments