0

Ranking de estrellas en Blogger ya disponible

Recuerda
que aunque yo pruebe los "trucos"
Antes de hacer ningún cambio
GUARDA SIEMPRE TU PLANTILLA
Nunca es seguro
que todo salga bien...
Está disponible ya en Blogger el "Ranking de estrellas" para nuestras entradas, el problema es que aunque este operativa la opción, en algunas plantillas no está incluido el código que hace posible su funcionamiento.

¿La solución? Pues como en otras ocasiones tendremos que incluir el código directamente en la plantilla:

[1] Iremos a nuestro panel de Blogger y en la pestaña de "Diseño" pichamos en el Editar de "Entradas del blog".

Entre las opciones disponibles, marcamos "Mostrar la evaluación de estrellas":


[2] Una vez guardados los cambios nos aseguramos de que la opción se muestra debajo de nuestras entradas, sino es así, lo más probable es que tengamos que incluir el código nosotros mismos.

[3] Vamos a la parte de "Edición html" de nuestra plantilla y marcamos la casilla para "expandir las plantillas de artilugios".

Localizamos esta línea de código:

<b:include name='feedLinks'/>


Y justo debajo añadimos el código para el ranking:

<b:if cond='data:top.showStars'>

<script src='http://www.google.com/jsapi' type='text/javascript'/>

<script type='text/javascript'>

google.load("annotations", "1");

function initialize() {

google.annotations.setApplicationId(<data:top.blogspotReviews/>);

google.annotations.createAll();

google.annotations.fetch();

}

google.setOnLoadCallback(initialize);

</script>

</b:if>

[4] Pondremos ahora el código necesario para mostrar las estrellas debajo de las entradas, la colocación dependerá de donde queramos ponerla cada uno, aunque siempre ha de estar debajo de una de estas líneas de código:

<p class='post-footer-line post-footer-line-1'>

<p class='post-footer-line post-footer-line-2'>

<p class='post-footer-line post-footer-line-3'>


Si vamos a poner el ranking de estrellas debajo de todos los demás elementos del pie de los post (post-footer), colocaríamos entonces el código debajo de la última línea:

<span class='star-ratings'>

<b:if cond='data:top.showStars'>

<div expr:g:background-color='data:backgroundColor'

expr:g:text-color='data:textColor'

expr:g:url='data:post.absoluteUrl'

g:height='42'

g:type='RatingPanel'

g:width='180'>

</div>

</b:if>

</span>




0

Somos campeones

Lo siento pero no he podido resistir la tentación...



España campeona de Europa 





La Selección culminó una Eurocopa perfecta ganando la final a Alemania.

El gol de Torres en la primera mitad hizo justicia a la superioridad española, pero al final el resultado pareció quedarse corto.

España, por fin, vuelve a proclamarse campeona de Europa.

0

Modificar el formulario de comentarios

Como habéis visto en mi blog, he cambiado el aspecto del nuevo formulario para comentarios de Blogger.

En realidad Blogger no nos permite hacerle demasiados cambios, ya que su código no se muestra dentro de la plantilla así que, como sucede con algunos otros de los elementos de Blogger, el formulario está controlado por Blogger.

A pesar de esto, algunos aspectos pueden modificarse usando CSS, por ejemplo es posible conseguir centrar el formulario, lo cual ya es bastante porque leyendo las consultas y emails recibidos desde ayer, veo que es la primera cosa que todos queréis modificar.

Como cada plantilla tendrá unas medidas y estética diferente, lo más fácil para todos creo que será mostraros el código CSS que estoy usando en El Escaparate, no creo que sea demasiado difícil el adaptarlo a las necesidades de cada uno.

Como os digo siempre y para evitar errores, colocaremos el código dentro de la plantilla justo antes de ]]></b:skin>.

[1] Algo así para centrar el formulario:

.comment-form {
margin:0px auto;
width:400px;
}

[2] Con esto añadimos las modificaciones en el título (Publicar un comentario en la entrada):
.comment-form h3 {
background:transparent url(Url_de_la_imagen) no-repeat scroll left 50%; color:#6998CA;
font-size:19px;
line-height:35px;
}

Si no vamos a colocar un icono delante del título, eliminamos la línea: background:transparent url(Url_de_la_imagen) no-repeat scroll left 50%;

color:#6998CA; El color del texto.

font-size:19px; Tamaño del texto.

line-height:35px; Ancho de la línea del texto, si nuestro icono tiene un ancho de 35px, por ejemplo, tendremos que poner aquí su misma medida para que no se vea cortado.

[3] Mensaje del formulario:
.comment-form p{
background-color:#EFEFF7;
color:#000;
border:1px solid #6998CA;
padding:10px;
width:375px;
}

background-color:#EFEFF7; Color de fondo.

color:#000; Color del texto.

border:1px solid #6998CA; Grosor, color y aspecto del borde.

padding:10px; Distancia del texto al borde de la caja.

width:375px; Ancho de la caja.

Si no vais a mostrar ningún mensaje a vuestras visitas, esta parte de código no es necesaria incluirla.



Quizá queráis ver como incluir un mensaje en el formulario de comentarios.

0

Esfuerzo Personal

Cuando hablamos de esfuerzo nos viene a la mente un esfuerzo físico, pero el premio que me otorga k_nelita y que ella es sobradamente merecedora no es precisamente la clase de esfuerzo al que se refiere.
Se trata de un esfuerzo que nos aporta satisfacciones, quizás por eso sea un esfuerzo agradable, mantener un blog.

