Halloween en Google

Me encanta el logo que han puesto en Google para celebrar Halloween.

¿No es precioso?...

Recuperar la papelera de comentarios

Me han llegado estos últimos días varios email donde me comentaban la "desaparición" del icono de edición de comentarios, es decir, la papelera gris que aparece al lado de la fecha de cada comentario y que permite al administrador del blog eliminar aquellos comentarios que considere oportuno.

En todos los casos que me han llegado, la papelera había desaparecido sin motivo aparente, es decir, sin hacer ningún cambio en la plantilla que pudiera afectar esa parte.

Revisando el tema, me he dado cuenta que en mis plantillas "antiguas" (la del Escaparate, por ejemplo) el código que hace posible que se muestre la papelera, es distinto al código en mis blogs de pruebas, por lo que pienso que Blogger ha cambiado el mismo para las nuevas plantillas.

En las plantillas "antiguas" el código que corresponde a dicho icono se ve así:

<b:includable id='commentDeleteIcon' var='comment'>
<span expr:class='&quot;item-control &quot; + data:comment.adminClass'>
<a expr:href='data:comment.deleteUrl' expr:title='data:top.deleteCommentMsg'>
<span class='delete-comment-icon'>&#160;</span>
</a>
</span>
</b:includable>

Fijaos en esta línea del código:

<span class='delete-comment-icon'>&#160;</span>

Esta línea es la que ahora ha cambiado y ha sido sustituida por el enlace directo a la imagen del icono:

<img src='http://www.blogger.com/img/icon_delete13.gif'/>

En todos los casos que me han llegado con este problema, se ha solucionado de esta manera, o sea, cambiando dentro de este código la línea "antigua" por la nueva.

No es seguro que funcione en todos los casos, pero por probar...


Actualización:

He estado mirando otra forma de intentar la recuperación de la papelera, dado que parece ser que el "truco" anterior no funciona en todos los casos.

Nos situamos en el panel -edición html y justo antes de </head> añadimos estas líneas de css:

<style type='text/css'>
.delete-comment-icon{ /* makes an 18x18 box */
background: transparent url(http://www.blogger.com/img/icon_delete13.gif) no-repeat right center;
padding: 12px;
margin: 0;
}
</style>

Con esto debería ser suficiente para volver a tener nuestro "bote de basura" en el blog, esperemos que de resultado en todos los casos...

Entradas expandibles con footer incluido

Recuerda que aunque yo pruebe los "trucos"
Antes de hacer ningún cambio
GUARDA SIEMPRE TU PLANTILLA
Nunca es seguro
que todo salga bien...

Después de explicar como aplicar en el blog la forma de mostrar las entradas en expandible, tanto en las páginas de etiquetas como en la página principal del blog, algunas os habéis interesado por la forma de mostrar al expandir los títulos, además de la entrada completa, también el post-footer.

Antes de nada os recomiendo encarecidamente que guardeis una copia de vuestra plantilla en el PC, pues podrían complicarse las cosas si por error colocamos el código en mal lugar.

[1] Suponemos que habéis seguido los pasos de las entradas que antes he mencionado y ya tenéis instaladas las entradas en expandible.

Iremos entonces a nuestro panel y en "Edición HTML" localizaremos esta parte del código con la plantilla de artilugios expandida:

<div class='post-footer'>

[2] Tendremos que copiar desde esa línea (incluida la misma) todo el código que está a continuación y hasta el próximo </div> de cierre que localizemos:

<div class='post-footer'>

--------------código---------------------

----------------código--------------------

---------------código----------------------

</div>

Dependiendo de lo que mostremos en nuestro post-footer (etiquetas, comentarios, etc.) el código a copiar será más o menos extenso.

[3] Una vez copiado el código perteneciente al post-footer, localizamos estas líneas de código en la plantilla:

 <div style='clear: both;'/><!-- clear for photos floats -->

Justo debajo de esa línea es donde pegaremos el código del post-footer que acabamos de copiar.

[4] Guardamos los cambios.

El resultado podéis verlo en este mismo blog si pinchais sobre el [+/-] del título de cualquier entrada en las páginas de las etiquetas, donde se expandirá la entrada completa con el post-footer incluido.

Buscador original

Un lector del Escaparate me ha mandado al email el código necesario para colocar un buscador en el blog, que además de eficiente es muy original en su diseño.

[1] Este es el código que colocaremos en un nuevo elemento HTML (Gadget) en nuestra sidebar:

<form action="/search" style="display:inline;" method="get">
<input id="s" onfocus="this.value=''" value="Texto a buscar" class="formsuch" name="q" size="17" type="text"/>
<input alt="Buscar" src="http://img142.imageshack.us/img142/7/searchiconry7.png" class="searchicon" value="Search" name="submit" type="image"/>
</form>

[2] Y este será el código CSS que colocaremos en la parte de "Edición HTML" de nuestra plantilla, siempre antes de ]]></b:skin>:

.searchicon:focus {
    background-color: white;
     color : black;
    outline : none; }

input:focus {
    background-color: #FFFFCC;
     color : black;
    outline : none; }

legend {
    padding: 0.5em 0.5em 0 0.5em;
    font: 30px Georgia,Verdana,sans-serif;}                  
                  
input {
    border : 1px solid black;
    padding: 4px;
    outline : none;  }     
  
.searchicon {
    margin-left : -26px;
    margin-bottom : -29px;
    border : 0;}

[3] Aquí tenéis el resultado (aunque el ejemplo es simplemente una imagen).
La "cajita" del buscador cambiará de color cuando introduzcamos los terminos de búsqueda y, por supuesto, el texto que se ve dentro de ella "Texto a buscar"  desaparece al escribir nuestro texto.

No hay problema en colocarlo en un fondo de color, ya que la imagen de los binoculares con ojitos tiene fondo transparente.

Peludo se ha perdido

Se llama Peludo y es un West Highland Terrier. Es el perro de Juan Blázquez, un madrileño de 33 años que trabaja de administrativo. Cuando hace cinco años decidió independizarse, sus padres le regalaron un cachorro para que le hiciese compañía. Con él comparte piso desde entonces. Ahora, Peludo se ha perdido y Juan pide ayuda en un blog para encontrarle.

"Lo perdí por un descuido mío, fue culpa mía", explica Juan. "Salí a pasear por el barrio [vive en la calle Amaniel, en el centro de Madrid], me paré a hablar con un amigo y cuando miré ya no lo encontré", cuenta el joven, añadiendo que lo suele llevar "con correa" pero que lo soltó en la Plaza de las Comendadoras, muy cercana a su casa.
El perro desapareció hace dos semanas.

Nada más perderlo, Juan puso "papelitos por las farolas, pero la gente no hace mucho caso". Fue entonces cuando dos amigas le propusieron hacer "algo más original", ante la falta de éxito. "¿Por qué no haces un blog?", le dijeron. Su idea era que Juan publicase en la web una lista de favores para recompensar a la persona que encuentre a su perro. "Como pasta no tengo", explica.

En todopormiperro.blogspot.com, Juan se ofrece, entre otras cosas, a "placharte la ropa durante un año", "pintar tu casa", "llevarte el pan cada mañana" o "pasar toda la noche haciendo cola para conseguirte las entradas para un conciertazo". Admite que "lo de pintar la casa preferiría que no lo eligieran", aunque "en cuanto viera a Peludo me va a dar igual".

