Blogger

Dos interesantes hacks vietnamitas para 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.

Fuente

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.

Fuente

Blogger, Hosting

Blogger: ¿Dónde alojar archivos javascript?

Publicado por Claudia en julio 16, 2009

Una de las mayores deficiencias de Blogger, como comentaba Francisco en BlogandWeb, es en cuanto al alojamiento de archivos. Encontrar un buen hosting para archivos *.js (javascript) es prácticamente indispensable, y no sólo pensando en plugins jQuery o MooTools para adornar un blog con “efectos especiales” en el menú o añadir un carrusel de imágenes, sino en necesidades tan básicas como incorporar excerpts.

Entonces, la pregunta del millón es: ¿Dónde alojar archivos javascript?

Hace un par de meses, Fernando en Quite Random nos mostraba una serie de alternativas para incorporar javascript en la misma plantilla. Cuando es posible, añadir javascript en la misma plantilla es lo más recomendable; sin embargo, cuando los archivos son demasiado grandes, es preferible usar un hosting externo.

¿Qué hosting usar?

Hay una serie de alternativas:

1. HotlinkFiles. Como su nombre lo indica, permite el hotlink de todo tipo de archivos, incluyendo *.js e *.ico.

  • Características: 1GB de espacio libre, 8 MB de ancho de banda mensual, 50 MB máximo por archivo.
  • Uso: Para obtener el enlace directo a cada archivo, es necesario subir el archivo, y en la sección “MyFiles” hacer click sobre él con el botón derecho del mouse (Propiedades/Dirección).

2. Lycos Tripod. Un hosting web de la época de los dinosaurios (seguro lo recordarán quienes lo vieron como alternativa a Angelfire o Geocities). Permite incluso hacer experimentos con PHP.

  • Características: 1GB de espacio libre para todo tipo de archivos, ancho de banda ilimitado. El registro te da un subdominio del tipo “usuarios.lycos.es”, “chica-web.es”, “super-red.es” “miss-web.es” o “mi-website.es”.
  • Uso: Accediendo a tu cuenta, puedes subir archivos vía FTP en WebFTP/Abrir FTP Web. El enlace directo a tu archivo será: tusubdominio/archivo.extensión. Por ejemplo: http://chicablogger.chica-web.es/easyslider.js.

3. FileAve. Un antiquísimo sitio online desde 2002, que comencé a valorar gracias a la recomendación de Alvaris Falcon.

  • Características: Subdominio, 30MB para subir archivos de todo tipo. Es necesario entrar cada 30 días para evitar que tu cuenta sea borrada.
  • Uso: Mediante el registro, puedes subir y ver las direcciones directas de tus archivos desde la sección “Files”.

4. Ripway. 30 MB para subir todo tipo de archivos (incluidos videos, imágenes y archivos PHP), 150 MB de banda ancha mensual. Utiliza el mismo script que Fileave; por lo tanto, puedes ver las URLs de tus archivos en la sección “Files”.

5. Web Hosting gratuitos varios, como 000WebHost. TexMixer hizo un listado de hostings gratuitos sin publicidad en los que perfectamente puedes llegar a instalar WordPress. Hostings como éstos, hay muchos; el problema es muchos de ellos prohiben ser usados sólo como hostings de archivos. En todo caso, siempre es recomendable leer sus políticas, y tener un respaldo de tus archivos.

Alternativas para alojar javascript, hay. Si usas Blogger, es bueno que las tengas a mano, porque nunca sabes cuándo las vas a necesitar.

Tags: ,
Blogger, Tutoriales

Blogger: el primer post con un estilo diferente II

Publicado por Claudia en julio 6, 2009

Guti me pedía que explicara un poco más acerca de cómo mostrar el primer post con un estilo distinto en Blogger (viene de acá), utilizando el nuevo código condicional que aparece en las plantillas.

En general, es posible hacer modificaciones básicas añadiendo estilos condicionales bajo el cierre de “b:skin“, y justo antes del cierre de la etiqueta “head“, de la siguiente manera:

Condicionales Blogger

Lo anterior va a definir estilos para el primer post, que son distintos a los de los posts individuales. En el ejemplo, puse un color distinto para el cuerpo de los posts (post-body). No obstante, añadir condicionales para el primer post es algo más complejo que eso. No recomiendo su uso para quienes no están familiarizados con la estructura de las plantillas de Blogger, porque podrían sufrir un gran dolor de cabeza.

Hace unos días, Ro Zanchetta escribió una entrada de cómo usar la nueva etiqueta “isFirstPost” en Blogger, con un ejemplo concreto para plantillas tipo revista, utilizando un hack para “leer más”. Para quienes son arriesgados y quieren “lanzarse directamente a los leones”, el post de Ro es una lectura obligada. Por mi parte, voy a explicar el mecanismo para usar condicionales para el primer post, de acuerdo a mis propios experimentos.

Ahora bien: Al expandir los artilugios de las plantillas, es posible encontrar la siguiente código:

<b:includable id='post' var='post'>
Código-post
</b:includable>

Lo que llamé Código-post son muchas líneas de código, las cuales en una plantilla muestran: el título de un post, el cuerpo del post, y el footer del post, donde aparecen los meta-datos: autor del post, hora, comentarios, etiquetas y otros.

Entonces, el procedimiento a seguir es el siguiente: copiar el código de los posts (debe mostrarse dos veces en total) utilizando distintos condicionales, de la siguiente manera:

<b:if cond='data:post.isFirstPost'>
Código-post con clases distintas para el primer post
<b:else/>
Código-post
</b:if>