En más de una ocasión me comentaron lo complicado que resultaba hacer modificaciones en la plantilla y las largas horas que tuvieron que dedicar al blog para obtener los resultados esperados.

No todo el mundo dispone de un PC en su hogar, los que mantienen su blog conectándose desde un ciber también hacen un esfuerzo.

Otros deben compartir el PC y no debe ser grato guardar turno, pero así son las cosas.

A veces ese esfuerzo se hace sobrehumano, da igual si se tarda tres horas o un día en crear un post, es lo mismo que lo escriba un familiar o un amigo, lo que importa es que tienen algo que aportar. Son personas que por una causa u otra tienen una discapacidad, para ellos no existe la palabra NO y para sus familias tampoco.

Y hay un grupo de blogs que no puedo pasar por alto, son blogs personales muy especiales, son blogs cuyos autores he conocido de forma casual porque dejaron comentarios en este blog y calaron muy hondo, tanto... que me fue muy difícil ayudarles no, por la solución a sus preguntas sino porque no es tarea fácil leer los sentimientos que afloran cuando se pierde a un ser querido.

Para todos ellos mi cariño y este premio.



GRACIAS K_nelita



0

Formulario de comentarios Blogger

Ya podemos incluir en nuestro blog un formulario de comentarios "incrustado" en el pie de nuestras entradas al final de los comentarios.

De momento esta opción solamente está disponible en Blogger in Draft que, como ya casi todos sabréis es una especie de "laboratorio de pruebas", donde el equipo de Blogger va añadiendo nuevas funcionalidades que los usuarios podemos probar antes de incluirlas en el Blogger "normal".

Actualización:
La opción ya está incluida en la "Configuración" del panel de Blogger "normal", aunque sigue siendo necesario en algunas plantillas, seguir los pasos de esta entrada para mostrar el formulario.

Disponer de esta opción en nuestros blogs es, de entrada, bastante sencillo:

[1] Accedemos a nuestro panel de Blogger a través de Blogger in Draft.

[2] Una vez allí, pinchamos en la pestaña "Configuración" de nuestro menú y después en "comentarios".

[3] Veremos entonces una nueva opción que dice "Ubicación del formulario de comentarios", ahí marcaremos "Entrada incrustada a continuación":


[4] Si todo ha ido según lo previsto, el formulario debería verse ya debajo de los comentarios de cada entrada:


El formulario será así de sencillo de implementar en los blogs de nueva creación o en los blogs que no hayan personalizado ciertos aspectos de la plantilla.

Si hemos modificado estas partes del código de la plantilla como es mi caso, entonces seguramente aunque habilitemos la opción para mostrar el formulario, este no funcionará.

Como podéis comprobar acabo de implementarlo en El Escaparate y, de momento, parece funcionar correctamente sin necesidad de hacer grandes cambios en el código de la plantilla.

La forma de implementarlo sin necesidad de cambios demasiado complicados, la he encontrado esta tarde guiándome por Blogger Buster, y digo guiándome porque mi plantilla está tan modificada que el código que Amanda nos muestra apenas coincidía con el mio.

Aún así y tomando las debidas precauciones (guardar una copia de la plantilla es imprescindible) no pude resistirme a probarlo.

Os explico como Amanda ha logrado incluir el formulario en su plantilla previamente modificada:

[1] En primer lugar es imprescindible marcar la opción en "Configuración - Comentarios" que ya expliqué al comienzo de esta entrada.

[2]Una vez habilitada la opción y comprobado que el formulario no aparece en nuestro blog, vamos a la parte de "Edición html" de nuestro panel y marcamos la casilla para expandir las plantillas de artilugios.

Tendremos que localizar este código:

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

[3] Una vez localizado tendremos que cambiarlo por este otro:

<p class='comment-footer'> <b:if cond='data:post.embedCommentForm'> <b:include data='post' name='comment-form'/> <b:else/> <b:if cond='data:post.allowComments'> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a> </b:if> </b:if> </p></b:if>


Notas: Tened en cuenta lo que ya os comentaba antes:

el código que Amanda nos indica no estará igual en una plantilla con modificaciones previas pero si aún así decidís probarlo como hice yo, no os será demasiado difícil encontrar el código correcto si os fijáis bien e incluso si recordáis alguno de los cambios que hicisteis antes en esa zona.

Si habéis incluido la forma de mostrar el antiguo formulario de Blogger debajo de las entradas, tendréis que volver a la configuración original antes de implementar el formulario nuevo.

Por si os sirve de referencia os diré que yo había incluido ahí la imagen con un lápiz que sustituía al "Publicar un comentario en la entrada" y que mi código se veía así:

<p class='comment-footer'> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><img alt='Enlace para comentar' src='http://2.bp.blogspot.com/_sbaQpFxeL1Q/R_4XR7UekbI/AAAAAAAAAJU/rhqHxL2mMLI/s400/

nombrenndn7.jpg' title='Deja tu comentario'/></a> </p> </b:if>


Una vez incluido el nuevo formulario en el blog podemos hacerle algunas mejoras de diseño.

0

Ayuda Blogs el agregador para blogs de ayuda

Logo Ayuda Blogs
Desde Tensaiweb nos invitan a participar en un nuevo agregador para blogs que ellos mismos han ideado y puesto en marcha:


Ayuda blogs es un portal que busca reunir noticias sobre cosas de blogs, ayudas, trucos y todo lo que le sirva a los bloggers, especialmente para las plataformas más difundidas como son blogger y wordpress.
Ya saben, si tienen algún post sobre algo para Blogger o Wordpress en sus blogs. No duden en enviar dicha Noticia.
No sólo pueden enviar su noticia sino encontrar otras que les interesen.

