Quite Random

We heart Blogger.

FernandoC — Sun, 07 Jun 2009 19:57:56 PDT

Me paso por el blog de Claudia, y el de Iván y me entero que Rick Klau, de Blogger, publicó recientemente una lista con los 12 sitios más recomendados por los usuarios para descargar plantillas para Blogger.

Me alegra mucho haber que Quite Random sido mencionado, junto con otros blogs (que en lo personal considero excelentes, y amigos más que nada), como lo son BTemplates, Zona Cerebral, Deluxe Templates, y Chica Blogger, quien recomendó asimismo este blog a Blogger.

¡Gracias!

I just came by Claudia’s and Ivan’s blogs and found out that Rick Klau, from Blogger, recently published a list with the 12 most recommended sites for downloading Blogger templates.

I am happy to share this mention with blogs I consider not just good, but excellent… and also close friends, like: Btemplates, Zona Cerebral, Deluxe Templates, and Chica Blogger, who actually recommended this site to Rick.

Thank you!

Pequeños cambios…

FernandoC — Sun, 26 Apr 2009 18:28:44 PDT

Estas semanas he estado y estaré en las próximas dos más que ocupado. Para compensar mi ausencia, he decidido darle otro aire (un poco más organizado quizás) al blog. ¡Espero les guste!

Solutions for JavaScript hosting in Blogger

FernandoC — Thu, 09 Apr 2009 17:20:25 PDT

There are lots of things that can’t easily be achieved in Blogger without the usage of special ‘scripts.’ As they are a growing solution for most of the features we’d like our Blogger blogs to have, we deal with a huge setback: ‘where to host them.’ We know Blogger only allows users to upload images and videos, but not other type of files.

As Blogger users, we like two things about it: it’s easy, and it’s free. But hosting isn’t, and the famous ‘free hosting services’ always have their own tricky terms related to the bandwidth consume and/or available space. Many of them are even just for ‘sharing’, and we’re not able to get from them valid, direct URLs to our hosted files.

I’ve listed some of the solutions we can apply until Google decides to give us the option of uploading other types of files.

1. Changing .js for .txt

What we call ’scripts’ are only files with plain text. They have a .js extension, which is not exactly obligatory, and it’s the reason why many hosting services won’t let us upload them.

What we can do, then, is simply changing the .js extension for a .txt extension and upload these files to Fileden, for example; then, using the provided URLs like always.

Here’s a complete list of the available libraries, and their installation.

3. Adding scripts directly to our templates

These kinds of code:

Would be replaced by:

We must take in consideration that adding long scripts directly to our templates can make it a little messy and confusing; this doesn’t mean that long scripts won’t work.

4. Using Blogger’s “HTML/JavaScript” gadget

Adding this type of scripts to our templates might result impractical. Also, changing its .js extension for a .txt one, because of its volume, would make it consume a lot of bandwidth. Here’s a good solution for that.

In our templates, we create a new Blogger gadget section adding the following code after :

Once this is done, from our Dashboards, in the ‘Elements Page,’ we will see a new section above our template layout. We add a “HTML/JavaScript” gadget from there, with something like this:

We must avoid adding titles to these gadgets; however, if we’re going to add several scripts in different gadgets, we might… after adding this line before :

.scripts-container .widget h2 {display: none; visibility: hidden;}

Also, it seems Blogger interprets all “<” and “>” appearing in the scripts not as expected. To solve this, look for these symbols and add a space before and after each of them. Here’s an example:

