AGREGAR UNA NUEVA SIDEBAR

Respondiendo al siguiente comentario de Cris me decidí a explicar como crear una nueva sidebar.

"Llevo unos días que se me ha metido e la cocorota poner una segunda colmna a mi blog, porque ya no me caben las cosas en mi columna lateral. He buscado instucciones en google pero no lo he conseguido, no me acabo de enterar y casi la lío.Podrias hacer una entrada sobre esto? ¿Hay que cumplir algún reqisito para poder hacer eso?"

Lo primero comentarte Cris es que nada en el blog es fijo, es decir podemos crear cualquier cosa que creamos oportuna, el único inconveniente es saber hacerlo, ya que para este tipo de cosas el asistente de blogger no nos sirve, deberemos modificar nuestra plantilla mediante código HTML y CSS. Lo ideal sería que todos supieramos estos lenguajes pero como todo, es cuestión de ponerle ganas y pensar un poco, cuando nos ponemos a modificar código nada es automático, debemos de ajustar los códigos a nuestros requerimientos, por tanto intentaré explicar de la forma mas clara posible como hacerlo.

En primer lugar deberemos centrarnos en las estructuras que están implicadas, que principalmente son:Veamos como se refleja esto en el código:

Iremos a la plantilla de nuestro blog, en el caso de blogger Diseño->Edicición de HTML. Antes de nada recomendaros realizar una copia de vuestra plantilla y la búsqueda rápida mediante las teclas Ctrl+F para buscar fragmentos de código.

Lo fundamental a la hora de hacer estas modificaciones es ser conscientes del tamaño del que disponemos. Por tanto nos fijaremos en el atributo width de main-wrapper que es el área donde se muestran los post y de sidebar-wrapper que será la sidebar existente, en el código os aparecerá de la siguiente forma:


#main-wrapper {
padding-top: 0px;
width: 500px;
float: right;
....
}

#sidebar-wrapper {
padding-top: 160px;
padding-right: 30px;
padding-left: 15px;
width: 210px;
float: left;
....
}


Estos fragmentos de código no serán exactamente iguales en vuestro caso, pero lo importante es entender lo que significa. Lo señalado en azul es el ancho y por tanto tendremos que sumar esos valores para saber del ancho del que disponemos, en este caso sería 500px de main + 210px de sidebar =710px. Por tanto dispondríamos de 710px. Es evidente que si añadimos una nueva sidebar tendremos que reducir alguno de estos valores para hacerla encajar. Lo común será crear una nueva sidebar con el mismo ancho que la que tenemos y reducir el espacio del main.

Teniendo esto claro, procederemos a agregar la nueva zona y lo haremos de la siguiente forma:

Buscaremos el fragmento de código con la siguiente estructura.


<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
......AQUI OS APARECERÁ INFORMACION DE VUESTROS GADGETS.
</b:section>
AQUI ES DONDE AÑADIREMOS EL EL CODIGO.
</div>


Sustituiremos la línea que señalé en azul por lo siguiente:

<b:section class='sidebar' id='sidebar2' preferred='yes'></b:section>

Los ID no deben coincidir, observamos como el id de la primera sidebar se llama sidebar y el id de la segunda sidebar se llama sidebar2



Si guardáramos los cambios en este punto, lo que nos pasaría sería que se nos deformaría todo, ya que le estamos agregando una nueva sidebar que no cabe!, por tanto se solaparían y saldría todo desordenado, por tanto es en este punto donde tendremos que ajustar los anchos de cada elemento. Teniendo en cuenta los datos que dedujimos al principio, lo normal sería agregar una sidebar del mismo tamaño que la existente y reducir el tamaño del 'centro', para ello lo que haremos será copiar un nuevo fragmento de código especificanto las características de la nueva sidebar. Lo haremos de la siguiente forma:


#sidebar-wrapper {
padding-top: 160px;
padding-right: 30px;
padding-left: 15px;
width: 210px;
float: left;
....
}

#sidebar2-wrapper {
padding-top: 160px;
padding-right: 30px;
padding-left: 15px;
width: 210px;
float: right;
....
}