Invitación
A todos los colegas bloggers que me leen están cordialmente invitados a enviar sus noticias.
Estoy preparando un pequeño sorteo entre los que participen publicando noticias en este portal, cuando tenga los detalles les comentaré más al respecto.


Aún están empezando así que no encontraréis demasiado contenido, pero el proyecto no deja de ser interesante ya que separaría las entradas relativas a "ayuda blog" de las que habitualmente triunfan en ese tipo de agregadores de noticias, donde las de ayuda suelen quedarse relegadas a segundo plano.

Ojalá su proyecto tenga una buena acogida entre los bloggers y consiga prosperar, yo desde aquí les deseo mucha suerte, ya que a mi personalmente el proyecto me parece una gran idea.

0

Buscador que busca en la web y en tu blog

Buscador para el blog que nos ofrece la posibilidad de realizar búsquedas en la web y también dentro de nuestro propio blog.

[1] Colocáis el código en un elemento html de nuestra sidebar.



[2] Cambiáis dentro del código los datos del escaparate por los de vuestro blog (en negrita).



Código para blogs con fondo blanco



Buscador Blanco

<!-- SiteSearch Google -->

<form action="http://www.google.es/custom" target="_top" method="get">

<table border="0" bgcolor="#ffffff" align="center">

<tr><td nowrap="nowrap" valign="top" height="32" align="left">

<a href="http://www.google.com/">

<img border="0" alt="Google" src="http://www.google.com/logos/Logo_40wht.gif" align="middle"/></a>

<br/>

<input value="elescaparatederosa.blogspot.com" name="domains" type="hidden"/>

<label for="sbi" style="display: none">Introduzca los términos de búsqueda.</label>



<input maxlength="255" id="sbi" value="" name="q" size="15" type="text"/>

</td></tr>

<tr>

<td nowrap="nowrap">

<table>

<tr>

<td>

<input id="ss0" checked value="" name="sitesearch" type="radio"/>

<label for="ss0" title="Buscar en la web"><font color="#000000" size="-1">Web</font></label></td>

<td>

<input id="ss1" value="elescaparatederosa.blogspot.com" name="sitesearch" type="radio"/>

<label for="ss1" title="Buscar elescaparatederosa.blogspot.com"><font color="#000000" size="-1">El Escaparate</font></label></td>

</tr>

</table>

<label for="sbb" style="display: none">Envíe el formulario de búsqueda</label>

<input id="sbb" value="Buscar" name="sa" type="submit"/>



</td></tr></table>

</form>

<!-- SiteSearch Google -->



Código para blogs con fondo negro



Buscador Negro

<!-- SiteSearch Google -->

<form action="http://www.google.es/custom" target="_top" method="get">

<table border="0" bgcolor="#000000" align="center">

<tr><td nowrap="nowrap" valign="top" height="32" align="left">

<a href="http://www.google.com/">

<img border="0" alt="Google" src="http://www.google.com/logos/Logo_25blk.gif" align="middle"/></a>

<br/>

<input value="elescaparatederosa.blogspot.com" name="domains" type="hidden"/>

<label for="sbi" style="display: none">Introduzca los términos de búsqueda.</label>



<input maxlength="255" id="sbi" value="" name="q" size="15" type="text"/>

</td></tr>

<tr>

<td nowrap="nowrap">

<table>

<tr>

<td>

<input id="ss0" checked value="" name="sitesearch" type="radio"/>

<label for="ss0" title="Buscar en la web"><font color="#ffffff" size="-1">Web</font></label></td>

<td>

<input id="ss1" value="elescaparatederosa.blogspot.com" name="sitesearch" type="radio"/>

<label for="ss1" title="Buscar elescaparatederosa.blogspot.com"><font color="#ffffff" size="-1">El Escaparate</font></label></td>

</tr>

</table>

<label for="sbb" style="display: none">Envíe el formulario de búsqueda</label>

<input id="sbb" value="Buscar" name="sa" type="submit"/>



</td></tr></table>

</form>

<!-- SiteSearch Google -->

0

B de Bloggers

B de Bloggers
B de Bloggers es un magnifico blogs de ayuda donde, como su propio título indica, vais a poder encontrar todo tipo de herramientas para blogs, tanto de Blogger como de Wordpress.

Aunque no suelo hablar demasiado en mis entradas de otros blogs, no podía dejar de hacerlo en esta ocasión para dar las gracias desde aquí a Alexis el administrador de B de Bloggers, por el detalle que ha tenido conmigo.

Ayer mismo se inauguró en B de Blogger una nueva sección donde Alexis pretende, como el mismo dice en su entrada publicar las entrevistas que le hemos hechos algunos bloggers reconocidos y que tienen muchas experiencia con los blogs.

Estoy encantada además de agradecida de haber sido la primera persona escogida por Alexis para inaugurar la nueva sección de entrevistas.

Si os apetece estáis invitados a B de Bloggers para Leer la entrevista.

¡Muchas gracias Alexis!

0

Cambiar la firma de las entradas por una imagen

STBAN me dice en un comentario:

me preguntaba si se podia cambiar la firma de tu blog por una imagen?,
ya que encontre una pagina que genera firmas y quisiera colocarla en lugar de las letras.


