Cargando...
Menu Ver sumario
Blogger para torpes y para no tanto.



Contadores


Mostrar últimos comentarios. Otra opción.

31/05/2009
Ya se han explicado aquí otros sistemas para mostrar un resumen de los comentarios realizados en las entradas de nuestro blog, pero parece que a algunos no os acaban de convencer, como tampoco estos otros.

Aquí usamos un sistema distinto que pensaba ya había explicado, pero revisando los posts compruebo que no era así. Se trata de un SCRIPT que hace tanto tiempo que uso, que no recuerdo de quién era, pero está basado en JSON y lo he retocado un pelín para conseguir ciertas mejoras en la presentación. Puede que a otros les parezcan inconvenientes en lugar de mejoras, pero en fin...

Como es un código no muy largo, creo que lo más práctico es añadirlo directamente desde Elementos de Página --> Añadir Gadget --> HTML, en la barra lateral.

<script type="text/javascript">
function comentarios(json) {
for(var i=0; i < numcom; i++) {
var b_rc=json.feed.entry[i];var c_rc;
if(i==json.feed.entry.length)break;
for(var k=0; k < b_rc.link.length; k++) {
if(b_rc.link[k].rel=='alternate') {
c_rc=b_rc.link[k].href;break;
}
}
c_rc=c_rc.replace("#","#comment-");
var d_rc=c_rc.split("#");
d_rc=d_rc[0];
var e_rc=d_rc.split("/");
e_rc=e_rc[5];
e_rc=e_rc.split(".html");
e_rc=e_rc[0];
var f_rc=e_rc.replace(/-/g," ");
f_rc=f_rc.link(d_rc);
var g_rc=b_rc.published.$t;
var h_rc=g_rc.substring(0,4);
var i_rc=g_rc.substring(5,7);
var j_rc=g_rc.substring(8,10);
var k_rc=new Array();
k_rc[1]="Ene"; k_rc[2]="Feb"; k_rc[3]="Mar"; k_rc[4]="Abr";
k_rc[5]="May"; k_rc[6]="Jun"; k_rc[7]="Jul"; k_rc[8]="Ago";
k_rc[9]="Sep"; k_rc[10]="Oct"; k_rc[11]="Nov"; k_rc[12]="Dic";
if("content" in b_rc){
var l_rc=b_rc.content.$t;
} else if("summary" in b_rc) {
var l_rc=b_rc.summary.$t;
} else var l_rc="";
var re=/<\S[^>]*>/g;
l_rc=l_rc.replace(re,"");
if(fecha==true){
document.write(j_rc+' '+k_rc[parseInt(i_rc,10)]);
}
document.write('<ul><li><b>' + b_rc.author[0].name.$t + '</b>');
if(titulo==true){
document.write(' en ');
document.write(f_rc);
}
document.write(':<br/>');
document.write('<a href="' + c_rc + '">');

if(l_rc.length < sumario) {
document.write(l_rc);
} else {
l_rc=l_rc.substring(0,sumario);
var p_rc=l_rc.lastIndexOf(" ");
l_rc=l_rc.substring(0,p_rc);
document.write(l_rc+'&hellip;');
}
document.write('</a></li></ul>');
if(i < numcom-1){
document.write('<hr style="color:#' + colhr + ';"/>');
}
}
}
</script>

<script type="text/javascript">
var numcom=10;
var fecha=true;
var titulo=true;
var sumario=100;
var colhr=cccccc;
</script>
<div style="border:2px solid #990000;padding:5px 5px 5px 5px;color:#cccccc;font-size:14px;text-align:left;margin:0px auto;"><script src="http://NOMBRE_BLOG.blogspot.com/feeds/comments/default?alt=json-in-script&callback=comentarios"></script></div>

Para configurar el aspecto de salida hay que fijarse en la última parte. En primer lugar colocais en la etiqueta STYLE del DIV, los atributos que necesiteis. También se puede crear una clase nueva en el CSS y luego incorporarla a ese mismo DIV. Sólo teneis que tener en cuenta que el SCRIPT lo que genera es una lista (UL / LI), por lo que tendreis que definir también esa etiqueta para la nueva clase.

¡Y no olvides sustituir NOMBRE_BLOG al final del SCRIPT por el tuyo!

También podeis cambiar al gusto, todos estos parámetros:
  • numcom = número de comentarios a mostrar.
  • fecha = muestra la fecha del comentario (true) o la oculta (false).
  • titulo = muestra el título del post (true) o lo ocuta (false).
  • sumario = número de caracteres de cada comentario a mostrar.
  • colhr = color en hexadecimal de la barra de separación. Poner el color del fondo si no quereis barra.
Leer más »

Marcadores. Moverse rápidamente por una página.

27/05/2009
Al igual que podemos marcar el lugar por dónde vamos en la lectura de un libro, también podemos marcar partes de nuestra página para acceder rápidamente a ellas.

Quizás lo que más se utilice sea la opción del botón "Ir arriba", para que el usuario de una página web pueda acceder al principio de esta con sólo un click. Sin embargo, en alguna ocasión puede resultar conveniente utilizar más marcadores, señalando distintos puntos de la página para que el visitante puede acceder a esos apartados de una manera más ágil.

Seguro que es especialmente útil en páginas largas con muchos apartados. Por ejemplo, cuando al principio colocamos una especie de índice y queremos que se pueda acceder a los distintos capítulos desde allí mismo.

Declarar un marcador es bastante sencillo. Para ello, utilizamos la etiqueta A en asociación con NAME, de esta manera.

<a name="nombre_marcador">Texto del marcador</a>

Aunque parezca un enlace, lo que realmente estamos haciendo es indicar mediante HTML que justo delante de "Texto del marcador" queremos una marca a la que se pueda acceder cuando lo solicitemos. Podemos utilizar como marca un solo caracter de nuestro texto, una palabra, una frase o incluso una imagen. En esta entrada las marcas las hemos resaltado para que sean "visibles" con letras capitales. Hay un marcador abajo que ni siquiera tiene ningún contenido. El enlace-llamada, que será lo que veremos a continuación, nos llevará al principio de lo que marquemos.

La llamada a cada marcador se hace mediante un enlace normal HREF, pero en lugar de una dirección HTTP, utilizamos #nombre_marcador.

<a href="#nombre_marcador">Enlace al marcador</a>
...
<a href="#nombre_marcador2">Enlace al marcador2</a>
<a href="#nombre_marcador3">Enlace al marcador3</a>

Fácil ¿no?

En las siguientes imágenes y para ver el resultado, tienes enlaces que te llevan a las tres marcas que hemos colocado en este post.


No hay ningún problema en colocar distintas llamadas al mismo marcador en distintos puntos. Sin embargo el marcador en sí (su nombre), tiene que ser único para cada destino. No se puede utilizar el mismo nombre en distintos destinos... evidentemente. Una prueba de ello...


También se pueden crear llamadas a marcadores en distinta página o incluso web. La página de destino tendrá que tener un marcador creado de la misma manera que se ha explicado aquí y deberás conocer su nombre. La diferencia sólo estará en el enlace HREF, que incluirá delante del nombre del marcador, la direccion completa de la página (o dirección relativa si estás dentro de la misma web).

Ver <a href="http://singenio.com/instrucciones.htm#reglas">reglas</a>

Que daría lugar a: Ver reglas

Este último ejemplo nos llevaría a un apartado (marcador) de una página web distinta a esta y no al principio de la misma que sería lo normal.
Leer más »

Premios 20Blogs 2009

25/05/2009
Hoy se presenta la nueva edición de unos de los certámenes blogueriles (no confundir con borreguiles) más conocidos del panorama blog: los Premios 20Blogs.

Tan reciente es la convocatoria, que algunos de los apartados fundamentales como las bases y los premios, todavía están sin publicar, pero prometen tenerlos para el 8 de Junio. A partir de esa fecha es precisamente cuando realmente empieza el concurso y hay un mes enterito (hasta el 8 de Julio) para inscribir tu blog.

Todos los blogs participantes, deberán figurar previamente en la Blogoteca, el directorio de blogs que 20minutos creó tras los premios del año pasado. Así es que si quieres ganar tiempo, ya puedes irte registrando allí y luego sólo te restará hacer la inscripcion en el certamen.

Hasta el 12 de Julio, la organización validará todos los blogs dados de alta... ¡uno por uno!... que no les pase na. Supongo que intentan evitar susceptibilidades y presuntos tongos sobre los que mucha gente se quejó el año pasado (un par de ejemplos aquí y aquí) y el anterior... y el otro...

En una tercera fase, entre el 13 de Julio y el 17 de Septiembre, todos los blogueros inscritos (y sólo ellos) podrán conceder hasta 20 votos (uno por categoría) a los blogs que su buen criterio dictamine.

El año pasado comprobamos cómo resultaba muy importante inscribirse entre los primeros. Los más rápidos disparando votos, lo hacían precisamente a esos primeros blogs y como periódicamente se publicaban listas provisionales y estos ya estaban ahí, pues cosechaban más visitas y por tanto, más votos. Además, más de uno emitía su voto útil, probablemente pensando que si estaban ahí era porque debían ser buenos. Con los que se inscribían más tarde, pasaba justo lo contrario.

Este año parece un acierto el que haya un periodo cerrado de inscripción que no coincida con el de votación: todos aparecerán al mismo tiempo. Ahora ya sólo falta solucionar el tema de que algunos usuarios se inscriban con 30 blogs "de paja" y luego se otorguen otros tantos votos al blog que realmente quieren promocionar.

Me parece curioso que los premios se hayan adelantado cuatro meses a las fechas habituales (Octubre-Diciembre) y que las votaciones se vayan a realizar justo cuando el personal tiene menos internet, oséase, en pleno verano... pero doctores tiene la Iglesia.

Animo a todos. No cuesta nada participar y podeis ser el blog revelación del año. Si un servidor pudo quedar en su primera participación en un glorioso 10º puesto (categoría de tecnología, no había otra más adecuada), cualquiera de vosotros que seguro que teneis más calidad, puede quedar todavía más arriba con sólo un poco de suerte.

Nota: No llevo comisión.
Leer más »

Convertir etiquetas en botones

18/05/2009
Con CSS y algo de imaginación, se pueden generar bastantes efectos quasi-profesionales. En este caso vamos a convertir la lista simple de categorías que nos proporciona Blogger, en unos botones que nos llevan a los posts de cada etiqueta.

En primer lugar, accedemos por Elementos de Página y añadimos un Nuevo Elemento, tipo Etiquetas. No importa si ya tenemos otro. Podemos probar como queda este, manipularlo y luego borrar este o el anterior que tuviéramos. Lo mejor es ponerle un título que no tengamos, para localizar mejor el código HTML que se generará en nuestra plantilla y que tendremos que modificar después. Pongamos que le llamamos "pruebabotones".

Ahora nos vamos a Diseño, Edición de HTML y expandimos Plantillas de Artilugios. En cualquier lugar, antes de ]]></b:skin>, insertamos la siguiente clase, que será la que le de aspecto de botonera a las etiquetas.

/* Botones
----------------------------------------------- */

/* Aspecto normal */
#botlista a, #botlista a:visited {
position:relative;
text-decoration:none;
text-align:center;
background-color:#990000; /* Color fondo botón */
color:#cccccc; /* Color letra */
display:block;
width:10em; /* Ancho del botón */
border:2px solid #999999; /* Tamaño del borde */
border-color:#444444 #333333 #333333 #444444; /* Color bordes */
padding:0.25em;
margin:0.5em auto;
}

/* Aspecto al pasar el puntero por encima */
#botlista a:hover {
top:0px; /* Valor distinto de 0, simula movimiento vertical */
left:0px; /* Valor distinto de 0, simula movimiento horizontal */
color:#ffffff; /* Color texto */
border-color:#333333 #444444 #444444 #333333; /* Invierte colores borde para simular pulsación */
}
Todo lo que está entre /* y */ explica qué cosas podeis modificar para dejar los botones con el mismo estilo que vuestro blog y si os estorba, podeis borrarlo después de instalarlo en vuestra plantilla.

Ahora seguimos plantilla abajo, buscando el título que le pusimos a las etiquetas (pruebabotones) y nos encontraremos con un código como éste:

<b:widget id='Label4' locked='false' title='pruebabotones' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content' id='botlista'>
<!-- <ul> BORRAR -->
<b:loop values='data:labels' var='label'>
<!-- <li> BORRAR -->
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/> (<data:label.count/>)</a>
</b:if>
<!-- <span dir='ltr'>(<data:label.count/>)</span> BORRAR -->
<!-- </li> BORRAR -->
</b:loop>
<!-- </ul> BORRAR -->

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>


Hay que eliminar todas las líneas en gris, marcadas con comentarios BORRAR y añadir las instrucciones en verde: id='botlist' y (<data:label.count/>). Con eso, teneis funcionando vuestras etiquetas.

Si quereis que no aparezca entre parentesis el número de post de cada categoría, teneis que borrar el segundo de los indicados en el anterior párrafo (data:label.count).

Una vez comprobeis que funciona, ya podeis cambiar colores, bordes, fondos, posiciones. Sustituir background-color:#990000; por background:url (URL_imagenfondo); da unos resultados espectaculares.
Leer más »

Plantilla Blogger. Crear secciones III. Columnas.

13/05/2009
Hemos visto cómo crear una sección sencilla y colocarla dónde nos interese y ahora veremos como hacer dos secciones a la misma altura, que funcionen como columnas independientes, pero que nos permitan añadir gadgets cómodamente.

Primero definimos en la parte CSS (antes de ]]></b:skin>) el ancho de los 2 contenedores (ID) necesarios y su alineación. También podemos añadir más atributos y en este ejemplo se ha incorporado la alineacion central del contenido, así como el color del texto.

Una columna flotará a la izquierda y otra a la derecha. En este caso utilizamos un ancho porcentual que en conjunto no llega al 100%, para que quede un margen entre ellas. Si se conoce el ancho del bloque donde se quieren incorporar, se puede poner un ancho fijo en pixels para cada columna, siempre que en total no superen el espacio disponible. Caso de que nos pasáramos, una columna pasaría a colocarse debajo de la otra.

#columna1 {
width:48%;
float:left;
text-align:center;
margin:0px auto;
color:red;
}

#columna2 {
width:48%;
float:right;
text-align:center;
margin:0px auto;
color:green;
}

Después necesitamos localizar el sitio dónde queremos colocar las dos columnas e insertamos las secciones. Una para cada columna. Para situarlas justo debajo de los post sería así...

<div class='main' id='main-wrapper'>
<b:section id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
</b:section>

<b:section class='columna1' id='columna1'/>
<b:section class='columna2' id='columna2'/>

</div>

Al no existir artilugios en esas secciones, no veremos nada con Vista Previa, pero si guardamos y accedemos a Elementos de Página, ya podemos comprobar que nuestras dos columnas están creadas.


Desde aquí mismo ya podemos comenzar a añadir contenido a las columnas, tal y cómo normalmente hacemos desde la barra lateral: Añadir gadget, escogemos tipo de gadget y redactamos/pegamos el contenido.

Con el mismo sistema, podemos crear más columnas:

CSS
#columna1 {
width:102px;
float:left;
}
#columna2 {
width:102px;
float:left;
}
#columna3 {
width:102px;
float:left;
}
#columna4 {
width:102px;
float:left;
}


HTML
<div class='main' id='main-wrapper'>
<b:section id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
</b:section>

<b:section class='columna1' id='columna1'/>
<b:section class='columna2' id='columna2'/>
<b:section class='columna3' id='columna3'/>
<b:section class='columna4' id='columna4'/>

</div>



Ver también:
Leer más »

Plantilla Blogger. Crear secciones II. Atributos.

12/05/2009
Si queda claro como formamos bloques contenedores con DIV's, ahora nos interesa saber como generar una sección propiamente dicha. Como se dijo anteriormente, en cualquier otro tipo de página web no nos haría falta hacer nada más, pero como dice J.Miur, "Blogger habla lenguaje Blogger" y la cosa funciona mejor aquí, haciendo uso de las secciones.

Una sección sin contenido tiene un código muy simple...

<b:section class='CLASE_ESTILO' id='NOMBRE_SECCION' />

Nota: Al no tener ningún gadget incluido, la sección se cierra con una contrabarra (/)antes del símbolo de cierre >, no necesitando una etiqueta </b:section>

En la parte de HTML Si añadimos este código tal cual, por ejemplo dentro del DIV denominado MAIN-WRAPPER y justo debajo de la sección de las entradas, veremos desde Elementos de Página como nos aparece un nuevo bloque en ese lugar para poder añadir los gadgets que queramos.
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
</b:section>

<b:section class='CLASE_ESTILO' id='NOMBRE_SECCION'/>
</div>

La etiqueta SECTION puede incluir un par de atributos interesantes:
  • SHOWADDELEMENT: Sirve para que podamos añadir gadgets a cada sección. Su valor puede ser YES o NO. Si probais por ejemplo en la sección de la cabecera a cambiar el valor (normalmente viene en las plantillas ajustado como NO), vereis que aparece un nuevo recuadro arriba con el mensaje "Añadir un gadget". A partir de ese momento podeis generar nuevos gadgets ahí, que quedarán dentro del bloque de la cabecera. Esté se quedará encima de dicha cabecera, pero luego lo podreis mover. Ese mismo valor se puede cambiar en cualquier otra sección según nos interese. Puede no venir porque es opcional y caso de no ponerse, se entiende con valor YES.

  • MAXWIDGETS: Máximo número de gadgets que admitirá la sección. Si no se coloca, el número de artilugios no tendrá un tope. Bueno, seguramente tenga un máximo, pero tan alto que lo desconozco por innecesario. También es modificable en otras secciones que vengan "de serie".

Aunque este otro es un atributo de la etiqueta WIDGET, quizás sea oportuno que también lo conozcais:
  • LOCKED: Sus valores son TRUE o FALSE y sirve para bloquear/desbloquear la posibilidad de mover gadgets desde Elementos de Página.
El nombre indicado tanto en el ID del DIV como en el de la sección (SECTION), es realmente un selector de bloque. En el caso de las secciones, tiene que ser único, distinto para cada sección. Se genera en la parte CSS mediante una almohadilla (#) seguida del nombre que le asignemos y sus atributos (ancho, color, etc.) encerrados entre llaves ({}). Estos atributos afectarán a todo el bloque dentro de las etiquetas que lo incorporen. Como normalmente los atributos del DIV ya están definidos, no suele hacer falta definir también el ID de la SECTION que queda dentro.

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word;
overflow: hidden;
}

Más interesante seguramente, es definir una clase (CLASS) para cada sección. Eso nos permite dar un estilo individual a cada sección si fuera necesario. A diferencia de los ID, las clases se generan con un punto (.) delante del nombre de la clase. Por ejemplo, con el uso de clases, conseguimos diferenciar el aspecto del bloque de las entradas y el de la barra lateral.

.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
}

Ver también:
Leer más »

Plantilla Blogger. Crear secciones I. Estructura.

11/05/2009
Vamos a abundar un poco en el tema de los contenedores en Blogger, explicando cómo funcionan las secciones, cómo se pueden configurar y por último, ofreciendo un ejemplo de cómo crear columnas en la plantilla mediante secciones.

Aunque se intentará explicar cómo hacerlo para todas las plantillas, como muestra vamos a utilizar una plantilla Blogger Mínima. Empezamos viendo la estructura de nuestra página desde Elementos de página y nos encontramos esto:


Cada uno de los bloques que podeis ver (cabecera, entradas, sidebar y pie), son tratados por Blogger como secciones (SECTION). En realidad, se pueden crear libremente redactando en la parte HTML el código (sin utilizar secciones) y serían igualmente visibles. Lo que ocurre es que resulta más práctico usar secciones, porque así el esquema general de la página será perfectamente visible desde Elementos de Página. El uso de secciones también nos va a facilitar añadir gadgets desde ese apartado y moverlos fácilmente dentro o a otros bloques.