La parte señalada en rojo es la que añadimos justamente en la parte inferior del código azul, que es el código de la primera sidebar que teníamos anteriormente pero modificando en la primera linea #sidebar-wrapper por sidebar2-wrapper, los atributos los dejaremos todos igual con el objetivo que sean ambas columnas iguales. Lo único que cambiaremos será float que pondremos right o left dependiendo de donde queramos la nueva columna.

Como punto final adaptaremos el tamaño de la parte central. Como ejemplo al principio os comenté que disponíamos de 710px que en vuestro caso será otro valor, pues los que haremos será sumar el valor de las 2 sidebar en el ejemplo width de sidebar=160px + width sidebar2=160px serían un total de 320px, si teníamos al principio 710px entonces nos quedará para la parte central: 710px-320px=390px. Este sería el valor que tendremos que modificar en el width del main-wrapper. De esta forma nos quedaría todo bien cuadrado.

Ahora solo queda guadar los cambios y esperar que todo haya salido bien. Os recomiendo hacer esto con tiempo y intentando entender bien cada uno de los pasos ya que de no ser así el resultado será un fracaso. Espero hayáis entendido el procedimiento, ya me contaréis vuestras anécdotas :).

ICONOS EN TITULOS DE POST

Añadir una pequeña imagen en el título de los post puede ser algo bastante interesante, rompe con la monotonía de las letras y puede resultar bastante ilustrativo siempre y cuando la elección de la imagen sea la correcta. Son del tipo de detalles que el lector agradece inconscientemente, por tanto os voy a mostrar varias formas de insertar estas pequeñas imagenes.

Este es un ejemplo:
Os voy a mostrar 2 formas de insertar los iconos, la primera será agregar un icono en un post concreto y la segunda agregar un icono fijo para todos los post.

En el título de un post concreto:

Cuando editamos una entrada, en el caso de blogger tenemos en la parte superior una casilla donde introducimos el título.

Tendremos que añadir lo siguiente:

<img src="URL DEL ICONO" />


Poner un icono al principio del post:

<img src="URL DEL ICONO" />TITULO DEL POST

Si queremos añadirlo al final:

TITULO DEL POST<img src="URL DEL ICONO" />


En medio del título:

TITULO <img src="URL DEL ICONO" /> DEL POST

Lo único que tendréis que modificar es la URL DEL ICONO, podréis encontrar todos los iconos que imagineis aqui eso si la búsqueda la tendréis que hacer en inglés, ya que el buscador es inglés. Como siempre podréis alojar las imagenes aqui para conseguir la url del icono.

En todos los post:

Deberemos de ir la plantilla de nuestro sitio, en el caso de blogger accederemos siguiendo Diseño->Edición de HTML y marcaremos la casilla de expandir artilugios.

Buscaremos el siguiente fragmento de código:

<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>



Si queremos el icono al principio del título del post, lo sustituiremos por:

<b:if cond='data:post.url'><img src="URL DEL ICONO" />
<a expr:href='data:post.url'><data:post.title/></a>


Si en cambio lo queremos al final, lo sustituiremos por:

<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/><img src="URL DEL ICONO" /></a>


Nota: Podéis observar al principio de este post de donde conseguir los iconos y obtener su dirección. Suerte y espero ver de aquí en adelante vuestros títulos decorados ;)

CAMBIAR EL 0 COMENTARIOS

Uno de los 'defectos' que tienen las plantillas de blogger desde mi punto de vista es el famoso mensaje de 0 comentarios. En primer lugar da mala presencia ya que una entrada sin comentarios parece algo desoladora, desde el punto de vista del lector puede carecer de credibilidad, pero tenemos que tener en cuenta de que alguien tendrá que ser el primero en dejar un comentario para que la dichosa frase comience a tener sentido. ¿Que pasa ahora? Un atrevido lector ha dejado su comentario y entonces se muestra 1 comentarios, parace que no suena tan mal pero sigue siendo un poco absurdo sería en todo caso 1 comentario. El caso es que la frase comienza a ser correcta a partir del segundo comentario que entonces si! tendremos 2 comentarios! de ahí en adelante todo perfecto!. Podemos darle la enhorabuena a todos aquellos que hacen esas maravillosas plantillas que del del 0 al 2 se equivocaron en las 2!. Bueno lo que yo propongo es mostra un mensaje tipo; danos tu comentario cuando el número de comentarios sea 0, 1 comentario cuando tengamos un comentario y 2 comentarios.... cuando el número de comentarios sea mayor. ¿Que os parece? Lo más seguro es que muchos de vosotros ni os hayáis dado cuenta de este detalle y a partir de ahora lo veáis totalmente incorrecto, por eso os voy a enseñar a modificarlo para ofrecer un sentido coherente al tema de los comentarios.

