Dos interesantes hacks vietnamitas para Blogger
Blogger Publicado por Claudia en julio 22, 2009
Desde hace un tiempo, estoy leyendo blogs indios y vietnamitas, desde donde surgen extraños y a veces impensados trucos para Blogger. Estos son dos de ellos:
1. Auto-leer más configurable
Hace meses, veíamos tres distintas maneras de crear excerpts (resúmenes con “leer más” en Blogger). En general, todas funcionan bien, expecto para IE6, donde es muy probable que los scripts no anden.
Este nuevo script, que deriva del “leer más con thumbnails” (de hecho, es su versión mejorada), tiene dos ventajas: (1) puedes elegir el punto de corte del resumen de acuerdo a cada post, eligiendo mostrar o no mostrar una miniatura de imagen y (2) el límite de corte del excerpt se fija en un número de palabras, y no de caracteres (las palabras ya no se verán cortadas).
Se añade en dos pasos:
1) Busca el siguiente código en tu plantilla (con los artilugios expandidos):
<data:post.body/>
y reemplázalo por:
<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>
(En esta zona puedes editar el “–>Leer más”).
2) Antes de la etiqueta body, pega:
<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*more\s*-->/)[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*more\s*-->/.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>
Configuración
Ahora, puedes configurar el script haciendo una modificación en las siguientes variables:
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;
- La variable thumbnail_mode determina la flotación a la izquierda de la imagen. Si eliges ‘no float’, la imagen no se mostrará en miniatura; si eliges ‘float’, se mostrará una miniatura a la izquierda en los posts de la página principal.
- ClassicMode determina si todas las entradas se van a cortar en el mismo punto o no. Es recomendable cambiarla a true si antes cambiaste el valor de la variable thumbnail_mode a ‘float’.
- Summary_noimg y var Summary_img corresponden al punto de corte del resumen cuando tu post no tiene imagen y cuando sí tiene, respectivamente. El valor 50, por ejemplo, significa “50 palabras”.
- Img_thumb_height e img_thumb_width corresponden al alto y al ancho de los thumbnails (miniaturas de imagen).
La novedad de esta versión del script, es que puedes poner en tus entradas, tal y como en WordPress. Incluirlo, significa pasar por alto el límite fijado para el corte automático de entradas.
Por ejemplo:
Párrafo 1 <!-- more --> Párrafo 2
Se va a mostrar el párrafo 1 y no el 2, independientemente del número de palabras que tenga.
Aunque el script es mejor que los anteriores, al ser automático tiene la desventaja de mostrar siempre el enlace “leer más”, en todas las entradas.
2. Bloquea usuarios por IP
Banear usuarios indeseables por IP, es algo imposible de hacer desde el panel de Blogger. Sin embargo, puedes hacerlo con javascript y PHP, añadiendo el siguiente código al inicio de tu head:
<script type="text/javascript" src="http://code.vietwebguide.com/php/addr.php"></script>
<script type="text/javascript">
//<!CDATA[
// Banned ip script 2.0
//(C)2009 Anhvo
//homepage: http://vietwebguide.com
var banned_ip = new Array();
banned_ip[0] = '85.142';
banned_ip[1] = '22.98.69.1';
banned_ip[2] = '22.98.69.146';
banned_ip[3] = '85.78';
var mes_bi = "Tu IP está baneada y no puede ver este sitio!";
for(var i=0;i<banned_ip.length;i++) {
eval('var re = /^' + banned_ip[i] + '/ ;');
if (re.test(mc_user_ip))
{
document.write('<style type="text/css">');
document.write('BODY{display:none;}');
document.write('<\/style>');
alert(mes_bi);
break;
}
}
//]]>
</script>
Ahora, sólo es cosa de añadir más IPs a la lista. Puedes banear IPs por rango en vez de IPs individuales, por ejemplo: Si quieres bloquear todas las IPs del rango ‘66.45.xxx.xxx’, añade simplemente “66.45” en el número de IP.
Cabe destacar que Blogger no permite conocer la IP de tus comentaristas, pero sí puedes conocer ésta cuando te contactan vía correo electrónico o formulario de contacto.
Posts Relacionados
Compártelo!
Desde hace un tiempo, estoy leyendo blogs indios y vietnamitas, desde donde surgen extraños y a veces impensados trucos para Blogger. Estos son dos de ellos:
1. Auto-leer más configurable
Hace meses, veíamos tres distintas maneras de crear excerpts (resúmenes con “leer más” en Blogger). En general, todas funcionan bien, expecto para IE6, donde es muy probable que los scripts no anden.
Este nuevo script, que deriva del “leer más con thumbnails” (de hecho, es su versión mejorada), tiene dos ventajas: (1) puedes elegir el punto de corte del resumen de acuerdo a cada post, eligiendo mostrar o no mostrar una miniatura de imagen y (2) el límite de corte del excerpt se fija en un número de palabras, y no de caracteres (las palabras ya no se verán cortadas).
Se añade en dos pasos:
1) Busca el siguiente código en tu plantilla (con los artilugios expandidos):
<data:post.body/> |
y reemplázalo por:
<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> |
(En esta zona puedes editar el “–>Leer más”).
2) Antes de la etiqueta body, pega:
<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*more\s*-->/)[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*more\s*-->/.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> |
Configuración
Ahora, puedes configurar el script haciendo una modificación en las siguientes variables:
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;
- La variable thumbnail_mode determina la flotación a la izquierda de la imagen. Si eliges ‘no float’, la imagen no se mostrará en miniatura; si eliges ‘float’, se mostrará una miniatura a la izquierda en los posts de la página principal.
- ClassicMode determina si todas las entradas se van a cortar en el mismo punto o no. Es recomendable cambiarla a true si antes cambiaste el valor de la variable thumbnail_mode a ‘float’.
- Summary_noimg y var Summary_img corresponden al punto de corte del resumen cuando tu post no tiene imagen y cuando sí tiene, respectivamente. El valor 50, por ejemplo, significa “50 palabras”.
- Img_thumb_height e img_thumb_width corresponden al alto y al ancho de los thumbnails (miniaturas de imagen).
La novedad de esta versión del script, es que puedes poner en tus entradas, tal y como en WordPress. Incluirlo, significa pasar por alto el límite fijado para el corte automático de entradas.
Por ejemplo:
Párrafo 1 <!-- more --> Párrafo 2 |
Se va a mostrar el párrafo 1 y no el 2, independientemente del número de palabras que tenga.
Aunque el script es mejor que los anteriores, al ser automático tiene la desventaja de mostrar siempre el enlace “leer más”, en todas las entradas.
2. Bloquea usuarios por IP
Banear usuarios indeseables por IP, es algo imposible de hacer desde el panel de Blogger. Sin embargo, puedes hacerlo con javascript y PHP, añadiendo el siguiente código al inicio de tu head:
<script type="text/javascript" src="http://code.vietwebguide.com/php/addr.php"></script>
<script type="text/javascript">
//<!CDATA[
// Banned ip script 2.0
//(C)2009 Anhvo
//homepage: http://vietwebguide.com
var banned_ip = new Array();
banned_ip[0] = '85.142';
banned_ip[1] = '22.98.69.1';
banned_ip[2] = '22.98.69.146';
banned_ip[3] = '85.78';
var mes_bi = "Tu IP está baneada y no puede ver este sitio!";
for(var i=0;i<banned_ip.length;i++) {
eval('var re = /^' + banned_ip[i] + '/ ;');
if (re.test(mc_user_ip))
{
document.write('<style type="text/css">');
document.write('BODY{display:none;}');
document.write('<\/style>');
alert(mes_bi);
break;
}
}
//]]>
</script> |
Ahora, sólo es cosa de añadir más IPs a la lista. Puedes banear IPs por rango en vez de IPs individuales, por ejemplo: Si quieres bloquear todas las IPs del rango ‘66.45.xxx.xxx’, añade simplemente “66.45” en el número de IP.
Cabe destacar que Blogger no permite conocer la IP de tus comentaristas, pero sí puedes conocer ésta cuando te contactan vía correo electrónico o formulario de contacto.
Pingback: Bitacoras.com()