Cargando...
Menu Ver sumario
¿Te gustó lo que viste?
Recomiéndanos

Post aleatorio






Gadget de solapas

31/05/2010
Como cada vez tenemos más llena de cacharritos la barra lateral, quizás a más de uno nos venga bien usar un contenedor con pestañas para contenido diverso. La cosa funcionaría tal que así:

Este es el contenido que se verá al pulsar la Pestaña 1.

Aquí podría ir un texto o cualquier otro componente: una imagen, un enlace, un vídeo... incluso podemos poner algún script como hemos hecho en las siguientes pestañas.
Entradas
Comentarios


Hay muchos scripts para poder formar este tipo de recuadros con pestañas, pero este en concreto se consigue con el llamado SimpleTabs, de Komrade. SimpleTabs incluye la grabación de una cookie que "recuerda" la última pestaña visitada y, ciertamente, el código es tan sencillo, que aprovechamos el propio invento para explicar cómo instalarlo...

Esta es la parte que hay que poner antes de </head>.

Si no quereis quedaros colgados cualquier día, lo recomendable es que descargueis el fichero simpletabs_1.3.js desde el enlace y lo realojeis en vuestro sitio habitual para estos menesteres (¿Google Sites?). Luego cambiais la dirección por la que aquí se muestra marcada en verde y que sólo está para que podais hacer una prueba inicial.

<script src='http://oloblogger.googlecode.com/files/simpletabs_1.3.js' type='text/javascript'/>
Este es el CSS básico para el estilo del cuadro y de las pestañas. Cuando lo tengais funcionando podreis cambiar colores, tamaños, efecto hover, etc. Como siempre, se ha de insertar antes de ]]></b:skin>.