Primer paso:(Localizar código y copia de la plantilla)

Lo primero de todo será realizar una copia de seguridad de nuestra plantilla, ya que cuando tocamos el código podemos modificar algo que luego no sepamos reparar por ello copia de seguridad y en el caso de no obtener los resultados esperados restablecer nuestra plantilla.

Ahora si, podemos comenzar!

Iremos al código de nuestra plantilla, en el caso de blogger a Diseño->Edicion de HTML, activaremos la casilla de expandir plantilla de artilugios y buscaremos el siguiente fragmento de código:

<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>
1 <data:top.commentLabel/>
<b:else/>
<data:post.numComments/> <data:top.commentLabelPlural/>
</b:if>
</a>
</b:if>


Segundo paso:(Sustitución de código)

Sustituiremos el código anterior por el siguiente:

<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<b:if cond='data:post.numComments == 0'>
Danos tu comentario
</b:if>
<b:if cond='data:post.numComments == 1'>
1 Comentario
</b:if>
<b:if cond='data:post.numComments > 1'>
<data:post.numComments/> Comentarios
</b:if>
</a>
</b:if>


Tercer paso:(Buscar el código)

Seguidamente buscaremos el siguiente código:

<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>


Cuarto paso:(Sistitución del código)

Sustituiremos el código anterior por el siguiente:

<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments == 0'>
Danos tu comentario
</b:if>
<b:if cond='data:post.numComments == 1'>
1 Comentario:
</b:if>
<b:if cond='data:post.numComments > 1'>
<data:post.numComments/> Comentarios:
</b:if>
</h4>


Podremos modificar las partes señaladas en negrita en el interior del código en caso de que queráis mostrar otros mensajes, aconsejo insertar los códigos de la forma que se describen y en caso de querer modificarlos, hacerlo después de guardar los cambios y comprobar que funciona correctamente. Espero os sea de utilidad ya me contaréis.

OCULTAR FECHA POST

Bueno personalmente para un blog que esté actualizado casi siempre no es recomendabe ocultar la fecha de publicación de los post, pero en ocasiones puede ser interesante ocultarla, depende mucho de la temática y de la estructura. Para aquellos que quieran ocultarla seguiremos estos sencillos pasos.

En primer lugar buscaremos en el código de nuestra plantilla la siguiente linea.

h2.date-header {


Justamente debajo de esta línea añadiremos lo siguiente.

visibility:hidden;


Con esto ocultaremos la fecha de publicación, lo único que tendremos que hacer en caso de querer agregar la fecha de publicación será eliminar la línea que añadimos.
Como siempre rápido fácil y sencillo.

COMO PONER FAVICON

En primer lugar deberemos saber que es este concepto, favicon viene de la composición en inglés de favorite icon, es decir icono favorito. Este icono o imagen debería ser representativo para cada web o blog. Los desarrolladores web incluyen este tipo de imágenes con el fin de promocionar su sitio en internet, esta imagen se mostrará en la barra de direcciones y favoritos de la mayoría de navegadores. De una forma visual es la imagen que muestro a continuación.

Este es un ejemplo de como todas la página importantes incorporan su favicon, en nuestro blog si os fijáis se muestra por defecto el icono de blogger, a continuación os mostraré como poner el vuestro.

En primer lugar buscaremos la siguiente línea de código en vuestra plantilla.

<title><data:blog.pageTitle/></title>


A continuación agregaremos las siguientes líneas de código justamente encima de la linea anterior.

<link href="http://sitio.com/favicon.ico" rel="shortcut icon" type="image/x-icon"/>
<link href="http://sitio.com/favicon.ico" rel="icon" type="image/x-icon"/>

Lo marcado en negrita es la dirección de donde se encuentra alojado vuestro icono, deberéis modificarla por el vuestro en particular, podéis utilizar cualquier servidor de imágenes para alojarla, por ejemplo yo utilizo este.
Espero os sea de utilidad ya me contaréis como os fue, podéis dejar las urls de vuestros blogs o webs para dar idéas a todos aquellos que lo quieran incorporar a suespacio.;)