Before: for(var i=0;i After: for(var i=0;i < a_rc;i++) {


 *** 
Google Pages was kind of the perfect solution for all of this; however, this beta service is soon coming to an end. Google says they will merge both Google Pages and Google Sites so we can create sites in one second; but just imagine a good and trendy site with NO JavaScript at all… I wonder why Google never merged Blogger with Google Pages, as it did with Google Adsense and Google Friends.
I could have listed some of the free services we could use, but considering what has happened with HostFile (dead already), Google Pages (dying), and lately Skydrive (not recommended), we can easily conclude that unless it is isn’t our own host, we will always have limitations.
Reference
Vagabundia [1, 2, 3]



Automatic post summaries (Read More hack)
FernandoC — Tue, 31 Mar 2009 00:19:09 PDT

There are plenty of ‘Read More’ hacks for Blogger on the web; however, not all of them create automatic post summaries with thumbnails for each post. This type of hacks I used in my latest template, Whiteness. Since the template has had quite a good reception for its simplicity, usability AND the automatic ‘Read More’ hack, I thought it would be a good idea to explain the script used: how to install it and customize it.
Important: I saw this hack in a post from BloggerSphera.
Installation and Customization
There are two main HTML codes we need to add in our templates, so the hack can work properly. These should be added from ‘Edit HTML,’ in our Blogger Dashboards, with the widget templates expanded.
— The first code we need to insert is the script itself, and it should be located before .
(I’ve uploaded the script file to my own server; you can, though, download it and upload it to your own, then replace URLs.)


We can (and must, actually   ) use the variables that are highlighted in the code above. Here’s the explanation:
var thumbnail_mode = "float" ; — With this you can decide if you want the thumbnail to float to the left (float), or just display it unformatted (no-float).

summary_noimg = 250; — Defines how many characters will be displayed in posts with no images/thumbnail.

summary_img = 250; — Defines how many characters will be displayed in posts with images/thumbnail.

img_thumb_height = 120; — Thumbnails’ height in pixels.

img_thumb_width = 120; — Thumbnails’ width in pixels.
— The second code we will add, will replace the ‘default’ post body for the post summary and thumbnail, in pages different than individual posts.
Simply look for this tag:

and change it for this:
    
      
      
      Read more »
    
    

The highlighted text in red is the one appearing in the link next to the summaries. 
‘Read More’ is the most common, but we can always change it for ‘View full post,’ ‘More,’ or any other text. We can even use images, instead of text!
- If we’d like to style these ‘Read More’ links, all we need to do is add the CSS properties to the following element:
a.readmore {
/* CSS properties go here */
}
(All of this, of course, before .)
And that’s it, enjoy!



Template :: Whiteness
FernandoC — Mon, 23 Mar 2009 04:00:03 PDT

Author
— Quite Random
Compatibility
IE 7 – Firefox – Chrome

Platform: Blogger Beta
Demo
— http://randomness-whiteness.blogspot.com
Download
Note: There is a file embedded within this post, please visit this post to download the file.

Instructions
Desde el panel de Blogger, en Configuración> Formato> Formato de cabecera de fecha, elegimos la penúltima opción (Día Mes Año :: 08 Mayo 2008).

— From our Blogger Dashboard, in Settings> Formatting> Date Header Format, we pick the option before last (Day Month Year :: 08 May 2008).

Para agregar un minipost, creamos un post, agregándole la etiqueta ‘minipost‘.

— To add a minipost, we simply create a post with the tag  ‘minipost.’

La edición de fuentes y colores está habilitada desde el Panel.

— Fonts & Colors edition is enable from the Dashboard.

‘Read More’ Hack
Para cambiar el número de caracteres a mostrarse en el resumen automártico, desde nuestro Panel Blogger (Edición de HTML), buscamos las siguientes líneas en el código JavaScript antes de , y cambiamos los valores:

— To change the number of characters to be shown in the automatic post summary, from our Blogger Dashboard (Edit HTML), we look for the following lines in the JavaScript code before , and change the values:
summary_noimg = 250;
summary_img = 250;

Para cambiar las dimensiones de las imágenes mostradas en el resumen, cambiamos los valores resaltados en el código mostrado aquí abajo:

— To change the dimensions of the thumbnails shown in the summary, we have to change the highlighted values in the code shown below:
.post .post-body img.post-thumbnail {float: left; height: 120px; margin: 0 5px 10px 0; width: 120px;}

También podemos cambiar el texto ‘Read More’ que aparece en los links de los resúmenes. Sencillamente buscamos en nuestra plantilla, con los artilugios expandidos, el siguiente código y cambiamos lo resaltado en rojo:

— We can also change the ‘Read More’ text that appears in the links next to the summaries. We should look for the following code in our template, with the widget templates expanded, and change what’s highlighted in red:
Read more »




Sidebars condicionales
FernandoC — Mon, 16 Mar 2009 03:10:14 PDT
Hace poco Birdelo me preguntaba cómo lograr un efecto que usé en una plantilla (Randomness): ocultar la sidebar en posts individuales (de modo que sólo se mostrará el contenido).
El procedimiento es sencillo; basta con agregar una etiqueta condicional, y listo. Pero al escribir este tutorial, pensé en presentar otra posibilidad; más concretamente cómo mostrar dos diferentes sidebars: una en los posts individuales, y otra en el resto de páginas (incluyendo la principal).
Instalación
1. Desde nuestro Panel/Escritorio Blogger, nos dirigimos a Edición de HTML.
2. SIN expandir artilugios, buscamos la sección de nuestra sidebar, que debería verse algo así:

  
  Widgets
  


3. Arrriba de la primera línea en rojo, agregamos la siguiente etiqueta condicional:
item"'>

4. Si solamente queremos ‘quitar’ la sidebar de los posts individuales, agregamos la siguiente línea debajo de la segunda línea en rojo, y aquí terminamos:


Si no, agregamos el siguiente código, y continuamos:

  
    
  


Estilos
Generalmente los estilos de nuestra sidebar (en general) suelen darse al contenedor de la sección (que tiene un ID específico; suele ser sidebar-wrapper). Los atributos para los widgets, encabezados, listas y demás se dan a la clase de la sección.
#sidebar-wrapper {
/* Atributos para el contenedor de la sidebar */
}

.sidebar h2 {
/* Encabezados */
}

.sidebar .widget {
/* Widgets */
}

.sidebar .widget-content {
/* Contenido del widget */
}

Es por esta razón que no he cambiado las clases de las secciones, sino sólamente el ID del contenedor (sidebar-posts). Esto significa que nuestros widgets y sus encabezados tendrán la misma configuración, sin necesidad de añadir nada más. Lo que sí podemos (y debemos) estilizar el contenedor de la sidebar de los posts individuales.
Una vez más, los estilos CSS, son todo lo que se encuentra antes de ]].
#sidebar-posts {
/* Atributos para el contenedor de la sidebar en posts individuales */
}

