Tutorial: Listas en HTML

El lenguaje HTML nos brinda una serie de elementos que nos permiten elaborar párrafos estructurados de múltiples formas. Las conocemos como listas, y pueden ser de varios tipos: Listas ordenadas, no ordenadas, de definiciones y otros dos tipos menos conocidos debido al desuso de las mismas que son los menús y los directorios.

En este articulo trataremos como realizar las listas de los tres primeros tipos, dado que como dijimos las dos ultimas ya no se usan.

Listas ordenadas <ol>:

Las listas ordenadas, como nos indica su nombre nos permiten disponer los elementos de manera que cada uno tengo un predecesor numerado. Podemos ver el siguiente ejemplo:

1. Primero

2. Segundo

3. Tercero

4. Cuarto

5. ......

Correspondiendole el siguiente código en HTML:

<ol>
<li> Primero </li>
<li> Segundo </li>
<li> Tercero </li>
<li> Cuarto </li>
<li> ...... </li>
</ol>

Si observáis, podéis distinguir que todo el código que encierran las etiquetas <ol> y </ol>, son todas <li>, por lo que es fácil deducir que para añadir mas elementos a la lista solo debéis repetir esta última etiqueta.

Listas desordenadas <ul>:

Estas listas se caracterizan por no tener una enumeración que indique un orden de manera estricta por lo que nos sirven para listar elementos de cualquier genero. Podemos ver el siguiente ejemplo:

• ABCDEF

• GHIJK

• LMNÑOP

• QRSTUV

• ........

Correspondiendole el siguiente código en HTML:

<ul>
<li> ABCDEF </li>
<li> GHIJK </li>
<li> LMNÑOP </li>
<li> QRSTUV </li>
<li> ........ </li>
</ul>

Con las listas no ordenadas ocurre lo mismo que las anteriores, solo es necesario duplicar la etiqueta <li>, para añadir mas objetos a la lista. A diferencia de las anteriores las no ordenadas comienzan y terminan con las etiquetas <ul> y </ul> respectivamente.

Listas de definiciones <dl>:

Por ultimo explicaremos como formar una lista de definiciones, que viene a ser lo mas parecido al formato de un diccionario, donde escribimos un termino y bajo él su definición. Podemos ver el siguiente ejemplo:

Vocales

AEIOU

Consonantes

BCDFGHJ...

Números

123456...

Correspondiendole el siguiente código en HTML:

<dl>
<dt>Vocales </dt>
<dd> AEIOU </dd>
<dt>Consonantes </dt>
<dd> BCDFGHJ... </dd>
<dt>Números </dt>
<dd> 123456... </dd>
</dl>

Este último tipo de lista tiene una estructura completamente diferente. Estas comienzan y terminan con las etiquetas <dl> y </dl>, pero el código que encierran en esta ocasión se compone de dos etiquetas distintas, <dt> y <dd> siendo la primera la correspondiente al termino y la segunda a la definición.

Llegados a este punto ya somos capaces de crear nuestras propias listas del tipo que queramos, sin embargo, todavía queda mucho por aprender como etiquetas adicionales o propiedades de las mismas que veremos a continuación.

En primer lugar, existen dos etiquetas adicionales la cual nos permite incrustar un titulo o texto en cualquier lugar de la lista, siempre y cuando se encuentre dentro de las etiquetas principales (<ol>, <ul> o <dt>). Estas etiquetas son <lh> y <dh>, la primera para las listas ordenadas y no ordenadas y la segunda para las listas de definiciones.

Y en segundo lugar tenemos los atributos que se les pueden aplicar a las etiquetas para darnos una mayor funcionalidad, todos estos atributos se sitúan entre las comillas de la propiedad style="atributo1, atributo2, ...", a continuación se listan con su respectiva descripción:

list-style-type: estilo --> Este atributo especifica el estilo de un objeto de lista. Los valores disponibles son los siguientes:

Para listas ordenadas:

• decimal

• decimal-leading-zero

• lower-roman

• upper-roman

• lower-alpha

• upper-alpha

• lower-greek

• lower-latin

• upper-latin

• hebrew

• armenian

• georgian

• cjk-ideographic

• hiragana

• katakana

• hiragana-iroha

• katakana-iroha

Para listas no ordenadas:

• disc

• circle

• square

start = numero; --> Sólo para listas ordenadas, <ol>. Este atributo especifica el número del primer objeto de una lista ordenada. El número inicial por defecto es el "1".

value = número; --> Sólo para objetos de lista, <li>. Este atributo establece el número del objeto de lista actual.

skip = número; --> avanzará la lista en cantidades de número.

Hay alguno mas que paras un conocimiento básico no los he considerado necesarios, de todas maneras al final del articulo se disponen una serie de link de los cuales me he servido por si deseáis profundizar en el tema.

Una vez abarcado todo lo necesario para poder construir nuestras listas de todas las maneras posibles, dispongámonos a aplicar todo lo aprendido de manera que haremos una serie de listas anidadas con todos los atributos anteriores:

TIPOS DE LISTAS

Listas ordenadas

1. Primero

• A

• B

• C

2. Segundo

3. Tercero

4. Cuarto

5. ......

Listas no ordenadas

• ABCDEF

2. 1

3. 2

4. 3

9. 4

• GHIJK

• LMNÑOP

• QRSTUV

• ........

Listas de definicion

Vocales

• Abiertas

1. A

2. O

• Cerradas

1. E

2. I

3. U

Consonantes

BCDFGHJ...

Números

123456...

Siendo este el código correspondiente en HTML:

<dl>
<dh>TIPOS DE LISTAS</dh>
<dt>Listas ordenadas </dt>
<dd>
<ol>
<li> Primero </li>
<ul TYPE = square COMPACT>
    <li> A </li>
    <li> B </li>
    <li> C </li>
</ul>
<li> Segundo </li>
<li> Tercero </li>
<li> Cuarto </li>
<li> ...... </li>
</ol>
</dd>
<dt>Listas no ordenadas </dt>
<dd><ul type = circle>
<li> ABCDEF </li>
 <ol style="list-style-type: upper-roman" START = 2>
     <li> 1 </li>
     <li> 2 </li>
     <li> 3 </li>
     <li VALUE = 9> 4 </li>
 </ol>
<li> GHIJK </li>
<li> LMNÑOP </li>
<li> QRSTUV </li>
<li> ........ </li>
</ul></dd>
<dt>Listas de definicion</dt>
<dd>
<dl>
<dt>Vocales </dt>
<dd><ul>
     <li> Abiertas </li>
     <ol>
      <li> A </li>
      <li> O </li>
     </ol>
     <li> Cerradas </li>
     <ol>
      <li> E </li>
      <li> I </li>
      <li> u </li>
    </ol>
   </ul>
 </dd>
<dt>Consonantes </dt>
 <dd> BCDFGHJ... </dd>
<dt>Números </dt>
 <dd> 123456... </dd>
</dl></dd>
</dl>

Con todo terminamos y espero que os sea de utilidad, si tenéis alguna duda comentadlo que como digo siempre estamos dispuestos a ayudaros en lo que este en nuestras manos.

Importante, se me olvidaba comentaros un detalle, para aquellos que vayáis a usar las listas en Blogger, debéis escribir el código de manera continua y no como aparecen en los ejemplos, es decir cada etiqueta detrás de otra, dado que si no, os interpretará también los saltos de linea y os dejara espacios entre los objetos de la lista o cosas mas extrañas. Si queréis una explicación, no la tengo, aunque muchos sabemos que el editor de Blogger es algo, digamos caprichoso.

Link: Listas en documentos HTML

Nube de etiqueas o tag cloud en tu blog en Blogger

Si buscáis una manera de organizar las etiquetas o categorías de vuestro blog de una manera mas atractiva y original que una simple lista, en este post describiremos los pasos para poder implementar una nube de tags o nube de etiquetas de la manera mas clara posible.

Es requisito indispensable que vuestro blog posea el widget de las etiquetas para poder visualizar la nube de tags. Si no disponéis de el, es muy sencillo ubicarlo. Id al panel de control de vuestro blog, luego en la pestaña Diseño en Elementos de la página hacéis clic en Añadir un gadget y elegís de la lista el de Etiquetas.

Ahora antes de continuar, es recomendable por no decir obligatorio que hagáis una copia de seguridad de la plantilla antes de realizar cualquier cambio.

A continuación, situados en la pestaña Diseño del panel de control de nuestro blog, nos dirigimos al apartado Edicion de HTML. Una vez allí, buscamos en nuestra plantilla la siguiente instrucción, ]]></b:skin>, que nos va indicar el cierre de la sección CSS. Justo antes debemos incluir el siguiente código de estilo que tendrá la nube de etiquetas, esta a su vez puede ser modificada como ya indicaremos mas adelante.

