Tres plantillas para Blogger, convertidas y rediseñadas por Randomness (Fernandooo1). Habría cuatro pero ... "estoy trabajando en una plantilla que me pidieron -.- Algo girly para mí, pero ya está casi lista. Es cuestión de publicarla: ¡busco tiempo! twitter"

	Birds on a Wire 2.0 Diseño original: Better in Pink (Madeline D'Amato) Demo online: VER Archivo ZIP: DESCARGAR Información y detalles: VER
	City Scape Theme Diseño original: Tutorial Blog Demo online: VER Archivo TXT: DESCARGAR Información y detalles: VER
	Twilight or Eclipse? Demo online: VER Archivo ZIP: DESCARGAR Información y detalles: VER

Etiquetas: blogger, plantillas

• Mostrar la barra de navegación
• Restaurar la barra de herramientas [Modo seguro]
• Los marcadores
• Borrar el historial de búsquedas [1, 2, 3]
• Borrar los datos privados
• Instalar extensiones
• Resetear la contraseña maestra
• Borrar el historial de descargas
• La memoria [1, 2, 3, 4]
• Restaurar la página de inicio por defecto
• Establecer la página de inicio [1, 2, 3, 4]
• Habilitar JavaScript
• Abrir archivos PDF
• Buscar nuestro perfil en Windows
• Realplayer
• Abrir Firefox en modo seguro
• Las sugerencias en las búsquedas [1, 2, 3, 4]
• Restaurar extensiones
• Desinstalar extensiones y agregados
• Desinstalar temas
• HAbilitar las páginas de estilo

Etiquetas: firefox

<ul type="disc|square|circle">
<li> ....... </li>
</ul>

display: block;
font-family: Times New Roman;
font-size: 12pt; /* lo que equivale a 16px */

/* se separa de arriba y de abajo el equivalente a la altura de la fuente */
margin: 1em 0;

/* se separa de la izquierda el equivalente a dos veces y media el ancho de la fuente */
/* esto lo hace para dejar espacio para colocar el gráfico indicado en type */
padding: 0 0 0 2.5em;

list-style-image: none;
list-style-position: outside;
list-style-type: disc;

<ol type="1|a|A|i|I" start="n">
<li> ....... </li>
</ol>

1 muestra números(1, 2, 3, 4, ...)
a letras en minúscula (a, b, c, d, ...)
A letras en mayúscula (A, B, C, D, ...)
i números romanos en minúscula (i, ii, iii, iv, ...)
I números romanos en mayúscula (I, II, III, IV, ...)

list-style-type: decimal;

<li type="disc|square|circle"> </Ii>
<li type="1|a|A|i|I" start="n"> </li>

margin: 0;
padding: 0;
display: list-item;
line-height: 1.25em;
height: 1.25em
width: 100%
list-style-image: none;
list-style-position: outside;
list-style-type: disc;

<dl>
<dt> ....... </dt>
<dd> ....... </dd>
</dl>

<ul>
<lh id="nombreUnico" class="nombre"> ....... </lh>
<li> ....... </li>
</ul>

Etiquetas: html

Es muy buena la pregunta que se hace Alejandro . Deberíamos empezar a acostumbrarnos a utilizar esta nueva posibilidad que apareció junto con muchas otras y que quedó un poco relegada frente a la conmoción de los comentarios incrustados [1 - 2]

Esta función la encontramos si accedemos al blog a través de Blogger Draft y allí vamos a Configuración | Básico:

Hacemos click en Exportar Blog y ya nos encontraremos en una nueva página donde se nos advierte que lo podemos hacer ya sea para mover el blog a otro servicio o para guardarlo en nuestra PC (más información).

Etiquetas: blogger

Etiquetas: humor, imagenes

La interacción entre ambos grupos es variada; Jones toca el saxo en You know my name y participa en los coros de Yellow submarine. Lennon asiste al Rock & Roll Circus junto a Eric Clapton, Keith Richards, y Mitch Mitchell. Jagger aparece en la versión televisada de All you need is love; Lennon y McCartney cantan en los coros de We love you. En cada disco de los Stones hay una deliberada referencia a un disco previo de The Beatles.

El inicio del llamado rock psicodélico aumenta las tensiones y la aparición de Sgt. Pepper’s obliga a tratar de contrarrestar la hegemonía y aparece Their Satanic Majesties Requests. En 1968 The Beatles (White Album) y luego el "blanco" opuesto: Beggars Banquet. En 1969 Let it be y un poco después Let it bleed. Parece una guerra pero todo queda en familia. Apple y Decca son manejadas por la misma compañía, la ABKCO Managed Company.

En 1968, el mundo estaba al borde de la revolución. Rebeliones estudiantiles en París, la Primavera de Praga, los manifestantes desafían el establishment. Hay disturbios en Europa y en toda Latino América. Son asesinados Robert Kennedy y Martin Luther King. El domingo 17 de marzo, Jagger, de 24 años, camina hacia Grosvenor Square. No es un buen momento personal. Está recuperándose del abuso de drogas; trata de salir de los problemas judiciales en que se ha visto involucrado. El album Their Satanic Majesties es criticado por casi todos, algunos lo acusan de simple plagio. Sgt Pepper y los Beatles están en la cima y hasta la afirmación de que son más populares que Jesús empieza a ser algo más que una broma. Tal vez, quiere confirmar su lugar como el rey demoníaco y al hacerlo, quedarse con el trono del pop.

En Grosvenor Square, la gente se reune para protestar contra la guerra de Vietnam. Todo es un caos. La policía montada carga contra los manifestantes, explotan bombas, se tiran piedras, cientos de personas son detenidas. El verano del amor llegó a su fin. Jagger pasó a convertirse en el arquetipo de la estrella de rock. La imagen de revolucionario la construyó él mismo, ese día de 1968.

Etiquetas: beatlemania, musica

Click en la imagen para previsualizar un modelo reducido.
1152x864	1152x864
1152x864	1152x864
1152x816	1152x864
Descargar el archivo ZIP que contiene las imágenes en formato JPG

Etiquetas: wallpapers

Etiquetas: juegos, flash

La Bloguería

Etiquetas: widgets, flash, sitios

Etiquetas: humor, imagenes

<div id="bloqueArrastrar" style=".......">MOVER</div>
<div id="bloqueSoltar" style="......."> </div>
<script type="text/javascript">
  new Draggable('bloqueArrastrar');
  Droppables.add('bloqueSoltar');
</script>

<div id="bloqueArrastrar" style=".......">MOVER</div>
<div id="bloqueSoltar" style="......."> </div>
<script type="text/javascript">
  new Draggable('bloqueArrastrar', {revert: true});
  Droppables.add('bloqueSoltar', {hoverclass: 'claseHover'});
</script>

<div id="demo1" class="esteSI">MOVER</div>
<div id="demo2" class="esteNO">MOVER</div>
<div id="boqueSoltar"> </div>
<script type="text/javascript">
  new Draggable('demo1', {revert: true});
  new Draggable('demo2', {revert: true});
  Droppables.add('bloqueSoltar', {accept: 'esteSI', hoverclass: 'claseHover'});
</script>

[ aún no se han hecho movimientos ]

<script type="text/javascript">
(function() { 
  var p = $('puzzle'), info = $('puzzleinfo'), moves = 0;
  Sortable.create('puzzle', {
    tag: 'img', overlap: 'horizontal', constraint: false,
    onUpdate: function() {
      info.update('Hasta ahora hubo '   (  moves)   ' movimiento'   (moves > 1 ? 's' : ''));
      if (Sortable.sequence('puzzle').join('') == '123456789')
        info.update('Puzzle resuelto en '   moves   ' movimientos').morph('felicitaciones');
    }
  });
})();
</script>

<style type="text/css">
  #puzzle {margin: 0 auto; width: 450px;} 
  .felicitaciones {color: #FF9933 !important;}
</style>

Etiquetas: scriptaculous

Etiquetas: copyright, noticias

Etiquetas: herramientas, imagenes

Una de las tantas posibilidades de script.aculo.us es el uso de las funciones de Drag and Drop. No es algo que tenga una gran utilidad práctica pero es bastante sencillo de usar.

Para probarlas, debemos seguir el mismo procedimiento que con los efectos; descargar las librerías, alojarlas en un servidor propio y cargarlas en nuestra plantilla. Empecemos con esto ya que es una pregunta repetida y hay varias alternativas.

Si no tenemos nada, debemos de empezar descargando el ZIP que contiene todos los archivos necesarios y luego alojarlos en un servidor propio. Como mínimo, necesitaremos los siguientes scripts:
prototype.js
scriptaculous.js
effects.js
dragdrop.js
el resto son optativos; cada uno de ellos se utiliza para poder implementar funciones especiales (builder.js, controls.js, slider.js, sound.js).

Los agregamos a la plantilla, justo antes de </head>:

<script type="text/javascript" src="URL_prototype.js"></script>
<script type="text/javascript" src="URL_scriptaculous.js?load=effects,dragdrop"></script>

<script type="text/javascript" src="URL_scriptaculous.js?load=effects,dragdrop"></script>

<script src="http://www.google.com/jsapi"></script>
<script>
google.load("prototype", "1.6.0.2");
google.load("scriptaculous", "1.8.1");
</script>

De esta manera se cargarán todos los módulos que existan.

Una última posibilidad es usar Protoculous que es una librería comprimida y que en un solo archivo nos permite usar todas las funciones

Bueno, ahora que ya tenemos los scripts, vamos a ver como funcionan.

<div id="demo"> [ ... el contenido ... ] </div>
<script type="text/javascript"> new Draggable('demo'); </script>

<div style="text-align: center;font-size:17px;">
  La palabra
  <span id="demo1" style="color:#FF0000;font-weight:bold;cursor:move;">MOVER</span>
  se puede arrastrar.
</div>
<script type="text/javascript">new Draggable('demo1');</script>

<img id="demo2" src="URL_imagen"/>
<script type="text/javascript">new Draggable('demo2');</script>

<script type="text/javascript">
new Draggable(IDelemento, opciones);
</script>

var unNombre = new Draggable('demo', {revert: true});
.......
unNombre.destroy();

<div style="border:1px solid #444444; height:250px; overflow:hidden; position:relative;
    margin:10px auto; width:450px;">
  <img style="cursor:move; position:absolute; left:10px; top:10px;"
    id="demoIMG1" src="URL_imagen1" />
  <img style="cursor:move; position:absolute; left:390px; top:10px;"
    id="demoIMG2" src="URL_imagen2" />
  <img style="cursor:move; position:absolute; left:10px; top:190px;"
    id="demoIMG3" src="URL_imagen3" />
  <img style="cursor:move; position:absolute; left:390px; top:190px;"
    id="demoIMG4" src="URL_imagen4" />
</div>
<script type="text/javascript">
  new Draggable('demoIMG1');
  new Draggable('demoIMG2');
  new Draggable('demoIMG3');
  new Draggable('demoIMG4');
</script>

Etiquetas: scriptaculous

<b:includable id='postQuickEdit' var='post'>
   <b:if cond='data:post.editUrl'>
      <span expr:class='"item-control " + data:post.adminClass'>
         <a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
            <span class='quick-edit-icon'>&#160;</span>
         </a>
      </span>
   </b:if>
</b:includable>

Esa sección del elemento Entradas del blog es el que colocaba el famoso ícono que nos permite Editar los posts directamente desde las páginas del blog.

Cuando decía:

<span class='quick-edit-icon'>&#160;</span>

lo que hacía era crear un espacio que creaba una clase CSS donde había una imagen de fondo y todo eso lo aplicaba Blogger de forma automática al cargar una hoja de estilo llamada blog_controls.css.

Eso era lo que no funcionaba, esa imagen no estaba y por lo tanto, el espacio estaba allí (puede buscarse y con suerte encontrarse) pero el ícono no se veía.

Ahora (o vaya a saber desde cuando) parece que han decidido quitar esa parte de la hoja de estilo interna y directamente colocarlo en la plantilla. Por lo tanto, esa sección cambia y este es el nuevo código:

<b:includable id='postQuickEdit' var='post'>
  <b:if cond='data:post.editUrl'>
    <span expr:class='"item-control " + data:post.adminClass'>
      <a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
        <img alt='' class='icon-action' src='http://www.blogger.com/img/icon18_edit_allbkg.gif'/>
      </a>
    </span>
  </b:if>
</b:includable>

El cambio debería resolver el problema definitivamente.

Lo mismo ocurre con el ícono Enviar por EMail. Bastaría buscar el código "viejo":

<span class='item-action'>
  <a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
    <span class='email-post-icon'>&#160;</span>
  </a>
</span>

<span class='item-action'>
  <a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
    <img alt='' class='icon-action' src='http://www.blogger.com/img/icon18_email.gif'/>
  </a>
</span>

Etiquetas: