Juglar / v.CIII

Veamos algunas opciones para desplegar un listado de categorías con Blogsome.

La opción sencilla es un listado (li) ordenado por nombre.

<h4>Categorías</h4>
<ul>
{list_cats optionall='0' all='All' sort_column='name'}
</ul>

Algunos parámetros que podemos usar:
sort_column: Ordenar por nombre (’name’) o identificación (’id’ por defecto).
list: Cada nombre de categoría estará entre etiquetas <li> (’1′ por defecto) o no (’0′).
optiondates: Mostrar la fecha del último post escrito en cada categoría (’1′) o no (’0′ por defecto).
optioncount: Mostrar el nº de posts escritos en cada categoría (’1′) o no (’0′ por defecto)
hide_empty: Esconder categorías vacías (’1′ por defecto) o no (’0′).
use_desc_for_title: Mostrar la descripción de la categoría como elemento title del enlace (’1′ por defecto) o no (’0′).
children: Mostrar las subcategorías (’1′) o no (’0′ por defecto)
child_of: Mostrar solo las subcategorías de una categoría (’id’)
feed: Mostrar un texto que enlaza al feed de cada categoría (’texto que enlaza a cada feed’)
feed_image: Mostrar una imagen que enlaza al feed (’/images/feedicon.gif’)
exclude: Excluir algunas categorías (id, id, id).
hierarchical: Desplegar las subcategorías y categorías de forma jerárquica (’1′ por defecto) o no (’0′).

Con lo ya podemos conseguir algo más elaborado:
{list_cats optionall='0' all='All' sort_column='name' optioncount='1' feed='RSS'}

Y con la imagen de feed y la forma en que quiero desplegar las subcategorías:
{list_cats optionall='0' all='All' sort_column='name' optioncount='1' children='1' hierarchical='0' feed_image ='/images/feedicon.png'}

El problema de esta última opción, es que no se despliegan elementos ‘alt’ a las imágenes, con lo que resulta imposible validar el diseño. Pero he aquí el apaño para los muy detallistas (lo encontré en la plantilla del gran Schinckel). Como antes, con icono para enlazar al feed, pero validando:
{capture name=categorias}{list_cats optionall='0' all='All' sort_column='name' optioncount='1' children='1' hierarchical='0' feed_image='http://static.flickr.com/116/316368744_960ba09f7e_o.gif'}{/capture}
{$smarty.capture.categorias|replace:"/>":"alt='Feed RSS de esta categoría' />"}

Technorati tags: blogsome, categorias, categories, smarty, templates, plantilla, juglar103, Juglar

Representación de los meses de archivo en Blogsome para el menú:
- En forma de formulario desplegable.
- Validando estándares.
- Todo en castellano.
- Que al seleccionar el mes, vaya automáticamente, sin necesidad de pulsar un botón.
- Mostrar el nº de posts escritos en cada mes.

<form action="" method="post">
<p>
<select id="archivomeses" name="archivomeses" onchange="document.location.href=this.options[this.selectedIndex].value;">
<option value=''>Elige un Mes</option>
{capture name=archivomeses}{get_archives type='monthly' format='option' show_post_count='1'}{/capture}
{assign var=monthly_archives value=$smarty.capture.archivomeses|replace:"January":"Enero"|replace:"February":"Febrero"|replace:"March":"Marzo"|replace:"April":"Abril"|replace:"May":"Mayo"|replace:"June":"Junio"|replace:"July":"Julio"|replace:"August":"Agosto"|replace:"September":"Septiembre"|replace:"October":"Octubre"|replace:"November":"Noviembre"|replace:"December":"Diciembre"}
{$monthly_archives}
</select>
</p>
</form>

Elige un Mes Enero 2007  (3) Diciembre 2006  (17) Noviembre 2006  (10) Octubre 2006  (10)

Technorati tags: archivos, meses, blogsome, formularios, juglar103, Juglar

1. En tu blog en Blogsome: Option - Reading - Syndication Feeds - Show the most recent - poner un número mayor que el de los posts escritos.
2. Guardar tu feed como archivo (yo usé http://juglar103.blogsome.com/feed/rss2/).
3. Ir a tu blog en WordPress recién instalado: Import - RSS.
4. Pegarte buen rato para volver a personalizar el diseño (si quieres el que tenías, pues a cambiar las etiquetas smarty por el php puro). Esto no estaría en el proceso de migración, pero ¿quién no lo haría?…
5. Y listo: http://juglar103.iespana.es/wordpress/.

Vamos, que bueno es saberlo (además es una forma alternativa de hacer una copia de seguridad), pero mientras Blogsome siga funcionando tan bien, no me planteo cambiar.

Relacionado:
Howto Migrate comment from Blogsome to Wordpress
Weblog Migration Is a Painful Process or Is It Not?

Technorati tags: blogsome, migrate, wordpress, rss, juglar103, Juglar

Una de las ventajas que ofrece Blogsome con respecto a otros servicios gratuitos de alojamientos de blogs, es la posibilidad de modificar y personalizar enteramente el diseño, sin tener que ceñirte a unos cuantas plantillas predefinidas (aunque también las hay, claro).

Me vienen muchas visitas buscando plantillas (themes) para Blogsome, pero la verdad es que no he encontrado muchas que te lo den fácil (copiar y pegar):

Connections (english)
Hemingway (english)
RalphLite (english)
IKTeroak (euskera)
Juglar (castellano)
vi: blog me (italiano)

Si bien, dada la gran cantidad de plantillas de libre uso que hay de otros servicios como WordPress o Blogger, otra opción es (con paciencia) adaptarlas a Blogsome (ejemplo). Esto es factible aunque no se dominen mucho las etiquetas en código smarty.

He encontrado algunos bloggers que han personalizado dignamente sus blogs en Blogsome. Sirvan de ejemplo, y no dejen de sugerirme otros:
http://lifeaslou.blogsome.com/
http://eugenia.blogsome.com/
http://eltercero.blogsome.com/
http://davidpc.blogsome.com/
http://unavidaejemplar.blogsome.com/
http://windehbs.blogsome.com/
http://ladivinacomedia.blogsome.com/

Technorati tags: blogsome, themes, templates, plantillas, juglar103, Juglar

En Blogsome no podemos editar propiamente una página de error. Consultado al profesor Schinckel, nos propone sustituir el contenido, {$content} por algo parecido a lo siguiente:

{$content|replace:"No posts mad*e":"Esta dirección no corresponde a ningún artículo."}

Aunque lo que realmente pretendía era personalizar a mi antojo la página de error, lo más que me ha aceptado el código es un título. Esta es mi propuesta:

{$content|replace:"No posts mad*e":"<h3>Error</h3>Esta dirección no corresponde a ningún artículo. Quizá ha cambiado de ubicación, así que lo mejor es que uses el buscador o navegues a través de las categorías"|replace:"Page Does Not Exis*t.":"<h3>Error</h3>Esta dirección no corresponde a ningúna página. Quizá ha cambiado de ubicación, así que lo mejor es que uses el buscador o navegues a través de las categorías"}

Nota importante: adviértase que he introducido asteriscos en las frases en inglés que se despliegan por defecto para poder mostrarlas en este post, sin que se transformen automáticamente. Elimínenlo a la hora de usarlo.

Ejemplo de página de error.

Otra alternativa:
How to customize a 404 error page in your free Wordpress blog - WebTips Community

Para mostrar una cita aleatoria en Blogsome, solo copia lo siguiente en tu index, sustituyendo cada “fraseX” por una cita.

Blogsome Forum - Random taglines?
Intenta - Citas aleatorias con Javascript
Mostrar un enlace aleatorio con Javascript en Intenta

<div id="cita">{literal}
<script type="text/javascript" language="JavaScript">
<!--
function random_text()
{};
var random_text = new random_text();
var number = 0;
random_text[number++] = "frase1"
random_text[number++] = "frase2"
random_text[number++] = "frase3"
random_text[number++] = "frase4"
random_text[number++] = "frase5"
random_text[number++] = "frase6"
var random_number = Math.floor(Math.random() * number);
document.write(random_text[random_number]);
--></script>{/literal}
</div>

A petición de Salva, unos apuntes para personalizar la sección de comentarios en Blogsome:

Barra de etiquetas HTML:
Las función está en este archivo de javascript, que ya está camuflado como .jpg, para poder guardarlo en tu cuenta en Blogsome:
http://juglar103.blogsome.com/images/quicktags.jpg

Insertas este código en la sección de comentarios, siempre sustituyendo USUARIO por lo que corresponda:
<script type="text/javascript" src="http://USUARIO.blogsome.com/images/quicktags.jpg> </script>
<script type="text/javascript">edToolbar(); </script>

Y justo después del textarea:
<script type="text/javascript"> edCanvas = document.getElementById('comment'); </script>

Cómo ejemplo total, la visión completa en mis comentarios:
<p>
<label for="comment">{_e text="Tu comentario"}</label>
<br />
<script src="http://USUARIO.blogsome.com/images/quicktags.jpg" type="text/javascript"></script>
<script type="text/javascript">edToolbar();</script>
<textarea name="comment" id="comment" cols="65" rows="4" tabindex="4"></textarea>
<script type="text/javascript"> edCanvas = document.getElementById('comment'); </script>
</p>

Comentarios del autor diferenciados:
Para poder diferenciar cuando se trata de un comentario del autor:
{capture name=author}{the_author_email}{/capture}
{capture name=reader}{comment_author_email}{/capture}
{if $smarty.capture.reader == $smarty.capture.author}
<li class="autor" id="comment-{comment_ID}">
{else}
<li class="alt" id="comment-{comment_ID}">
{/if}

Así podemos especificar un estilo propio para los comentarios del autor, por ejemplo:
#listacomentarios li.autor {
background-color:#BDEFBD;
}

Finalmente, el ejemplo completo con lo que uso actualmente:
{if $comments != ''}
{capture name=author}{the_author_email}{/capture}
<ul id="listacomentarios">
{foreach from=$comments key=key item=comment}
{globalvar var='comment' value=$comment}
{capture name=reader}{comment_author_email}{/capture}
{if $smarty.capture.reader == $smarty.capture.author}
<li class="autor" id="comment-{comment_ID}">
{else}
<li class="alt" id="comment-{comment_ID}">
{/if}
<div class="cabeceracomentario">
<div class="autorcomentario">{comment_author_link} ({comment_type})</div>
<div class="textocomentario">{comment_text}</div>
<div class="piecomentario">{comment_date} @ {comment_time} <a href="#comment-{comment_ID}">link</a>{edit_comment_link link='Edit' before=' |'}</div>
</li>
{/foreach}
</ul>

Expresiones fijas:
Para empezar lo más elemental es cambiar los textos fijos de la plantilla (las secciones del menú, las instrucciones en los comentarios, etc.) por las expresiones en castellano que más nos agraden. No necesitamos conocimientos sobre códigos extraños para esto.

Fechas en posts:
Para mostrar la fecha se suele usar expresiones como:

{the_date} {the_time} {the_time d='l, j F Y'} El problema es que cuando queremos usar palabras siempre las mostrará en inglés: April 10, 2006.
Las solución está en sustituir cada una de las posibles expresiones (días de la semana y meses) por su homólogo correspondiente:

{capture name=the_date}{the_date d=''}{/capture}
{assign var=la_fecha value=$smarty.capture.the_date|replace:"Monday":"Lunes"|replace:"Tuesday":"Martes"|replace:"Wednesday":"Miércoles"|replace:"Thursday":"Jueves"|replace:"Friday":"Viernes"|replace:"Saturday":"Sábado"|replace:"Sunday":"Domingo"|replace:"January":"Enero"|replace:"February":"Febrero"|replace:"March":"Marzo"|replace:"April":"Abril"|replace:"May":"Mayo"|replace:"June":"Junio"|replace:"July":"Julio"|replace:"August":"Agosto"|replace:"September":"Septiembre"|replace:"October":"Octubre"|replace:"November":"Noviembre"|replace:"December":"Diciembre"}
<div class="fecha">{$la_fecha}</div>