/* Estilo nube de etiquetas (CSS)
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}

Lo siguiente sera incluir el código que configurará el funcionamiento de la nube de etiquetas que al igual que el estilo puede ser modificada como indicaremos al final del post. El siguiente trozo de código deberemos incluirlo justo después de la misma instrucción anterior, ]]></b:skin> pero antes de la instrucción del cierre de la cabecera, </head>.

<script type='text/javascript'>
// Variables de la nube de etiquetas
var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>

Por último, modificaremos el gadget de las etiquetas que ya teníamos o que hemos añadido como se explico al comienzo del post para convertirlo en una nube de tags. Para ello debemos buscar la siguiente linea, <b:widget id='Label1' locked='false' title='Labels' type='Label'/> que nos indica el widget de las etiquetas. Para que os sea mas sencilla su búsqueda apretad las teclas Ctrl + F y os aparecerá el cuadro de búsqueda.

Otra cosa que debéis tener en cuenta es, si habéis marcado la opción de Expandir plantillas de artilugios, la linea anterior os aparecerá desplegada, por lo que a la hora de sustituir el código que mostraremos a continuación deberéis hacerlo por todo el código que aparezca entre <b:widget id='Label1' locked='false' title='Labels' type='Label'/> y <b:widget/>.

<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
  <h2><data:title/></h2>
</b:if>

<div class='widget-content'>
<div id='labelCloud'/>
<script type='text/javascript'>

// Don't change anything past this point -----------------
// Cloud function s() ripped from del.icio.us
function s(a,b,i,x){
    if(a&gt;b){
        var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
           }
    else{
        var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
        }
    return v
 }

var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = &quot;<data:label.name/>&quot;;
ts[theName] = <data:label.count/>;
</b:loop>

for (t in ts){
   if (!labelCount[ts[t]]){
         labelCount[ts[t]] = new Array(ts[t])
         }
      }
var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
  if(ts[t] &lt; cloudMin){
     continue;
     }
  for (var i=0;3 &gt; i;i++) {
           c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
            }    
       var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
       li = document.createElement('li');
       li.style.fontSize = fs+'px';
       li.style.lineHeight = '1';
       a = document.createElement('a');
       a.title = ts[t]+' Posts in '+t;
       a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
       a.href = '/search/label/'+encodeURIComponent(t);
       if (lcShowCount){
           span = document.createElement('span');
           span.innerHTML = '('+ts[t]+') ';
           span.className = 'label-count';
           a.appendChild(document.createTextNode(t));
           li.appendChild(a);
           li.appendChild(span);
           }
        else {
           a.appendChild(document.createTextNode(t));
           li.appendChild(a);
           }
       ul.appendChild(li);
       abnk = document.createTextNode(' ');
       ul.appendChild(abnk);
  }
lc2.appendChild(ul);  
</script>>

<noscript>
  <ul>
  <b:loop values='data:labels' var='label'>
    <li>
      <b:if cond='data:blog.url == data:label.url'>
        <data:label.name/>
      <b:else/>
        <a expr:href='data:label.url'><data:label.name/></a>
      </b:if>
      (<data:label.count/>)
    </li>
  </b:loop>
  </ul>
</noscript>
  <b:include name='quickedit'/>
</div>

</b:includable>
</b:widget>

Una vez concluido este paso ya podremos hacer una vista previa de nuestra nube, si no se os visualiza correctamente volved a realizar los pasos desde el principio y cercioraros que realizan bien cada paso. Otros fallos de visualización pueden ocurrir cuando no tenéis mas de una etiqueta asignada a algún post de vuestro blog o cuando vuestras etiquetas incluyen caracteres no comunes.

Ahora entra en juego la imaginación de cada uno y toca modificar las variables y los estilos por si alguno se ha quedado descontento con el diseño que trae por defecto. Por tanto empezaremos explicando para que sirve cada atributo del código de variables.

var cloudMin= 1; -- 1 para mostrar todas las etiquetas. Un numero mayor para mostrar ese numero limitado de etiquetas.
var maxFontSize = 20; -- Establece el tamaño máximo en px (píxeles) que tendrá la etiqueta con el mayor numero de artículos.
var maxColor = [0,0,255]; -- Establece el color en formato RGB que tendrá la etiqueta con el mayor numero de artículos.
var minFontSize = 10; -- Establece el tamaño mínimo en px (píxeles) que tendrá la etiqueta con el menor numero de artículos.
var minColor = [0,0,0]; -- Establece el color en formato RGB que tendrá la etiqueta con el menor numero de artículos.
var lcShowCount = false; -- True, para mostrar el numero de post de cada etiqueta, false por defecto.

Por ultimo os daremos unas pautas básicas para que vosotros podais modificar el estilo de la nube de etiquetas, para ello es necesario modicar el codigo de estilo o CSS.

#labelCloud {text-align:center; font-family:arial,sans-serif;} -- El primer atributo, text-align, puede tener los siguientes valores: left, center y right, segun la alineacion que quieras de las etiquetas en la nube. El segundo atributo, font-family, configura el tipo de letra que se usará para mostrar las etiquetas.

#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;} -- El primer atributo tiene dos valores, el que viene por defecto y block, de esta modo se consigue una etiqueta en una linea separada, el segundo atributo, background-image, es si deseas que de fondo aparezca una imagen, para ello debereis sustituir none por la url de la imagen en cuestión entre comillas. El tercer atributo, padding, se usa para dar relleno y por consiguiente mas separacion entre las etiquetas. El cuarto atributo, margin, es similar al padding. El ultimo atributo, border, se usa para lo que indica, para visualizar un borde, ahora esta desactivado pero su configuracion es la siguiente border: 3px solid #FFF; siendo el primer parametor el grosor, el segundo el estilo del borde y el tercero el color, Podeis ver mas estilos de borde en el siguiente post.

Las demas lineas de estilo no son relevantes para modificar el diseño.

Espero que os haya sido de utilidad y hayan encontrado esta guia bastante sencilla. Si os encontrais con algun problema no dudeis en comentarlo que os ayudaremos en todo lo posible. Espero que lo disfruten.

Via phydeaux3

Menús deplegables estilo Google Chrome

Un sencillo script que genera unos bonitos menús con el estilo del famoso navegador Google Chrome, en donde podrás configurarlo para añadir distintas secciones con sus respectivos sub-menus.

Pero antes de meternos en el lio, haced una copia de seguridad de la plantilla, nunca se sabe lo que puede pasar.

Lo primero que deberéis hacer es descargaros el siguiente archivo (chromemenu.zip) que necesitareis durante todo el proceso.

En este zip encontraremos, chrome.js, chromestyleX.css, chromebg-overX.gif, chromebgX.gif, mientras que de los tres últimos encontraremos para cuatro estilos diferentes los cuales los podéis ver aquí (DynamicDrive), y en donde esta explicado en inglés como configurar el script.

Seguiremos por aquí paso a paso; tendréis que subir los archivos anteriores a algún servidor para poder usarlos en el blog, posteriormente deberéis incluirlos en la plantilla después de la etiqueta <head>:

<link rel="stylesheet" type="text/css" href="DIRECCION DEL ARCHIVO chromestyleX.css" />

<script type="text/javascript" src="DIRECCION DEL ARCHIVO chrome.js"></script>

Ya con el script cargado junto con la hoja de estilos (css), la forma de implementarlo en el blog es mediante el siguiente código:

<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="http://mundilima.blogspot.com">Inicio</a></li>
<li><a href="#" rel="dropmenu1">Categorias</a></li>
<li><a href="#" rel="dropmenu2">Noticias</a></li>
</ul>
</div>

<!--1º menú desplegable -->
<div id="dropmenu1" class="dropmenudiv">
<a href="http://mundilima.blogspot.com/search/label/Juegos%20Flash?max-results=8">Juegos</a>
<a href="http://mundilima.blogspot.com/search/label/WTF?max-results=8">WTF!</a>
<a href="http://mundilima.blogspot.com/search/label/Wallpapers?max-results=8">Wallpapers</a>
</div>

<!--2º menú desplegable -->
<div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
<a href="http://mundilima.blogspot.com/search/label/Curiosidades?max-results=8">Curiosidades</a>
<a href="http://mundilima.blogspot.com/search/label/HTML?max-results=8">HTML</a>
<a href="http://mundilima.blogspot.com/search/label/Humor?max-results=8">Humor</a>
</div>

<script type="text/javascript">
cssdropdown.startchrome("chromemenu")
</script>

Ahora nos dedicaremos a analizar el código anterior por si vosotros queréis darle una organización diferente y obviamente para que cambiéis las direcciones que os interesen.

En primer lugar, entre las etiquetas <ul> y </ul> se encuentran declaradas las secciones en las que dos de ellas son sub-menús (dropmenu1 y dropmenu2), si deseáis añadir mas secciones tanto de un tipo como de otra deberéis duplicar las que correspondan entre esas etiquetas.

En segundo lugar se encuentra definido los sub-menús, obviamente la otra sección no es necesaria dado que no es de este tipo sino que es un sección con enlace directo. Podéis ver el ejemplo en el enlace anterior para que os hagáis una idea a lo que me refiero.

Los sub-menús están estructurados de la siguiente forma, son etiquetas <div> con sus respectivos id (identificadores), que ya los vimos antes declarados en la primer parte, y el resto son simplemente enlaces. Con esto imagino que os sera sencillo identificar donde debéis poner la url de vuestra sección y su titulo respectivo. Lo único que si quieres añadir o reducir el numero de sub-secciones, solo debéis cambiar el numero de enlaces según que fin.

Una ultima cosa a destacar es que a partir del segundo sub-menú incluido este, deberéis agregar la propiedad style="width: 150px;" en el estilo que regulara el ancho del mismo, para así no crear solapamientos en las distintas secciones. Podéis verlo en el código en el segundo sub-menú como esta implementado.

Y si queréis añadir mas de una barrita de estas, para ello, fijaros que al final encontrareis una función en JavaScript llamada cssdropdown.startchrome(), bien pues lo único que hay que hacer para añadir mas barritas es duplicar las variables para cada una de las barras con un numero distinto, algo como lo siguiente:

<script type="text/javascript">
cssdropdown.startchrome("chromemenu", "chromemenu2")
</script>

Para terminar deciros que las barras pueden estar justificadas a la izquierda, al centro o a la derecha, solamente hay que configurarlo abriendo el archivo chromestyleX.css con el editor de texto y buscar el siguiente atributo:

text-align: center;

Por defecto se mostrara en el centro, pero podemos asignarle diferentes valores, left para la izquierda y right para la derecha.

Bueno espero que les guste y os sea de utilidad, para cualquier duda comentarla que os ayudaremos encantados.

Mostrar una cabecera distinta aleatoriamente

Hoy, os voy a enseñar un script que yo uso para mostrar las animaciones de los marcianitos aleatoriamente, pero esta vez lo veremos aplicado a la cabecera del blog para que esta cambie cada vez que se cargue la pagina nuevamente.

Lo primero es hacer una copia de seguridad de la plantilla, nunca se sabe lo que puede llegar a pasar.

Todos conocemos o por lo menos intuimos que debe haber una zona en la sección de estilos CSS, en la que este declarada la cabecera del blog. Esta se le denomina #header o también podemos encontrarla como #cabecera o #header-wrapper. Pues bien, estas declaraciones serian mas o menos así:

#header {
   background:#476 url("URL DE LA IMAGEN") no-repeat left top;
   margin:0 0 0;
   color:#fff;
   position: relative;
   padding: 30px 0px 0px 40px;
   height: 60px;
}

Pues el script es muy sencillo, su única función es reemplazar la URL DE LA IMAGEN por aquellas que nosotros elijamos:

El script anterior deberéis situarlo después de la etiqueta <body>, o antes de </body>.

Para aumentar el numero de imágenes aleatorias a mostrar, solo deberéis duplicar enteramente la linea banner[X]="URL DE LA IMAGEN" en donde X sera el valor posterior al ultimo que tenéis agregado en el script, para el ejemplo anterior seria banner[4]="URL DE LA IMAGEN", y si aumentáis la lista también deberéis aumentar la variable de la ecuación de aleatoriedad: var random=Math.round(X*Math.random());, que aplicado al ejemplo anterior sería var random=Math.round(4*Math.random());.

Y para reducir imágenes igual, pero en orden inverso, es decir, quitar tantos banner[X] como queráis y reducir la variable tanto como "banner's" hayais quitado.

Espero haberlo hecho lo mas entendible posible, si tenéis alguna duda comentadlo que para eso estamos, para ayudar ;).

El fondo de una película Flash transparente

Gracias al comentario de Urilec, me dio la idea para publicar un truco que descubrí hace tiempo, este consiste en hacer transparente el fondo de una película flash de tal manera que quede visible allí donde se sitúe.

Este parámetro es usado en este blog en las animaciones de los marcianitos inferiores, de esta manera conseguimos que no entorpezca la visualización del blog entero. Sin embargo nos hemos fijado que hay algunas excepciones en las que este parámetro no funciona y es por ejemplo en versiones anteriores del navegador Mozilla Firefox 2.0 inclusive, o por otra parte en los ordenadores bajo sistema operativo Linux (como el mio :P), tampoco hace su función, ni siquiera en la versión 3.0 del Firefox.

Por lo demás no he tenido mas altercados y los swf se visualizan correctamente para los demás casos. Si por contra ustedes veis que no es así y os entorpece la visión del blog, agradeceríamos que nos lo hiciera comunicar para poder solucionarlo así como su sistema operativo y el programa con el que estáis navegando.

Bueno, a lo que íbamos. Tal efecto de transparencia se consigue mediante la adición de las siguientes lineas de código:

Para las etiquetas OBJECT agregar los siguientes parámetros:

<param name="wmode" value="transparent">

Para las etiquetas EMBED incluir el siguiente atributo:

wmode="transparent"

Claro que también esto se puede realizar desde el propio softaware de Adobe como Flash o Dreamweaver MX. Para mas información podéis visitar este enlace, en donde explican lo 3 métodos, incluido el anterior.

También cito de la misma pagina las excepciones que han descrito en casos que no funciona esta opción:

Para esta función es obligatorio disponer de Macromedia Flash Player versión 6,0,65,0 (Windows) o 6,0,67,0 (Macintosh) o una versión superior.

Nota: para esta función no se admite Mac Classic. Tampoco es posible crear fondos transparentes en un proyector Flash independiente.

Espero que con todo os haya sido de utilidad.

Visor de códigos en Blogger con SyntaxHighlighter

Me he dado cuenta de que a la hora de publicar algún post que contenga código HTML, CSS o JavaScript, resulta muy difícil de interpretar al estar entrecomillado.

Me he propuesto cambiar este estilo y dejarlo en algo mas decente y mas realista, algo que destaque las etiquetas y las propiedades como si de un editor se tratase. Pues después de bastante tiempo buscando he encontrado el siguiente script llamado SyntaxHighlighter, he conseguido implementarlo y los resultado son mas que satisfactorios. Aun así me gustaría conocer vuestra opinión sobre cual método os parece mejor si este o el anterior. Creo que no habrá duda.

Por otra parte quería compartir mi experiencia con este script por lo que a continuación explico las características que tiene y como podéis usarlo en vuestros blogs.

Las librerías SyntaxHighlighter soporta los siguientes lenguajes de programación resaltandolos como si de un editor se tratase:

• C++: cpp, c, c++
• C#: c#, c-sharp, csharp
• CSS: css
• Delphi: delphi, pascal
• Java: java
• JavaScript: js, jscript, javascript
• PHP: php
• Python: py, python
• Ruby: rb, ruby, rails, ror
• SQL: sql
• VB: vb, vb.net
• XML/HTML: xml, html, xhtml, xslt

Los seudónimos anteriores como podéis apreciar se usaran a la hora de indicarle que tipo de lenguaje vamos a mostrar, ya veremos mas adelanta donde debemos indicarlo.

Lo primero que debéis hacer es bajaros el paquete con todos los archivos que se necesitan, lo podréis hacer desde la pagina oficial, o desde este enlace directo. Lo siguiente sera alojar los archivos esenciales en algún servidor que serian SyntaxHighlighter.css, shCore.js y clipboard.swf. Los demás archivos son los llamados "brushes" y sirven para preformatear los distintos lenguajes soportados. Solo son necesarios los que vayáis a usar, en mi caso solo he implementado shBrushCss.js para el código CSS, shBrushJava.js y shBrushJScript.js para el código Java y JavaScript respectivamente y shBrushXml.js para el HTML. Los demás, por ejemplo como, shBrushCpp.js se usa para C++, shBrushDelphi.js para Delphy, shBrushPhp.js para PHP, shBrushPython.js para Ruby, shBrushSql.js para SQL, shBrushVb.js para VisualBasic y por ultimo shBrushCSharp.js para C#. Te recuerdo que en la anterior lista podréis ver todos los lenguajes y su abreviatura para utilizarlos en el blog.

Una vez alojados los archivos nos dirigimos al panel de control de nuestro blog y en la pestaña Diseño nos vamos a la sección Edición de HTML, y sin necesidad de expandir los artilugios nos situamos después de la etiqueta <head>, no es necesario que sea inmediatamente después sino entre estas etiquetas. Recomiendo que sea al principio o al final. Y ahí, pegamos lo siguiente:

Haced una copia de seguridad antes de realizar ningún cambio, nunca se sabe lo que puede pasar.

<link href="(DIRECCIÓN DONDE SE ENCUENTRE ALOJADO SyntaxHighlighter.css)" rel="stylesheet" type="text/css">
<script src="(DIRECCIÓN DONDE SE ENCUENTRE ALOJADO shCore.js)" type="text/javascript">

<!-- carga los brushes -->
<script src="(DIRECCIÓN DONDE SE ENCUENTRE ALOJADO LOS DISTINTOS BRUSHES, REPETIR TODA LA LINEA SI SE INCLUYE MAS DE UNO)" type="text/javascript">
<script language="javascript">
window.onload = function ()
{
/* permite copiar al portapapeles*/
dp.SyntaxHighlighter.ClipboardSwf = "(DIRECCIÓN DONDE SE ENCUENTRE ALOJADO <br />clipboard.swf)";
/* activa el modo blogger*/
dp.SyntaxHighlighter.BloggerMode();
/* activa Highlight */
dp.SyntaxHighlighter.HighlightAll('code');
}</script>