Uso
El único ‘problema’ (relativo de todos modos) que hay es que desde nuestro Panel solamente podemos editar y mover los wigets de la sidebar en la página principal. Para los posts individuales, debemos agregarlos y ordenarlos directamente desde Edición de HTML. Ya en las páginas individuales, podemos editarlos con el ícono de Edición que Blogger proporciona.
Demo
Como siempre   … acá un demo en funcionamiento.



Template :: Tuut
FernandoC — Mon, 09 Mar 2009 08:25:22 PDT

Authors
Designed by: Tutorial Blog

Coded by: Quite Random
Compatibility
IE 7 – Firefox – Chrome

Platform: Blogger Beta
Demo
— http://randomness-tuut.blogspot.com
Download
Note: There is a file embedded within this post, please visit this post to download the file.
 
Instructions
Desde el panel de Blogger, en Configuración> Formato> Formato de cabecera de fecha, elegimos la penúltima opción (Día Mes Año :: 08 Mayo 2008).

— From our Blogger Dashboard, in Settings> Formatting> Date Header Format, we pick the option before last (Day Month Year :: 08 May 2008).




Mini posts en Blogger
FernandoC — Mon, 09 Mar 2009 01:00:42 PDT

En breves rasgos, estos posts versión miniatura   suelen utilizarse como ‘notas rápidas’, pequeñas, referenciales, de aviso, notificación, etc. que no necesariamente requieren de un post tradicional. Se caracterizan por tener un diseño y estructura distinta, aunque son técnicamente sólo posts con una categoría diferente (ej. Notas rápidas, Actualizaciones, Mini posts, etc.). En la imagen de arriba, vemos cómo Francisco los ha diseñado para Blog and Web.
Hasta hace poco creía que lograr esto en Blogger era difícilmente posible, pero una vez que me topé con este post en Blogger Buster, y más recientemente éste de Vagabundia, me puse a jugar con los códigos. (Suene o no geek, es divertido   ). En Vagabundia, lo que muestra JMiur es básicamente cómo utilizar estos mini posts fuera de la secuencia cronológica de los posts tradicionales; yo, en cambio, me he enfocado más en cómo cambiar su estructura (y diseño) dentro de dicha secuencia (más como se usa en Blog and Web, digamos).
Instalación
1. Creamos un post con la categoría minipost.
2. Desde Edición de HTML (Panel » Diseño), expandimos artilugios.
3. En el siguiente código, agregamos lo que está resaltado. 
    

      
        
        

        
          
        
          

        
          
        
        
      

      
        
      
      
        
        
        
      
      
        
      
    

4. Buscamos la siguiente línea:

y debajo de ella, pegamos el siguiente código:



  
    
    
      
      
    
    
      permalink |
      comments
      
    
  



  
    
    
      
        
      
    
    
      
      
    
    
  




De esta forma habremos definido cómo será la estructura de los mini posts en las páginas del blog, y los posts individuales. 
En este ejemplo, en los miniposts que se verán en la página principal, archivos y categorías, se mostrará solamente la fecha, el contenido, y dos enlaces (el enlace permanente al minipost, y el enlace a los comentarios). En los miniposts individuales, se mostrará la fecha, el título y el contenido. 
— Podemos usar Vista Previa para tener una idea de cómo se verán los miniposts ahora.
Estilos
Los estilos (colores, tamaños, fondos, fuentes, etc.) los definimos con CSS (el código antes de ]], utilizando las clases de cada contenedor:
.minipost.home { /* Miniposts en la página principal, archivos, y categorías */ }
  .minipost.home .date { /* Estilos para la fecha */ }
  .minipost.home .body { /* Estilos para el cuerpo del minipost */ }
  .minipost.home .meta { /* Estilos para el 'footer' del minipost */ }