Todo por mi perro

Títulos de entradas por etiqueta + Feeds

Hace algún tiempo veíamos la forma de colocar en nuestro blog un widget para las etiquetas que ofrecía la posibilidad de  suscribirse a una etiqueta determinada.

Por otro lado, hace unos días os explicaba la forma de añadir un widget para las etiquetas que mostraba los títulos de las entradas contenidos en cada etiqueta.

Gracias a la consulta que me hacía un lector del Escaparate, he probado la manera de incluir los dos "trucos" en uno, es decir, tendremos un widget para las etiquetas que mostrará los títulos de cada una de forma desplegable y, al mismo tiempo, mostrará el icono con la posibilidad de suscribirse a cada etiqueta de forma individual.

Ya sabéis que Blogger permite el uso de más de un widget para las etiquetas, pero aún así, lo más lógico si vamos a usar este widget, sería eliminar el que estemos usando de los dos anteriores y dejar solo este último.


Antes de empezar, nos descargamos el script que hace funcionar el gadget (botón derecho, guardar como) a nuestro PC y lo subimos a un alojamiento de archivos.


[1] Nos situamos en nuestro panel de Blogger en "Edición HTML" para localizar esta línea sin expandir l plantilla de artilugios:

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

[2]Pegamos este código:

<b:widget id='Label12' locked='false' title='Etiquetas' type='Label'>
<b:includable id='main'>
<script type='text/javascript'>
home_page = &quot;http://TU_BLOG.blogspot.com/&quot;;
max_rc_posts = 10;
</script>
<script src='URL_DEL_SCRIPT' type='text/javascript'/>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<a expr:href='data:post.url + "/feeds/posts/default/-/" + data:label.name'><img src='http://3.bp.blogspot.com/_8PJ-pgoBhWQ/SP9USfdc9aI/AAAAAAAAEgk/LKHLLAOgJ68/s320-R/16-rss-square.png'/></a>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/> <span dir='ltr'>(<data:label.count/>)</span> <a expr:onclick='&quot;showPostLabel(\&quot;&quot; + data:label.name + &quot;\&quot;,event)&quot;' href='javascript:void(0)'>&#9658;</a>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
<span dir='ltr'>(<data:label.count/>)</span> <a expr:onclick='&quot;showPostLabel(\&quot;&quot; + data:label.name + &quot;\&quot;,event)&quot;' href='javascript:void(0)'>&#9658;</a>
</b:if>
</li>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>

[3] Cambiamos en el código donde dice "TU_BLOG" (resaltado en color naranja) por el nombre del blog donde hemos colocado el widget.
Si queremos usar un icono distinto al del ejemplo,sustituimos la url de la imagen (resaltada en azul) por la del nuestro.

Boton de "Vista previa" en el formulario de comentarios

Ayer mismo nos sorprendíamos con la aparición en nuestro formulario de comentarios del tan esperado botón de "vista previa" y, aunque el botón estaba allí en todos los blogs,  para nuestro disgusto no servía para nada, o sea, no funcionaba.

Esta tarde he podido comprobar que ya está funcionando en algunos blogs, digo en algunos, porque en el mío parece ser que aún se resiste...

Oloman ha tenido más suerte y su botoncito ha sido más espabilado que el mío:

Seguidores en Blogger ya disponible

Hace un tiempo que habíamos visto la posibilidad de añadir un nuevo widget o gadget en nuestro blog llamado "Seguidores" y aunque aún no estaba operativo se hablaba mucho de el, sobre todo en algunos blogs de habla no-hispana, donde al parecer si estaba funcionando.

Hace un rato me he dado cuenta de que el widget ya no aparece en forma "experimental" sino que ya puede ser añadido a nuestro blog desde Diseño -> Añadir un gadget sin problemas aparentes.

He comprobado también que, al menos en mi caso, el widget está operativo tanto desde el panel de Blogger como desde Blogger in Draft.

La sorpresa ha sido comprobar que El Escaparate tiene ya cinco seguidores de los que, hasta hace media hora, no tenía ni idea que estaban ahí...

Como podéis comprobar, el dato aparece en nuestro panel de Blogger, al lado del nombre de cada blog.

El uso de esta nueva característica de Blogger nos permite algunas cosas interesantes por lo que he podido comprobar:

• Conocer quienes son "fans" de tu blog.
• Seguir también nosotros a los blogs que más nos interesan con la opción además, de hacerlo de forma anónima.
• Ver el número de seguidores de nuestro blog, al lado del nombre del blog en nuestro panel.
• Leer las últimas entradas de los blogs a los que seguimos, directamente desde nuestro panel de Blogger.
• Y alguna función más en Google Reader, como importar nuestra "lista de blogs seguidos" que aún no he mirado demasiado a fondo.

Para empezar a usar esta nueva función, no tenemos más que añadir nuestros blogs favoritos directamente desde nuestro panel, donde ahora veremos un botón de "Añadir" y otro de "Administrar"

Añadir los blogs a nuestra lista de seguidos, es tan fácil como pinchar en "Añadir", se abrirá entonces una pequeña pantalla donde tendremos que introducir la url (dirección) del blog a seguir.

Se nos dará entonces la opción de seguir a ese blog de forma pública o anónima, si escogemos la opción pública y ese blog añade el widget de "Seguidores" apareceremos en el, y otros lectores de ese blog tendrán entonces acceso a nuestro perfil y, por tanto a nuestro blog, desde el widget.

Si escogemos la opción anónima, será algo parecido al "suscribirse" al blog de la manera habitual, estaremos en la lista de seguidores, pero nuestros datos permanecerán ocultos.

Si por lo que sea decidimos dejar de seguir a un determinado blog, podemos anular el seguimiento desde nuestro panel en "Administrar", así mismo desde ahí podremos cambiar el tipo de seguimiento de anónimo a público o viceversa.

De momento yo he añadido el widget a mi sidebar y ya tengo una pequeña lista de "seguidos" en mi panel...

Imagenes a tamaño "real" en Blogger

Si subimos las imágenes de nuestras entradas mediante el editor de Blogger, ya sabemos que el tamaño máximo permitido es de 400 pixeles tanto en el ancho de las imágenes horizontales como en el alto de las imágenes verticales.

Esta limitación es debida a que el editor de Blogger trabaja suponiendo que se está usando una de sus plantillas, donde el ancho del main (cuerpo de entradas) no supera los 470 pixeles de anchura.

Muchos de nosotros usamos plantillas modificadas en las que, el ancho de entradas sobrepasa fácilmente los 470 px  por lo que, las imágenes subidas desde el editor se nos quedan pequeñas.

Es sencillo el conseguir que esta limitación no nos impida mostrar en el blog las imágenes a su tamaño real teniendo en cuenta, por supuesto, no incluir imágenes mayores que el ancho de nuestras entradas o estas se verán cortadas.

[1] Accedemos a nuestro panel de Blogger desde Blogger in Draft.

[2] Nos situamos en nuestro editor de entradas y subimos la imagen escogida.

[3] Una vez subida la imagen, en la pestaña "Edición de HTML" del editor podemos ver el código que se ha generado para ella:

<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/_8PJ-pgoBhWQ/SP42cEckHSI/AAAAAAAAEfs/pJ6bDEJM7wg/s1600-h/Casa-de-madera-imagenes.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/_8PJ-pgoBhWQ/SP42cEckHSI/AAAAAAAAEfs/luwJRwJ9uUs/s320-R/Casa-de-madera-imagenes.jpg" /></a></div>


[4] Dentro de ese código cambiamos s320-R por s00-R y ya tendremos la imagen a su tamaño real.

Sucede entonces que, una vez publicada la entrada, al pinchar sobre la imagen esta se abrirá como sucede habitualmente en una nueva página a su tamaño real.
Ya que el tamaño de las dos imágenes será entonces igual, podríamos prescindir de usar el enlace que muestra la segunda imagen al pinchar sobre la publicada en el post, para ello eliminamos del código lo que está en color rojo:

<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/_8PJ-pgoBhWQ/SP42cEckHSI/AAAAAAAAEfs/pJ6bDEJM7wg/s1600-h/Casa-de-madera-imagenes.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/_8PJ-pgoBhWQ/SP42cEckHSI/AAAAAAAAEfs/luwJRwJ9uUs/s320-R/Casa-de-madera-imagenes.jpg" /></a></div>

Titulo optimizado en Blogger

Sois bastantes los que me habéis preguntado la forma de conseguir que en la barra del navegador aparezca el título del artículo antes que el del blog, tal como sucede en El Escaparate.

Esto se consigue mediante una pequeña modificación en el título de nuestro blog desde "edición html".
Este cambio nos permite mostrar el nombre en la barra del navegador, de una entrada concreta sin que aparezca el nombre del blog en primera posición, sino el nombre de cada entrada, con lo que se obtiene un mejor posicionamiento en los buscadores.

[1] Nos situamos en nuestro panel "edición html" y localizamos (casi al comienzo de la plantilla) el código que corresponde al título de nuestro blog:

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

[2] Sustituimos ese código por este otro:

<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> : <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>

[3] Guardamos los cambios.

Botones para el enlace "sigueme en Twitter"

Los he visto en Siah Desing siguiendo el enlace de una entrada al respecto de Código Geek.

Cada versión del botón se suministra en dos formatos, una en formato gif con fondo transparente y la otra en png con fondo blanco.

Son un total de cuarenta y dos botones e incluso los hay animados, eso si, el texto se ve en inglés "Follow me on Twitter".

Los ofrecen de forma gratuita, tan solo hay que descargarlos con el botón derecho y "guardar imagen".

Una vez descargados, solo nos resta subirlos a un alojamiento de imágenes (o al mismo Blogger) y usar la url del botón en sustitución del texto del enlace de nuestro widget de Twitter.

El enlace será algo como esto:


<a id="twitter-link" href="http://twitter.com/RosaTorre"> Sígueme en Twitter</a>

Y cambiaremos "Sígueme en Twitter" por la url de nuestro nuevo botón:

<a id="twitter-link" href="http://twitter.com/RosaTorre"> <img src=Url_del_botón/></a>

Fondos para el widget de Twitter by Pizcos

Pizcos ha tenido la genial idea de diseñar unos backgrounds (fondos) preciosos para colocar en el widget de Twitter de nuestro blog.

Para su diseño ha usado imágenes de "pajaritos" de libre distribución.

Un trabajo soberbio que Pizcos comparte con todos nosotros añadiendo además, la explicación necesaria para "cuadrar" los comentarios de Twitter en el lugar correcto, para que se vean bien centraditos dentro de la burbuja.

Este me encanta:

En la entrada de Pizcos tenéis el enlace para descargaros los fondos.

Caja de texto con selección automática del contenido

Hace tiempo explicaba la forma de mostrar una "caja de texto" o "Textarea".

Hoy en esa misma entrada he recibido un comentario de Jomayra en el que me hacía esta pregunta:

Quería preguntarte sobre el textarea, ya se como realizar la caja de texto pero quisiera saber si es posible añadir un código extra para cuando se de click al cursor en el texto de la caja se sombree toda sin necesidad de arrastrar el cursor por todo el resto.

Pues este sería el código que tendríamos que emplear para que, con solo poner el cursor del ratón sobre la textarea, el contenido se marque por completo:

<textarea rows="2" cols="25" onMouseOver="this.focus()"
onFocus="this.select()" input type="text" name="emailaddr" value="your e-mail" size="31" onMouseOver="this.focus()" onFocus="this.select()"> </textarea>

Ejemplo:

PRUEBA A COLOCAR EL CURSOR SOBRE LA CAJA DE TEXTO O TEXTAREA. TEXTADO EN IE7 Y FIREFOX3

Títulos de todas o ultimas entradas del blog (widget)

Emilio me preguntaba en un comentario si conocía alguna forma de mostrar todas las entradas del blog por su título, pero además quería disponer de una barra de scroll (scrollbar) en el mismo widget, para evitar que este se alargara en exceso.
Me he acordado que tenía una entrada en borradores sobre un widget de Hoctro´s que precisamente muestra los títulos de todas las entradas de nuestro blog o un número menor de nuestras últimas entradas, y he incluido una leve modificación en su código para añadirle una barra de scroll.

[1] En primer lugar necesitaremos acceder dentro de nuestro panel de Blogger a la pestaña "Configuración" -> "Feed del sitio" y en el desplegable de "Permitir Feeds del blog" seleccionar el modo "Completo".
Tendremos que ir después, también desde "Configuración" a la pestaña "Archivo" y seleccionar "Si" en la opción "Habilitar páginas de entrada".

[2] Una vez hecho esto, tendremos que añadir este código en nuestra plantilla justo antes de </head> (no hará falta expandir la plantilla de artilugios):

<script type='text/javascript'>

// Developed by Hoctro - All rights reserved 2007

// This credit must be included in all your derived usages.

// &quot;cb&quot; is intended to be a common library, where different widgets would

// utitlize the shared operations such as getTitle, getLink, etc. from a json object.

var cb = {

// search function requires these parameters:

// 1. query: a blogger address, such as &quot;hoctro.blogspot.com&quot;,

// 2. type: type of return data, either &quot;comments&quot; or &quot;posts&quot;,

// 3. start: the start-index parameter (where to start extracting data)

// 4. increment: the number of elements the json will get back. (the smaller value, the faster time to travel back)

// 5. func: the returned function the json object will feed.

search: function(query, type, start, increment, func) {

var script = document.createElement(&#39;script&#39;);

script.setAttribute(&#39;src&#39;, &#39;http://&#39; + query + &#39;/feeds/&#39; + type + &#39;/default?alt=json-in-script&amp;start-index=&#39;

+ start + &#39;&amp;max-results=&#39; + increment + &#39;&amp;callback=&#39; + func + &#39;&amp;orderby=published&#39;);

script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);

document.documentElement.firstChild.appendChild(script);

},

// searchLabel function return a result of posts w/ a label query

// it requires these parameters:

// 1. query: a blogger address, such as &quot;hoctro.blogspot.com&quot;,

// 2. an array of labels

// 3. func: the returned function the json object will feed.

searchLabel: function(query, label, func) {

var script = document.createElement(&#39;script&#39;);

script.setAttribute(&#39;src&#39;, &#39;http://&#39; + query + &#39;/feeds/posts/default/-/&#39; + encodeURIComponent(label) +

&#39;?alt=json-in-script&amp;callback=&#39; + func + &#39;&amp;orderby=published&#39;);

script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);

document.documentElement.firstChild.appendChild(script);

},

// getTotalResults needs the json object, and it&#39;ll return the total number of comments (or posts) of the blog.

getTotalResults: function(json) {

return json.feed.openSearch$totalResults.$t;

},

// getStartIndex gets the start index of a search inside an json object.

getStartIndex: function(json) {

return json.feed.openSearch$startIndex.$t;

},

// getLink return a href link if &quot;name&quot; matches the content inside &quot;a&quot; tags) of the link

getLink: function(entry, name) {

var alturl;

for (var k = 0; k &lt; entry.link.length; k++) {

if (entry.link[k].rel == name)

alturl = entry.link[k].href;

}

return alturl;

},

// getTitle gets the title of the title of an entry of a json object.

getTitle: function(entry) {

return entry.title.$t;

},

// getContent gets the content inside an entry of a json object.

getContent: function(entry) {

return entry.content.$t;

},

// getCommentAuthor: gets the commenter name inside an entry of a json object.

getCommentAuthor: function(entry) {

return entry.author[0].name.$t;

},

// Given a json label search, this function return the decoded label.

getLabelFromURL: function(json) {

for (var l = 0; l &lt; json.feed.link.length; l++) {

if (json.feed.link[l].rel == &#39;alternate&#39;) {

var raw = json.feed.link[l].href;

// The next two lines are borrowed from Ramani&#39;s Neo Template

// code. Thanks Ramani!

var label = raw.substr(raw.lastIndexOf(&#39;/&#39;)+1);

return decodeURIComponent(label);

}

}

},

txt : function (s) {

return s + &quot; Widget by &lt;a href=&#39;http://hoctro.blogspot.com&quot; + &quot;&#39;&gt;Hoctro&lt;/a&gt;&quot;;

}

};

</script>

[3] Localizamos ahora la línea más abajo dentro del código de nuestra plantilla, que es la que marca el comienzo de la sidebar:

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

Justo debajo de esa línea añadiremos el código necesario para mostrar el widget que, en un principio, se verá el primero de los añadidos a nuestra sidebar, pero que más tarde podremos mover al lugar que queramos:

<b:widget id='HTML50' locked='false' title='TODAS LAS ENTRADAS' type='HTML'>

<b:includable id='main'>

<!-- only display title if it's non-empty -->

<b:if cond='data:title != &quot;&quot;'>

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

</b:if>

<div class='widget-content'>

<data:content/>

<ul><div id='dataPost' style='height:400px; overflow:auto;'/></ul>

</div>

<script type='text/javascript'>

// Developed by Hoctro - All rights reserved 2007

// This credit must be included in all your derived usages.

// This widget lists the available posts based on the uP.nPost value below

// Use -1 if you want them all.

var uP = {

nPost : -1

};

var cP = {

// private variable to store the total results

totCount : 0,

// the number of elements for each json call

increment : 10,

// this is the place to define the blog name for subsequent retrieval data

web : &quot;elescaparatederosa.blogspot.com&quot;,

listPosts: function(json, tag) {

var text=&quot;&quot;;

for (var i = 0; i &lt; json.feed.entry.length; i++) {

var entry = json.feed.entry[i];

text += &quot;<li>&quot; + &quot;&lt;a href=&#39;&quot; + cb.getLink(entry, &quot;alternate&quot;)

+ &quot;&#39;&gt;&quot; + cb.getTitle(entry) + &quot;</li>&quot;;

}

var p = document.createElement(&#39;span&#39;);

document.getElementById(tag).appendChild(p);

p.innerHTML = text;

},

callPostJson: function(json) {

this.listPosts(json, &quot;dataPost&quot;);

},

getCo : function(json) {

this.totCount = cb.getTotalResults(json);

var count = (uP.nPost &lt; 0) ? this.totCount : uP.nPost;

var i=1;

while(i&lt;=count) {

var incr = (count-i &lt; this.increment) ? count-i+1 : this.increment;

cb.search( cP.web, &quot;posts&quot;, i, incr, &#39;cP.callPostJson&#39;);

if (incr==0) incr=incr+1;

i = i+incr;

}

}

};

cb.search( cP.web, &quot;posts&quot;, 1, 2, &#39;cP.getCo&#39;);


</script>

</b:includable>

</b:widget>

[4] Cambiamos donde dice: elescaparatederosa.blogspot.com por la url de nuestro blog sin el http://

Donde dice:  nPost : -1  es donde haremos los cambios para mostrar un número de títulos de entrada ilimitado, es decir, todas las entradas del blog actuales y las que vayamos publicando o para mostrar solo el número de títulos que nos interese de las últimas entradas publicadas.

Si vamos a mostrar todas las entradas dejaremos este valor tal cúal está en -1, en cambio,  si solo queremos mostrar las veinte últimas entradas por ejemplo, cambiaremos ese valor a 20.
Si vamos a usarlo para las últimas entradas, recordaremos cambiar el título del widget por algo más apropiado.





Esta parte del código:  style='height:400px; overflow:auto; es la que he añadido para que aparezca de forma automática la scrollbar, cuando el alto del widget sobrepase los 400px, podéis reducir o ampliar su altura cambiando el valor en height.

Cambiar la plantilla sin perder los widgets

Recuerda
que aunque yo pruebe los "trucos"
Antes de hacer ningún cambio
GUARDA SIEMPRE TU PLANTILLA
Nunca es seguro
que todo salga bien...

Me pregunta Pucca en un comentario:

Hay alguna manera de instalar una plantilla nueva y no perder todas las "cositas" q tiene mi configuración actual????

Ese es el problema más importante que surge a la hora de tomar la decisión de cambiar la plantilla de nuestro blog, la perdida de los widgets que tengamos en el blog y que, normalmente están añadidos en la sidebar.

Para evitar este problema, lo más fácil es copiar la parte del código que corresponde a los widgets de nuestra plantilla y trasladarlos a la que vamos a subir.

[1] En la parte de "Edición HTML" y sin expandir la plantilla de artilugios, localizamos esta línea:

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

Debajo de esta línea es donde veremos el código correspondiente a los widgets de nuestro blog añadidos en la sidebar, y que será algo como esto:

<b:widget id='Label1' locked='false' title='ETIQUETAS' type='Label'/>

<b:widget id='Profile1' locked='false' title='ARCHIVOS' type='DATOS PERSONALES'/>

<b:widget id='HTML1' locked='false' title='NOTICIAS' type='HTML'/>

<b:widget id='HTML2' locked='false' title='BUSCADOR' type='HTML'/>

<b:widget id='Feed1' locked='false' title='ULTIMAS COMENTARIOS' type='Feed'/>

Si os fijáis bien, el código de todos los widgets añadidos es el que está entre la línea que localizamos al principio y </b:section> que es lo que marca el final de la parte correspondiente a nuestra sidebar.


[2] Copiamos entonces el código completo de todos los widgets y los ponemos a buen recaudo usando, por ejemplo, el mismo "Blog de notas".


[3] Subimos ahora la nueva plantilla y, antes de guardar, nos situamos en la misma línea en la que antes, en nuestra plantilla, hemos copiado el código de nuestros widgets.

Una vez localizada, pegamos el código que teníamos guardado en nuestro blog de notas (siempre entre esa línea y </b:section>).


[4] Guardamos la plantilla.


Si tenemos añadidos más widgets, por ejemplo, sobre o debajo de las entradas, podemos hacer lo mismo sin problemas, ya que no será demasiado difícil localizarnos por su nombre (si se lo hemos puesto) o por la línea de código que les corresponde.

Para ahorrarnos problemas, podemos colocar todos los widget juntos en la zona de la sidebar y, una vez guardada la plantilla moverlos desde "Diseño" al lugar que ocupaban antes.

Lista de blogs (Ajax Gadget)

En una entrada anterior os explicaba como mostrar las últimas entradas de nuestro blog usando Google Ajax, hoy he encontrado una nueva modificación de este widget en Dumies Guide To Google, usado para mostrar una lista de blogs.

Puede personalizarse para mostrar el numero de entradas de cada blog añadido a la lista y en la parte superior va mostrando de forma automática, una vista previa de las entradas de los blogs.

Despues de iniciar sesión en Blogger, nos situamos en nuestro Panel -> Edición para añadir un nuevo Widget de Html y pegamos dentro el código:

<div id="feed-control">
<span style="color: #6998CA; font-size: 11px; margin: 10px; padding: 4px;"><b>Cargando...</b></span></div>
<script src="http://www.google.com/jsapi?key=notsupplied-wizard">
type="text/javascript">
</script>
<script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js">
type="text/javascript">
</script>
<style type="text/css">
/* Root */
.gfg-root {
width : 100%;
height : auto;
position : relative;
overflow : hidden;
text-align : center;
font-family: "Arial", sans-serif;
font-size: 12px;
border: 5px solid #BCCDF0;
}
/* Feed Title */
.gfg-title {
font-size: 15px;
font-weight : bold;
color : #3366cc;
background-color: #E5ECF9;
line-height : 1.4em;
overflow : hidden;
white-space : nowrap;
}
.gfg-title a {
color : #3366cc;
}
.gfg-subtitle {
font-size: 12px;
font-weight : bold;
color : #3366cc;
background-color: #E5ECF9;
line-height : 1.4em;
overflow : hidden;
white-space : nowrap;
margin-bottom : 5px;
}
.gfg-subtitle a {
color : #3366cc;
}
.gfg-entry {
background-color : white;
width : 100%;
height : 6.9em;
position : relative;
overflow : hidden;
text-align : left;
margin-top : 3px;
}
/* To allow correct behavior for overlay */
.gfg-root .gfg-entry .gf-result {
position : relative;
background-color : white;
width : auto;
height : 100%;
padding-left : 20px;
padding-right : 5px;
}
.gfg-list {
position : relative;
overflow : hidden;
text-align : left;
margin-bottom : 5px;
}
.gfg-listentry {
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
-o-text-overflow : ellipsis;
padding-left : 15px;
padding-right : 5px;
margin-left : 5px;
margin-right : 5px;
}
.gfg-listentry-odd {
background-color : #F6F6F6;
}
.gfg-listentry-even {
}
.gfg-listentry-highlight {
background-image : url('http://2.bp.blogspot.com/_8PJ-pgoBhWQ/SN1icxHvPXI/AAAAAAAAET4/_V1bKeYDeTk/s320-R/0036_bullet02.png');
background-repeat: no-repeat;
background-position : center left;
}
/*
* FeedControl customizations.
*/
.gfg-root .gfg-entry .gf-result .gf-title {
font-size: 12px;
line-height : 1.2em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
-o-text-overflow : ellipsis;
margin-bottom : 2px;
}
.gfg-root .gfg-entry .gf-result .gf-snippet {
height : 3.8em;
color: #000000;
margin-top : 3px;
}
/*
* Easy way to get horizontal mode, applicable via js options to gadget.
*/
.gfg-horizontal-container {
position : relative;
}
.gfg-horizontal-root {
height : 1.5em;
_height : 100%;
position : relative;
white-space : nowrap;
overflow : hidden;
text-align : center;
font-family: "Arial", sans-serif;
font-size: 13px;
border: 1px solid #AAAAAA;
padding : 5px;
margin-right : 80px;
}

.gfg-horizontal-root .gfg-title {
font-weight : bold;
background-color: #FFFFFF;
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
float : left;
padding-left : 10px;
padding-right : 12px;
border-right: 1px solid #AAAAAA;
}
.gfg-horizontal-root .gfg-title a {
color : #444444;
text-decoration : none;
}
.gfg-horizontal-root .gfg-entry {
width : auto;
height : 1.5em;
position : relative;
overflow : hidden;
text-align : left;
margin-top : 0px;
margin-left : 0px;
padding-left : 10px;
}
/* To allow correct behavior for overlay */
.gfg-horizontal-root .gfg-entry .gf-result {
position : relative;
background-color : white;
width : 100%;
height : 100%;
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
}
.gfg-horizontal-root .gfg-list {
display : none;
}
/*
* FeedControl customizations.
*/
.gfg-horizontal-root .gfg-entry .gf-result .gf-snippet,
.gfg-horizontal-root .gfg-entry .gf-result .gf-author {
display : none;
}
.gfg-horizontal-root .gfg-entry .gf-result .gf-title {
color: #0000cc;
margin-right : 3px;
float : left;
}
.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer {
float : left;
}
.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer,
.gfg-horizontal-root .gfg-entry .gf-result .gf-relativePublishedDate {
display : block;
color: #AAAAAA;
}
.gfg-branding {
white-space : nowrap;
overflow : hidden;
text-align : left;
position : absolute;
right : 0px;
top : 0px;
width : 80px;
}
.gfg-collapse-open, .gfg-collapse-closed {
background-repeat : no-repeat;
background-position : center;
cursor : pointer;
float : right;
width : 17px;
height : 20px;
}
.gfg-collapse-open {
background-image : url('arrow_open.gif');
}
.gfg-collapse-closed {
background-image : url('arrow_close.gif');
}
.gfg-collapse-href {
float : left;
}
.clearFloat {
clear : both;
}
</style>
<script type="text/javascript">
function LoadDynamicFeedControl() {
var feeds = [
{title: 'TITULO_BLOG1',
url: 'http://BLOG1.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=4'
},
{title: 'TITULO_BLOG2',
url: 'http://BLOG2.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=4'
},
{title: 'TITULO_BLOG3',
url: 'http://BLOG3.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=4'
},
{title: 'TITULO_BLOG4',
url: 'http://BLOG4.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=4'
}];
var options = {
stacked : true,
horizontal : false,
title : "Blogs amigos"
}
new GFdynamicFeedControl(feeds, 'feed-control', options);
}
// Load the feeds API and set the onload callback.
google.load('feeds', '1');
google.setOnLoadCallback(LoadDynamicFeedControl);
</script>

Personalización:
En el código anterior sustituiremos 'TITULO_BLOG1', 'TITULO_BLOG2', etc... por los respectivos títulos de los blogs y 'BLOG1', 'BLOG2', etc... por el nombre del blog.

Para añadir más blogs a la lista añadiremos en el código tantos bloques de código como este que necesitemos:

{title: 'TITULO_BLOG1',
url: 'http://BLOG1.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=4'
},

Para sustituir el icono de la flechita que va marcando los títulos por uno propio, hemos de colocar su url en lugar de la que véis en el código:
http://2.bp.blogspot.com/_8PJ-pgoBhWQ/SN1icxHvPXI/AAAAAAAAET4/_V1bKeYDeTk/s320-R/0036_bullet02.png

Casi al principio del código podemos ver después de .gfg-root{ una línea que dice width: 100% eso hace que el ancho del widget se adapte al 100% de la anchura del espacio donde ha sido colocado, será fácil entonces controlar su anchura modificando ese valor.

Lo demás como el color y tamaño del texto creo que no será demasiado difícil de conseguir en el css, a base de pruebas e incluso por pura intuición.

Usar el widget para mostrar las últimas entradas de un solo blog.

Haciendo uso del mismo código, podemos también mostrar en nuestro blog las últimas entradas de un solo blog que, en este caso, podría ser uno distinto al nuestro.

El código anterior quedaría entonces así:

<div id="feed-control">
<span style="color: #6998CA; font-size: 11px; margin: 10px; padding: 4px;"><b>Cargando...</b></span></div>
<script src="http://www.google.com/jsapi?key=notsupplied-wizard">
type="text/javascript">
</script>
<script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js">
type="text/javascript">
</script>
<style type="text/css">
/* Root */
.gfg-root {
width : 80%;
height : auto;
position : relative;
overflow : hidden;
text-align : center;
font-family: "Arial", sans-serif;
font-size: 12px;
border: 5px solid #BCCDF0;
}
/* Feed Title */
.gfg-title {
font-size: 15px;
font-weight : bold;
color : #3366cc;
background-color: #E5ECF9;
line-height : 1.4em;
overflow : hidden;
white-space : nowrap;
}
.gfg-title a {
color : #3366cc;
}
.gfg-subtitle {
font-size: 12px;
font-weight : bold;
color : #3366cc;
background-color: #E5ECF9;
line-height : 1.4em;
overflow : hidden;
white-space : nowrap;
margin-bottom : 5px;
}
.gfg-subtitle a {
color : #3366cc;
}
.gfg-entry {
background-color : white;
width : 100%;
height : 6.9em;
position : relative;
overflow : hidden;
text-align : left;
margin-top : 3px;
}
/* To allow correct behavior for overlay */
.gfg-root .gfg-entry .gf-result {
position : relative;
background-color : white;
width : auto;
height : 100%;
padding-left : 20px;
padding-right : 5px;
}
.gfg-list {
position : relative;
overflow : hidden;
text-align : left;
margin-bottom : 5px;
}
.gfg-listentry {
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
-o-text-overflow : ellipsis;
padding-left : 15px;
padding-right : 5px;
margin-left : 5px;
margin-right : 5px;
}
.gfg-listentry-odd {
background-color : #F6F6F6;
}
.gfg-listentry-even {
}
.gfg-listentry-highlight {
background-image : url('http://2.bp.blogspot.com/_8PJ-pgoBhWQ/SN1icxHvPXI/AAAAAAAAET4/_V1bKeYDeTk/s320-R/0036_bullet02.png');
background-repeat: no-repeat;
background-position : center left;
}
/*
* FeedControl customizations.
*/
.gfg-root .gfg-entry .gf-result .gf-title {
font-size: 12px;
line-height : 1.2em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
-o-text-overflow : ellipsis;
margin-bottom : 2px;
}
.gfg-root .gfg-entry .gf-result .gf-snippet {
height : 3.8em;
color: #000000;
margin-top : 3px;
}
/*
* Easy way to get horizontal mode, applicable via js options to gadget.
*/
.gfg-horizontal-container {
position : relative;
}
.gfg-horizontal-root {
height : 1.5em;
_height : 100%;
position : relative;
white-space : nowrap;
overflow : hidden;
text-align : center;
font-family: "Arial", sans-serif;
font-size: 13px;
border: 1px solid #AAAAAA;
padding : 5px;
margin-right : 80px;
}
.gfg-horizontal-root .gfg-title {
font-weight : bold;
background-color: #FFFFFF;
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
float : left;
padding-left : 10px;
padding-right : 12px;
border-right: 1px solid #AAAAAA;
}
.gfg-horizontal-root .gfg-title a {
color : #444444;
text-decoration : none;
}
.gfg-horizontal-root .gfg-entry {
width : auto;
height : 1.5em;
position : relative;
overflow : hidden;
text-align : left;
margin-top : 0px;
margin-left : 0px;
padding-left : 10px;
}
/* To allow correct behavior for overlay */
.gfg-horizontal-root .gfg-entry .gf-result {
position : relative;
background-color : white;
width : 100%;
height : 100%;
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
}
.gfg-horizontal-root .gfg-list {
display : none;
}
/*
* FeedControl customizations.
*/
.gfg-horizontal-root .gfg-entry .gf-result .gf-snippet,
.gfg-horizontal-root .gfg-entry .gf-result .gf-author {
display : none;
}
.gfg-horizontal-root .gfg-entry .gf-result .gf-title {
color: #0000cc;
margin-right : 3px;
float : left;
}
.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer {
float : left;
}
.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer,
.gfg-horizontal-root .gfg-entry .gf-result .gf-relativePublishedDate {
display : block;
color: #AAAAAA;
}
.gfg-branding {
white-space : nowrap;
overflow : hidden;
text-align : left;
position : absolute;
right : 0px;
top : 0px;
width : 80px;
}
.gfg-collapse-open, .gfg-collapse-closed {
background-repeat : no-repeat;
background-position : center;
cursor : pointer;
float : right;
width : 17px;
height : 20px;
}
.gfg-collapse-open {
background-image : url('arrow_open.gif');
}
.gfg-collapse-closed {
background-image : url('arrow_close.gif');
}
.gfg-collapse-href {
float : left;
}
.clearFloat {
clear : both;
}
</style>
<script type="text/javascript">
function LoadDynamicFeedControl() {
var feeds = [
{title: 'El Escaparate',
url: 'http://elescaparatederosa.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=4'
},
];
var options = {
stacked : true,
horizontal : false,
title : "El Escaparate"
}
new GFdynamicFeedControl(feeds, 'feed-control', options);
}
// Load the feeds API and set the onload callback.
google.load('feeds', '1');
google.setOnLoadCallback(LoadDynamicFeedControl);
</script>

Solo habría entonces que sustituir mis datos (en negrita en el código) por los del blog a mostrar.

Plantillas y mas plantillas...

Blogger Templates  es otra de las muchas páginas que proporcionan palntillas para Blogger de forma gratuita.

La he conocido hoy, gracias a una consulta en la que hacían referencia a una plantilla de dicha página y, para ser sincera, me ha sorprendido muy gratamente.

Son plantillas muy bien diseñadas, partiendo de la base de las originales de Blogger en su mayoría, lo que las hace ideales a la hora de modificar o añadir cualquier cosa, ya que encontraremos sin dificultad los códigos de referencia.

Bonitas y funcionales, sin problema de carga a la hora de subirlas al blog (al menos las que he probado), con dos o tres columnas y tanto para la nueva versión como para la clásica.

Si estás pensando en un cambio de look, te recomendaría cualquiera de las de tres columnas... la Clouds  en particular, me ha encantado.

Menu de pestañas invertidas

Este es el tipo de menú que usé durante mucho tiempo en El Escaparate y que podéis ver debajo de las etiquetas al pie del header.
Este menú esta sacado de Dynamic Drive, aunque con algunas modificaciones en cuanto a color, tipo de texto, etc. que pueden hacerse sin problemas en el código CSS del menú.
En Dynamic Drive, como podéis ver en la imagen, han usado dos colores: #8b0000 y #d50509, así que para cambiarlos solo tenéis que localizar esos códigos en el CSS del menú y sustituirlos por el código de vuestros colores.

[1] En primer lugar nos descargamos estas dos imágenes a nuestro PC (botón derecho del ratón, guardar como) y las subimos a nuestro propio alojamiento para más tarde usar su url en el código del menú:



Hacerlo así, y no copiéis la url de mis imágenes, pues no sería la primera vez que por problemas de ancho de banda he de trasladar imágenes a otro alojamiento y si eso pasase, el menú se desconfiguraría.


[2] Colocamos ahora el código CSS del menú justo antes de </head>:

<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
#invertedtabs{
margin-left: 4px;
padding: 0;
width: 100%;
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
padding-left: 5px;
}
#invertedtabs ul{
font: bold 11px Arial, Verdana, sans-serif;
margin:0;
margin-bottom: 1em; /*margin between menu and rest of content*/
padding:0;
list-style:none;
}
#invertedtabs li{
display:inline;
margin:0 2px 0 0;
padding:0;
text-transform:uppercase;
line-height: 1.5em;
}
#invertedtabs a{
float:left;
color: white;
background: #8b0000 url(media/color_tabs_left2.gif) no-repeat left bottom;
margin:0 2px 0 0;
padding:0 0 0 3px;
text-decoration:none;
letter-spacing: 1px;
}
#invertedtabs a span{
float:left;
display:block;
background: transparent url(media/color_tabs_right2.gif) no-repeat right bottom;
padding:3px 9px 3px 6px;
}
#invertedtabs a span{
float:none;
}
#invertedtabs a:hover{
background-color: #d50509;
}
#invertedtabs a:hover span{
background-color: #d50509;
}
#invertedtabs #current a, #invertedtabs #current span{ /*currently selected tab*/
background-color: #d50509;
}
#invertedtabsline{
clear: both;
padding: 0;
width: 100%;
height: 8px;
line-height: 8px;
background: #8b0000;
border-bottom: 1px solid #fff; /*Remove this to remove border between bar and tabs*/
}
</style>

Es aquí donde tendremos que sustituir: media/color_tabs_left2.gif y media/color_tabs_right2.gif por la url de las imágenes que hemos descargado antes, fijaros que no es demasiado dificil saber en que lugar va cada una, pues la terminación de su url será la misma que la del ejemplo.

Cambiamos también aquí el código de los colores como ya os explicaba antes, por los vuestros.

[3] Colocamos ahora el código necesario para mostrar nuestro menú y donde vamos a construir los enlaces. Podemos ponerlo directamente en un nuevo elemento (Gadget) HTML y arrastrarlo a debajo de la cabecera o, como en mi caso, colocarlo en el "crosscol".


En la entrada "Aprovechando espacios en la plantilla (crosscol)", podéis ver como dar uso a la zona del "crosscol".

<div id="invertedtabsline">&nbsp;</div>

<div id="invertedtabs">
<ul>
<li style="margin-left: 1px"><a href="http://elescaparatederosa.blogspot.com" title="Inicio"><span>Inicio</span></a></li>
<li><a href="mailto:lejaniaimposible@hotmail.com" title="Envia un email"><span>Contacto</span></a></li>
<li><a href="http://feeds.feedburner.com/blogspot/hnBy" title="Suscribete al Escaparate"><span>Suscribe Feed</span></a></li>
<li><a href="http://www.blogger.com/profile/06743611108067453905" title="Sobre mi"><span>Sobre mi</span></a></li>
<li><a href="http://elescaparatederosa.blogspot.com/search/label/?max-results=999" title="Ver todas las entradas"><span>Ver todas las entradas</span></a></li>
</ul>
</div>
<br style="clear: left"/>