Guardar los cambios y ya esta todo listo, lo único que nos queda es ponerlo en practica de la siguiente manera en vuestros posts.

<pre name="code" class="(AQUÍ DEBERÉIS INDICAR EL SEUDÓNIMO DEL LENGUAJE QUE IRÉIS A MOSTRAR "Ver lista anterior")">
Código a mostrar....
</pre>

Con esto es todo, si tenéis algún problema no dudéis en comentarlo, nosotros estaremos encantados en ayudarles. A partir de ahora iremos modificando poco a poco los post antiguos para implementar este nuevo método de visualización. Aunque queremos saber que os parece el nuevo cambio.

Metatags, ¿Qué son y como usarlos?

Las etiquetas "meta" o metatags son unas lineas en formato HTML que se sitúan en la cabecera de la pagina, entre las etiquetas <head> y </head> proporcionando a los motores de búsqueda información variada sobre el sitio en cuestión.

Aparentemente estas etiquetas permanecen ocultas al usuario sin embargo su labor se ejecuta en segundo plano disponiendo de aquella información relevante de la web o blog como por ejemplo del titulo del blog, el nombre del autor, la temática de la misma, una breve descripción, palabras claves que identifiquen al sitio, codificación, lenguaje, entre muchas otras. De este modo los robots que se encarga de recopilar todas las paginas de la red con su respectiva información les sera mas fácil indexar la tuya y con información relevante, traduciendoce esto directamente en un mejor posicionamiento por lo tanto en un mayor numero de visitas y de mejor calidad.