.minipost.item { /* Estilos para los miniposts individuales */ }
  .minipost.item .date { /* Estilos para la fecha del minipost individual */ }
  .minipost.item .title { /* Estilos para el título del minipost individual  */ }
  .minipost.item .body { /* Estilos para el cuerpo del minipost individual */ }

Demo
Acá un demo en funcionamiento.



Tabbed Navigation System
FernandoC — Mon, 02 Mar 2009 22:09:48 PST


A tabbed navigation system is always good for organization; especially when the space is very reduced. In this post, we will learn how to implement the easiest script I’ve found for this (via Blogger Buster), anywhere in our blogs and even use it with Blogger’s Feed, Labels and Blog Archive widgets in our sidebars, as explained in Amanda’s original post.
I had tried three different scripts before this one: Control.Tabs, Fabtabulous, and idTabs. The first two needed the Prototype library, and idTabs worked with jQuery. I was satisfied with the results; however, they were either too heavy or they worked with other external JS libraries. Differently, this script is relatively fast and does not requires any external JavaScript library.  
Note: I strongly recommend you to backup your template, before adding anything.
Installation
We first need to install the script. To do this, we must add the following code, before :


I’ve uploaded the script to my server, but we can always download it (from Blogger Buster) and upload it to our own host, or free hosting service.
Customization
General
In order to style the tabs, we need to copy and customize the following code, right before ]].
Note that the following styling includes basically: background, border and text colors; margin and padding measures; as well as floating and aligning properties. All other styling will match with the one already set in your current template, so you should not worry about how your headings, links, images, text, etc. would look inside the containers.
/*main container*/
div.domtab {margin: 0; padding: 0;}

/*tabs*/
ul.domtabs {float: left; margin: 0; padding: 0;}

ul.domtabs li {
background: #999;
float: left;
margin: 0 2px 0 0;
padding: 2px 3px;
text-align: center;
}

ul.domtabs li:hover, ul.domtabs li.active {background: #CCC;}
  ul.domtabs li a {color: #333; font-weight: bold; text-decoration: none;}

/*tabs containers*/
div.domtab div.tab-container {
border: 3px solid #ccc;
clear: both;
display: block;
padding: 10px;
}
Colors
We can, of course, change the following colors, based on our needs.  
 #CCC — Used as background when the tabs are hovered and/or active, and as the border color for the containers.

 #999 — Used as the default tab background color.

 #333 — Used as the default tab text color.
Widths
DO keep in mind, that if the tabs appear on top of each other, it’s probably due to the width of the sidebar, or container, since the individual tabs do NOT have a fixed width. In this example, three tabs fit perfectly in a 220px-wide sidebar, but we can’t, for example, expect six tabs to appear in the same line.
Usage
General explanation
This script requires the following to work properly. A main container which will contain (a) a list with the tabs, and (b) a container for each tab, where the content will obviously be displayed.



  TAB 1
  TAB 2
  TAB 3



  
Content for TAB 1.



  
Content for TAB 2.



  
Content for TAB 3.




1. The main container (
) should have the class domtab.

2. The list () with the tabs should have the class domtabs, and each link () in the list should point to the ID of each tab container.

3. Each container should have the class tab-container and an identifier (anchor) inside of it, with a unique name and ID.
Recent Posts, Labels and Archives Widget
Based on the explanation above, the things we must change to make this widget work, are basically the unique IDs and the content for each tab (which in this case will be replace for Blogger sections and widgets).
1. Look for the following line:

2. Right before it, paste the code below:



  Recent
  Categories
  Archives



  
  
    
  



  
  
    
  



  
  
    
  




3. Save your template.
4. Go to the Elements Page. Once there, you should see something like this:

Edit the Feed widget with your Feed URL, and you’re done.

Note: If you can’t edit this widget, feel free to delete it and add it again from there.
Demo
You can take a look at the result right here.



Template :: Randomness Theme
FernandoC — Fri, 20 Feb 2009 22:11:22 PST

Info
randomness*theme

Designer: Randomness

IE 7 | Firefox | Safari | G.Chrome @ Blogger Beta
Download
Note: There is a file embedded within this post, please visit this post to download the file.
Other instructions
Para cambiar el favicon de la plantilla por el tuyo, simplemente cambia la URL de la imagen en el siguiente código.

To change the template’s favicon with yours, simply change the image’s URL in the following code.


Para configurar el área de Twitter, busca el siguiente código y cambia “fernandooo1“, por tu nombre de usuario.

To display your twitter updates, simply look for this code and change “fernandooo1” with your Twitter username.