Lo que STBAN llama firma es el "publicado por" que vemos en el post-footer (pie de entradas) de nuestros blogs. Vamos a ver la forma de cambiar esta parte tal como STBAN me solicita por una firma (imagen) generada en la web de My Live Signature.

Esta es la imagen con mi firma que he escogido para el ejemplo:

Y este es el código que hace que se muestre, es decir, la url de la imagen con mi firma:
<img src="http://signatures.mylivesignature.com/54486/208/19EDAEC8AD39BD58A732B86C3A17F33B.png" style="border: none; background: transparent;"/>

[1] Nos situamos en "edición html" de nuestro panel de Blogger y expandimos los artilugios para localizar este código:

<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>

[2] Dentro de ese código, sustituimos la etiqueta <data:post.author/> por la url de nuestra imagen:
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><img src="http://signatures.mylivesignature.com/54486/208/19EDAEC8AD39BD58A732B86C3A17F33B.png" style="border: none; background: transparent;"/></span>
</b:if>
</span>

Firma

[3] Si además queremos prescindir del "publicado por" y mostrar solamente nuestra imagen, eliminamos en el mismo código la etiqueta <data:top.authorLabel/>

Firma1
[4] También podríamos cambiar el texto en "publicado por" para usar un texto distinto, para ello después de eliminar la etiqueta
<data:top.authorLabel/> pondríamos en su lugar directamente el texto que queremos mostrar ahí:
Firma2

0

Campaña de Amistad











Campaña de Amistad

La moda de los premios sigue en pleno auge, cualquier motivo es bueno para dar rienda suelta a la imaginación y resaltar con una bonita imagen unas palabras.





Esta vez esas palabras vienen de Santo Domingo de mi buen amigo el Dr. Gnómegang

Hablamos del premio a la amistad, que al igual que él para mi es un privilegio recoger de sus manos.


Mi agradecimiento a k_nelita que una vez más me tiene presente otorgandome este lindo premio.

! Gracias compañeros ¡


0

Blog con huellas 2008




Agradezco el detalle a Alexis Marrero por el obsequio, mención a los blogs que de una forma u otra dejan huella. Espero que mis huellas sirvan para solucionar esos pequeños quebraderos de cabeza que más de una vez nos proporciona nuestro querido blog.

Abrazos y gracias Alexis.

0

Strix.org.uk - Generador de recortes de letras



Strix.org.uk
es un generador de recortes de letras, el efecto final seguramente lo vimos en más de una ocasión, ahora ya sabemos donde conseguirlo. Su uso es muy sencillo basta con escribir un texto y clicar en "Update Tex" si es de nuestro agrado también podemos añadir una imagen de fondo desde nuestro PC o incluyendo la url de la imagen en "Background"



0

Cambiar el texto de los enlaces de navegación

Enlaces de navegacion
Son varios los que me han consultado sobre como cambiar los enlaces de navegación que se muestran al pie de nuestras entradas en forma de enlace de texto : "Página principal -> Entradas antiguas -> Entradas más recientes", por otro texto más acorde con sus gustos o necesidades.

[1] Nos situamos en nuestro panel de Blogger, Edición Html y marcamos la casilla para expandir la plantilla de artilugios.
Localizamos esta línea de código para orientarnos:

<b:includable id='nextprev'>

[2] Justo debajo de esa línea estará el código donde hemos de aplicar los cambios:
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>

</div>
<div class='clear'/>
</b:includable>

[3] Hemos de sustituir dentro de este código directamente, por el texto que queramos mostrar en cada caso, las etiquetas:

<data:newerPageTitle/> (Entradas más recientes)

<data:olderPageTitle/> (Entradas antiguas)

<data:homeMsg/> (Página principal)


Puedes consultar también como sustituir esos mismos enlaces por una imagen o icono.

0

El Escaparate en "El Jueves"

La primera sorprendida fui yo al recibir el email del genial dibujante Azagra, del cual es cierto que conocía algunos de sus trabajos, pero del que no tenía ni idea que llevase su propio blog y, menos aún, que visitase El Escaparate en busca de cosillas para el.

En este email además de algún que otro piropo con mucha gracia, me decía que había hecho un dibujo tipo viñeta inspirado en El Escaparate y que, con mi aprobación, le gustaría publicarlo en la revista en la que trabaja "El Jueves".

Como podéis imaginar, desde el primer momento estuve encantada con la idea y más cuando en el segundo email me envió la viñeta y pude comprobar por mi misma la innegable calidad del regalo que me estaban haciendo.
Algunos ya lo habréis visto colgado desde entonces en mi sidebar, por supuesto con un enlace directo a su genial blog, donde se pueden ver muchas de sus fantásticas creaciones y donde la risa e incluso la carcajada, están aseguradas.

Pues bien, esta semana ha salido publicado en la revista, y aunque no había dicho nada antes, sois muchos los que me habéis enviado correos diciendo que lo habíais visto y dándome la enhorabuena... ¡Muchas gracias a todos!

Pagina del Jueves

¡Gracias Carlos ha sido un honor para mi y un gesto inolvidable!

0

Enlace al blog en el feed (FeedBurner) en español

Ayer mismo publicaba la entrada sobre como incluir un enlace al blog en nuestro feed con FeedBurner.

Esta tarde visitando Blogger Buster, he visto una entrada sobre el tema en la que Amanda explica como hacer eso mismo pero desde un FeedFare que ella misma ha hecho, para que ademas de mostrar el enlace a las entradas del blog en nuestro feed, se muestre también el autor de la entrada.