Aunque se dice que los actuales motores de búsquedas ya no hacen uso de estas etiquetas debido a su antigüedad y por que han caído en desuso, eso no es del todo cierto, es verdad que los buscadores se encargan de recopilar esa información con técnicas propias, sin embargo si un robot se encuentra con estos meta-datos los considerara de mayor prioridad, por lo que seria un error descartarlos como método de posicionamiento. Añado también que no todos los buscadores tienen algoritmos de búsqueda tan avanzados que sean capaces de diferenciar y/o clasificar paginas en base a su contenido por lo que obligatoriamente tienen que recurrir a las etiquetas "meta" para su correcta indexación.

Con todo os mostramos los distintos tipos de metatags que hay y la manera de implementarlos en su página:
<meta content='PALABRAS CLAVE SEPARADAS POR COMAS' name='keywords'/><br /><meta content='BREVE DESCRIPCIÓN DEL BLOG' name='description'/><br /><meta content='NOMBRE DEL AUTOR' name='author'/><br /><meta content='IDIOMA DEL BLOG (DEBE DEFINIRSE EN INGLES)' name='language'/><br /><meta content='TIPO DE LICENCIA DEL SITIO, P.EJ: Creative Commons' name='copyright'/><br /><meta content='TITULO DEL SITIO' name='title'/><br /><meta content='TEMA DE LA PÁGINA' name='subject'/><br /><meta content='APLICACIÓN USADA PARA CREAR LA PÁGINA' name='generator'/><br /><meta content='TIPO DE CODIFICACIÓN (normalmente: text/html; charset=UTF-8)' name='Content-Type'/><br /><meta content='FRECUENCIA DE ACTUALIZACIÓN (X day)' name='revisit'/><br /><meta content='TIPO DE INDEXACIÓN' name='robots'/>Tipos de indexacion:

• all: Para indizar la página completamente (incluidos archivos).
• none: Para indizar la página pero no los archivos.
• index: La página puede ser indizada por los robots.
• noindex: No se permite la indización por parte de los robots.
• follow: Permite a los robots seguir los vínculos de una página a otras.
• nofollow: No permite a los robots seguir los vínculos de una página a otras.

Por otro lado hay un método mas sencillo pero no tan completo para elaborar los metatag y es mediante un generador de metatags, este con solo rellenar los campos del formulario os elaborara del código a implementar, lo malo es que la gran mayoría no son tan completos.

Bueno si tenéis alguna duda no seáis tímidos y comentadla ;).

Incrustar el formulario de los comentarios en Blogger

Como podréis ver, hemos habilitado la opción que permite incrustar el formulario de comentarios al final de cada entrada del blog. Esto la verdad que ayuda mucho a la hora de acercar al lector esa interactividad tan característica de la red 2.0 y que tanto se fomenta en los blogs, haciendo mucho mas facil escribir un comentario sin necesidad de cargar el formulario en terceras paginas.

Espero que esto incite a los usuarios a comentar mas, que siempre nos gusta leer sus opiniones y abrir debate en torno a ellos.

El trasfondo de esta articulo es enseñaros como poder hacer lo mismo en vuestros blogs en sencillos pasos y con la posibilidad de modificar si se quieres este formulario.

Lo primero es lo primero, haced una copia de seguridad de vuestra plantilla antes de llevar a cabo cualquier cambio.

Posterior a esto no dirigimos a la pagina de Blogger in draft, el cual es la pagina de Blogger donde se realizan todas las pruebas antes de implementarlas oficialmente. Se accede igual que en el Blogger normal, simplemente lo que veremos es una interfaz distinta en donde los desarrolladores prueban las betas antes de hacerlas públicas.

Por tanto, vamos a la pestaña Configuración allí accedemos a la opción Comentarios y buscamos Ubicación del formulario de comentarios, donde seleccionaremos Entrada incrustada a continuación. Esto es todo lo que tenemos que hacer en "Blogger in draft", al resto del proceso es indiferente donde lo hagáis, se puede hacer en el primero o en el Blogger normal.

Lo siguiente seria comprobar en vuestro blog, después de haber guardado los cambios, si ya se os ve el formulario en las entradas individuales. Digo esto dado que he comprobado que en algunas plantillas con hacer esto es lo único que se necesita para habilitarlo. En cambio si aun no lo veis seguiremos con lo siguiente:

Nos dirigimos a la pestaña Diseño y dentro de allí entramos en Edición de HTML. Activamos la casilla de la opción Expandir plantillas de artilugios. Con el acceso directo Ctrl + F buscaremos la siguiente linea: <b:includable id='backlinkDeleteIcon' var='backlink'>. Donde justo detrás haremos hueco para añadir el siguiente trozo:

<b:includable id='comment-form' var='post'><br /><div class='comment-form'><br /><a name='comment-form'/><br /><h3><data:postCommentMsg/></h3><br /><p><data:blogCommentMessage/></p><br /><iframe allowtransparency='true' expr:src='data:post.commentFormIframeSrc' frameborder='0' height='275' id='comment-editor' scrolling='auto' width='100%'/><br /></div><br /></b:includable>Cuidado, que este puede estar duplicado, ya que al marcar la opción en la configuración, esta añade el código automáticamente sin embargo por diversos motivo no funciona y hay que hacerlo manualmente. Por ello cercioraros de que el código anterior o similar es decir cualquiera que se encuentre dentro de <b:includable id='comment-form' var='post'> ... y ...</b:includable> no se repita y de ser así eliminarlo completamente y usad el expuesto aquí.

Por ultimo, debemos ubicarnos en la siguiente etiqueta <b:includable id='comments' var='post'> debemos buscar algo como esto:

<p class='comment-footer'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:postCommentMsg/>
</a>
</p>

