Wallpapers (algo raros)
0
Son esponjitas que absorben todo lo que ven y escuchan, los mejores imitadores del mundo.
Hoy son escenas irreales que mañana pueden convertirse en reales.
Mejor vídeo del año
Son esponjitas que absorben todo lo que ven y escuchan, los mejores imitadores del mundo.
Hoy son escenas irreales que mañana pueden convertirse en reales.
Aportación de:« Kirei »
0
Blogger: Editar los elementos ocultos
¿Han ocultado elementos de la plantilla y luego no pueden verlos en la ventana Diseño | Elementos de la página?
Es molesto pero tiene solución, basta que busquemos en la plantilla el ID de ese elemento rebelde y luego, agreguemos algo así antes de </b:skin>:
Es molesto pero tiene solución, basta que busquemos en la plantilla el ID de ese elemento rebelde y luego, agreguemos algo así antes de </b:skin>:
body#layout #nombreID {display: block;}y si está en la sidebar o en algún DIV "importante", casi mejor colocar:
body#layout #sidebar-wrapper #nombreID {display: block;}Lo mismo podemos hacer con elementos que usan la propiedad display con valores como fixed o absolute si es que estos se ven mal:
body#layout #nombreID {position: static;}En las primeras plantillas de Blogger aparecían unas definiciones CSS que controlaban (o ayudaban a controlar) la forma en que se muestran los elementos en esa ventana de diseño; cosas como:
/** Page structure tweaks for layout editor wireframe */
body#layout #header { ... }
body#layout #main { ... }
body#layout #sidebar { ... }
body#layout #outer-wrapper { ... }
body#layout #footer { ... }
Todas ellas no definen propiedades del blog en si mismo sino que son las propiedades de estilo de la página que se abre al utilizar la solapa Diseño | Elementos de la página donde añadimos o editamos los elementos de la página.
No son nada sencillos de modificar, hay que usar prueba y error pero a veces, no hay más remedio.
En la entrada Modificar el layout del blog de Eulalia hay una serie de instrucciones que pueden ayudar a resolver problemas.
No son nada sencillos de modificar, hay que usar prueba y error pero a veces, no hay más remedio.
En la entrada Modificar el layout del blog de Eulalia hay una serie de instrucciones que pueden ayudar a resolver problemas.
0
En la entrada de Blog and Web donde Francisco nos presenta la "chuleta" tenéis todas indicaciones pertinentes para usarla, además de poder verla online, imprimirla o descargarla.
También podéis ayudar a difundirla a través de vuestros blogs, bitacoras.com o meneame, etc. tal como Francisco apunta en la entrada.
Una guía indudablemente útil la de Francisco y que junto a el primer framework para Blogger que hace algún tiempo nos presentaba Iván el administrador de Zona Cerebral (también basado en la plantilla Mínima de Blogger), estoy segura se convertirán en "libros de cabecera" para cualquiera que esté interesado en aventurarse en el diseño de plantillas Blogger.
"Chuleta" CSS para Blogger
Francisco de Blog and Web ha tenido la genial idea de crear una "chuleta" para ayudarnos, como el mismo dice, a entender el esquema general de las plantillas Blogger y más concretamente las clases e identificadores que usan la mayoría de las plantillas.
La "chuleta" está basada en la plantilla Mínima de Blogger y es la primera guía de este tipo que he visto para Blogger, al menos en español.
En la entrada de Blog and Web donde Francisco nos presenta la "chuleta" tenéis todas indicaciones pertinentes para usarla, además de poder verla online, imprimirla o descargarla.
También podéis ayudar a difundirla a través de vuestros blogs, bitacoras.com o meneame, etc. tal como Francisco apunta en la entrada.
Una guía indudablemente útil la de Francisco y que junto a el primer framework para Blogger que hace algún tiempo nos presentaba Iván el administrador de Zona Cerebral (también basado en la plantilla Mínima de Blogger), estoy segura se convertirán en "libros de cabecera" para cualquiera que esté interesado en aventurarse en el diseño de plantillas Blogger.
0
Otra forma de crear páginas estáticas
Blogger es un servicio de blogs, eso no es novedad. Un blog tiene una característica fundamental, las entradas se muestran ordenadas cronológicamente y todas y cada una de ellas aparecerán listadas en un elemento como Archivos. No hay manera de ocultarlas. A diferencia de otros servicios carece de las llamadas páginas estáticas y esta es una de las ventajas de sistemas como WordPress.
Una página estática no es otra cosa que una entrada atemporal, está fuera del orden cronológico y suelen usarse para agregar información adicional; por ejemplo, la página About que tanto vemos, el formulario para contactos, índices diversos o incluso el blogroll.
Es cierto que tenemos fomas de simular ese tipo de página ya sea personalizando ciertos posts de tal manera que no parezcan entradas, creando blogs auxiliares pero, no es lo mismo.
Hace mucho, descargué un ZIP
con un demo donde se mostraba una alternativa para crear páginas estáticas en Blogger. Lamentablemente, no encuentro la página original pero, de cualquier manera, el demo incluye la página con las explicaciones. Su autor es Haochi Chen de Googlified y él mismo lo dice: "no es una gran solución pero funciona" 
Yo disiento con eso, creo que es una buena idea aunque no es sencilla de aplicar si no se tienen conocimientos elementales de JavaScript pero, de todas formas, es un punto de partida para experimentar.
Para implementarlo, he cambiado algunos detalles de tal manera que podamos emplear la menor cantidad de archivos externos. De todas maneras, ciertas cosas deberán adaptarse a la estructura de cada plantilla así que hay que hacerlo con cuidado.
Veamos. Lo primero que necesitamos es el script cuyo contenido se encuentra en este archivo. Allí, debemos cambiar y verificar algunas cosas así que vamos a la plantilla y lo agregaremos al final, justo antes de </body>. Si tenemos agregados otros scripts al final de la plantilla como Google Analytics o Twitter, convendría que lo pusiéramos antes de estos. No, la explicación no es muy precisa pero diría que lo ideal sería buscar el último </div> de la plantilla y agregarlo justo allí debajo.
Como hay que hacerle alguna modificación para adaptarlo a cada sitio, vamos a ver el código:
Una página estática no es otra cosa que una entrada atemporal, está fuera del orden cronológico y suelen usarse para agregar información adicional; por ejemplo, la página About que tanto vemos, el formulario para contactos, índices diversos o incluso el blogroll.
Es cierto que tenemos fomas de simular ese tipo de página ya sea personalizando ciertos posts de tal manera que no parezcan entradas, creando blogs auxiliares pero, no es lo mismo.
Hace mucho, descargué un ZIP
con un demo donde se mostraba una alternativa para crear páginas estáticas en Blogger. Lamentablemente, no encuentro la página original pero, de cualquier manera, el demo incluye la página con las explicaciones. Su autor es Haochi Chen de Googlified y él mismo lo dice: "no es una gran solución pero funciona" Yo disiento con eso, creo que es una buena idea aunque no es sencilla de aplicar si no se tienen conocimientos elementales de JavaScript pero, de todas formas, es un punto de partida para experimentar.
Para implementarlo, he cambiado algunos detalles de tal manera que podamos emplear la menor cantidad de archivos externos. De todas maneras, ciertas cosas deberán adaptarse a la estructura de cada plantilla así que hay que hacerlo con cuidado.
Veamos. Lo primero que necesitamos es el script cuyo contenido se encuentra en este archivo. Allí, debemos cambiar y verificar algunas cosas así que vamos a la plantilla y lo agregaremos al final, justo antes de </body>. Si tenemos agregados otros scripts al final de la plantilla como Google Analytics o Twitter, convendría que lo pusiéramos antes de estos. No, la explicación no es muy precisa pero diría que lo ideal sería buscar el último </div> de la plantilla y agregarlo justo allí debajo.
Como hay que hacerle alguna modificación para adaptarlo a cada sitio, vamos a ver el código:
<script type='text/javascript'>
//<![CDATA[
// esta función escribe el script que cargará la página estática
function get(url) {
var script = document.createElement("script");
script.setAttribute('type', 'text/javascript');
script.setAttribute('src', url);
document.body.appendChild(script);
}
// función creada por Dieter Raber de http://dieterraber.net
function readGet() {
var _GET = new Array();
var uriStr = window.location.href.replace(/&/g, '&');
var paraArr, paraSplit;
if(uriStr.indexOf('?') > -1){
var uriArr = uriStr.split('?');
var paraStr = uriArr[1];
} else {
return _GET;
}
if(paraStr.indexOf('&') > -1) {
paraArr = paraStr.split('&');
} else {
paraArr = new Array(paraStr);
}
for(var i = 0; i < paraArr.length; i++) {
paraArr[i] = paraArr[i].indexOf('=') > -1 ? paraArr[i] : paraArr[i] + '=';
paraSplit = paraArr[i].split('=');
_GET[paraSplit[0]] = decodeURI(paraSplit[1].replace(/\+/g, ' '));
}
return _GET;
}
// es la función que "escribe" la página estática y debemos editar
function page() {
elHTML = '<div class="post">';
elHTML += '<h3 class="post-title"><a href="http://miSitio.blogspot.com/?page=';
elHTML += tituloPE.toLowerCase();
elHTML += '">' + tituloPE + '</a></h3>';
elHTML += '<div class="post-body"><p>' + contenidoPE + '</p>';
elHTML += '<div style="clear: both;"></div>';
elHTML += '</div></div>';
document.getElementById('main').innerHTML = elHTML;
document.getElementById('main').style.display = 'block';
}
// las variables
var _GET = readGet(); // crea la URL
var ifPAGE = false; // TRUE si estamos mirando una página estática
var tituloPE = ''; // el título de la página estática
var contenidoPE = ''; // el contenido de la página estática
// cargamos las diferentes páginas
switch(_GET['page']) {
case 'paginaEstatica-1': // ejemplo 1
get('URL_paginaEstatica1.txt');
ifPAGE = true;
break
case 'paginaEstatica-2': // ejemplo 2
get('URL_paginaEstatica2.txt');
ifPAGE = true;
break
default:
}
// ejecutar y mostrar la página
if (ifPAGE == true) {
window.onload = function(){
page();
}
}
//]]>
</script>
Lo que hará el script es usar el DIV main que es el que por defecto usa Blogger para mostrar los posts y "escribir" su contenido; por eso es importante verificar que los nombres de las clases sean las de nuestra plantilla y ahí es donde debemos tener cuidado si lo que queremos es crear algo que tenga las mismas características que un post. Este es el esquema básico del DIV main:
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'>
.......
<b:includable id='post' var='post'>
<div class='post uncustomized-post-template'>
.......
<h3 class='post-title'> ....... </h3>
.......
<div class='post-body'>
.......
<div style='clear: both;'/>
</div>
</div>
</b:includable>
.......
</b:widget>
</b:section>
Otra cosa que debemos cambiar y adaptar a nuestras necesidades es la configuración de las páginas que vayamos a crear. Eso, en el modelo original es lo que se ve en en el archivo page-config.js pero, me parece mejor colocarlo directamente junto con el otro y ponerlo en la plantilla para así, poder editarlo con facilidad.
El esquema para agregar una página es este:
El esquema para agregar una página es este:
case 'nombrePaginaEstatica':
get('URL_paginaEstatica.txt');
ifPAGE = true;
break
nombrePaginaEstatica es un nombre que le daremos a la página estática para identificarla
URL_paginaEstatica.txt es la dirección URL del archivo de texto con el contenido de esa página que habremos subido a algún servidor
Cada página que creemos, deberá tener ese esquema y el nombrePaginaEstatica deberá ser único.
Ufff, suena engorroso; ya saben ahora por qué lo tuve tantos meses guardado pero, vale la pena seguir adelante. Paciencia.
Hasta aquí, tenemos el script. Podemos guardar la plantilla y, si no cometimos errores de sintaxis, el blog no sufrirá cambios; nada será distinto de lo que era. Ahora, debemos continuar y lo lógico, sería crear las páginas estáticas.
Esas páginas, originalmente eran archivos JS pero, como es más sencillo alojar archivos TXT, lo mejor es hacerlos así. Tienen sólo dos partes, dos variables, en una va el título que se mostrará y en la otra el contenido que es código HTML.
Cada página deberá tener algo así:
URL_paginaEstatica.txt es la dirección URL del archivo de texto con el contenido de esa página que habremos subido a algún servidor
Cada página que creemos, deberá tener ese esquema y el nombrePaginaEstatica deberá ser único.
Ufff, suena engorroso; ya saben ahora por qué lo tuve tantos meses guardado pero, vale la pena seguir adelante. Paciencia.
Hasta aquí, tenemos el script. Podemos guardar la plantilla y, si no cometimos errores de sintaxis, el blog no sufrirá cambios; nada será distinto de lo que era. Ahora, debemos continuar y lo lógico, sería crear las páginas estáticas.
Esas páginas, originalmente eran archivos JS pero, como es más sencillo alojar archivos TXT, lo mejor es hacerlos así. Tienen sólo dos partes, dos variables, en una va el título que se mostrará y en la otra el contenido que es código HTML.
Cada página deberá tener algo así:
var tituloPE = 'EL TITULO A MOSTRAR';
var contenidoPE = 'EL CONTENIDO A MOSTRAR';
Cada una de ellas las colocaremos entre comillas simples (') y allí estará la única restricción; el contenido puede ser cualquier cosa pero no incluir comillas simples; si las necesitamos, debemos reemplazarlas por su equivalente '
¿Cómo creamos ese contenido? Con cualquier editor, incluyendo el de Blogger. Basta escribir y copiar el código HTML donde deberemos agregar manualmente los saltos de línea; es decir, si queremos que algo se muestre en una línea distinta, agregamos <br/> y si queremos dejar una línea en blanco, agregamos <br/><br/> o bien podemos colocar los párrafos entre etiquetas <p> y </p>.
¿Funcionará cualquier código? En principio sí pero, habrá que probar. Este es un ejemplo de un archivo TXT
Ahora ya está completo y lo único que falta es colocar el enlace donde nos guste, utilizando esta sintaxis:
¿Cómo creamos ese contenido? Con cualquier editor, incluyendo el de Blogger. Basta escribir y copiar el código HTML donde deberemos agregar manualmente los saltos de línea; es decir, si queremos que algo se muestre en una línea distinta, agregamos <br/> y si queremos dejar una línea en blanco, agregamos <br/><br/> o bien podemos colocar los párrafos entre etiquetas <p> y </p>.
¿Funcionará cualquier código? En principio sí pero, habrá que probar. Este es un ejemplo de un archivo TXT
Ahora ya está completo y lo único que falta es colocar el enlace donde nos guste, utilizando esta sintaxis:
<a href="?page=nombrePaginaEstatica">ENLACE</a>Quiere decir que, para usar el archivo de texto about.txt del ejemplo, podría poner esto en el script:
case 'about':
get('http://vagabundia.bolsanegra.net/jsBLOG/about.txt');
ifPAGE = true;
break
Y usar un enlace así:
<a href="?page=about">CLICK PARA VER</a>
Cada página nueva que creamos, la agregamos al script:
case 'demoPage1':
get('URL_demoPAGE1.txt');
ifPAGE = true;
break
case 'demoPage2':
get('URL_demoPAGE2.txt');
ifPAGE = true;
break
Y los enlaces donde quisiéramos mostrarlos, usando textos o imágenes; como parte de un menú o en la sidebar:
<a href='?page=demoPage1'>DEMO-1</a>
<a href='?page=demoPage2'>DEMO-2</a>
Un último detalle que tiene que ver más con lo estético que con otra cosa, es ver si podemos resolver la forma en que se nos muestra la página estática.
Como lo que hace el script es "re-escribir" la página donde nos encontremos eliminando parte de su contenido y lo reemplaza por el contenido del archivo de texto, la ubicamos al final y la ejecutamos cuando está cargada. Para reemplazar algo, primero debe existir ese "algo".
Esto, produce una situación indeseada, primero se nos mostrará una cosa y luego, cambiará y se nos mostrará otra.
Para disimular ese efecto, agregaremos un pequeño script justo antes de </head>, leeremos la URL de la página que se mostrará y si detectamos que en ella se encuentran los caracteres ?page significa que será una página estática así que, temporalmente, ocultaremos el DIV main y sólo lo mostraremos cuando ya esté terminado el reemplazo:
Como lo que hace el script es "re-escribir" la página donde nos encontremos eliminando parte de su contenido y lo reemplaza por el contenido del archivo de texto, la ubicamos al final y la ejecutamos cuando está cargada. Para reemplazar algo, primero debe existir ese "algo".
Esto, produce una situación indeseada, primero se nos mostrará una cosa y luego, cambiará y se nos mostrará otra.
Para disimular ese efecto, agregaremos un pequeño script justo antes de </head>, leeremos la URL de la página que se mostrará y si detectamos que en ella se encuentran los caracteres ?page significa que será una página estática así que, temporalmente, ocultaremos el DIV main y sólo lo mostraremos cuando ya esté terminado el reemplazo:
<script type='text/javascript'>
// <![CDATA[
var uriStr = window.location.href.replace(/&/g, '&');
if(uriStr.indexOf('?page') > -1){
document.write('<style>#main{display:none;}</style>')
}
// ]]>
</script>
No, no es algo que puede hacerse con un par de clicks pero vale la pena intentarlo. En este blog de pruebas hay un demo online con cuatro páginas estáticas a las que se accede desde un menú y que muestran diferentes altenativas, simples o complejas.
Se crean dinámicamente pero son enlaces normales por lo tanto, también son accesibles desde otra página web así que esas páginas, también podrían ser abiertas desde acá:
Se crean dinámicamente pero son enlaces normales por lo tanto, también son accesibles desde otra página web así que esas páginas, también podrían ser abiertas desde acá:
0
UniTip: Más tooltips
UniTip es otro de esos scripts para mostrar tooltips al pasar el puntero del ratón sobre deteminados enlaces.
Es muy liviana y utiliza CSS para crear un fondo con imágenes así que es bastante sencillo reemplazarlas por imágenes personales sin necesidad de modificar códigos (las que trae por defecto son aptas para sitios con fondos claros):
Es muy liviana y utiliza CSS para crear un fondo con imágenes así que es bastante sencillo reemplazarlas por imágenes personales sin necesidad de modificar códigos (las que trae por defecto son aptas para sitios con fondos claros):
En principio, funciona bien en cualquier navegador y podemos descargala desde este ZIP . Allí encontraremos el archivo unitip.js que es el único necesario y que podemos alojar en un servidor externo y luego insertarlo antes de </head> de este modo:
. Allí encontraremos el archivo unitip.js que es el único necesario y que podemos alojar en un servidor externo y luego insertarlo antes de </head> de este modo:<script type="text/javascript" src="URL_unitip.js"></script>O bien abrirlo con el block de notas y luego, copiar y pegar su contenido también antes de </head> pero, de este modo:
<script type='text/javascript'>
//<![CDATA[
... aqui pegamos el contenido del archivo ...
//]]>
</script>
Lo que nos faltaria es el CSS que es mejor agregarlo a nuestra plantilla inmediatamente después del script:
<style type='text/css'>
#unitip {
display: none;
position: absolute;
top: -1000px;
z-index: 1000;
/* podemos establece la fuente y el color de los textos */
color: #234;
font-family: Tahoma;
font-size: 11px;
}
#unitippoint, #unitipmid, #unitipcap {
display: block;
left: 0px;
position: relative;
top: 0px;
width: 145px;
}
#unitippoint {
background: url(URL_tippoint.png) no-repeat;
height: 19px;
overflow: hidden;
}
#unitipmid {
background: url(URL_tipmid.png) repeat;
height: auto;
padding: 5px 15px;
width: 115px;
}
#unitipcap {
background: url(URL_tipcap.png) no-repeat;
height: 7px;
overflow: hidden;
}
</style>
Ese modelo corresponde al ejemplo para fondos claros y las imágenes ya están alojadas en ImageShack. Basta editarlas, realojarlas y cambiar las URLs para utilizar otras.
El mismo script es configurable. Así, por defecto, se puede aplicar a cualquier etiqueta de enlace (A) o imagen (IMG) pero, podemos editar el script y cambiar eso. El original dice así:
El mismo script es configurable. Así, por defecto, se puede aplicar a cualquier etiqueta de enlace (A) o imagen (IMG) pero, podemos editar el script y cambiar eso. El original dice así:
var uniTipTag = "a,img"; //Which tag do you want to uniTip-ize? Keep it lowercase. No spaces around commas.//y podríamos agregar otras etiquetas de este modo:
var uniTipTag = "a,img,p,span";Lo mismo ocurre con la posición relativa donde se mostrará el tooltip:
var uniTipX = 0; // X offset from cursor//
var uniTipY = 15; // Y offset from cursor//
Lo aplicamos a una etiqueta indicando una clase especial class="tip" y colocamos lo que queremos mostrar, en el atributo title. Por ejemplo:
<a class="tip" title="Lo que veremos en el tooltip" href="una_URL"> ENLACE </a>
El nombre de la clase, también puede cambiarse, editando el script:
var uniTipClass = "tip";También es posible crear contenido que contenga HTML. Para eso, lo más probable es que debamos cambiar los caracteres de apertura y cierre de las etiquetas por sus correspondientes entities. Es decir, en lugar de < escribimos < y en lugar de > escribimos >. Por ejemplo:
<a class="tip" title="la primera línea del tooltip ...<br/>y la segunda línea del tooltip ..." href="una_URL"> ENLACE </a>
Un ejemplo concreto es el que puede verse en los diferentes enlaces de esta entrada.
Suscribirse a:
Entradas (Atom)