Por supuesto usando el enlace que ella nos proporciona, el texto que veremos en nuestro feed al pie de cada artículo, se mostrará en inglés:
Feed Blogger Buster
Me he permitido descargar su archivo y traducirlo al español.
Una vez modificado lo necesario, lo he subido a mi sitio en Google Sites y he incluido su url como explicaba en la entrada anterior, el resultado que veremos en nuestro feed al pie de cada artículo, es el mismo que el conseguido por Amanda pero en español:

Feed en español
Para añadir un enlace como este en vuestro feed de FeedBurner, solo tenéis que seguir los pasos de la entrada anterior de la que os hablo al principio de este post, hasta el paso [3] y es en ese paso, donde hemos de introducir la url de mi archivo:

http://sites.google.com/site/elescaparatederosa/blog/autor.xml

Una vez hecho esto y después de pinchar en Add New Flare, tendremos que ver la nueva opción que activaremos pinchando en Activate:

Add Flare

Notas:
Si ya habíais incluido en vuestro feed el enlace "Attribution" que explicaba en la anterior entrada y queréis optar por colocar este nuevo, simplemente volvéis a ingresar en vuestra cuenta de FeedBurner, desmarcáis la casilla en "Attribution"y guardáis los cambios en Activate para eliminar el enlace anterior antes de colocar el nuevo.

Cuando el blog sea un blog compartido por distintos autores, el nombre de cada autor se mostrará debajo de los artículos que cada uno de ellos ha escrito.

0

Como incluir un enlace al blog en nuestros feed (FeedBurner)

Los que usamos Feedburner en nuestro blog tenemos ahora la posibilidad de incluir debajo de cada entrada, en nuestro lector de feed, un enlace a la fuente original del artículo, o lo que es lo mismo, un enlace a nuestro blog.

Esto es muy útil ya que a menudo los contenidos de los blogs son copiados directamente desde los feed por robot que registran su contenido y que luego son publicados íntegramente en otro sitio, normalmente con la finalidad de generar ingresos aprovechándose del trabajo de otros.

En la gran mayoría de los casos, el contenido duplicado aparecerá mucho antes en los resultados de búsqueda de cualquier buscador, mientras que la fuente original será relegada a un resultado muy por debajo e incluso podrá ser ignorada por completo.

Utilizando una de las nuevas funcionalidades de Feedburner (FeedFlare), podemos mostrar un enlace permanente a la fuente original al pie de cada artículo de nuestro Feed, lo que garantizará que la fuente original del artículo (nuestro blog) tendrá siempre el PageRank más alto, en comparación con el sitio que publica el contenido duplicado y por tanto, obtendrá una justa posición en los buscadores.

[1] Ingresamos a nuestra cuenta de Feedburner y una vez allí pinchamos sobre el feed del blog al que queremos incluir el enlace permanente.

[2] Pinchamos en la pestaña del menú que dice Optimize y en la página que se abre veremos un menú a la izquierda, pinchamos en el enlace que dice FeedFlare.

[3] Abajo vemos una casilla como la de la imagen:

Feed
Es ahí donde tenemos que introducir la url necesaria para que en nuestro feed se muestre el enlace a nuestra página. La url que hemos de introducir y que Feedburner nos proporciona es esta:

http://www.feedburner.com/fb/static/flareunits/Attribution.xml

[4] Una vez la hemos introducido, pinchamos en el botón Add New Flare. Entonces veremos que sobre la casilla donde hemos colocado la url, aparece una nueva opción: Attribution, marcamos la primera casilla de las dos que están delante:

Feed1
[5] Ya podemos activar la nueva opción, abajo de la página en el botón Activate y listo.

Podéis comprobar el resultado en la página de los feeds del Escaparate, donde al pie de cada artículo veréis un enlace que dice: "This item is from "El Escaparate (Ayuda para tu blog)". "Publicado por Rosa de El Escaparate (Ayuda para tu blog).

Consulta como mostrar el enlace y nombre del autor en español.

0

Unete al Download Day de Firefox3

Download Day - Spanish

La fecha oficial de la publicación de Firefox3 es el 17 de junio de 2008.

Hay una iniciativa global comunitaria de Mozilla, que pretende establecer un nuevo récord en el número de descargas de un programa llevadas a cabo en 24 horas, en este caso se trata del tan esperado Firefox 3.

Todo está dispuesto para el gran reto que será llevado a cabo el día de la publicación oficial de Firefox3, conocido como Download Day o Día de Descarga. Desde Mozilla Hispano nos invitan a difundir la noticia y a unirnos también a la iniciativa de apoyar la descarga de Firefox3.

Si aún no te has apuntado para formar parte del Download Day, puedes hacerlo desde la misma web de Mozilla Hispano, solo has de introducir tu situación geográfica y la dirección de tu correo electrónico para que puedan avisarte de cualquier novedad al respecto y del momento oportuno para la descarga:


Coloca uno de los logos de apoyo en tu blog:



También puede colocarse un contador que establece la cuenta atrás para el Download Day, vez esté disponible Firefox3 el contador mostrará un enlace a las nuevas características y la descarga de Firefox3.

Firefox 3

0

Día Internacional del Blogger



Casi no llego a dar la noticia, pero por si aún alguien no lo sabe mañana día 14 de Junio es el día internacional del blogger. En International Webloggers Day encontraréis la forma de participar en este evento.
El tema de este año es el "cambio" y el objetivo es escribir una entrada sobre lo que ha cambiado en nuestra vida en este año.