Y sustituirlo por lo siguiente:
<p class='comment-footer'><br /><b:if cond='data:post.embedCommentForm'><br /><b:include data='post' name='comment-form'/><br /><b:else/><br /><b:if cond='data:post.allowComments'><br /><a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a><br /></b:if><br /></b:if><br /></p>Con todo ya estamos listo para guardar, y ver los resultados. Aparte queda la posibilidad de modificar ciertos parámetros del estilo de este formulario en la parte CSS de nuestra plantilla, solo basta con agregar los siguientes atributos antes de ]]></b:skin>.
(ENGLOBA TODO EL FORMULARIO, CON ESTOS VALORES LOS CENTRAS EN EL BLOG.)<br /><br />.comment-form {<br />margin: 0 auto;<br />width: 400px;<br />}<br /><br />(ESTE ES EL TITULO, "PUBLICAR UN COMENTARIO", PREPARADO PARA PONER UN ICONO AL LADO DEL TITULO.)<br /><br />.comment-form h3 {<br />background:transparent url(URL DE LA IMAGEN) no-repeat scroll left 50%; color:#6998CA;<br />font-size:19px;<br />line-height:35px;<br />}<br /><br />(AQUÍ CONFIGURAS EL CUADRO DE TEXTO DEL MENSAJE DE LOS COMENTARIOS.)<br /><br />.comment-form p {<br />background-color:#EFEFF7;<br />color:#000;<br />border:1px solid #02080e;<br />padding:10px;<br />width:375px;<br />}<br /><br />(LAS DIMENSIÓN DEL "IFRAME" SIENDO EL ALTO Y EL ANCHO RESPECTIVAMENTE.)<br /><br />#comment-editor {<br />height: 250px;<br />width: 350px;<br />}Espero que les sea de utilidad para poder habilitar el cuadro de comentarios. Ya sabéis que si tenéis alguna duda o problema comentadlo y ahora con mas razón que es mucho mas fácil.

Script para posts aleatorios

Tal y como muestra el titulo, el siguiente script una vez implementado en vuestro blog, permitirá navegar a los usuarios de manera aleatoria solo con pulsar cualquier tipo de enlace que configuremos: Una imagen, un gif o simplemente texto.

El método a seguir es el siguiente. Lo primero es irnos a nuestro panel de control del blog e irnos a la pestaña Diseño, seguidamente nos vamos a la sección Edición de HTML. Sin necesidad de marcar la opción Expandir plantillas de artilugios, apretamos la combinación de te teclas Ctrl + F abriéndose así el cuadro de búsqueda.

Buscamos el cierre de la etiqueta <head> que sería </head> respectivamente. Una vez localizada, podemos añadir el siguiente trozo de código antes de la etiqueta.

<script type='text/javascript'>
//<![CDATA[
function showLucky(root){
var feed = root.feed;
var entries = feed.entry || [];
var entry = feed.entry[0];
window.location = entry.link[0].href;
}
function fetchLuck(luck){
script = document.createElement('script');
script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky';
script.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script);
}
function readLucky(root){
var feed = root.feed;
var total = parseInt(feed.openSearch$totalResults.$t,10);
var luckyNumber = Math.floor(Math.random()*total);
luckyNumber++;
fetchLuck(luckyNumber);
}
function feelingLucky(){
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = '/feeds/posts/summary?max-results=0&alt=json-in-script&callback=readLucky';
document.getElementsByTagName('head')[0].appendChild(script);
}
//]]>
</script>

Lo último que nos queda es agregar el enlace donde nosotros queramos con el siguiente código.

Un enlace con texto:

<a href="#random" onclick="feelingLucky()" title="Posts Aleatorios">"Posts aleatorios"</a>

O un enlace con una imagen o gif, solo tenéis que cambiar la dirección en rojo para poner la vuestra propia:

<a href="#random" onclick="feelingLucky()" title="Posts Aleatorios"><img src="http://img521.imageshack.us/img521/3936/interrogacionae7.gif"></a>

Si tenéis alguna duda preguntadlo y os ayudaremos ;D.

Menú desplegable o menú de navegación por selección

Hoy tenemos un pequeña utilidad que consiste en un menú desplegable con diferentes opciones a elegir pudiendo albergar una gran cantidad de enlaces en un espacio pequeño. Probablemente la mayoría lo use como un selector de diferentes enlaces pero también es posible usarlo para activar determinadas funciones incluidas en algún "script" o similar.

El código base es el siguiente, solamente con una opción a elegir:
<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')" size=1 name=menu><br /><br /><option value=0 selected="selected">TITULO DEL MENÚ</option><br /><br /><option value="URL DEL ENLACE">TITULO DEL ENLACE</option> </select></form>De esta manera, para agregar mas opciones con sus respectivos enlaces solo debemos duplicar tantas veces como enlaces deseemos poner, toda la sentencia que engloba la etiqueta <option>.

Por ejemplo:<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')" size=1 name=menu><br /><br /><option value=0 selected="selected">--Selecciona una categoría--</option><br /><br /><option value="http://mundilima.blogspot.com/search/label/WTF?max-results=8">WTF¡¡</option><br /><option value="http://mundilima.blogspot.com/search/label/Wallpapers?max-results=8">Wallpapers</option><br /><option value="http://mundilima.blogspot.com/search/label/Juegos%20Flash?max-results=8">Juegos</option><br /><option value="http://mundilima.blogspot.com/search/label/Lo%20%2B%20en%20V%C3%ADdeos?max-results=8">Los mejores vídeos</option><br /><br /></select></form>El resultado es el siguiente:

--Selecciona una categoría--WTF¡¡WallpapersJuegosLos mejores vídeos

Esto es todo lo que necesitamos para crear nuestro menú por selección, espero les sea de utilidad.

Tutorial: Tablas en HTML

A petición de un lector y por iniciativa propia debido a que determinadas personas se están dedicando a copiar nuestro código fuente, en especial el diseño de la visualización de los fondos de pantalla me voy a dedicar en este articulo a diversos ejemplos de cómo crear una tabla original y divertida que cualquiera será capaz de adoptar el modelo para elaborar el suyo propio.

En principio la estructura de un tabla en HTML es bien simple, tener en cuenta que en blogger a la hora de escribir el código de la tabla deberéis hacerlo de manera continua, es decir sin ningún salto de línea. La estructura es la siguiente:<table><tr><td>Contenido</td></tr></table>Siendo la etiqueta <table> la que formatea el inicio de la tabla, <tr> la que crea una fila y por último <td> la que crea una celda.

Aquí diversos ejemplos:<table><tr><td>Celda 1</td><td>Celda 2</td></tr></table>

Celda 1

Celda 2

<table><tr><td>Celda 1</td><td>Celda 2</td></tr><tr><td>Celda 3</td><td>Celda 4</td></tr></table>

Celda 1	Celda 2
Celda 3	Celda 4

<table><tr><td>Celda 1</td><td>Celda 2</td><td>Celda 3</td></tr><tr><td>Celda 4</td><td>Celda 5</td><td>Celda 6</td></tr></table>

Celda 1	Celda 2	Celda 3
Celda 4	Celda 5	Celda 6

Con estos ejemplos podéis haceros un idea de cómo se organiza cada elemento, es decir por cada nueva etiqueta <tr> se crea una fila y por cada <td> se crea una celda.

Lo siguiente es añadirle un estilo dado que este tipo de tablas son un poco sosas. Así que explico las distintas propiedades que podemos usar.

Dentro de la etiqueta <table>, <td> y <tr> podemos agregar lo siguiente:

cellspacing = "X" distancia entre el borde y el contenido de las celdas.
cellpadding = "X" distancia entre las celdas.
colspan = "X" número de celdas que quieras unir.

A su vez dentro del atributo "style" podemos configurar estas variables:

border = X px estilo #color; (estilos: none, solid, dotted, dashed, double,ridge, groove, inset, outset)
background-color = #color; color de fondo.
align = left,center,right;
width = X px; ancho de la tabla.
Height = X px; alto.

Con esto tenemos suficiente para crear diseños curiosos sin necesidad de saber más por lo que a continuación incluyo distintos diseños utilizando los parámetros anteriores:

Celda 1	Celda 2	Celda 3
Celda 4	Celda 5	Celda 6
Celda 7	Celda 8	Celda 9

<table style="border: 3px dashed rgb(128, 153, 210); float: left; background-color: rgb(182, 204, 226); width: 259px; height: 236px;" align="center" cellpadding="1" cellspacing="5"><tbody><tr><td style="border: 1px dashed rgb(36, 46, 70); background-color: rgb(101, 95, 155); text-align: center;">Celda 1<br /></td><td style="border: 1px dashed rgb(36, 46, 70); background-color: rgb(101, 95, 155); text-align: center;">Celda 2<br /></td><td style="border: 1px dashed rgb(36, 46, 70); background-color: rgb(101, 95, 155); text-align: center;">Celda 3<br /></td><br /></tr><tr><td style="border: 1px dashed rgb(36, 46, 70); background-color: rgb(101, 95, 155); text-align: center;">Celda 4<br /></td><td style="border: 1px dashed rgb(36, 46, 70); text-align: center;">Celda 5<br /></td><td style="border: 1px dashed rgb(36, 46, 70); text-align: center;">Celda 6<br /></td></tr><tr><td style="border: 1px dashed rgb(36, 46, 70); background-color: rgb(101, 95, 155); text-align: center;">Celda 7<br /></td><td style="border: 1px dashed rgb(36, 46, 70); text-align: center;">Celda 8<br /></td><td style="border: 1px dashed rgb(36, 46, 70); text-align: center;">Celda 9<br /></td></tr></tbody></table>