ELIMINAR SUSCRIBIRSE A ENTRADAS ATOM

Casi todos los que tengáis plantillas originales de blogger o bien adaptadas para el tendréis el famoso Suscribirse a entradas Atom. En primer lugar para aquellos que acaban de empezar lo más provable es que no sepan ni lo que significa y lo segundo es que normalmente se muestra de una forma muy cutre. Bueno esta maravillosa frase lo que permite haciendo click en ella es suscribirse al blog via feed, por ellos os recomiendo ocultarlo y cuando realmente queramos ofrecer este servicio configurarlo desde cero. Como muchas otras cosas las plantillas se hacen de forma genérica y lo más general posible, con el objetivo que después nosotros seamos los encargados de adaptarlas a nuestras necesidades.

La forma de ocultar esta maravillosa frase es la siguiente:

Nos iremos a Diseño->Edicion de HTML y buscaremos el siguiente fragmento de código:

.feed-links {
.........
.........
}


Los puntos suspensivos indican que el contenido que se encuentre dentro {} puede ser diferente, ya que depende de la posición y características de la plantilla, por tanto lo que tendremos que hacer para ocultar la dichosa frasecita será sustituir el código anterior por el siguiente.

.feed-links {
clear: both;
line-height: 2.5em;
visibility:hidden;
display:none;
}


Guardaremos los cambios y listo, ya desapareció la horrible frasecita, si por el contrario en algún momento queremos volver a mostrarla, únicamente tendremos que sustituir los códigos de forma inversa.

seguro familiar

MODIFICAR CURSOR

Cambiar el cursor en determinadas partes de un blog o web es algo que puede resultar al mismo tiempo que útil bastante original, lo de útil lo digo ya que permitirá diferenciar de una forma muy clara donde se encuentran links, ya que en ocasiones estos no quedan del todo claros. Normalmente los valores por defecto permiten que cuando el cursor se encuentra encima de un link aparezca la famosa mano. Os voy a mostrar una forma muy simple de modificar este valor tan solo en lugares que vosotros queráis.

Conociendo los links:

La forma que tienen los links es la siguiente:

1.Enlaces de texto:

<a href="DESTINO_DEL_ENLACE">TEXTO</a>


Ejemplo:

Esto es un enlace de texto a wikipedia

2.Enlaces tipo imagen:


<img src="URL_DE_LA_IMAGEN">


Ejemplo:



La estructura de código que tendremos que insertar para modificar los cursores será la siguiente:

Para el primer caso:

<a style="CURSOR: NOMBRE_DEL_CURSOR" href="DESTINO_DEL_ENLACE">TEXTO</a>


Para el segundo caso:

<img style="CURSOR: NOMBRE_DEL_CURSOR" src="URL_DE_LA_IMAGEN">


El valor NOMBRE_DEL_CURSOR lo podéis cambiar por los siguientes que cito aquí abajo, podéis poner el cursor encima del nombre para observar su resultado.

default crosshair hand move nw-resize ne-resize n-resize e-resize help text wait

Espero que os sea de utilidad, ya me contaréis como os fue ;)

EVITAR COPIAR IMAGEN

Proteger las imágenes publicadas en un blog o web puede llegar a ser muy interesante, sobre todo si son imagenes personales, una de las cosas que tenemos que tener clara es que cuando una imagen se publica en internet podríamos decir que es de dominio público, pero aún así podemos crear una pequeña protección que consiste en deshabilitar el botón derecho del mouse, con esto pondremos un poco más difícil a aquellos que quieran copiar de una forma rápida. Podemos destacar que podremos aplicar este recurso tan solo a las imágenes que nosotros queramos ya que en algún lugar vi una forma de hacerlo pero para todo el blog, cosa que no veo muy útil ya que hay cierto material que se debe dejar copiar. Como sabréis para los que están interesados en posicionar su blog o web la copia está penalizada por google, pero para uso personal creo que es necesaria.

Sin enrollarme mas!!

Lo que deberemos hacer es copiar este fragmento de código allí donde queramos insertar la imagen.

<img src="URL de la imagen" oncontextmenu="alert('Opción deshabilitada');return false" oncopy="alert('Opción desabilitada');return false"/>