Por supuesto tendréis que cambiar en este código mis datos (los he resaltado en negrita) por los vuestros.

Aprovechando espacios en la plantilla (crosscol)

Recuerda
que aunque yo pruebe los "trucos"
Antes de hacer ningún cambio
GUARDA SIEMPRE TU PLANTILLA
Nunca es seguro
que todo salga bien...

Me llegaba ayer un email (por cierto sin firmar) donde alguien me preguntaba si podía explicarle que significaba una parte del código de su plantilla, que aparecía justo sobre esta línea:
<div id='content-wrapper'>

El código del que estamos hablando, y que Blogger incluye por defecto en sus plantillas, es este:

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>

Esta parte de la plantilla se llama crosscol-wrapper, y tal como lo podemos ver en nuestra plantilla no está habilitado para su uso, pero podemos hacerlo con facilidad para mostrar en el, como en mi caso, un menu horizontal o las etiquetas del blog, por ejemplo.

Para habilitar el crosscol y que este se vea en la parte de diseño como un elemento más (Gadget), cambiamos en su código el showaddelement='no' por showaddelement='yes' .

Ahora ya estará listo para incluir en el cualquier elemento e incluso varios elementos:

Podemos también añadirle alguna propiedad mediante CSS, para ponerle por ejemplo, fondo de un color determinado, borde, tamaño de texto, margenes, etc.