Algunos de los eventos que nos recuerdan son:
* El terremoto en China
* El asesinato de la primera ministra pakistaní, Benazir Bhutto
* Las Olimpiadas en Beijing
* El asunto entre Tibet y Myanmar
* Las Elecciones Presidenciales 2008 en EUA
* La crisis alimentaria, el aumento del precio del petroleo, o problemas de la vivienda.

Cualquier tema es bueno, incluso puede que el tuyo sea más interesante de lo que crees y esta es la oportunidad de hacer llegar a los demás lo que piensas.


Fuente : Unión de Bloggers Hispanos.
Enlace: International Weblogger’s Day

0

La lista de Blog en Blogger

Leo en Blogger Buzz que ya está disponible en la página de diseño de nuestro panel, un nuevo elemento "Lista de Blog" desde el pasado Martes, día 10. Para algunos ya no será una novedad, pues estaba disponible en Blogger in Draft hace algún tiempo.
Hemos de suponer entonces que ya ha pasado el periodo de pruebas establecido por el equipo de Blogger y que ya funciona correctamente en todos los blogs.


Lista de BlogLa Lista de Blog mejora la lista de enlaces de nuestros elementos de página, utilizando feeds RSS o Atom para mostrar información actualizada con frecuencia, títulos de posts y resúmenes.

Puedes utilizar la Lista de Blog para poner un listado de los enlaces de tus blogs favoritos en la barra lateral, o utilizarlo para categorizar los blogs que sueles leer.

La Lista de Blog funciona muy bien para cualquier página que tiene feeds RSS o Atom, así que puedes ser creativo: enlaza sitios de noticias, podcasts, Twitter stream, resultados de búsqueda o cualquier otra información con un feed.

Aquí tienes un rápido resumen de las características que la Lista de Blog te proporciona:

-Enlazar a blogs, páginas web y feeds desde la barra lateral de tu blog, con un ícono asociado a tu sitio web que es opcional.

-Para páginas con feeds RSS y Atom, La Lista de Blog puede mostrar actualizaciones de última hora, títulos de posts y un resumen del más reciente post.

* Ordenar alfabéticamente y por última fecha de actualización.
* Mostrar todos los enlaces o esconderlos detrás de un enlace de "Ver todos".
* Importar subscripciones desde Google Reader.
* Los links a Listas de Blog son visibles desde navegadores para que el Page Rank de tu Blog y su reputación fluya hacia aquellos que enlazas.


Nota:
En la misma página de Blogger Buzz, podéis ver un video explicativo de como usar y configurar este nuevo elemento.

0

Una de reflexiones

No sé si quejarme porque si lo hago me da la sensación de ser una desagradecida, cuando la mayoría se queja de no tener empleo yo lo hago por trabajar demasiadas horas. Ese es el motivo, el principal motivo de mi ausencia de estos días, hoy he sacado unos minutos libres de no sé donde, bueno si lo sé, se los he robado al sueño pero tenía muchas ganas de abrir el blog, no sé si lo entenderá alguien pero me da una pena muy grande ver los comentarios sin contestar y la misma entrada del día uno.
Es una sensación como de haberse perdido algo, cosas por aprender, amigos por visitar, nuevas noticias y eventos.
Así que allá voy, derechita y sin pensarlo a ponerme al día, y como no contestar vuestros comentarios.

Un abrazo grande, por si alguien no lo sabe y aunque suene a cursilada !Os extraño¡

0

Fecha dentro de una imagen tipo calendario

En unos sencillos pasos conseguiremos que la fecha de nuestras entradas se muestre dentro de una imagen tipo calendario.

Ejemplo fecha

[1] Para comenzar tendremos que cambiar el formato en que se muestra la fecha de nuestros posts. Iremos a nuestro panel de Blogger y en Configuración escogemos la opción Formato, una vez allí en "Formato de cabecera de la fecha" seleccionamos la penúltima opción que aparece en el despegable. Ejemplo: 08 junio 2008

[2] Una vez cambiado el formato de la fecha, vamos a Edición de Html y expandimos los artilugios. Localizamos la etiqueta </head> y justo antes colocamos este script:

<script>
function remplaza_fecha(d){
var da = d.split(' ');
dia = "<strong class='fecha_dia'>"+da[0]+"</strong>";
mes = "<strong class='fecha_mes'>"+da[1].slice(0,3)+"</strong>";
anio = "<strong class='fecha_anio'>"+da[2]+"</strong>";
document.write(dia+mes+anio);
}
</script>

[3] Tendremos que localizar ahora dentro del código de la plantilla esta etiqueta:
<h2 class='date-header'><data:post.dateHeader/></h2>

Para que no sea tan complicado podemos usar nuestro navegador para buscarlo.

Sustituimos esa etiqueta por este código:
<div id='fecha'>
<script>remplaza_fecha('<data:post.dateHeader/>');</script>
</div>

[4] Volvemos hacia arriba en nuestra plantilla para localizar la etiqueta ]]></b:skin> y justo encima, pegamos estas líneas de CSS para controlar el estilo de nuestra fecha:
/* Calendario-Fecha
-------------------- */

#fecha {
display: block;
float:left;
margin: 0 13px 0 0;
padding: 0 13px 8px 10px;
color: #333;
background: transparent url(http://img367.imageshack.us/img367/1449/blue2kt9.png) no-repeat;
border: 0;
text-transform: uppercase;
}

.fecha_mes {
display: block;
font-size: 10px;
font-weight:bold;
}

.fecha_anio {
display: block;
font-size: 10px;
}