Cabecera
Celda 1	Celda 2	Celda 3	Celda 4
Celda 5	Celda 6	Celda 7	Celda 8

<table style="border: 5px outset rgb(50, 102, 49); background-color: rgb(107, 166, 100); width: 302px; height: 236px;" align="center" cellpadding="1" cellspacing="5"><tbody><tr align="center"><td colspan="4" style="background-color: rgb(201, 239, 196);">Cabecera<br /></td></tr><tr><td style="border: 2px solid rgb(50, 102, 49); background-color: rgb(201, 239, 196); text-align: center;">Celda 1<br /></td><td style="border: 2px solid rgb(50, 102, 49); background-color: rgb(201, 239, 196); text-align: center;">Celda 2<br /></td><td style="border: 2px solid rgb(50, 102, 49); background-color: rgb(201, 239, 196); text-align: center;">Celda 3<br /></td><td style="border: 2px solid rgb(50, 102, 49); background-color: rgb(201, 239, 196); text-align: center;">Celda 4<br /></td><br /></tr><tr><td style="border: 2px solid rgb(50, 102, 49); background-color: rgb(201, 239, 196); text-align: center;">Celda 5<br /></td><td style="border: 2px solid rgb(50, 102, 49); background-color: rgb(201, 239, 196); text-align: center;">Celda 6<br /></td><td style="border: 2px solid rgb(50, 102, 49); background-color: rgb(201, 239, 196); text-align: center;">Celda 7<br /></td><td style="border: 2px solid rgb(50, 102, 49); background-color: rgb(201, 239, 196); text-align: center;">Celda 8<br /></td></tr></tbody></table>

Cabecera
Celda 1	Celda 2	Celda 3	Celda 4	Celda 5	Celda 6	Celda 7	Celda 8
Pie

<table style="border: 5px double rgb(219, 182, 182); background-color: rgb(38, 18, 30); width: 503px; height: 171px;" align="center" cellpadding="1" cellspacing="5"><tbody><tr align="center"><td colspan="9" style="background-color: rgb(181, 110, 110);">Cabecera<br /></td></tr><tr><td style="border: 2px solid rgb(219, 182, 182); background-color: rgb(232, 217, 217); text-align: center;">Celda 1<br /></td><td style="border: 2px solid rgb(219, 182, 182); background-color: rgb(232, 217, 217); text-align: center;">Celda 2<br /></td><td style="border: 2px solid rgb(219, 182, 182); background-color: rgb(232, 217, 217); text-align: center;">Celda 3<br /></td><td style="border: 2px solid rgb(219, 182, 182); background-color: rgb(232, 217, 217); text-align: center;">Celda 4<br /></td><br /><td style="border: 2px solid rgb(219, 182, 182); background-color: rgb(232, 217, 217); text-align: center;">Celda 5<br /></td><td style="border: 2px solid rgb(219, 182, 182); background-color: rgb(232, 217, 217); text-align: center;">Celda 6<br /></td><td style="border: 2px solid rgb(219, 182, 182); background-color: rgb(232, 217, 217); text-align: center;">Celda 7<br /></td><td style="border: 2px solid rgb(219, 182, 182); background-color: rgb(232, 217, 217); text-align: center;">Celda 8<br /></td></tr><tr align="center"><td colspan="9" style="background-color: rgb(181, 110, 110);">Pie</td></tr></tbody></table>Para mas información podeis visitar los siguientes enlaces:

Tablas-Vagabundia parte (I) y (II)
Tutorial: Tablas en HTML
Tablas en HTML y atributos
Introducción a las tablas en HTML

Cambiar el número de entradas a mostrar en las etiquetas

Es sabido que para cambiar el número de entradas que deseas visualizar en la página principal del blog debemos ir a la pestaña Diseño y en la sección Elementos de la página picamos en Editar del elemento Entradas del blog. Posterior a esto se nos abre una ventana donde podemos configurar distintas opciones de los artículos y de la página principal.

Pero por otro lado, si deseamos cambiar el número de artículos que aparecen al acceder a una etiqueta o categoría no tenemos un método sencillo como el anterior sino que hay que hacer uso del HTML, pero no es nada complicado. Para ello, dentro de la misma pestaña, Diseño, nos vamos a la sección Edición de HTML y marcamos la opción Expandir plantillas de artilugios. Abrimos el buscador de palabras con el acceso directo Ctrl-F y buscamos lo siguiente: <div id='sidebar-wrapper2'>. Una vez situados debemos buscar el siguiente trozo y añadirle la expresión que se expone a continuación:<div id='sidebar-wrapper2'><br /><b:section class='sidebar2' id='sidebar2' preferred='yes' showaddelement='yes'><br /><b:widget id='Label1' locked='false' title='Etiquetas' type='Label'><br />...........<br /><a expr:href='data:label.url + ?max-results=NUMERO DE ENTRADAS'><data:label.name/></a>Por defecto el número de entradas que se muestran en cada categoría es de 20, de modo que con esta variable podemos reducirlas al número que deseemos. Solo debéis añadir lo que está resaltado en rojo y sustituir la X por el número de entradas que queráis mostrar, lo demás es solo para ejemplificar donde está situado y donde debéis añadirlo.

Si tenéis alguna duda comentadlo para ponerle solución ;D.

Ocultar caja de texto "Mostrar entradas con la etiqueta..."

Muchos de los que tenéis un blog habréis notado que cuando entráis en alguna etiqueta, al comienzo de los post os aparece un cuadro de texto con el siguiente mensaje:

Hay plantillas que ya vienen configuradas para que tal mensaje no aparezca, en cambio en otras es necesario implementar el siguiente estilo para ocultarlo. Para ello buscar este trozo de codigo, ]]></b:skin> y justo antes añadimos esto:.status-msg-wrap {display:none;}De tal manera que cada vez que alguien acceda a cualquier categoría el mensaje de estado ya no estará visible.

Mostrar u ocultar etiquetas "div", onLoad

Una opción que me ha resultado útil después de averiguar su funcionamiento es la manera de mostrar algún contenido que se encuentre entre etiquetas <div> al terminar de cargarse la pagina o por contra, hacer que cuando termine de cargarse la pagina se oculte algo, como un "preload" (precarga).

La implementación es muy sencilla, lo primero es tener el contenido en cuestión entre las etiquetas de tal manera que:<div id="NOMBREUNICO">CONTENIDO A MOSTRAR/OCULTAR</div>Lo siguiente es crear un estilo para este divisor en el que el atributo "display" va a marcar el estado de visualización al empezar a cargarse la página:#NOMBREUNICO {<br />display: none (PARA QUE APAREZCA OCULTO); block (PARA QUE APAREZCA VISIBLE);<br />}Según lo que prefiramos elegimos un valor u otro. Lo último a agregar es la función que hará el cambio del valor "display" al terminar de cargarse la página.<script type="text/javascript"><br />window.onload = NOMBRE PARA LA FUNCION;<br />function NOMBRE PARA LA FUNCION() {<br />document.getElementById('ID DEL DIV').style.display="none (PARA OCULTARLO) block (PARA MOSTRARLO)";<br />}<br /></script>Con esto, es todo lo que necesitáis para mostrar u ocultar cualquier <div> que se os antoje, recordad que en el script debes dejar el valor contrario al que pusiste en el estilo, ya que si no, no veras ningún efecto.

De esta manera puedes crear divertidos efectos de precarga de una página por ejemplo con este script:<script type="text/javascript"><br />window.onload = Precarga;<br />function Precarga () {<br />document.getElementById('Cargando').style.display="none";<br />}<br /></script><br /><br /><div id="Cargando"><img border="0" style="text-align:center;" src="http://img455.imageshack.us/img455/6249/ajaxloaderla8.gif"/><div style="text-align:center;">Espere por favor, cargando...</div></div>Si quieres crear gifs de precarga personalizados, hace tiempo elaboramos un post con distintas herramientas online para crear gifs animados con tal efecto, echadles un vistazo que os pueden resultar interesantes.

Añadir iconos para las redes sociales en blogger

Algo muy demandado entre los nuevos bloggers es la manera de poner los iconos para las redes sociales debajo de cada post. De forma que puedan ser enviados a estos servicios para quien le interese, cosa que nos beneficia dado que nos fomenta el tráfico hacía nuestro blog dando publicidad de los artículos en estas redes sociales donde acuden diariamente miles de visitas.

Por tanto, a continuación detallaremos los pasos para colocar los susodichos iconos.

Nos vamos a la página de modificación de la plantilla. Es decir, en la pestaña Diseño a la sección Edición de HTML y activamos la opción Expandir plantillas de artilugios.

A continuación mediante el acceso directo Ctrl + F, buscamos la siguiente línea:
<p class='post-footer-line post-footer-line-3'/>