Incluimos el CSS antes de ]]></b:skin> (como ejemplo este es el que uso yo en el blog):

#crosscol-wrapper{
background:#FFF;
margin-top:5px;
border:2px solid #a6c4e1;
padding:2px;
}

Blogger aloja mas de 4.000 sitios maliciosos

StopBadwore cataloga al servicio propiedad de Google como uno de los más inseguros de la red.


Hablar de Blogger es hablar del fenómeno que en los últimos años ha arrasado en internet, los blogs. Y sin embargo este servicio, propiedad de Google, es uno de los que mayor número de sitios maliciosos aloja.



Según un informe publicado este verano por StopBadware, Blogger forma parte del Top 10 mundial de sitios más peligrosos de la red.

En un estudio, el grupo de seguridad informática investigo la procedencia de los sitios maliciosos de la red. Unas redes mundiales alojan el 50% de los sitios, seis de estas redes son servicios radicados en china mientras otras tres son estadounidenses.

Stopbadware descubrió la existencia de más de 4000 sitios alojados en Blogger con contenido malicioso y por lo tanto potencialmente peligroso para aquellos que acudan a visitarlos.

Hace 1 año, el servicio de Google no figuraba siquiera en la lista TOP 10, pero últimamente se ha convertido en un servicio popular para ciber delincuentes e intrusos.

“Considerando que es un servicio gratuito y que por su naturaleza de blog puede enlazar hacia cualquier cosa, la gente ha encontrado la forma de aprovechar este factor creando numerosos blogs que incorporan enlaces peligrosos y en algunas oportunidades incluso código maligno ejecutable desde la página”, indica Maxim Weinstein de StopBadware.org.

Por ahora, Google no ha respondido a las críticas, pero el propio Weinstein dijo que Google hace todo lo posible por eliminar el software maligno desde su sitio.