.fecha_dia {
margin: 2px 0 0 1px;
display: block;
font-size: 16px;
font-weight:bold;
}

Notas: En el CSS anterior está colocada la url de uno de los calendarios azules (el que se ve en el ejemplo de la imagen) para usar otro color de calendario, tendremos que subir el calendario escogido a un alojamiento de imágenes y sustituir la url en el código por la que nos proporcionan en el alojamiento.

Si vamos a utilizar una imagen diferente a las que se proporcionan en esta entrada, tendremos seguramente que modificar los valores de margin y padding e incluso con el tamaño de texto (font-size) para adaptar la fecha a la imagen que vayamos a usar.

Imagenes disponibles
Imagenes de calendario
DESCARGAR EL PACK DE ICONOS-CALENDARIOS DESDE GOOGLE-PAGES
DESCARGAR EL PACK DE ICONOS-CALENDARIOS DESDE DROPBOX

Actualización:
Consulta en esta entrada como añadir el calendario en todas las entradas, incluso las publicadas el mismo día.

0

Mostrar tus mensajes de Twitter con Twitch

Hace unos días explicaba como poner en tu blog tus mensajes de Twitter.

En aquella ocasión maniat1k me preguntó como podría mostrar más de un mensaje de Twitter, hoy me he encontrado con Twitch visitando Bitelia, una alternativa en flash para colocar en nuestra sidebar que muestra hasta cinco mensajes de nuestro Twitter.

Solamente tenemos que especificar nuestro nombre de usuario en Twitter y automáticamente nos proporcionan el código que pegaremos dentro de un nuevo elemento HTML.

Además allí mismo se muestra un ejemplo de cómo será la apariencia del widget en nuestro blog.

Twicht

Enlace: Twitch / Via: Bitelia

0

Iconos en el elemento de Archivos

BrianERC me consulta en un comentario como colocar un icono en el elemento "Archivos" tal como ha visto en otro blog.
Hace tiempo había explicado en otra entrada como eliminar o sustituir por un icono el ▼ del elemento "Archivos".

Lo que haremos ahora es mostrar un icono antes y después de ▼ tal como BrianERC me solicita.


[1] En primer lugar tenemos que añadir un nuevo elemento "Archivo" a nuestra sidebar y escoger mostrarlo en opción "Jerarquía" (eso se hace en las opciones que Blogger nos proporciona al añadir el elemento).

[2] Colocamos unas líneas de CSS en nuestra plantilla "Edición HTML" sin expandir artilugios, como siempre digo, lo mejor para no equivocarse es hacerlo antes de ]]></b:skin>:

#ArchiveList ul li a{
padding-left: 20px;
padding-top: 5px;
background: url(url_de_nuestro_icono) center left no-repeat;
}

[3] Usamos la vista previa y si todo está bien, guardamos los cambios.

Iconos archivo

0

Personalizando bloques animados.

A petición de K_nelita y Patán voy a explicar en esta entrada los pasos a seguir para conseguir el efecto añadido a mi sidebar, en concreto el bloque desplegable con el texto "Énlazame"

No se trata de nada nuevo ni por descubrir, todo lo contrario, es uno de los efectos más usados y comentados en este blog.
Se trata de añadir un bloque animado, para el que necesitaremos descargar el archivo .js y alojarlo en un servidor propio.

Después nos situamos en la plantilla edición de HTML y justo antes de </HEAD> añadimos el script de Dynamic Drive incluyendo en él la url del archivo.js

Una vez tenemos el script alojado en la plantilla añadimos el código para el bloque animado en Plantilla/añadir un elemento de página/HTML/JavaScript.

Ver explicaciones para la creación de un bloque animado.

Para añadirlo a la sidebar he modificado algunas cosas, por ejemplo las medidas, el borde y colores.
Algo muy importante a tener en cuenta son los nombres, los nombreVAR y nombreID deben ser únicos, si se colocan varios bloques expandibles, cada nombre debe ser diferente.

Utilizando width:100% abarca el total de la sidebar, si deseamos añadirlo en otro lugar y especificar la medida podemos añadir al principio del código
<div style="width: "220px;"> o sustituimos en el código width: 100%; por la medida necesaria.

Código personalizado:


<a style="border-top: 1px solid rgb(153, 204, 255); border-bottom: 1px solid rgb(0, 0, 0); margin: 2px 0px; padding: 10px 0pt; width: 100%; height: 13px; display: block; background:url('URL IMAGEN DE FONDO PARA EL BOTÓN'); color: rgb( 252,252,252) ! important; text-align: center; text-decoration: none ! important; font-size: 12px;" href="javascript:collapseE9900.slideit()">IMAGEN O TíTULO
</a>
<div id="E9900" style="width: 100%;">
<div style="border: 1px solid rgb( 61, 56, 22); padding: 0px; height: 550px; background:url('URL IMAGEN DE FONDO DEL CONTENIDO');">

CONTENIDO...

</div>
</div>
<script type="text/javascript">var collapseE9900=new animatedcollapse("E9900", 800, false)</script>

En color rojo es la que nos permite modificar o personalizar la parte del título o imagen que sirve de botón para desplegar el bloque.

En color azul podemos modificar el espacio del contenido.

En color verde es el cierre del código, donde 800 es la duración del efecto expresado en milisegundos. Al estado inicial del bloque añadimos "false"para que el bloque quede contraído, puede ser también "true" y el bloque quedaría expandido.

Recomiendo probar con colores fuertes o bordes muy gruesos eso nos ayudará a visualizar con exactitud la parte que estamos modificando.