div.simpleTabs {padding:10px; }
ul.simpleTabsNavigation {margin:0 10px; padding:0; text-align:left; }
ul.simpleTabsNavigation li {list-style:none; display:inline; margin:0; padding:0; }
ul.simpleTabsNavigation li a {border:1px solid #E0E0E0; padding:3px 6px; background:#F0F0F0; font-size:14px; text-decoration:none; font-family:Georgia, "Times New Roman", Times, serif; }
ul.simpleTabsNavigation li a:hover {text-decoration:none; background-color:#F6F6F6; font-family:Georgia, "Times New Roman", Times, serif; }
ul.simpleTabsNavigation li a.current {background:#fff; color:#222; border-bottom:1px solid #fff; }
div.simpleTabsContent {border:1px solid #E0E0E0; padding:5px 15px 15px 15px; margin-top:3px; display:none; }
div.simpleTabsContent.currentTab {display:block; }
Con lo anterior todavía no nos saldrá nada, pues nos falta montar con HTML, la lista para las pestañas y los DIV's que contendrán la información. La estructura sería esta:

<div class="simpleTabs">
<ul class="simpleTabsNavigation">
<li><a href="javascript:void(0);">Pestaña 1</a></li>
<li><a href="javascript:void(0);">Pestaña 2</a></li>
<li><a href="javascript:void(0);">Pestaña 3</a></li>
</ul>
<div class="simpleTabsContent">Contenido pestaña 1</div>
<div class="simpleTabsContent">Contenido pestaña 2</div>
<div class="simpleTabsContent">Contenido pestaña 3</div>
</div>


Como rezaba el contenido de la pestaña CSS, las clases que forman las pestañas y el contenido del recuadro, son configurables, pudiendo conseguir cosas algo más sofisticadas que las que estais viendo. Los selectores que manejan lo básico son los siguientes, aunque podríais incorporar alguno más si fuera necesario.

div.simpleTabs: El gagdet completo
ul.simpleTabsNavigation: La línea que forma las pestañas
ul.simpleTabsNavigation li: Cada una de las pestañas
ul.simpleTabsNavigation li a: El enlace de texto en cada pestaña
ul.simpleTabsNavigation li a:hover: Efecto hover
ul.simpleTabsNavigation li a.current: La pestaña activa
div.simpleTabsContent: El contenido de los recuadros
div.simpleTabsContent.currentTab: 'Block', para que el recuadro activo se vea

El HTML lo podeis poner en un post, como en estos ejemplos o en un gadget tipo HTML.

Para crear una pestaña que simule el "cierre" del gadget, es suficiente con no meter ningún contenido en el DIV simpleTabsContent correspondiente.


Fondos basados en dibujos de Escher

26/05/2010
Siempre me han gustado los dibujos de Maurits Cornelis Escher, pero como en su época todo se hacía a mano, era complicado aprovechar los originales para utilizarlos como fondos. Ni siquiera sus teselas son realmente tales porque no coinciden los bordes entre sí de manera exacta.

Pero en fin, con un poco de potochop y mucho corta-pega, algunos he podido enmendar y aquí los tenéis. La mayoría están disponibles en un tamaño más grande, sólo con pinchar en ellas, aunque posiblemente necesiteis redimensionar para hacerlas más pequeñas. Eso, cada uno al gusto.

Si necesitais algo con colores más homogéneos, en este fichero zip las teneis todas juntas y también algunas variaciones en sepia, para fondo claro o para fondo oscuro.















Estos dos últimos servirán si se colocan con repetición horizontal y añadiendo color negro para cubrir la parte de abajo.

body {
background: url("http://dirección_imagen") repeat-x #000000;
}


Blogger. Estructura básica de la plantilla. 2

24/05/2010
Continuamos intentando descifrar la estructura de una plantilla Blogger, con el fin de saber dónde debemos poner/modificar/eliminar, aquellas cosas necesarias para cambiar el aspecto de nuestro blog.

Ya vimos la estructura general (HTML, HEAD-BODY) y ahora seguimos por otras etiquetas que podemos incorporar en la parte de la cabecera. Hasta aquí teníamos...

<HTML>

 <HEAD>

   <TITLE>Título página</TITLE>
   <b:skin><!--[CDATA[/*
     Código CSS
   ]]--></b:skin>

 </HEAD>

 <BODY>
   Contenido
 </BODY>

</HTML>

Pero dentro de <head> todavía tienen cabida en esta plataforma algunas cosillas más. Por un lado, se podrían colocar etiquetas META que tienen distintas utilidades. No son en absoluto necesarias, pero sí convenientes mayormente para cuestiones de posicionamiento.

<meta name='title' content='Oloblogger'/>


Aquí es dónde van también los enlaces a hojas de estilo externas caso de que queramos usarlas.

<link href='URL_FICHERO_CSS' type='text/css' />


Y aquí metemos un inciso para en lo posible, rebajar la tensión a la hora de modificar la propia plantilla. La hoja de estilo en cascada es simplemente un documento de texto dónde se incluyen las instrucciones CSS para dar formato al blog y no gestiona en absoluto el contenido, por lo que su modificacion, por muy mal que lo hagamos, nunca podrá destruir nuestras entradas.

Así pues, se puede experimentar y trastear el estilo sin problemas, especialmente si usamos Vista Previa antes de Guardar, porque podremos observar casi todos los cambios que hemos producido antes de que sean definitivos. En el peor de los casos, con cargar una nueva plantilla, el peor de los desastres se arregla.

Y repito: las entradas no se pierden por modificar la plantilla. La única manera de hacerlo es pinchando en Suprimir un post. Si aparte de todo lo explicado, tenemos la precaución de tener copias de seguridad de nuestra plantilla, con las dos o tres últimas versiones modificadas por nosotros, siempre podremos volver a la última versión operativa sin mayores problemas.


Como ya se dijo en el anterior post sobre este tema de la estructura, la hoja de estilo en Blogger, a diferencia de otros sitios, va insertada en el propio código, entre etiquetas SKIN. Este es el motivo principal por el que podreis leer en el anterior enlace sobre hojas externas, que no es muy buena idea usarlas en Blogger. Pero ahí queda la referencia para el que lo necesite.

A propósito del estilo, para nuestra propia memoria es bueno introducir comentarios en toda la plantilla pero mientras que en el resto de ella los comentarios van entre <!-- y -->, en la parte CSS los comentarios tienen que ir entre los símbolos /* y */ para que no se interpreten.

/* CABECERA */
#container {
width:817px;
margin:0 auto;
position:relative;
height:252px;
}

Hay un caso especial de comentarios dentro de SKIN, que realmente no son tales. Son las variables de estilo que las plantillas Blogger utilizan y que se ajustan desde Fuentes y Colores, en la pestaña Diseño de nuestro panel de control. En el siguiente trozo podeis ver el aspecto que tienen y en concreto, las de nombre bgcolor (color de fondo principal) y textcolor (color de fuente principal). Para ajustarlas desde aquí, sería suficiente con cambiar el valor de value.

/* Variable definitions
====================
<Variable name="bgcolor" description="Page Background Color"
type="color" default="#000" value="#000000">
<Variable name="textcolor" description="Text Color"
type="color" default="#ccc" value="#cccccc">
...

En este mismo sitio (head) podemos meter nuestro favicono, ya que a fin de cuentas, esto se logra con etiquetas LINK, igual que ocurre con las hojas de estilo y este es el lugar adecuado para insertar esas etiquetas.

También al principio de la plantilla y siempre dentro de <head>, se pueden poner los SCRIPTS que queramos utilizar en el blog, aunque también se pueden insertar después de dónde termina el CSS (]]--></b:skin>), o lo que el lo mismo, justo antes del cierre </head>. En ambos casos, el script funcionará bien, pero por seguir un poco de orden, lo mejor es que lo insertemos en el último lugar indicado.

<HTML>

<HEAD>

  Etiquetas meta
  Enlaces a hojas de estilo externas
  Enlace favicono
  Scripts
  <TITLE>Título página</TITLE>
  <b:skin><!--[CDATA[/*
    Variables de estilo Blogger
    Código CSS
  ]]--></b:skin>

  Scripts
</HEAD>

<BODY>
  Contenido
</BODY>

</HTML>

Sobre los scripts introducidos directamente en la plantilla, comentar que puede hacerse de dos maneras. Puesto que los scripts son también básicamente ficheros de texto con una serie de instrucciones, una de ellas será hacer una llamada a ese fichero con SRC. La segunda será introduciendo directamente el código en la plantilla. En ambos casos tendremos que utilizar etiquetas SCRIPT para que se interpreten adecuadamente y en el segundo, es conveniente poner unos códigos especiales para que Blogger no los rechace. Respectivamente, tendrían un formato como estos:

<script src='URL_FICHERO_JS' type='text/javascript'></script>


<script type='text/javascript'>
//<![CDATA[
CODIGO DEL SCRIPT
//]]>
</script>


Y nos queda el BODY...


Flickrslidr. Presentacion de imágenes de Flickr

21/05/2010
FlickrSlidr es otra manera de mostrar imágenes de Flickr mediante una presentación automática. Pueden ser imágenes nuestras, previamente subidas a este servicio o bien otras que pertenezcan a determinado usuario, set o grupo.


Created with Admarket's flickrSLiDR.


Al acceder a la página encontramos directamente un formulario dónde introducir (en este mismo orden):
  • la dirección del usuario (set o grupo)
  • etiquetas para seleccionar determinadas imágenes de entre todas las disponibles en la URL seleccionada al principio (opcional e incompatible con la siguiente opción)
  • un texto, con el mismo fin que el anterior (opcional e incompatible con la anterior opción)
  • ancho del visor en pixels
  • alto del visor en pixels
  • una casilla de verificación para que al generar el código podamos ver una vista previa debajo de este
  • casilla de verificación para usar un objeto en lugar de un iframe (en caso de duda, no seleccionar)
  • casilla de verificación para mostrar sólo las imágenes marcadas como favoritas

Una vez seleccionado todo a nuestro gusto, con el botón Create Slideshow!, obtenemos el código para poder insertar la presentación en nuestro blog.


Algunas dudas y problemas comunes solventados

19/05/2010
Preguntas frecuentes con soluciones nada complicadas.

Alojar ficheros flash (swf).
Muchos no sabeis dónde poder subir vuestras intros, vídeos o juegos flash para que se puedan mostrar en vuestra web. La mayoría de alojamientos no permiten el hotlinking y los que sí nos dejan, no permiten ficheros SWF. Actualmente, al menos hay dos desde los que sí se puede: Google Sites y Fileden. Con Imageshack, alguna vez también he logrado subir ficheros de este tipo, pero se conoce que los pillé haciendo pruebas porque no siempre funciona, aunque no cuesta mucho probar.


Gadget de seguidores invisible.
El artilugio ha desaparecido, no se ve y sólo se aprecia el espacio correspondiente en blanco. Esto ocurre cuando se tiene instalado prototype/scriptaculous. Solución, muy sencilla, explicada por Vagabundia, mediante la instalación de un pequeño parche en los cargadores de estas librerías.


Anuncios/Pop-Up's espontáneos.
A veces aparecen anuncios en nuestros blogs que no hemos colocado expresamente. Si tenemos en cuenta que hasta la fecha, Blogger no pone publicidad de forma automática, lo más común es que algún gadget externo insertado por nosotros, sea la causa. Por ejemplo, muchos contadores de visitas lo hacen, con la particularidad de que "recuerdan" vuestra IP y vosotros sois los únicos que no veis dicha publicidad. Cuando alguien os comente algo al respecto o incluso sólo a modo de revisión periódica, no viene mal comprobar eso desde otro ordenador de cuando en cuando.

La solución es ir anulando uno a uno los gadgets externos, hasta encontrar cual es el causante. Para anular sin eliminar del todo, podeis encerrar el código de un gadget entre símbolos de comentarios (<!-- -->). De esta manera podreis restablecerlo posteriormente, una vez comprobado que no era el que daba problemas, simplemente borrando esos símbolos.


Ocultar barra lateral en páginas estáticas... y algo más.
Desde que saltaron a la palestra las páginas estáticas para Blogger, muchos quereis saber cómo hacer para que dichas páginas tengan un aspecto algo distinto a las entradas normales. Todo esto lo tiene publicado Ciudad Blogger, dónde podeis encontrar desde cómo ocultar la sidebar en páginas estáticas, hasta cómo mostrarlas de forma distinta al resto del blog.


"Leer más" indeseado en páginas estáticas.
Hay un truco para colocar fácilmente el estilo de sumarios (leer más) en nuestro blog. El sistema funcionaba (y funciona) perfectamente, pero cuando surgieron las páginas estáticas, se presentó el problemilla de que en estas salía el enlace "Leer más", aún a pesar de que dichas páginas no salen nunca resumidas. La forma de arreglar esto se reduce a cambiar los condicionales que en un principio llevaba el sistema.


Alojar scripts para Blogger

17/05/2010
Una antigua demanda de los usuarios de Blogger es poder alojar en este mismo servicio nuestros scripts, así como otro tipo de ficheros ahora mismo vedados. Como esto ya colea tiempo y puede que aún quede un buen trecho para que se resuelva de manera óptima, a continuación veremos distintas alternativas para poder utilizar ficheros javascript en los blogs de esta plataforma.

1. SCRIPT DIRECTAMENTE EN LA PLANTILLA

Una primera opción es agregar el código del script que queremos utilizar, directamente en la plantilla.

Muchas veces nos facilitan una línea de codigo como la siguiente, que lo que hace es llamar al script desde su ubicación original. Es la forma más fácil de usarlo, pero la menos conveniente en cuanto que dependemos de que el fichero del script, se mantenga indefinidamente accesible y eso no depende más que del propietario. Para alojarlo nosotros mismos necesitamos abrir el fichero .js original y copiar su contenido. La dirección será lo que en la línea de abajo se ha marcado en verde:

<script src='URL_SCRIPT' type='text/javascript'></script>


Poniéndola en nuestro navegador, tendremos acceso a un fichero de texto que podremos copiar en el portapapeles y luego pegar en el lugar que a continuación se indica. La línea de código antes reproducida es una "llamada" al script que será innecesaria si usamos este sistema. Se podrá borrar después de copiar el código en nuestra plantilla. Justo antes de </head>...

<script type='text/javascript'>
//<![CDATA[
CONTENIDO DEL FICHERO .JS ORIGINAL
//]]>
</script>

Los caracteres que rodearán al contenido sirven para que el código "estricto" de Blogger, admita el script tal cual viene redactado.

Para añadir otro script adicional, repetir todos los pasos.


2. SCRIPT EN UN GADGET

Esta otra opción es útil cuando es script es demasiado largo, cuando queremos utilizar varios, o simplemente cuando no queremos utilizar la opción de la plantilla. Con el mismo sistema de antes, copiamos el código del fichero .js original. Ahora desde la edición de plantilla, justo después de <body> creamos una sección insertando esta línea:

<b:section class='contenedorscripts' id='contenedorscripts' />

En la parte CSS (antes de ]]></b:skin>) insertamos también unas propiedades para esa clase (contenedorscripts), para que los títulos que pongamos ahí no sean visibles. Esto es útil para poder identificar mediante el titulo, qué script está en cada gadget cuando vayamos a instalar varios, pero evitando que dichos títulos sean visibles en la vista normal del blog.

.contenedorscripts .widget h2 {display: none; visibility: hidden;}

Ahora vamos a Elementos de página y veremos arriba del todo un nuevo bloque para añadir gadgets. Simplemente añadimos uno tipo HTML/JavaScript y en él colocamos un título (no se verá en el blog si hicimos lo del estilo) y pegamos el contenido antes copiado entre etiquetas SCRIPT.

<script type="text/javascript">
CONTENIDO DEL FICHERO .JS ORIGINAL
</script>

Para añadir nuevos scripts, los dos primeros pasos no serán necesarios. Simplemente añadimos nuevos gadgets y copiamos en ellos el código JavaScript correspondiente.

Nota: Cuando los scripts así instalados no funcionen, una causa común es que los símbolos < y > que pudiera haber, no sean apertura/cierre de etiquetas, sino símbolos de menor/mayor. Para que se interpreten correctamente tenemos que insertar un espacio en blanco delante y detrás de cada uno de estos:

for(var i=0;i < a_rc;i++) {...


Hasta aquí los sistemas en los que controlamos 100% el script y ahora otros para usar alojamientos externos, dónde dependeremos de la saturación o la continuidad de estos. De entre ellos, primero los de Google, ya que Blogger depende de Google y malo sería que no funcionaran.

3. USAR LIBRERIAS API AJAX DE GOOGLE

Muchos de los scripts más comunes, están alojados en las API AJAX de Google y pueden ser utilizados utilizando este tipo de código, que deberá ser insertado antes de </head>:

<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>
google.load(&quot;LIBRERIA 1&quot;, &quot;VERSION&quot;);
google.load(&quot;LIBRERIA 2&quot;, &quot;VERSION&quot;);
};

O bien con la dirección directa del fichero. Ejemplo del anterior (cargador) y de este sistema (dirección) para JQuery:

<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>
google.load("jquery", "1.3.2");
};

.../...

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

Son excluyentes. O se usa el primero o se usa el segundo. Nunca ambos a la vez.

4. USAR/ALOJAR EN GOOGLE CODE

En Google Code también hay mucho software libre y si encontramos la dirección de un script en concreto que nos interese, también podemos utilizarlo con este otro código, siempre teniendo en cuenta que el propietario podría borrarlo y quedarnos sin él más adelante.

En este caso el script se instalará simplemente poniendo antes de </head>...

<script src='URL_FICHERO' type='text/javascript'/>

Para que la cosa quede bajo nuestro propio control -opción más recomendable que depender de otros- también podemos copiar el código y alojarlo nosotros mismos en Google Code tal y como nos explicó Pizcos en una de sus entradas.

5. ALOJAR EN GOOGLE SITES

A pesar de que desapareciera Google Pages y se comentara que Google Sites iba detrás, lo cierto es que este último sigue estando operativo y permite alojar ficheros diversos, tal como vimos con el caso de los ficheros flash. De la misma manera que se explicó allí, se pueden alojar también ficheros JavaScript y luego hacer hotlinking utilizando el mismo código que se utilizó en el caso justo anterior a este y que es válido para todos los casos en que se aloje el script fuera de nuestra plantilla.

6. ALOJAR EN OTROS SITIOS

Esto es lo más fácil pero lo menos recomendable. Hay sitios que permiten alojar ficheros .js y en los que no, será suficiente con renombrar el fichero con la extensión .txt. Los scripts son básicamente ficheros de texto y por eso no habrá ningún problema cuando los renombremos. El código será como en los dos casos anteriores pero cambiando la extensión si ha sido necesario.


Referencias:
Solucionando scripts: Ultimos comentarios. Vagabundia.
Alojar scripts en Google. Pizcos Blog.
Buscando espacio para alojar los scripts. Banaka, Banaka.


ListenGo. Reproductor para el blog.

14/05/2010
ListenGo. Buscar, seleccionar una de las opciones que nos dan, copiar el código y ¡listo!

Incluso hay una opción de código para Blogspot, aunque si quieres que no te de ningún problema, es conveniente eliminar todos los saltos de línea tras copiar el código en un post. No es necesario, pero lo aconsejo.




Por supuesto, puedes modificar el aspecto del enlace del título y autor del tema, o incluso reescribirlo. Sólo tienes que buscar el texto correspondiente en el código.



De estética sencilla y práctica, también puedes personalizar el gadget pinchando en Customizar Reproductor, junto al código. Puedes incluso agregar una imagen personalizada, aunque va a ser que me gusta más la version estándar.



Por último, tambien podeis crear una lista de reproducción, pero para ello, ya no teneis más remedio que registraros...



La principal ventaja de la lista es que si la editamos desde la página de ListenGo, el gadget también se actualiza. Cuando copieis el código, podreis observar una serie de parámetros que podeis cambiar, como los colores, el autostart, el alto, ancho... entre otros.


Para que no aparezca el leer más en páginas estáticas

12/05/2010
El que estuviera utilizando la función createSummaryAndThumb para generar sumarios de sus entradas de forma automática, habrá observado que en las nuevas páginas estáticas de Blogger, el rótulo "Leer más" salía sin venir a cuento.

El motivo es sólo uno y fácilmente explicable. Para que este script se ejecutara sólo en páginas distintas de las de las entradas individuales (item), parte del código que había que insertar incluía dos condicionales precisamente en este sentido: si estamos en una página que no sea del tipo entrada, ejecuta el recorte de texto, pero si estamos en una entrada, simplemente muestra el contenido de la entrada.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
...(ejecución script)
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/> <!-- Contenido post -->
</b:if>

Esto estaba bien hasta que se crearon las susodichas páginas estáticas, pero desde ese momento, estas condiciones aplicadas a ellas hacen que se cumpla la primera condición (no estamos en una entrada) y por tanto, se ejecuta el script de sumarios... donde no debería.

Para solucionar esto, conviene reconstruir estas dos condiciones y convertirlas en tres con el siguiente esquema:

Si la página es tipo entrada, muestra el contenido (data:post.body).
Si no, comprueba en primer lugar si estamos en una página estática y si es así, muestra el contenido. De lo contrario, ejecuta el script.

Todo esto puesto en código, debe quedar como sigue:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary-&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary-<data:post.id/>&quot;);</script>
<a class='leermas' expr:href='data:post.url'>Leer más &#187;</a>
</b:if>

</b:if>


Sólo tenemos que cambiar esta parte para que desaparezca la frasecita de nuestras páginas estáticas. Lo que en aquella entrada numerábamos como paso 2.


Tus entradas en facebook. RSS Graffiti

10/05/2010
Desconozco el motivo, pero la pasada semana dejaron de actualizarse las entradas del blog en Facebook, que tenía instaladas mediante Notas. A Renzo le ocurrió lo mismo y supongo que a algunos más. El caso es que me dí una vuelta por ahí y encontré RSS Graffiti, una aplicación que permite publicar una o varias fuentes (feeds RSS/ATOM) en el muro de tu Perfil, en Páginas o en Grupos.


TUTORIAL DE INSTALACION

Para empezar, tenemos que acceder a la APP (enlace a RSS Graffiti) y a continuación pinchar en Ir a la aplicación, justo debajo de la imagen. Con ello se nos muestra una pantalla a modo de autentificación, para autorizar que esta aplicación pueda acceder a nuestro perfil e identificarnos como propietarios de nuestra cuenta.


Tras confirmar la autorización en el botón Permitir de la ventana emergente, se nos pide que la autorización sea permanente y así poder publicar aún cuando estemos sin conectar. Pinchamos en el botón y en la ventana emergente volvemos a confirmar con Permitir.

Una última autorización para que RSS Graffiti pueda publicar en nuestro muro y por fin, la última confirmación (Permitir publicaciones):

Tras la burocracia, llega el momento de añadir el(los) feed(s), seleccionando desde la izquierda, en cual de nuestras páginas, grupos o perfil queremos replicarlo. También desde aquí, podemos configurar algunas cosillas (se indican sobre la captura).


Una vez todo a nuestro gusto, salvamos. Podemos ir añadiendo todos los feeds que queramos en cada apartado, pero teneis que tener en cuenta que cada vez que cambiemos de página, habrá que volver a autorizar como al principio para cada una (click para ampliar imagen).


Cambiar el fondo principal.

06/05/2010
A través de vuestras preguntas voy detectando que cosas que se suponen fáciles, para muchos no lo son tanto, así que seguiremos engrosando el contenido de la etiqueta BPT.

En esta ocasión es el turno de ver cómo cambiar el fondo de un blog, que para todos los casos que se explican, requiere modificar nuestro selector CSS llamado body.

En primer lugar tenemos que escoger qué tipo de fondo queremos. Un fondo puede ser un color plano o cualquier otro tipo de imagen. Con lo primero no hay mayor problema, porque se trata de indicar un color en código hexadecimal y nuestro fondo se verá por completo de ese color (ver tablas de colores por gentileza de Ciudad Blogger).

Como se ha anticipado, esto lo ponemos en el selector body (amén de otros atributos comunes que necesiteis para todo el blog) mediante la propiedad background. Si ya tenemos definido un background, simplemente cambiamos su contenido. Sin miedo. Podemos ver los resultados con Vista Previa antes de grabar los cambios de manera definitiva.

body {
background:#990000;
}

Con las imágenes tampoco hay demasiado problema, pero existen varios sistemas distintos. Comenzamos con el de colocar una imagen grande que ocupe todo el espacio visual del navegador y que no se mueva al hacer scroll.

Tanto en este caso como en los restantes, necesitaremos escoger la imagen que nos guste y lo que es más importante, un lugar dónde alojarla para luego poderla utilizar. Sobre esto último, para Blogger lo mejor es alojarla en Picasa (Blogger a fin de cuentas), aunque también se puede subir a un post sin publicar (borrador) que bien podríamos usar también para otras imágenes que vayamos necesitando alojar en algún sitio en el futuro. Una vez alojada, lo que copiamos es su URL o dirección.

Para la imagen fija de fondo, el código sería...

body {
background: url("http://dirección_imagen") center no-repeat fixed #ffffff;
}

Si entendeis inglés, los atributos son prácticamente autoexplicativos: center para centrar la imagen, no-repeat para que no se repita y fixed para que se quede fija. El último código hexadecimal es optativo y sólo será visible mientras se carga la imagen o en los espacios dónde esta pudiera ser transparente (formatos .gif y .png).

Un ejemplo de cómo quedan este tipo de fondos, lo podeis ver en Decora tu blog, dónde además hay varios modelos para descargaros. Usando este sistema, puede ser necesario eliminar el fondo de las entradas u otros elementos, o incluso cambiar el ancho de vuestra plantilla. En la página del enlace, para ajustar el blog a sus diseños y por facilitaros la tarea, proponen cambiar la plantilla a una Mínima y así se hacen ambas cosas de una tacada.

Esta forma de montar un fondo es viable y a veces necesaria para montar la cosa a nuestro gusto, pero presenta algunos inconvenientes que teneis que conocer:
  • la imagen tendrá un peso considerable y demorará la carga de la página
  • el ancho para cada usuario es imprevisible (dependerá de cómo tenga ajustada cada uno su resolución), por lo que en resoluciones pequeñas se cortarán los laterales de nuestra imagen y en las grandes se podrían quedar huérfanos.
  • para solucionar esto último el ancho de la imagen tendrá que ser realmente grande (más de 1200px-1500px), incrementando el problema del primer punto

Una posible mejora sería prescindir de una gran imagen y usar otra igualmente ancha, pero menos alta. Esta imagen la repetiremos verticalmente con un repeat-y. Para que todo vaya bien, es necesario que la parte superior de la imagen case con la parte inferior, al modo en que lo hace una baldosa con otra.

Fondos de este tipo podeis encontrar por doquier en internet, pero si sois un poco mañosos con algún editor de imágenes, también podeis crearlo vosotros mismos partiendo de cualquier otra imagen, aunque no estuviera expresamente destinada a fondo.

El código en este caso cambiaría sólo en cuanto al atributo de repetición:

body {
background: url("http://dirección_imagen") center repeat-y fixed #ffffff;
}

Para usar imágenes todavía más pequeñas en cuanto a peso, ya nos conviene reducir sustancialmente el ancho (100, 200, 300px...) y conseguir una imagen que case tanto arriba-abajo como izquierda-derecha, ya que lo que vamos a hacer es teselar por completo el fondo.

Para ello y comparativamente con los casos anteriores, sólo necesitamos quitar el atributo de repetición. Repetir tanto en vertical como en horizontal, es lo que hace la propiedad background por defecto, es decir, cuando no tiene atributo alguno al respecto. Si escribimos repeat, conseguimos exactamente lo mismo...

body {
background: url("http://dirección_imagen") center fixed #ffffff;
}

Y por fin, el caso más usual... que el fondo se mueva al tiempo que el resto de la página. Para esto eliminaremos en cualquiera de las dos últimas variantes (repetición vertical, repetición en ambos sentidos) el atributo fixed. En la primera (sin repetición), al utilizar una sola imagen, si esta no estuviera fijada, al hacer scroll pasariamos a ver lo que hay debajo de dicha imagen; es decir, nada... o en el ejemplo, un fondo completamente blanco (#ffffff). Por tanto, en el caso de una sola imagen para todo el fondo, sin repetir, deberemos usar siempre fixed.

body {
background: url("http://dirección_imagen") center repeat-y #ffffff;
}


body {
background: url("http://dirección_imagen") center #ffffff;
}


Blogger. Estructura básica de la plantilla

03/05/2010
Cuando se tienen pocos o ningún conocimiento de programación web, copiar y pegar es el recurso más fácil y socorrido para conseguir modificar una plantilla siguiendo las instrucciones de otros. El problema viene cuando las referencias que citan para localizar el lugar dónde insertar el código que nos facilitan, no coinciden exactamente con las líneas de nuestra plantilla. Si encima sólo me dicen cosas como que pegue ese algo en la parte CSS, ya sí que me han fastidiado bien ¿dónde narices está eso?

Creo que conocer la estructura de la plantilla Blogger, aunque sea básicamente, ayuda bastante no sólo a ir siguiendo instrucciones, sino también a poder incluir modificaciones por nosotros mismos. Y eso es lo que vamos a intentar explicar a continuación.


Una plantilla Blogger tiene en un principio la misma estructura que cualquier otra página web:
<HTML>

<HEAD>
<TITLE>Título página</TITLE>
</HEAD>

<BODY>
Contenido
</BODY>

</HTML>

Lo que veis entre los símbolos < y > son etiquetas HTML o tags. Cada etiqueta tiene que tener necesariamente su correspondiente cierre, que consiste en una etiqueta igual pero con una barra delante de su nombre. Entre ambas es dónde se tiene que poner el contenido que corresponda. A propósito, comentar que el hecho de que los símbolos antes mencionados sirvan para definir etiquetas HTML, es el motivo por el cual cuando intentais pegar código en un comentario o en una entrada, este no sale. El navegador interpreta que lo que viene detrás es código y sencillamente no lo muestra, sino que lo interpreta. Ya vimos anteriormente la forma de publicar código "visible", así que eso lo saltamos.

Como podeis ver en el código anterior, toda la página tiene que estar entre etiquetas HTML, cosa imprescindible cuando se usa este lenguaje. Anidados dentro de estas dos etiquetas, podemos ver también dos bloques diferenciados: HEAD y BODY.

Dentro de HEAD (cabeza, cabecera) se detalla el prólogo del resto del archivo. Habitualmente son pocas las tags que van dentro de ella, pero como veremos, en Blogger se suele incluir algo muy importante: el estilo. Destaca la etiqueta TITLE que da título a la página y que es lo que luego se verá en la pestaña del navegador. En esta que estais leyendo, ese título coincide casi con el título del post: Blogger. Estructura básica de la plantilla || Oloblogger. Para saber cómo cambiar esos títulos, podeis acceder a la entrada Cambiar títulos de páginas.

Dentro de BODY va el resto del contenido del documento y para estructurar toda la información que allí mostramos, se utilizan DIV's que van formando los distintos bloques de información.

Pero antes de seguir, volvamos al HEAD. Aquí es dónde pueden ir las instrucciones que darán determinada apariencia a nuestro blog: el estilo o CSS. Lo más recomendable para una página web estándar (por llamarles de alguna manera), es que la hoja de estilo esté en un documento aparte y que la página en cuestión sólo se ocupe de cargar esos datos mediante una solicitud del tipo <link href="mihojadeestilo.css" rel="stylesheet" type="text/css">

Otra manera (menos eficiente) de hacer lo mismo, es mediante la inclusión directa dentro de HEAD, de la etiqueta <STYLE> y entre ella y su cierre, todos los selectores, clases, ID's... con sus correspondientes propiedades o atributos CSS. Esta segunda es la opción que utiliza Blogger, pero para rizar el rizo, no utiliza STYLE sino algo un poco más largo que incluye la palabra mágica SKIN (piel, carátula)...

<HTML>

<HEAD>
<TITLE>Título página</TITLE>
<b:skin><!--[CDATA[/*
Código CSS
]]--></b:skin>
</HEAD>

<BODY>
Contenido
</BODY>

</HTML>

Este es un ejemplo de código tipo CSS del que os encontrareis entre dichas etiquetas SKIN. En este caso, define el aspecto general de las entradas (siempre que se haya utilizado ese mismo nombre para ello):

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}

Así que ya sabemos que toda la parte de estilo está entre las citadas etiquetas SKIN. Por comodidad, las incorporaciones de nuevas clases (selectores) se suelen hacer justo antes del cierre, de manera que si luego queremos quitarlas para deshacer el cambio, las localizaremos rápidamente. Si los selectores son subclases de otras ya definidas, lo normal será insertarlas a continuación de las clases principales. Esto sólo es por tener una plantilla lo más ordenada posible. No afecta al resultado.

.post {
background:#ffffff;
}
.post ul {
list-style-type:none;
}


Y como esto está quedando ya muy largo, el resto del contenido del HEAD y el del BODY lo dejamos para otra entrada.

Tarea para casa: localizar en vuestra plantilla los títulos de las páginas y la parte de código CSS ;)

Actualización: Estructura básica de la plantilla II.

Suscribirse a: Entradas (Atom)
Recibe por correo las últimas publicaciones.
Teclea tu dirección.


No rights reserved
NINGUN DERECHO RESERVADO
...aunque se agradece un enlace. Si crees que algo aquí vulnera los derechos de otro, mándanos un correo.

El botón que
no hace nada El botón que no hace nada

Ir Arriba