Y lo sustituiremos por lo siguiente:<p class='post-footer-line post-footer-line-3'><br /><br /><div class='rsociales'><br />Agregar a marcadores favoritos:<br /><ul><br /><br /><li><a expr:href='"http://www.technorati.com/faves?add=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Technorati' class='rsociales-sobre' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDYzwvVoFd4h-z7iihSAphzUP2wW53dkvNHEO4mgnsxuO5y5vq16bsJiGRNavsdIjdTwuKqDEGeOKW_YpMvKerG0wYXsmb8rOs-QEvjHlge5sQehqAOr_2ASn_W6QHhwt8WhTflI96ARM/s1600/technorati.gif'/></a></li><br /><br /><li><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Del.icio.us' class='rsociales-sobre' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFox9zNf8qRDa1WSOjeVBLh7Wtz5juOyf13x6VpMkE90P8DJlOV5ZcmKHfW-cf1wH_mpJE0DgaVeLzHYtKSUEIwiGCeGXtqJEW9Ztbh5MewrhDKRYuEs1Ki9x98E7RKdRRPHdjHhp2gOY/s1600/delicious.gif'/></a></li><br /><br /><li><a expr:href='"http://digg.com/submit?phase=2&amp;amp;url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a DiggIt!' class='rsociales-sobre' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv5wdEaYC9SnnXs16n0vQD-1zCeT_aK27b9CAW1R3iEQD583AqJ4mzqjvKaoqsic4wwwggaelTssqNKh9nj9y9Ficrbr58ZWI3mMpnVEj5KOoB_0Nthn1cLKHNX38NiR5bdH1SFBPqv7M/s1600/digg.png'/></a></li><br /><br /><li><a expr:href='"http://myweb2.search.yahoo.com/myresults/bookmarklet?u=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Yahoo!' class='rsociales-sobre' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji8gFQ253gZxmfNcgAbc4SimnHbU6zxe8-GSJnxhrfPzk5fhdnQkciAWBK8e0LV6Z6FJVn5XZxP2ZFU26RiillQa5dp77l22KoAJxbtmqfNeHoV0X2mtvfjmhzlTKxOq4KSkYOAal74NY/s1600/yahoo.png'/></a></li><br /><br /><li><a expr:href='"http://www.google.com/bookmarks/mark?op=edit&amp;output=popup&amp;bkmk=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Google' class='rsociales-sobre' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzfcpnGVAnphU3NlHJ7Wlzefugq55OuTz8hGmFKXuGab5UchXSDKw4dJBFLvkrEBASYeMRkH_4ZuU7ypI7-bw4ufpU4LGd_oNMHPwPJMUKpR5uH9VJAju2hOR5q_3bIdy25AFn3oKghMY/s1600/google.gif'/></a></li><br /><br /><li><a expr:href='"http://meneame.net/submit.php?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Meneame' class='rsociales-sobre' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7x3-ZUxm0o-3CedzLa2AgojCGXaqLgyV2IcpB0X5-ryzw42vz0B6iLaMj9vEKu4s4dPTaTMCoBvkns4k13oUNZwhLBVkmTBDOsGKjlU2OarUD1qbjxp82w1qFqfoXidxyFD-Ko_Cgmys/s1600/meneame.png'/></a></li><br /><br /><li><a expr:href='"http://www.furl.net/storeIt.jsp?u=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Furl' class='rsociales-sobre' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipj-Rw5gYB8DhEYBQGMni_ya5om20-HVuotx_k56f33YR-usGw6HLCzktN9lQiUMItdb489V_c_W-5VxPofRiAt2ovTVmXWveFz6fK6whU_UEMNWgxwY4sBd337i7MGIl2Te0ejiigMIs/s1600/furl.png'/></a></li><br /><br /><li><a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Reddit' class='rsociales-sobre' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp_Zc7O5IrmT-OiwY1C4ZIgEkXkI_pA_0v8DEvRmZjxXbw0YUCS1xwz1v8yEMyg_5x_D5Uvi4A-1uTUpjW70j-n2FX1VtfUOBjkIInuxzE88p6kUCHTy4-R8i1_4FkCop2rCTJXMKBEfc/s1600/reddit.gif '/></a></li><br /><br /><li><a expr:href='"http://ma.gnolia.com/beta/bookmarklet/add?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Magnolia' class='rsociales-sobre' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMLpe2ubqhpskLbDgudso42hpjoszfbkBJUc6dEmZsGvSkWnskEnOPoOMeBu0w_4cZO49eP1YqKDv8Kws_zRNNjy8jgKVikjCqc6B2dRO15897Ga_Ct3L_dai6o-JZqn-0QDqERs5sQcM/s1600/magnolia.gif'/></a></li><br /><br /><li><a expr:href='"http://www.blinklist.com/index.php?Action=Blink/addblink.php&amp;Description=&amp;Url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Blinklist' class='rsociales-sobre' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiszpsVH3ForYkSWMCPiFnLMf2VbDuegM5D-NvGZWud3tZkdg4GodqCh_qGwUqQep7isFns-y2U7UbH9d7d53iVdVXT_ir6Ny4I0NchcQslPWu_KpNlLFON7AeUa-qwioGJuEJEMvWuI8Q/s1600/blinklists.gif'/></a></li><br /><br /><li><a expr:href='"http://blogmarks.net/my/new.php?mini=1&amp;simple=1&amp;url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Blogmarks' class='rsociales-sobre' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH_-bQFtf9_7JMbuaNAhg4zWberi3v3QpWta2o1uVluZ7zwNFIPGVE7EsgVtR0Yj09lnXBZ3CjFi991W5pWXLhKzbn1Z7UUxhrsLbKICbdMXh5fUNRI2-BSEzgMSWaBESUeDsUbniS7G8/s1600/blogmarks.gif'/></a></li><br /><br /></ul><br /></div><br /></p>
Donde cada etiqueta <li> es un icono con su respectivo enlace al formulario de la red social en cuestión.

El último paso se trata de darle estilo a las anteriores listas por lo que añadiremos unos parámetros en CSS. Para ello buscamos la siguiente línea, ]]></b:skin>, y justo antes incluimos el siguiente código:.rsociales ul {<br />display:inline;<br />margin:0pt !important;<br />padding:0pt !important;<br />}<br />.rsociales li {<br />background:transparent none repeat scroll 0%;<br />display:inline;<br />list-style-type:none;<br />margin:0pt;<br />padding:2px;<br />}<br />.rsociales img {<br />border:0pt none;<br />float:none;<br />margin:0pt;<br />padding:0pt;<br />}<br />.rsociales-sobre {<br />opacity:0.4;<br />}<br />.rsociales-sobre:hover {<br />opacity:1;<br />}Ya hemos terminado, por ultimo decir que los anteriores parámetro pueden ser modificados a vuestro gusto para adaptarlos a vuestro blog como más os guste.

Otra cosa a decir es que en el primer código están incluidos las redes sociales más conocidas, pero si queréis añadir más, solo tenéis que duplicar toda la sentencia que hay entre <li> y </li> ambos incluidos y situarla antes del "tag" </ul>, y a su vez cambiar la dirección de la red social y la dirección del gif que lo va a representar. El ejemplo:<li><a expr:href='"URL DEL FORMULARIO DE LA RED SOCIAL" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Agregar a RED SOCIAL' class='rsociales-sobre' src='URL DEL ICONO DE LA RED SOCIAL'/></a></li>A continuación os listo otras redes sociales con su icono respectivo por si quereis agregar alguna mas.

Código de Hazmereir:

<li><a expr:href='"http://www.hazmereir.net/login.php?return= /submit.php" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Hazmereir#039; class='rsociales-sobre' src='http://farm3.static.flickr.com/2274/2108626471_c28070a4c7_t.jpg'/></a></li>

Código de Webeame:

<a expr:href='"http://www.webeame.net/submit.php?url=" + data:post.url + "&amp;title="+ data:post.title' target='_blank'><img alt='Agregar a Webeame' src='http://club.telepolis.com/S98GYVNSG/webeame.gif'/></a>

Código de Mascame:

<li><a expr:href='"http://www.mascame.com/submit.php?url=1&amp;simple=1&amp;url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Mascame' class='rsociales-sobre' src='http://farm3.static.flickr.com/2301/2110794361_2c64942f60_t.jpg'/></a></li>

Código de Seoclon:

<li><a expr:href='"http://www.seoclon.com/submit?url=1&amp;simple=1&amp;url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Seoclon' class='rsociales-sobre' src='http://farm3.static.flickr.com/2041/2111573886_8f8b285d35_t.jpg'/></a></li>

Código de Blub:

<li><a expr:href='"http://noticias.sinmiedo.es/submit.php?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Blub#039; class='rsociales-sobre' src='http://farm3.static.flickr.com/2274/2111573792_c4d2697cc9_t.jpg'/></a></li>

