26 de agosto de 2009

Nuevo Gadget en Blogger para nube de etiquetas

A hora podemos agregar una nube de etiquetas a nuestro blog median te un nuevo gadget en blogger, o mejor dicho una mejora del que ya tenía para agregar etiquetas. Con esta mejora, ahora podemos elegir la cantidad de etiquetas y también seleccionar cuales queremos mostrar. Algo muy práctico por cierto.

Pero lo mejor, es que ahora podemos mostrar nuestras etiquetas en forma de nubes.
Para hacerlo, vamos a agregar una elemento html, y elegimos etiquetas:

Nos aparecerá esta ventana, para que se vean las etiquetas en forma de nubes, marcamos "nube"

Y listo, guardamos y se verán las etiquetas en forma de nubes en nuestro blog:

Ahora, si queremos seleccionar solo alguna de las etiquetas a mostrar, en la ventana anterior debemos seleccionar, "Etiquetas seleccionadas" y vamos a "editar"


Una vez en "editar" nos aparecerá esta ventana, donde seleccionamos las etiquetas que deseamos se vean en el blog:



Fácil y práctico, sólo esperemos que funcione correctamente, no como gadget de seguidores.



Visto en Blogger Buzz
Leer más...

25 de agosto de 2009

Los 50 mejores sitios web seleccionados por la revista Time

Leer más...

Problemas con el formulario de comentarios incrustado en blogger

Me llamó la atención que no recibía ningún comentario en otro de mis blogs, creía que era solo una cuestión circunstancial, pero recibí un mensaje de una lectora, y me comunicó que tenía problemas con el formulario de comentarios. también he visitado algunos blogs,y he notado que en los nuevos tienen el mismo problema.

El problema sucede cuando tenemos la palabra de verificación, que mas que evitar el spam ahuyenta a los visitantes que quieren realizar un comentario.

Otro de los problemas es que, no se porque, cuando hacemos click en publicar comentario, nos muestra la vista previa, después de demorar algunos segundos. Esto hace que algunos comentaristas descistan y no comenten. Con respecto a la vista previa, también sucede, y es lo que me pasó a mi, que al tener modificado el alto del formulario, no mostraba el botón de aceptar cuando estaba en vista previa.

La alternativa al problema
Por eso, es conveniente tener siempre una forma alternativa para que los lectores se puedan comunicar con nosotros cuando esto sucede. Lo que les recomiendo es tener un formulario de comentarios en blog.

Los problemas de Blogger
Son varios los problemas con los comentarios inscrustados en blogger, y es poco lo que se puede hacer ya que está colocado como IFRAME, y solo se puede modificar algunas de tamaño y estilos. También hay problemas con el widget de los "seguidores" aparece y desaparece, sobre todo en Firefox y en Google Chrome. Personalmente no es un widget que me interese mucho, pero la gente de Google que es quien ha insistido tanto con él, podría preocuparse par que funcione un mejor.


Leer más...

12 de agosto de 2009

Como instalar el boton "Retweet" en blogger.

Como instalar un boton "Retweet" en nuestro blog.




De el blog "bloggerplugins" les traigo la forma de instalar en nuestro blog el botón "Retweet." La forma de hacerlo es muy simple, consta de solo dos pasos y podemos optar por dos estilos diferentes de botón:


1. Estilo de botón Retweet 1



<div style="float:right;padding:4px;">
<script type="text/javascript">
tweetmeme_url = '<data:post.url/>';
tweetmeme_source = 'tu nombre de usuario en twitter';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</div>


2. Estilo de botón Retweet 2



<div style="float:right;padding:4px;">
<script type="text/javascript">
tweetmeme_style = 'compact';
tweetmeme_url = '<data:post.url/>';
tweetmeme_source = 'tu nombre de usuario en twitter';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</div>

En ambos caso debemos editar el nombre de usuario de Twitter por el nuestro. También podemos cambiar el lugar donde queremos que se ubique el botón, right o left. Y se verá debajo del título de la entrada, a derecha o izquierda según nuestra opción.

Una vez editado esto, vamos a edición HTML y buscamos el siguiente código en nuestra plantilla:

<data:post.body/>

y justo arriba de este, colocamos el código del botón retweet. Y listo, ya debería estar funcionando en nuestro blog.


Leer más...

11 de agosto de 2009

Adsense debajo del título del post en blogger

Vía mail me consultaron la forma de colocar anuncios de Adsense debajo del debajo del título de los posts o entradas en blogger. Hacerlos es sencillo, primero

Primero, vamos a nuestra cuenta de adsense y creamos el anuncio que deseamos colocar debajo del título.

Segundo, una vez obtenido el código, lo que debemos hacer es transformarlo para que blogger lo reconozca. Para eso hay que transformarlo a texto plano. Colocamos el código dentro de la caja y damos click en "parser it"



Tercero, una vez parseado el texto, vamos a al DISEÑO HTML de nuestra plantilla y expandimos la plantilla de artilugios para buscar el siguiente código:


<div class='post-header-line-1'/>


Justo debajo de esta linea colocamos el código parseado de Adsense. Y Listo, el anuncio debería verse abajo del título de la entrada, como se ve en la siguiente imagen:

Leer más...

7 de agosto de 2009

Resumen de todas las entradas con imagenes - nueva versión