El “Código-post” es el código completo, íntegro, sin cambios. Sin embargo, el “Código-post con clases distintas para el primer post” debe tener algunos cambios. Por ejemplo:

  • En vez de “div class=’post-entry‘”, voy a usar “div class=’post-entry-first‘”
  • En vez de “div class=’post-body entry-content‘”, voy a usar “div class=’post-body-first’

Y así sucesivamente, definiendo mis propios selectores para esa sección. Preferí usar selectores similares a los de la plantilla Mínima, agregando “-first” a cada uno, para que sean más fáciles de recordar.

Hecho este procedimiento, sólo queda definir las propiedades para cada selector antes del cierre de “b:skin”, como en la siguiente imagen (sólo es un ejemplo, porque puedes hacer mucho más):

Condicionales Blogger

Voilá! Eso es todo. Probablemente, la etiqueta “isFirstPost” dé para una nueva entrada de este tipo, sobre cómo añadir hacks. A mí, por ejemplo, me gustaría poner un hack “leer más” automático en el primer post, y un hack “leer más” no-automático para los siguientes. Es cosa de seguir experimentando…

Tags: , ,
Blogger

Crea un panel de acceso en tu blog de Blogger

Publicado por Claudia en junio 25, 2009

BoyProdx (vía Viet Blog Guide) nos enseña a añadir un sencillo widget de acceso/login para los blogs de Blogger, similar en apariencia a los que podemos poner en WordPress.

El código, para el widget en español, sería:

<div id="loginform"><form action="https://www.google.com/accounts/ServiceLoginBoxAuth" method="post" onsubmit="onlogin()">
<input value="http://draft.blogger.com/loginz?d=%2Fhome&p=http%3A%2F%2Fdraft.blogger.com%2F" name="continue" type="hidden"/>
<br/>
<div>
<label for="Email"> Cuenta: 
<br/><input id="Email" tabindex="1" name="Email" size="20" type="text"/>
</label>
</div>
<br/>
<div>
<label for="Passwd"> Contraseña: (<a href="https://www.blogger.com/forgot.g" target="_top" title="Olvidé mi contraseña">?</a>) 
<br/>
</label>
<input id="Passwd" tabindex="2" autocomplete="off" name="Passwd" size="20" type="password"/>
</div>
<br/><br/>
<input id="signin-btn-ns" tabindex="0" value="Enviar" class="ubtn ubtn-block" name="submit" type="submit"/>
</form></div>

Debes pegar digo código en en un nuevo gadget de HTML/Javascript de la sección Diseño/Elementos de tu blog. Si quieres darle un poco más de “estilo”, puedes añadir un poco de CSS básico a tu plantilla:

#Email, #Passwd{
border: 1px solid #ff0084;
}
 
#signin-btn-ns { 
color: #FFF;
background: #FF55AA;
border: 1px solid #ff0084;
}

¿Simpático? A mí me parece una monería, pero puede ser bastante útil además de cómodo. El formulario trabaja en base al panel de acceso de Blogger, y como es posible darse cuenta, redirecciona al panel de Blogger in Draft. Ahora, si lo que quieres es que te lleve al panel tradicional de Blogger, deberás cambiar la url del input escondido que hace la redirección (mira el código del widget), quitando los dos “draft.” que aparecen allí para que en vez de ir a draft.blogger.com vayas a blogger.com.
Si no pudiste acceder a tu cuenta, ingresa tu e-mail de Gmail en “Cuenta” y tu contraseña en los campos correspondientes. Es un formulario que puedes usar tranquilamente, porque no almacena tus datos de acceso.

Tags: ,
Blogger

Blogger: el primer post con un estilo diferente

Publicado por Claudia en junio 23, 2009

Desde hace un tiempo, me preguntaba cómo hacer que en Blogger el primer post se muestre distinto a los demás, de modo tal que éste tenga un estilo único que lo haga destacar sobre el resto.

Actualmente, Blogger está añadiendo nuevos códigos (y posibilidades) a sus plantillas, que al parecer van de la mano con su aniversario número 10. Así, por ejemplo, se rumorea (con bases muy certeras) la posibilidad de inclusión de un hack que permite acortar los posts, y que es análogo a la función “more” de WordPress.

La última gran novedad, es la inclusión de un nuevo código condicional que hace posible definir un estilo distinto y único sólo para el primer post:

 <b:if cond='data:post.isFirstPost'> contenido </b:if>

Este código puede ser de gran utilidad para destacar el título del primer post (como muestra Ro en Bloggersphera), conseguir que un determinado hack (por ejemplo, “leer más con thumbnails“) se aplique sólo al primer post, o destacar el post completo al estilo de los “featured posts” de WordPress.

Los condicionales de Blogger son apliamente usados para aplicar hacks o crear plantillas tipo Magazine, galerías de imágenes. Por ejemplo:

  • Para mostrar sólo en la página principal
<b:if cond='data:blog.pageType == "index"'> contenido </b:if>
  • Para mostrar en un post individual
<b:if cond='data:blog.pageType == "item"'> contenido </b:if>

*Podrían cumplir funcionales análogas al index.php y el single.php de WordPress, respectivamente.

Estos tres códigos condicionales básicos expanden las posibilidades de Blogger, y lo llevan a niveles insospechados hasta hace quizá un par de años. Si quieres adentrarte en su uso, puedes revisar el excelente tutorial de Vagabundia que explica el uso avanzado de condicionales.

Por ahora, el uso de condicionales para el primer post da para detenerse un rato a probar y experimentar, porque no es un ejercicio realmente simple (aunque sí puede tener resultados muy satisfactorios). Sigo haciendo mis propios experimentos.

Tags: , , ,