En primer lugar, vamos a acceder a Edición HTML y vamos a localizar las distintas secciones. No expandimos artilugios para verlos mejor y a partir del <BODY>, veremos la misma estructura pero en versión código HTML - dialecto Blogger :)

<div id='outer-wrapper'> ABRE DIV OUTER
<div id='wrap2'> ABRE DIV WRAP2

CODIGO

<div id='header-wrapper'> ABRE DIV CABECERA
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'> ABRE SECCION CABECERA
<b:widget id='Header1' locked='true' title='Blog (cabecera)' type='Header'/> WIDGET
</b:section> CIERRA SECCION CABECERA
</div> CIERRA DIV CABECERA

<div id='content-wrapper'> ABRE DIV CONTENIDO PRINCIPAL

<div id='crosscol-wrapper' style='text-align:center'> ABRE DIV ENCIMA DE LAS ENTRADAS
<b:section class='crosscol' id='crosscol' showaddelement='no'/> SECCION ENCIMA DE LAS ENTRADAS (NO VISIBLE)
</div> CIERRA DIV ENCIMA DE LAS ENTRADAS

<div id='main-wrapper'> ABRE DIV ENTRADAS
<b:section class='main' id='main' showaddelement='no'> ABRE SECCION PRINCIPAL
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/> WIDGET QUE CONTROLA LAS ENTRADAS
</b:section> CIERRA SECCION PRINCIPAL
</div> CIERRA DIV ENTRADAS

<div id='sidebar-wrapper'> ABRE DIV SIDEBAR
<b:section class='sidebar' id='sidebar' preferred='yes'> ABRE SECCION SIDEBAR
WIDGETS BARRA LATERAL
</b:section> CIERRA SECCION SIDEBAR
</div> CIERRA DIV SIDEBAR

<div class='clear'>&#160;</div> RESETEA ELEMENTOS FLOTANTES

</div> CIERRA CONTENIDO PRINCIPAL

<div id='footer-wrapper'> ABRE DIV PIE
<b:section class='footer' id='footer'/> SECCION PIE
</div> CIERRA DIV PIE

</div> CIERRA DIV WRAP2
</div> CIERRA DIV OUTER
Cada trozo de código del mismo color identifica cada bloque. En este dibujo podeis ver gráficamente qué parte genera cada uno:

Habreis podido comprobar, que cada sección se engloba dentro de un DIV. Lo normal será que ahí se nombre un selector ID, que en la parte CSS se habrá definido previamente con los atributos necesarios.

Si hay dos bloques dentro a su vez de otro contenedor, ambos se engloban (anidan) dentro de un DIV más general. Ejemplo: crosscol, main y sidebar. Cada uno está dentro de un DIV distinto para generar su propio estilo, pero los tres están incluidos a su vez dentro de otro contenedor llamado CONTENT-WRAPPER, que tiene unas características generales y el tamaño suficiente para contener a los tres.

Estos son los bloques que se usan en la plantilla de ilustración (Blogger Mínima). Otras plantillas pueden usar otros nombres para el mismo tipo de plantilla y, por supuesto, otras estructuras. En cualquier caso, lo importante es ser capaces de distinguir la estructura de nuestra propia plantilla para luego poder modificarla sin problemas.

Ver también:
Leer más »

No rights reserved
NINGUN DERECHO RESERVADO
...aunque se agradece un enlace. Si crees que algo aquí vulnera los derechos de otro, mándanos un correo.
Para recibir Oloblogger en tu correo, introduce aquí tu dirección

Technorati Blogalaxia Blogesfera Bitacoras.com Twingly Ayuda Blogs Alianzo Wikio Ranking de Buzzear (ES) TOP 100 WEBLOGS Unión Bloggers Hispanos Más tráfico para tu blog Mi blog está incluido en Pixel a Pixel Directorio de blogs Blogissimo Personal Blogs - Blog Top Sites Blogging Blogs - BlogCatalog Blog Directory Top Internet blogs Mi Ping en TotalPing.com Directorio Blogger

Grupo Uniblog

Ir Arriba