Hace unos meses vimos un script para blogger que nos resume todas las entradas, con "leer mas" y miniauturas de imagen. Ahora, vamos a ver la versión mejorada de ese script. Las ventajas o novedades que trae son:
  • Se puede modificar el punto de corte del resúmen para cada entrada.
  • El resúmen a mostrar se mide en palabras, no en caracteres como antes, esto es para que las palabras no se muestren cortadas.
Podemos ver el script funcionando en Blogger aquí.

Para instalarlo solo necesitaremos dos pasos:

Primero, vamos a la Edición de HTML de nuestra plantilla y marcamos "expandir plantilla de artilugios" y ahi buscamos </head> y justo arriba colocamos el siguiente script:

<script type='text/javascript'>
var thumbnail_mode = 'no-float' ;
var classicMode = false ;
var summary_noimg = 60;
var summary_img = 50;
var img_thumb_height = 150;
var img_thumb_width = 220;
var indent = 3;
</script>

<script type="text/javascript">
//<![CDATA[
/******************************************
Auto-readmore link script, version 4.0 (for blogspot)

(C)2009 by Anhvo

Homepage: http://vietwebguide.com

Please dont remove this copyright or change it into your own
******************************************************/

/*******************************************
CONFIG (extenal code)
-------------------------------

var thumbnail_mode = "float" ; //(or "no-float")
var classicMode = false ;
var summary_noimg = 60;
var summary_img = 50;
var img_thumb_height = 100;
var img_thumb_width = 120;
var indent = 3;

*********************************************/

function stripHtmlTags(s,max){return s.replace(/<.*?>/ig, '').split(/s+/).slice(0,max-1).join(' ')}

function getSummaryLikeWP(id) {
return document.getElementById(id).innerHTML.split(/<!--s*mores*-->/)[0];
}

function getSummaryImproved(post,max){
var re = /<.*?>/gi
var re2 = /<br.*?>/gi
var re3 = /(</{1}p>)|(</{1}div>)/gi
var re4 = /(<style.*?/{1}style>)|(<script.*?/{1}script>)|(<table.*?/{1}table>)|(<form.*?/{1}form>)|(<code.*?/{1}code>)|(<pre.*?/{1}pre>)/gi

post = post.replace(re4,'')
post = post.replace(re3,'<br /> ').split(re2)

for(var i=0; i<post.length; i++){
post[i] = post[i].replace(re,'');
}
var post2 = new Array();
for(var i in post) {
//if(post[i]!='' && post[i]!=' ' && post[i] != 'n') post2.push(post[i]);
if(/[a-zA-Z0-9]/.test(post[i])) post2.push(post[i]) ;

}


var s = "";
var indentBlank = "";
for(var i=0;i<indent;i++){
indentBlank += " ";
}
if(post2.join('<br/>').split(' ').length < max-1 ){
s = post2.join(indentBlank +' <br/>');
} else {
var i = 0;
while(s.split(' ').length < max){
s += indentBlank + ' ' + post2[i]+'<br/>';
i++;
}
}
return s;
}


function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var content = div.innerHTML;
if (/<!--s*mores*-->/.test(content)) {
div.innerHTML = getSummaryLikeWP(pID);
div.style.display = "block";
}
else {

var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
if(thumbnail_mode == "float") {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
} else {
imgtag = '<div style="padding:5px" align="center"><img style="max-width:'+img_thumb_width+'px; max-height:'+img_thumb_height+'px;" src="'+img[0].src+'" /></div>';
summ = summary_img;
}
}

var summary = (classicMode) ? imgtag + '<div>' + stripHtmlTags(content,summ) + '</div>' : imgtag + '<div>' + getSummaryImproved(content,summ) + '</div>';

div.innerHTML = summary;
div.style.display = "block";
}
}
//]]>
</script>

Segundo paso, ahora buscamos el siguiente código: <data:post.body/> y lo reemplazamos por:

<data:post.body/><b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id' style='display:none;'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<div style="clear:both" align='right' class='rmlink'><a expr:href='data:post.url'>-->Leer más</a></div>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

Y listo! ya debería funcionar.

Por último, podemos configurar el script haciendo una modificación en las siguientes variables:

  • var thumbnail_mode = "float" ; si dejamos "float" la imagen se ubica a la izquierda, si lo cambiamos por no-float la imagen se ubica en la parte superior del post.
  • var classicMode = false; determina si todas las entradas se van a cortar en el mismo punto del resumn o no. Es recomendable cambiarla a true si antes cambiamos el valor de la variable thumbnail_mode a ‘float’.
  • summary_noimg = 60 ; el número de palabras del resumen, cuando los posts no tienen imagenes.
  • summary_img = 50; el número de palabras del resumen, cuando los posts tienen imagenes.
  • img_thumb_height = 125; altura a la imagen en el resumen.
  • img_thumb_width = 125; ancho de la imagen en el resumen.
Y como dije anteriormente, esta nueva versión del Script tiene la particularidad de que podemos modificar el lugar donde queremos que se corte el resumen, para eso, lo que debemos hacer es insertar en la entrada el siguiente separador: <!-- more --> Ejemplo:

Resumen <!-- more --> resto de la entrada.

Les recuerdo, que también podemos cambiar el texto "Leer mas" por el que nosotros queramos, "Leer" "seguir leyendo" etc, pero también podemos añadir una imagen en lugar del texto, para eso lo hacemos de esta forma si añadimos:

Para quienes ya tenían instalado la versión anterior del Script, solo tienen que cambiar el código del Script del primer paso.


Visto en: ChicaBlogger
Leer más...