Código de Universo TV:

<li><a expr:href='"http://www.universotv.org/login.php?return=/submit=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Universo TV#039; class='rsociales-sobre' src='http://farm3.static.flickr.com/2222/2111573860_7244885759_t.jpg'/></a></li>

Código de Enchilame:

<li><a expr:href='"http://enchilame.com/submit.php?url=" + data:post.url + &amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Enchilame#039; class='rsociales-sobre' src=' http://www.tecnoswa.com/blog/wp-content/themes/blog-pixel/favoritos/enchilame.gif'/></a></li>

Código de Viajame:

<li><a expr:href='"http://www.viajame.net/login.php?return=1&amp;simple=1&amp;url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Viajame' class='rsociales-sobre' src='http://farm3.static.flickr.com/2396/2111552084_95eb91769c_t.jpg'/></a></li>

Código de MisterWong:

<li><a expr:href='" http://www.mister-wong.es/index.php?action=addurl&bm_url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Hazmereir#039; class='rsociales-sobre' src='http://www.tecnoswa.com/blog/wp-content/themes/blog-pixel/favoritos/wong.gif'/></a></li>

Código de Wikio:

<a expr:href='"http://www.wikio.es/vote?url=" + data:post.url + "&amp;title="+ data:post.title' target='_blank'><img alt='Agregar a wikio' src='http://club.telepolis.com/S98GYVNSG/wikio.gif'/></a>

Código de la Claqueta:

<li><a expr:href='"http://www.claqueta.net/submit.php?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a la Claqueta#039; class='rsociales-sobre' src='http://imagenes.claqueta.net/Gravatar_15.gif'/></a></li>

Código de Autobombo:

<li><a expr:href='"http://autobombo.es/submit.php?url=1&amp;simple=1&amp;url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Autobombo#039; class='rsociales-sobre' src='http://farm3.static.flickr.com/2113/2110794305_ae78e3b0ca_t.jpg'/></a></li>

Código de StumbleUpon:

<li><a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Agregar a StumbleUpon'><img alt='Agregar a StumbleUpon' class='rsociales-sobre' src='http://img396.imageshack.us/img396/1984/stumbleuponxr5.png'/></a></li>

Desplegar/Ocultar lista

Debido a la gran cantidad de código espero no haberme equivocado en nada, pero por si acaso si alguna no funciona, por favor comunicádmelo para su corrección. En principio todos están probados así que no tendréis problemas ni con los enlaces ni con las imágenes. Espero que les sirva para vuestro propósito, y os recuerdo que no tenéis que incluirlas todas obligatoriamente.

Para otra cosa o cualquier duda ya sebeis donde estamos :D.

#Actualización: Agragado StumbleUpon a la lista de redes sociales.

Script para mostrar los ultimos comentarios en tu blog

Hacía tiempo que quería estrenar la pestaña del blog donde albergaría los últimos comentarios, pero claro sin comentarios me iba ser imposible comprobarlo a menos que me dejara yo mismo alguna tontería, así que decidí esperar.

Pero a día de hoy ya disponemos de algunos comentarios que han ido dejando los internautas a los cuales les agradezco mucho su aportación, y animo a la gente a que lo sigua haciendo dado que eso nos ayudará a seguir mejorando este pequeño blog donde puedan encontrar aquello que andáis buscando o aquello que os pueda llegar a entretener en un momento de aburrimiento.

A lo que iba, gracias a esos comentarios he podido implementar el script para mostrarlos en la pestaña, pudiendo realizarlo de dos maneras.

La primera fue usando el mismo script que utiliza para los artículos recientes, en el enlace os dirigiréis al artículo que realizamos en su momento, solo tenéis que cambiar la dirección del feed de los artículos por la de los comentarios que sería algo parecido a esto:
http://NOMBRE DEL BLOG.blogspot.com/feeds/comments/defaultLo demás esta explicado en el artículo en cuestión.

La segunda opción y nueva, la encontré navegando por internet y parece ser muy interesante porque nos brinda el mismo resultado que el script anterior con la comodidad de que es una utilidad online, la cual con pequeñas instrucciones en ingles podemos modificar sus características. Es decir controlar el numero de comentarios a mostrar, si deseas que aparezca la fecha y la hora y muchas opciones mas.


Una vez lo tengamos a nuestro gusto, puedes darle al botón Previw Feed para mirar el resultado, (el cuadrado de fondo junto con el borde no se incluye en el script), si os convence, lo siguiente seria darle al botón Genereta JavaScript, lo que hará que se muestre un recuadro en la parte superior de la página con el código del script ya configurado a nuestro gusto.


Antes de terminar, recordar que hay una tercera manera de realizar esto la cual ya comente en el articulo al que hago referencia anteriormente y es mediante el "widget" de Blogger, pero este no se podría incluir dentro de la pestaña donde me interesa, en cambio podría establecerse en cualquier otro lugar de la plantilla.

Espero que les sea de utilidad, y si tenéis alguna duda comentadlo y la intentaremos solventar.

Enlace: Feed2JS

Muestra los posts mas recientes en tu blog

Este articulo lo voy a dedicar también a otra utilidad para el blog, en especial la manera de mostrar los post más recientes en algún lugar de la plantilla. Conozco dos maneras, la primera siendo algo limitada es agregando un elemento que Blogger nos proporciona que es mediante un feed del sitio.

Para ello nos vamos a la pestaña Diseño y en la sección Elementos de la página añadimos el elemento Feed. Para este caso el blog en cuestión es el nuestro por lo que solo debemos ingresar la dirección de nuestro feed y estará listo. A posterior tenemos la opción de configurarlo para mostrar un titulo específico o decidir cuántos post queréis que aparezcan o si preferís mostrar el autor y la fecha de estos. El único inconveniente es que solo nos permite mostrar los últimos cinco posts que se hayan creado.

Pero esto tiene una solución y es hacerlo de la segunda manera, mediante un script que nos va a proporcionar el mismo resultado con la ventaja de visualizar más de cinco artículos, e incluso mostrar una breve introducción del post para aquellos que lo deseen.

Antes de llevar nada a cabo haced una copia de seguridad de vuestra plantilla.

Lo primero que necesitamos es descargar este script, ShowRecentPosts2.js, y alojarlo en algún servidor, yo uso Google Pages que es gratuito y me va muy bien.

En Blogger nos vamos a la pestaña Diseño a la sección Edición de HTML y buscaremos esta etiqueta, <b:skin><![CDATA[/*, y en cualquier lugar, donde os sea más cómodo entre esa etiqueta y esta, ]]></b:skin>, añadid estos tres estilos CSS. Es lo que configurara la apariencia del script en cuestión..bbrecpost {<br />margin: 4px 0 0 0px;<br />position: relative;<br />padding-left:20px ;<br />list-style-type: none;<br />list-style-image: none;<br />font-family: ‘Trebuchet MS’, Verdana, Sans-Serif;<br />font-size: 12px;}<br /><br />.bbrecpostsum{<br />margin: 3px 0 0 0px;<br />position: relative;<br />bottom:5px;<br />padding-left:20px;<br />list-style-type: none;<br />list-style-image: none;<br />font-family: ‘Trebuchet MS’, Verdana, Sans-Serif;<br />font-size: 12px;}<br /><br />.bbwidgetfooter {<br />position:absolute;<br />width:500px;<br />height:0; margin:5px 0;<br />padding:0;}Los estilos podéis modificarlos a vuestro gusto para adaptarlos a la apariencia del blog. La primera clase es para el estilo del título del blog, y la segunda para el estilo del resumen. La ultima podéis quitarla dado que es la fuente del script y mi pequeña aportación modificando algunos detalles y poniendo los meses en español.

Después de esto nos dirigimos a Elementos de la página, agregamos un elemento de tipo HTML/JavaScript con el nombre que más nos guste como Últimos artículos o Posts recientes e incluimos el siguiente trozo de código:<script style="text/javascript" src="URL ARCHIVO ShowRecentPosts2.js"></script><br /><script style="text/javascript">var numposts = 9;var showpostdate = true; var showpostsummary = false; var numchars = 100; var standardstyling = false;</script><script src="URL DEL FEED DEL BLOG?<br />orderby=published&alt=json-in-script&callback=showrecentposts"></script>Luego podemos configurar una serie de variables para adaptar el widget:

Numpost: El número de artículos a mostrar.
Showpostdate: True, si deseas mostrar la fecha de publicación.
Showpostsummary: False, si no deseas mostrar el resumen del post.
Numchars: Si la anterior variable es true, esta indica la cantidad de caracteres a mostrar en el resumen.
Standardstyling: False, para usar un estilo especifico como el que ya agregamos a la plantilla.

Con esto es todo lo que necesitamos para tener listo nuestro "widget". Espero les sea de utilidad y para cualquier pregunta no dudéis en comentadlo.