.. Prueba ..


Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.



!Hola¡








El contenido del bloque es a gusto de cada uno, yo lo utilicé para "guardar" los botones de enlace, el botón de favoritos, la imagen del perfil y email.
La forma de personalizar el contenido es muy sencilla, en mi caso añadí una imagen de fondo y un enmarcado para delimitar cada complemento.
El enmarcado se hace de la siguiente forma:

<table border="1" bordercolor="#ccc" #ccc white width="160" background-color: height="50">
<tr><td width="90%">


Contenido de texto, imágenes o lo que deseas añadir

</td></tr></table>



Contenido de texto,
imágenes o lo que
deseas añadir





También podemos crear otro tipo de borde, pero será en otra entrada.

!Suerte¡

0

Añadiendo iconos al blog

Aunque ya he publicado anteriormente como añadir un icono en algunos de los enlaces de nuestro blog por separado, he pensado reunir en esta entrada los ya publicados y alguno más.

Icono antes de la fecha de las entradas

Localizaremos en nuestra plantilla (Edición de Html) sin expandir artilugios esta línea de código:

h2.date-header {

Justo debajo de esa línea añadimos esto:
padding-left: 20px;
padding-top: 5px;
background: url(url_de_nuestro_icono) center left no-repeat;

Fecha
Icono antes del título de entradas

Localizaremos en nuestra plantilla (Edición de Html) sin expandir artilugios esta línea de código:
.post h3 {

Justo debajo de esa línea añadimos esto:
padding-left: 20px;
padding-top: 5px;
background: url(url_de_nuestro_icono) center left no-repeat;

Entradas
Icono antes del autor en el pie de las entradas

Tendremos que añadir estas líneas de código en el CSS de nuestra plantilla antes de ]]></b:skin>:
.post-author {
padding-left: 20px;
padding-top: 5px;
background: url(url_de_nuestro_icono) center left no-repeat;
}

Icono antes de la hora de publicación de entradas

Tendremos que añadir estas líneas de código en el CSS de nuestra plantilla antes de ]]></b:skin>:
.post-timestamp {
padding-left: 20px;
padding-top: 5px;
background: url(url_de_nuestro_icono) center left no-repeat;
}

Icono antes de "comentarios" en el pie de las entradas

Tendremos que añadir estas líneas de código en el CSS de nuestra plantilla antes de ]]></b:skin>:
.comment-link {
padding-left: 20px;
padding-top: 5px;
background: url(url_de_nuestro_icono) center left no-repeat;
}

Icono antes de "etiquetas" en el pie de las entradas

Tendremos que añadir estas líneas de código en el CSS de nuestra plantilla antes de ]]></b:skin>:
.post-labels {
padding-left: 20px;
padding-top: 5px;
background: url(url_de_nuestro_icono) center left no-repeat;
}

Post-footer
Icono antes de la fecha de publicación de comentarios

Tendremos que añadir estas líneas de código en el CSS de nuestra plantilla antes de ]]></b:skin>:
.comment-timestamp {
padding-left: 20px;
padding-top: 5px;
background: url(url_de_nuestro_icono) center left no-repeat;
}

Comentarios
Icono antes del "Suscribirse a:"

Localizaremos en nuestra plantilla (Edición de Html) sin expandir artilugios esta línea de código:
.feed-links {
Justo debajo de esa línea añadimos esto:
.feed-links {
padding-left: 20px;
padding-top: 5px;
background: url(url_de_nuestro_icono) center left no-repeat;
}

FeedLinks
Icono antes del "Vínculos a esta entrada"

Tendremos que añadir estas líneas de código en el CSS de nuestra plantilla antes de ]]></b:skin>:
#backlinks-container h4 {
padding-left: 20px;
padding-top: 5px;
background: url(url_de_nuestro_icono) center left no-repeat;
}

Vinculos
Icono antes de las etiquetas en la sidebar

Tendremos que añadir estas líneas de código en el CSS de nuestra plantilla antes de ]]></b:skin>:
#Label1 li {
list-style:none;
padding-left: 30px;
background: transparent url(url_de_nuestro_icono) no-repeat center left;
}

En Blogger se pueden añadir las etiquetas varias veces, por lo que cada vez que queramos que el icono se vea en las nuevas etiquetas, añadiremos su id en el mismo código separada por una coma:
#Label1 li, #Label2 li {
list-style:none;
padding-left: 30px;
background: transparent url(url_de_nuestro_icono) no-repeat center left;
}

Etiquetas
Icono antes de las listas en la sidebar

Tendremos que añadir estas líneas de código en el CSS de nuestra plantilla antes de ]]></b:skin>:
#LinkList1 li {
list-style:none;
padding-left: 30px;
background: transparent url(url_de_nuestro_icono) no-repeat center left;
}

En Blogger se pueden añadir más de un elemento lista, por lo que cada vez que queramos que el icono se vea en las nuevas listas, añadiremos su id en el mismo código separada por una coma:
#LinkList1 li, #LinkList2 li, #LinkList3 li {
list-style:none;
padding-left: 30px;
background: transparent url(url_de_nuestro_icono) no-repeat center left;
}

Notas:
En todos los casos hemos de sustituir url_de_nuestro_icono por la url (dirección) del icono que vayamos a colocar en cada caso.

En "padding-left" pondremos la medida en pixeles en función del tamaño del icono, si el icono mide por ejemplo 16px de ancho, con poner 20px quedará bien.

Ver también: Links externos con iconos