Deberéis introducir la URL de vuestra imagen y podréis modificar el texto señalado en azul que será el aviso que se muestre cuando se intente copiar la imagen. Podéis observar un ejemplo justamente aquí abajo. Podéis probar a pulsar el botón derecho del mouse y comprobar que no os permite copiar mi imagen de la maravillosa marge.

SEPARADORES BLOG

¿Cuantas veces habéis buscado alguna forma de separar partes en un post? Pues a continuación os traigo una recopilación de separadores para que los podáis disfrutar todos. Para descargarlos a vuestro ordenador tan solo tendréis que hacer:

Botón derecho del mouse->Guardar imagen como->Ruta de destino.

Cuando queráis insertarlo en cualquier parte de vuestro blog, tendréis que alojarlos en un servidor de imágenes, yo por ejemplo utilizo este de esta forma obtendréis la dirección que tendréis que insertar en vuestro blog. Espero que os gusten.

MODIFICAR FONDO TITULO GADGET

A raiz del post EXPANDIR GADGET preguntaba misaani como podía cambiar el fondo del título de un gadget. Modificar el aspecto de todos los títulos y fondos es algo común pero en este caso en concreto vamos a ver como podemos modificar uno por uno, así teniendo más flexibilidad a la hora de personalizar y poder mostrar diferentes estilos en las distintas partes de la sidebar.

Los títulos en los elementos de mi sidebar se muestran de la siguiente forma:

En primer lugar tendremos que crear una imágen del mismo ancho y largo de nuestros títulos, por ejemplo:

Una vez tengamos la imágen que pasará a ser la nueva apariencia del título de nuestro gadget tendremos que seguir los siguientes pasos:

Primer paso:(Ubicar código)

Iremos a la parte de código de nuestra plantilla y realizaremos una búsqueda por el nombre del gadget que figura en nuestro panel de administrador, en este caso ARCHIVO.

Encontraremos una línea como la siguiente:

<b:widget id='BlogArchive2' locked='false' title='ARCHIVO' type='BlogArchive'/>


Nos fijaremos en la parte que se encuentra señalada en negrita, después de id, que será el identificador de nuestro gadget.

Segundo paso:(Añadir estilo)

En la parte de código de nuestra plantilla buscaremos ]]></b:skin>, será justamente encima donde tendremos que pegar una línea de código con la siguiente estructura.

#BlogArchive2 h2 {
background: url(URL IMAGEN FONDO) left top;
}



Tendréis que tener en cuenta que lo señalado en negrita será vuestro identificador, que tendrá que ser igual que en el primero paso y lo señalado en color azul será la imágen que creásteis anteriormente, podéis hacer uso de un servidor para alojar vuestra imagen como pueda ser este. Podéis hacer una vista previa antes de guardar los cambios para observar el resultado. En el caso de que el fondo sea de un solo color o tenga algún motivo no tendréis problema, en el caso de que el fondo refleje el título que es ese nuestro caso tendréis que jugar un poco con el título del gadget de forma que quede visualmente agradable sin eliminar completamente el título del gadget. Yo por ejemplo le añadí un punto :). El resultado sería algo como lo siguiente.

Tener un poco de paciencia y ir jugando un poco hasta que quede bonito, lo más seguro es que no os salga a la primera pero bueno ir probando que seguro que conseguiréis cosas muy chulas!. El procedimiento es simple pero si tenéis alguna duda no dudéis en preguntar.

VIDA DEL BLOG Y FECHA

Una forma de mostrar los dias de vida de tu blog y la fecha actual puede ser interesante insertarlo en un blog o web ya que puede ser un dato interesante para los lectores. Insertarlo es muy sencillo y se hará de la siguiente forma.

Deberemos insertar el siguiente script en el lugar donde queramos que aparezca la informacion, en el caso de querer insertarlo en la sidebar que quizás sea lo más común, deberemos insertar un gadget de tipo HTML/Javascript.