Meses del archivo:
Se suele representar mediante etiquetas tal que así:

{get_archives type='monthly'} {$monthly_archives} Esto nos despliega el listado de meses en inglés para acceder a los posts escritos en ellos. Con el mismo sistema, la solución castellana:

{capture name=archives}{get_archives type='monthly' format='html' show_post_count='1'}{/capture}
{assign var=monthly_archives value=$smarty.capture.archives|replace:"January":"Enero"|replace:"February":"Febrero"|replace:"March":"Marzo"|replace:"April":"Abril"|replace:"May":"Mayo"|replace:"June":"Junio"|replace:"July":"Julio"|replace:"August":"Agosto"|replace:"September":"Septiembre"|replace:"October":"Octubre"|replace:"November":"Noviembre"|replace:"December":"Diciembre"}
{$monthly_archives}

Elementos title de los enlaces a las categorías:
Cuando posamos el ratón sobre las categorías, el elemento title por defecto es “View all posts in…”.
Para las categorías del menú lateral hay fácil solución: añadir una descripción en la edición de categorías. Entonces ésta se desplegará como elemento title.
Pero para los enlaces a las categorías en cada post, no ocurre lo mismo.
En cada post, la categoría se muestra mediante:

{the_category seperator=", "} Lo cambiamos por un mensaje genérico:

{capture name=cats}{the_category seperator=", "}{/capture}
{$smarty.capture.cats|replace:"View all posts in":"Ver todos los artículos sobre"}

Versión en Euskera: IKTeroak :: Blogsome Euskaraz

Paint the Tiger • Carve the Swan » Changing Languages
Ártabro :: Fecha en castellano

A propuesta del Pato-lógico, una utilidad para mostrar el tiempo aproximado de lectura cada artículo del blog. Observad su artículo para el caso Blogger. A continuación los pasos para Blogsome (ver su demo):

Guardar el siguiente archivo javascript palabra.js, o bien insertarlo directamente en el head:
<script type="text/javascript">
function tlectura(idpost,idtlectura) {
var txt = document.getElementById(idpost).innerHTML;
var ppmin = 250;
if (txt){
txt = txt.replace(/< [^>]+>/g, ” “);
var palabras = txt.match(/(\w|�|�|�|�|�|�|�|�|�|�|�|�|�)+[\s\n\r\t,\.;:”‘\(\)\{\}\[\]$]*/g);
var palabrapost = 0;
if (palabras) {palabrapost = palabras.length;}
if (palabrapost < = {
document.getElementById(idtlectura).innerHTML='‘+”Tiempo lectura: Menos de 2 segundos”+’< '+'/sp'+'an>‘;
} else {
xminutos = parseInt(palabrapost/ppmin);
xsegundos = Math.round(60 * (palabrapost/ppmin - xminutos));
document.getElementById(idtlectura).innerHTML=’‘+”Tiempo lectura: “+((xminutos>0)?xminutos:”")+((xminutos>0)?((xminutos == 1)?” minuto “:” minutos “):”")+((xsegundos>0)?xsegundos:”")+((xsegundos>0)?((xsegundos == 1)?” segundo”:” segundos”):”")+’ < '+'/sp'+'an>‘;
}
}
}
</script>

En el apartado post de la plantilla:
- Identificar cada artículo con el atributo:
id="j{the_ID}"
Que podría quedar por ejemplo (según la plantilla):
<div id="j{the_ID}">
ó
<div class="post" id="j{the_ID}">

- Añadir la llamada al script que cuenta las palabras:
<script type="text/javascript">tlectura("j{the_ID}","elposttlec{the_ID}");</script>

- Donde queramos desplegar el texto del tiempo de lectura del artículo:
<span class="tlectura" id="elposttlec{the_ID}"></span>

index.html
css
post.html
comments.html

Para las páginas en HTML, sólo tienen que “ver código fuente” (view source).

Paint the Tiger • Carve the Swan » Blogsome Templates

Actualización: Versión mejorada: Plantilla.