No opina lo mismo Robert Hansen, de SecTheory.com. Este cree que Google podría haber hecho más al respecto, ya que esta situación era conocida sobradamente por la industria. Entre otras cosas, Hansen recalca que Google permite el uso de scripts en su servicio de blogs, lo que aumenta el riesgo de malware.

Noticia recogida integramente de Noticiasdot.com

Usando la url correcta en ImageShack

Somos muchos los que en algún momento usamos el alojamiento de imágenes que  ImageShack proporciona.

En los últimos días he estado recibiendo consultas al respecto de algunos trucos que han de usar imágenes previamente alojadas. En practicamente todos los casos, el problema era el mismo, la imagen usada no se mostraba en el blog, o la hacía durante un breve espacio de tiempo.

El problema no es otro que el cambio en la forma de mostrar las urls de las imágenes en ImageShack, una vez subidas a este servicio.
Antes se usaba siempre la última url de todas las que el servicio proporcionaba una vez subida nuestra imagen, y esto ha hecho  que muchos de vosotros lo sigáis haciendo así, con lo que la imagen no se mostrará.

Ahora para conseguir la url correcta hemos de, una vez subida la imagen, bajar al final de todas las urls mostradas y pinchar en " + Show Advanced Link", se mostrará entonces el enlace necesario para usar en nuestro blog.

Actualización
Han vuelto a cambiar el sistema para obtener la url directa en ImageShack, ahora es bastante más sencillo, ya que la url que necesitamos aparece en primer lugar una vez subida la imagen.

Entradas más populares (Widget actualizado)

Seguramente debido a las pruebas de Blogger para incluir el "Suscribe" en el formulario de comentarios, el widget de entradas más populares en español, ha dejado de funcionar correctamente.



He corregido la Pipes de Yahoo, y ya podéis disponer de nuevo del widget funcionando sin problemas.

Solo tenéis que copiar el código en un elemento HTML (Gadget) y sustituir donde dice "elescaparatederosa" por el nombre de vuestro blog (tal como aparece en la url del navegador).

    <script type="text/javascript">
    function pipeCallback(obj) {
    document.write('<ol style="text-transform: capitalize;">');
    var i;
    for (i = 0; i < obj.count ; i++)
    {
    var href = "'" + obj.value.items[i].link + "'";
    var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
    document.write(item);
    }
    document.write('</ol>');
    }
    </script>
    <script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback& _id=e1f5a9b2248904d8b81f794c09353010&url=http%3A%2F%2Felescaparatederosa.blogspot.com&num=5" type="text/javascript"></script>

El número de entradas a mostrar en el widget, podéis controlarlo en &num=5 cambiando el 5 por el número de entradas que queréis mostrar en el widget.

Entradas expandibles en la página principal

Recuerda
que aunque yo pruebe los "trucos"
Antes de hacer ningún cambio
GUARDA SIEMPRE TU PLANTILLA
Nunca es seguro
que todo salga bien...

Hace tiempo habíamos visto la forma de lograr que, en las páginas de etiquetas se mostrasen solamente los títulos de las entradas, permitiendo que al pinchar sobre ellas se viesen completas.

Han sido varias personas las que me han preguntado sobre la forma de hacer esto mismo, pero en la página principal.

Esto lo he conseguido con una ligera modificación del código en el "truco" original, incluso pueden mostrarse sin problemas en ambas páginas al mismo tiempo.

Partiremos de la base de que no tenéis implementado el "truco" anterior que mostraba los títulos "recogidos" en las páginas de etiquetas.

[1] Nos descargamos el script que necesitamos para hacer funcionar el efecto, lo descomprimimos y lo subimos a un alojamiento adecuado para obtener su url.

[2] Vamos a Edición de HTML de nuestro panel y marcamos la opción "Expandir las plantillas de artilugios" colocamos la url del script en este código y de esta manera que veis, antes de </head>:

<script src='URL_DEL_SCRIPT' type='text/javascript'></script>
<script type='text/javascript'>
function toggleIt(id) {
    post = document.getElementById(id);
    if (post.style.display != 'none') {
        post.style.display = 'none';
    } else {
        post.style.display = '';
    }
}
</script>

[3] Localizamos ahora el código que está escrito en color negro, y añadimos la parte del código que está escrita en color rojo, colocada tal cual se ve aquí, es decir, el código negro ya está en la plantilla y el código rojo es el que se añade:

<b:includable id='PeekABooPost' var='post'>

<div class='post uncustomized-post-template'>

<table><tr><td width='40px'>

<a expr:onclick='&quot;javascript:toggleIt(\&quot;&quot; + data:post.id + &quot;\&quot;);&quot;' href='javascript:void(0)' style='text-decoration:none' title='Desplegar esta entrada'>[+/-]</a></td>

<td><h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3></td></tr></table>

<div class='post-body' expr:id='data:post.id' style='display:none'>

<p><data:post.body/></p>

<div style='clear: both;'/> <!-- clear for photos floats -->

</div>

</div>

</b:includable>

<b:includable id='main' var='top'>
  <!-- posts -->
  <div id='blog-posts'>
    <b:loop values='data:posts' var='post'>
      <b:if cond='data:post.dateHeader'>
            <h2 class='date-header'><data:post.dateHeader/></h2>
      </b:if>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
     <b:if cond='data:blog.pageType != "item"'>
             <b:include data='post' name='PeekABooPost'/>
     <b:else/>
              <b:include data='post' name='post'/>
            </b:if>
      <b:else/>
<b:include data='post' name='post'/>
 </b:if>

[4] Usaremos la vista previa antes de guardar, pues ya deberían ser visibles solo los títulos de las entradas precedidos de un [+/-] en la página principal.

Si ya tenemos aplicado el "truco" en las páginas de etiquetas y queremos añadirlo también en la página principal del blog:

[1] Localizaremos esta parte del código:

<b:includable id='main' var='top'>
  <!-- posts -->
  <div id='blog-posts'>
    <b:loop values='data:posts' var='post'>
      <b:if cond='data:post.dateHeader'>
            <h2 class='date-header'><data:post.dateHeader/></h2>
      </b:if>

      <b:if cond='data:blog.homepageUrl != data:blog.url'>
     <b:if cond='data:blog.pageType != "item"'>
             <b:include data='post' name='PeekABooPost'/>
     <b:else/>
              <b:include data='post' name='post'/>
            </b:if>
      <b:else/>

        <b:include data='post' name='post'/>

      </b:if>

[2] Y añadiremos ahí la parte que está resaltada en color rojo:

<b:includable id='main' var='top'>
  <!-- posts -->
  <div id='blog-posts'>
    <b:loop values='data:posts' var='post'>
      <b:if cond='data:post.dateHeader'>
            <h2 class='date-header'><data:post.dateHeader/></h2>
      </b:if>

      <b:if cond='data:blog.homepageUrl != data:blog.url'>
     <b:if cond='data:blog.pageType != "item"'>
             <b:include data='post' name='PeekABooPost'/>
     <b:else/>
              <b:include data='post' name='post'/>
            </b:if>
      <b:else/>

<b:if cond='data:blog.homepageUrl == data:blog.url'>
     <b:if cond='data:blog.pageType != &quot;item&quot;'>
             <b:include data='post' name='PeekABooPost'/>
     <b:else/>
              <b:include data='post' name='post'/>
            </b:if>
      <b:else/>

        <b:include data='post' name='post'/>

      </b:if>
</b:if>