<center><script>
var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")
function countup(yr,m,d){
var today=new Date()
var todayy=today.getYear()
if (todayy < 1000)
todayy+=1900
var todaym=today.getMonth()
var todayd=today.getDate()
var todaystring=montharray[todaym]+" "+todayd+", "+todayy
var paststring=montharray[m-1]+" "+d+", "+yr
var difference=(Math.round((Date.parse(todaystring)-Date.parse(paststring))/(24*60*60*1000))*1)
difference+=" días"
document.write("Hace "+difference+" que mi Blog esta en linea!")
}
countup(2009,02,01)
</script>
Y hoy estás a <script><!--
dows = new Array("Domingo","Lunes","Martes","Miércoles","Jueves","Viernes","Sábado");
months = new Array("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre");
now = new Date();
dow = now.getDay();
d = now.getDate();
m = now.getMonth();
h = now.getTime();
y = now.getFullYear();
document.write(dows[dow]+" "+d+" de "+months[m]+" de "+y);
//--></script></center>


Personalización:

Puesto que el tiempo de vida de los blogs es diferente, podremos modificar el comienzo del mismo modificando la fecha señalada en color azul. Otros mensajes que podrás modificar serán los señalados en color rojo.

En esta imagen muestro cual sería el resultado, claro está que cada día se actualizarian sus datos pero por no cargar el script lo muestro de la siguiente forma.

EXPANDIR GADGET

Utilizar este recurso es una opción muy inteligente para ahorrar espacio en la sidebar de nuestra web o blog, consiste simplemente en mostrar el título de nuestro gadget y si el usuario está interesado en observar su contenido, lo podrá hacer haciendo click encima del título, seguidamente el título se despleglará mostrando su información.

Un ejemplo es el siguiente, esto es lo que se mostrará:


Al hacer click encima se desplegará mostrando la información de la siguiente forma:

Esto es un simple ejemplo, pero podemos utilizarlo para cualquier gadget.

Primer paso:(Copiar el script)

Iremos al código de nuestra plantilla y colocaremos el siguiente script justamente encima de </head>

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


Segundo paso:(Buscar el gadget)

Para ello marcaremos la casilla de expandir artilugios en el caso de blogger y realizaremos la búsqueda por ejemplo con ctr+F y realizaremos la búsqueda por el nombre de nuestro gadget, tal y como aparece en nuestro panel de administrador, por ejemplo en el caso anterior mi gadget se llama ARCHIVOS.
Nos encontraremos con la línea de código tal como la siguiente:

<b:widget id='HTML4' locked='false' title='ARCHIVOS' type='HTML'>


El nombre variará dependiendo del nombre de vuestro gadget.

Tercer paso:(Agregar código)

*Agregaremos la siguiente línea marcada de color azul de forma que quede así:

<b:widget id='HTML4' locked='false' title='ARCHIVOS' type='HTML'>
<b:includable id='main'>
<a href='#' onclick='Effect.toggle("RINCON","slide"); return false'>


La palabra marcada en color rojo hace referencia a un identificador, en el caso de que insertéis este recurso repetidas veces deberéis de cambiar este nombre por cualquier otro de forma que no aparezcan 2 gadgets con el mismo identificador.

Unas líneas mas abajo nos encontraremos con la siguiente línea:

<h2 class='title'><data:title/></h2>
</b:if>

*Agregaremos lo que indico en color azul, de forma que quede de la siguiente forma:

<h2 class='title'><data:title/> &#9660;</h2></b:if>
</a><div align='center' id='RINCON' style='display: none;'>

Tener en cuenta lo dicho anteriormente del identificador, ya que aquí también tendremos que indicar su nombre correcto en el caso de insertar varios gadgets.

*De la misma forma que anteriormente continuamos hacia abajo en el código y añadimos la línea que indico en color azul.

</div>
<b:include name='quickedit'/>


FLASH PARA BLOG

Flash es un potente lenguaje de programación web, el problema es saber programar en este lenguaje, por eso existen en la red numerosas webs que hacen el trabajo por nosotros. Una web que permite personalizar bastante MENUS, TEXTOS, BANNERS, BOTONES Y RELOJES es la siguiente. Obtendremos resultados bastante profesionales y le darán a nuestro blog un toque bastante original, esta web permite personalizar bastante los recursos que ofrece, os mostraré algunos ejemplos para que veáis lo que podéis conseguir de una forma muy rápida y sencilla.

Banners:




Textos:




Esto solo son un ejemplo de lo que podréis crear, es una web bastante recomendada, os animo a que la visitéis y me comenteis que os ha parecido.