Consejos Blogger: Tutoriales Blogger

Mostrando entradas con la etiqueta Tutoriales Blogger. Mostrar todas las entradas

lunes, 10 de junio de 2013

Estructura básica de una plantilla HTML5

Actualización: Nueva entrada en el siguiente enlace:

Vídeotutorial: Crear plantilla para Blogger: Introducción a los códigos esenciales de Blogger.

Esta entrada es un tanto especial, ya que es complementaria para un vídeotutorial que he realizado y que dentro de estos días publicaré en el blog, en el vídeo construiremos una plantilla en HTML5 y en esta entrada anexaremos la estructura básica y un pequeño ejemplo.

La estructura de un documento HTML5 es la siguiente (Incluyendo el tipo de codificación necesario para Blogger en la primera línea):

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html lang="es">
     <head>


     </head>


    <body>


    </body>
</html>

Si nosotros intentamos guardar este código desde nuestro editor HTML, Blogger nos advertirá que no es posible debido a que no se encuentra una etiqueta b:skin, para solucionarlo incluiremos dicha etiqueta en el <head>:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html lang="es">
     <head>
    <b:skin></b:skin> <!-- Hoja de estilos del blog,
           la cual no utilizaremos posteriormente
           debido a que usaremos un archivo externo -->

     </head>


    <body>


    </body>
</html>

Otra vez, si intentamos guardar el código nos aparecerá otro mensaje de error, indicando que debe existir una sección (Para gadgets) dentro de nuestra plantilla, lo solucionamos con una etiqueta b:section y su respectivo identificador:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html lang="es">
     <head>
    <b:skin></b:skin> 

     </head>


    <body>
    <b:section id="main" /> <!-- Los b:section son secciones para almacenar gadgets -->

    </body>
</html>

Esta sección la utilizaremos posteriormente para incluir las entradas de nuestro blog, de momento es irrelevante pero necesaria para poder guardar el documento.

Sabiendo todo esto, podrán dar el siguiente paso para construir sus propias plantillas en formato HTML5, en la siguiente entrada anexaré el vídeotutorial explicando la forma de convertir todo esto en una plantilla válida, ya que como reitero, esta entrada es complementaria.

miércoles, 24 de abril de 2013

Habilitar los nuevos comentarios de Google+ en plantillas modificadas de Blogger

De seguro ya muchos se habrán dado cuenta de la nueva característica de comentarios de Google+ en Blogger, y es muy seguro de que a muchos de los usuarios no les funcionen en plantillas modificadas, incluso configurando desde la sección Google+ desde el escritorio de Blogger.

En mi caso en particular, suprimí infinidad de elementos y comenté los scripts que cargan en el blog para poder tener la plantilla 100% validada en HTML5, por lo que usar las funciones por defecto no daban ningún resultado en mi blog.

Podemos usar un método alternativo genérico para cualquier página web, ya que este sistema no es exclusivo de Blogger. Para ello utilizaremos atributos con expr para poder transformarlos a nuestra plataforma:

Para plantillas HTML5:

<script src="https://apis.google.com/js/plusone.js">{lang: 'es'}</script><div class="g-comments" expr:data-href="data:post.url" data-first_party_property="BLOGGER" data-view_type="FILTERED_POSTMOD" />

Para el contador de comentarios:

<div class="g-commentcount" expr:data-href="data:post.url" />

Si necesitas que tu plantilla esté 100% validada, podemos reemplazar:

<script src="https://apis.google.com/js/plusone.js">{lang: 'es'}</script>

Por esto:

<script type='text/javascript'>
//<![CDATA[
 window.___gcfg = {lang: 'es'};
 (function() {
   var crearjsplus = document.createElement('script'); crearjsplus.type = 'text/javascript'; crearjsplus.async = true;
   crearjsplus.src = 'https://apis.google.com/js/plusone.js';
   var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(crearjsplus, s);
 })();
//]]>
</script>

Si usas una plantilla en XHTML no habrá problemas si usas los códigos anteriores, pero si por alguna razón se resiste el sistema a funcionar (Lo cual es casi imposible), puedes optar por la versión estándar:

<script src="https://apis.google.com/js/plusone.js">{lang: 'es'}</script><g:comments expr:href="data:post.url" first_party_property="BLOGGER" view_type="FILTERED_POSTMOD" />

Para el contador de comentarios:

<g:commentcount expr:href="data:post.url" />

Nota: El código de los comentarios lo puedes incluir en donde gustes, si quieres añadirlo debajo de los comentarios normales, símplemente busca esta línea:

<b:includable id='comment-form' var='post'>

Y debajo añades el código.

lunes, 22 de abril de 2013

Cómo obtener la primera imagen del post en Blogger sin Javascript

En Blogger hay una infinidad de etiquetas propias de la plataforma, entre las cuales existen las denominadas <data>. Estas tags nos permiten mostrar determinados elementos dentro de nuestro blog, y para nuestra ventaja podemos reubicarlas a nuestro antojo.

Por ejemplo, si deseamos mostrar el contenido de la entrada, símplemente recurrirmos a <data:post.body/>, o bien si necesitamos mostrar el título de ésta, añadimos <data:post.title/> a nuestro código. Para no desviarnos del objetivo principal de esta entrada, no nos adentraremos con detalles sobre el uso de estas etiquetas.

En Blogger también podemos obtener la imagen en miniatura de la entrada, pero sólamente la obtendremos a un tamaño de 72 píxeles. La etiqueta que se encarga de ello es <data:post.thumbnailUrl/>, y devuelve una URL en el siguiente formato:

http://X.bp.blogspot.com/-XXXXXXXXXXXXXXXXXX/s72-C/nombre-imagen.png

El valor s72 en la URL indica que la imagen tendrá un tamaño de 72 píxeles, mientras que el valor -C indica que la imagen se mostrará cortada en forma de cuadrado.

Aquí viene el problema, si intentamos aumentar el tamaño de la imagen mediante CSS, debido a su baja resolución se verá pixelada.

La solución:
Si estás utilizando la combinación <data:post.snippet/> y <data:post.thumbnailUrl/> (Para obtener el resúmen y la imagen en miniatura correspondientes), puedes optar entonces por utilizar <data:post.firstImageUrl/>, la cual devolverá la primera imagen de la entrada en su tamaño real.

Para utilizarla bastaría con incluir el siguiente código en tu plantilla:

<img alt='alguna keyword' expr:src='data:post.firstImageUrl'/>

Por ejemplo, si quieres que las entradas del índice se vean como una tarjeta:

<b:if cond='data:blog.pageType == &quot;index&quot;'>
    <div class="entrada-indice">
        <a class="titulo-indice-post" expr:href="data:post.url">
           <data:post.title/>
       </a>
           <p class="resumen-post">
                <data:post.snippet/>
                <div style="clear:both" /> 
          </p>
     <img alt='thumb' class="miniatura" expr:src='data:post.firstImageUrl'/>
    </div>

<b:else/>
        <!-- Código original de la entrada, el cual se mostrará normalmente dentro de ellas y páginas estáticas -->
</b:if>

Lo que devolvería lo siguiente:

<div class="entrada-indice">
        <a class="titulo-indice-post" href="http://www.tublog.blogspot.com/2013/04/entrada.html">
          Soy el título de alguna entrada.
       </a>
           <p class="resumen-post">
                Soy un breve resúmen de la entrada que se muestra debajo de la imagen en miniatura.
                <div style="clear:both" /> 
          </p>
                <img alt='thumb' class="miniatura" src='URL-PRIMERA-IMAGEN'/> 
    </div>

En el caso del ejemplo, los selectores CSS serían los siguientes:

.entrada-indice {
/*Atributos para cada entrada dentro del índice*/  
}

.titulo-indice-post {
/*Atributos para el título de cada título*/  
display:block; /*Para pasar el enlace de inline a block*/ 
}

.resumen-post {
/*Atributos para el contenedor del resumen*/
}

.miniatura {
/*Atributos para la imagen*/ 
}

Dentro de cada selector deberás añadir las propiedades que creas convenientes para tu plantilla.

Nota: No es necesario reconstruir la sección completa, bastaría con buscar algo parecido a esto si ya utilizas el sistema que se encuentra en Oloblogger:

<img expr:src='data:post.thumbnailUrl'/>

Por esto:

<img alt='alguna keyword' expr:src='data:post.firstImageUrl'/>

viernes, 12 de abril de 2013

Solucionar problemas del nuevo editor HTML de Blogger

Hace poco hablamos de las nuevas funciones que trae el editor HTML de Blogger. Para muchos ha sido un verdadero quebradero de cabeza y en esta entrada trataremos de solucionar sus problemas mediante un F.A.Q.

Considera que el editor ha sido cambiado en pro de su uso, pero como muchos nos acostumbramos al editor HTML anterior, se nos hace dificil poder defendernos de su manera de utilización.

¿Para qué sirve el botón Plantilla de formato?: Este botón lo que hace es organizar el código para así trabajar a gusto. Recuerda que si necesitas buscar algún código en particular, posiblemente no encuentres el código exacto ya que limpia la indentación.

Al presionar CTRL+F e iniciar una búsqueda, el buscador integrado del navegador no encuentra ninguna similitud: Ahora el editor HTML viene con un buscador integrado, el cual se activa presionando dentro del editor y posteriormente presionando CTRL+F, si utilizas el buscador por defecto en tu navegador, el código lo buscará dentro de la página del editor y no dentro de éste.

¿Qué debo hacer si necesito expandir artilugios para encontrar un código dentro de un <b:widget/>?: Recuerda que la opción Expandir plantillas de artilugios ha sido eliminada ya que no se necesita más, basta con buscar con CTRL+F y si el código se encuentra dentro de un código contraído éste se expandirá y arrojará el resultado de tu búsqueda.

¿Para qué me sirve el destacador de síntaxis?: Para aclarar un poco, este nuevo editor incluye la capacidad de destacado de códigos, podemos aprovechar esta nueva función para detectar cuando alguna código presenta algún error debido a que lo destaca en rojo. También podemos beneficiarnos ya que podemos identificar secciones mucho mas fácil que antes.

¿Cómo puedo aprovechar el enumerado de líneas?: Básicamente, si el sistema te devuelve algún error de síntaxis y/o semántico, puedes revisar la línea afectada y realizar la corrección correspondiente enfatizándote exclusivamente en esa línea.

Necesito ubicar un widget dentro de la plantilla, ¿Qué acción(es) debo realizar para ubicarlo?: Desde el menú desplegable Ir al Widget, deberás seleccionar el widget correspondiente. Te parecerá un poco extraño ya que el gadget no muestra el título, sino que se muestra en el siguiente formato:

<TipoWidget><Nº>

Si no sabes cuál es cual, puedes ir a alguno de ellos y podrás comprobar su título, o bien puedes además buscar un widget alternativamente desde el buscador mediante su título.

Espero que este artículo les sea de utilidad, si tienen alguna otra consulta de su uso por favor comenta y trataremos de encontrar juntos una solución a cada una de las inquietudes que se puedan presentar.

sábado, 16 de marzo de 2013

Ocultar entradas con determinada etiqueta en el inicio de Blogger

A petición de +Danilo Cisneros, he creado un tutorial con el cual conseguiremos ocultar entradas con cierta etiqueta en el inicio de nuestro blog, de manera que éstas aparezcan únicamente al ingresar a la categoría correspondiente.

Esto puede ser útil para filtrar algunas entradas y/u organizar nuestra página de inicio, o bien para lo que desees. También puedes hacer algo "a la inversa", es decir, mostrar las entradas con la etiqueta X y ocultar el resto.

blogger, etiquetas, pagina inicio, homepage

El tutorial:

Para comprobar la funcionalidad del tutorial, he creado un demo en el cual se ocultan todas las entradas etiquetadas como Blogger, las demás se muestran en el índice y en las categorías normalmente.

Opción 1: Ocultar entradas con determinada etiqueta:
Con los artilugios expandidos, en nuestro editor HTML buscaremos el siguiente código (Búscalo por su inicio y su cierre):

<b:includable id='post' var='post'>

<!-- Acá va una gran cantidad de código el cual no tocaremos -->

</b:includable>

Cuando hayas encontrado este código, incluye el código siguiente de esta manera:

<b:includable id='post' var='post'>

<!-- Inicio del código-->
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:label.name == &quot;Nombre de la etiqueta&quot;'>
<b:else/>

<!-- Acá va el código que iba dentro del <b:includable> -->

</b:if>
<b:else/>

<!-- Acá va el código que iba dentro del <b:includable>, otra vez -->
</b:if>
</b:loop>
<!-- Fin del código -->

</b:includable>

En donde aparece "Nombre de la etiqueta" escribe exactamente el nombre de cual quieras excluir en el inicio del blog, una vez hecho esto previsualiza los cambios, y si consigues observar el resultado puedes guardar tu plantilla.

Importante: Para que todo siga funcionando correctamente dentro de tu blog, es necesario que el código que estaba dentro del <b:includable> lo agregues también en el espacio que he marcado.

Opción 2: Mostrar únicamente entradas con determinada etiqueta:

Para invertir la operación, bastaría con buscar la segunda condicional dentro del código (La que se encuentra dentro del <b:loop>:

<b:if cond='data:label.name == "Nombre de la etiqueta"'>

Y en donde aparece == deberás dejarlo como !=, quedando de la siguiente manera:

<b:if cond='data:label.name != "Nombre de la etiqueta"'>

Guardas los cambios y listo.

Opción 3: Ocultar y hacer coincidir la última etiqueta:

A petición de +Emilio Luna he actualizado esta entrada con el código para hacer coincidir la última etiqueta de los posts y así ocultarlos:

<b:includable id='post' var='post'>
<!-- Inicio del código-->
<b:loop values='data:post.labels' var='label'>
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
        <b:if cond='data:label.isLast == &quot;true&quot;'>
            <b:if cond='data:label.name == &quot;Nombre de la etiqueta&quot;'>
            <b:else/>
                <!-- Acá va el código que iba dentro del <b:includable> -->
            </b:if>
        </b:if>
    <b:else/>
        <!-- Acá va el código que iba dentro del <b:includable>, otra vez -->
    </b:if>
</b:loop>
<!-- Fin del código -->
</b:includable>

El procedimiento para invertir la función es el mismo que el del método 2.

martes, 12 de marzo de 2013

Reestructura fácilmente las entradas en Blogger

Habíamos visto con anterioridad la manera de personalizar las entradas de tu blog de varias maneras, pero creo que a muchos usuarios les interesará poder organizar la forma en la que se muestran los elementos dentro de sus artículos. Para ello, he conseguido organizar los elementos mediante etiquetas <b:includable>, para que con unas simples líneas puedas adaptar todo según tus necesidades.

Para que puedas comprender mejor el sistema, bastaría con observar el siguiente código de ejemplo y su modificación:

<!--ESCRUCTURA EJEMPLO 1--> 
<div class="post">
<código titulo entrada />
<código titulo resúmen post />
<código etiquetas /> 
</div>
<!--ESCRUCTURA EJEMPLO 2--> 
<div class="post">
<código etiquetas /> 
<código titulo resúmen post />
<código titulo entrada />
</div>

Las etiquetas de los ejemplos son únicamente para ejemplificar.

Ahora que entendiste el propósito del tutorial, empezaremos con la primera modificación, pero antes te invito a que hagas un respaldo de tu plantilla por si algo no sale bien o por si no te gusta el resultado.

Paso 1: Reemplaza el <b:widget type='Blog'> de tu plantilla:

Lo primero que necesitas hacer, es buscar un código muy similar a este desde la edición HTML de tu plantilla (Sin expandir artilugios):

<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>

Deberás seleccionarlo, y en su lugar añadir todo este código:

<b:widget id='Blog88' locked='false' title='Entradas del blog' type='Blog'>
<b:includable id='post' var='post'>
 
 
<div class='post'>
 
<b:if cond='data:blog.pageType == "index"'>
// Acá deberás pegar los códigos de los items que desees mostrar en las entradas del índice.
<b:else/>
// Esto se verá en entradas y páginas estáticas.
</b:if>
 
 
</div>
</b:includable>
 
 
<b:includable id="descripcion">
<!-- LOS SIGUIENTES INCLUDABLES PERMITEN EL CORRECTO FUNCIONAMIENTO DE LAS ENTRADAS DEL BLOG, NO LOS ALTERES A MENOS QUE SEPAS LO QUE ESTÁS HACIENDO
 
LÍNEAS ORGANIZADAS POR VÍCTOR CALDERÓN PARA AYUDA BLOGGERS.
 -->
 
</b:includable>
 
 
<b:includable id='navegacion'><div class='blog-pager' id='blog-pager'><b:if cond='data:newerPageUrl'><span id='blog-pager-newer-link'><a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a></span></b:if><b:if cond='data:olderPageUrl'><span id='blog-pager-older-link'><a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a></span></b:if><a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a></div><div class='clear'/></b:includable>
<b:includable id="imagen-miniatura"><b:if cond='data:post.thumbnailUrl'><img class="postthumb" expr:src ="data:post.thumbnailUrl" expr:alt="data:post.title"/></b:if></b:includable>
<b:includable id="primera-imagen"><img alt='first-image' expr:src='data:post.firstImageUrl'/></b:includable>
<b:includable id='mensaje-estado'><b:if cond='data:navMessage'><div class='status-msg-wrap'><div class='status-msg-body'><data:navMessage/></div><div class='status-msg-border'><div class='status-msg-bg'><div class='status-msg-hidden'><data:navMessage/></div></div></div></div><div style='clear: both;'/></b:if></b:includable>
 
<b:includable id="titulos-entradas"><b:if cond='data:post.title'><h1 class='post-title entry-title'><b:if cond='data:post.link'><a expr:href='data:post.link'><data:post.title/></a><b:else/><b:if cond='data:post.url'><b:if cond='data:blog.url != data:post.url'><a expr:href='data:post.url'><data:post.title/></a><b:else/><data:post.title/></b:if><b:else/><data:post.title/></b:if></b:if></h1></b:if></b:includable>
 
 
<b:includable id="fecha-entrada"><div class='post-timestamp'><b:if cond='data:top.showTimestamp'><data:top.timestampLabel/><a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><data:post.timestamp/></a></b:if></div></b:includable>
 
<b:includable id="etiquetas-post"><div class='post-labels'><b:if cond='data:post.labels'><data:postLabelsLabel/><b:loop values='data:post.labels' var='label'><a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if></b:loop></b:if></div></b:includable>
 
<b:includable id='editar-entrada' var='post'><b:if cond='data:post.editUrl'><span expr:class='&quot;item-control &quot; + data:post.adminClass'><a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>   <img alt='' class='icon-action' height='18' src='http://img2.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/></a></span></b:if></b:includable>
 
<b:includable id="enlace-comentarios"><div class='jump-link'><b:if cond='data:blog.pageType != &quot;item&quot;'><b:if cond='data:blog.pageType != &quot;static_page&quot;'><b:if cond='data:post.allowComments'> <b:if cond='data:post.forceIframeComments'><span class='cmt_count_iframe_holder' expr:data-count='data:post.numComments' expr:data-onclick='data:post.addCommentOnclick' expr:data-url='data:post.canonicalUrl'></span><b:else/>
<b:if cond='data:post.commentSource == 1'><span class='cmt_count_iframe_holder' expr:data-count='data:post.numComments' expr:data-onclick='data:post.addCommentOnclick' expr:data-url='data:post.canonicalUrl'></span><b:else/><a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.commentLabelFull/></a></b:if></b:if></b:if></b:if></b:if></div></b:includable>
 
<b:includable id="cuerpo-entrada"><div class='post-body'><data:post.body/><div style='clear: both;'/></div></b:includable>
 
<b:includable id="resumen-entrada"><div class='post-body'><data:post.snippet/></div></b:includable>
 
 
<b:includable id="autor-entrada"><div class="post-author">Escrito por: <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'><data:post.author/></a></div></b:includable>
 
<b:includable id="leer-mas"><b:if cond='data:post.hasJumpLink'><div class='jump-link'><a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a></div></b:if></b:includable>
 
<b:includable id='main' var='top'><div class='all-posts'><b:loop values='data:posts' var='post'><b:include data='post' name='post'/><b:if cond='data:blog.pageType == &quot;static_page&quot;'><b:include data='post' name='comment_picker'/></b:if><b:if cond='data:blog.pageType == &quot;item&quot;'><b:include data='post' name='comment_picker'/></b:if></b:loop></div></b:includable>
 
<b:includable id='mobile-main' var='top'><!--Vacío--></b:includable>
<b:includable id='mobile-nextprev'><!-- Vacío--></b:includable>
<b:includable id='mobile-index-post' var='post'><!-- Vacío--></b:includable>
<b:includable id='mobile-post' var='post'><!-- Vacío--></b:includable>
<b:includable id='shareButtons' var='post'><!--Vacío--></b:includable>
 
 
 
<b:includable id='threaded_comment_js' var='post'>
  <script async='async' expr:src='data:post.commentSrc' type='text/javascript'/>
 
  <script type='text/javascript'>
    (function() {
      var items = <data:post.commentJso/>;
      var msgs = <data:post.commentMsgs/>;
      var config = <data:post.commentConfig/>;
 
// <![CDATA[
      var cursor = null;
      if (items && items.length > 0) {
        cursor = parseInt(items[items.length - 1].timestamp) + 1;
      }
 
      var bodyFromEntry = function(entry) {
        if (entry.gd$extendedProperty) {
          for (var k in entry.gd$extendedProperty) {
            if (entry.gd$extendedProperty[k].name == 'blogger.contentRemoved') {
              return '<span class="deleted-comment">' + entry.content.$t + '</span>';
            }
          }
        }
        return entry.content.$t;
      }
 
      var parse = function(data) {
        cursor = null;
        var comments = [];
        if (data && data.feed && data.feed.entry) {
          for (var i = 0, entry; entry = data.feed.entry[i]; i++) {
            var comment = {};
            // comment ID, parsed out of the original id format
            var id = /blog-(\d+).post-(\d+)/.exec(entry.id.$t);
            comment.id = id ? id[2] : null;
            comment.body = bodyFromEntry(entry);
            comment.timestamp = Date.parse(entry.published.$t) + '';
            if (entry.author && entry.author.constructor === Array) {
              var auth = entry.author[0];
              if (auth) {
                comment.author = {
                  name: (auth.name ? auth.name.$t : undefined),
                  profileUrl: (auth.uri ? auth.uri.$t : undefined),
                  avatarUrl: (auth.gd$image ? auth.gd$image.src : undefined)
                };
              }
            }
            if (entry.link) {
              if (entry.link[2]) {
                comment.link = comment.permalink = entry.link[2].href;
              }
              if (entry.link[3]) {
                var pid = /.*comments\/default\/(\d+)\?.*/.exec(entry.link[3].href);
                if (pid && pid[1]) {
                  comment.parentId = pid[1];
                }
              }
            }
            comment.deleteclass = 'item-control blog-admin';
            if (entry.gd$extendedProperty) {
              for (var k in entry.gd$extendedProperty) {
                if (entry.gd$extendedProperty[k].name == 'blogger.itemClass') {
                  comment.deleteclass += ' ' + entry.gd$extendedProperty[k].value;
                } else if (entry.gd$extendedProperty[k].name == 'blogger.displayTime') {
                  comment.displayTime = entry.gd$extendedProperty[k].value;
                }
              }
            }
            comments.push(comment);
          }
        }
        return comments;
      };
 
      var paginator = function(callback) {
        if (hasMore()) {
          var url = config.feed + '?alt=json&v=2&orderby=published&reverse=false&max-results=50';
          if (cursor) {
            url += '&published-min=' + new Date(cursor).toISOString();
          }
          window.bloggercomments = function(data) {
            var parsed = parse(data);
            cursor = parsed.length < 50 ? null
                : parseInt(parsed[parsed.length - 1].timestamp) + 1
            callback(parsed);
            window.bloggercomments = null;
          }
          url += '&callback=bloggercomments';
          var script = document.createElement('script');
          script.type = 'text/javascript';
          script.src = url;
          document.getElementsByTagName('head')[0].appendChild(script);
        }
      };
      var hasMore = function() {
        return !!cursor;
      };
      var getMeta = function(key, comment) {
        if ('iswriter' == key) {
          var matches = !!comment.author
              && comment.author.name == config.authorName
              && comment.author.profileUrl == config.authorUrl;
          return matches ? 'true' : '';
        } else if ('deletelink' == key) {
          return config.baseUri + '/delete-comment.g?blogID='
               + config.blogId + '&postID=' + comment.id;
        } else if ('deleteclass' == key) {
          return comment.deleteclass;
        }
        return '';
      };
 
      var replybox = null;
      var replyUrlParts = null;
      var replyParent = undefined;
 
      var onReply = function(commentId, domId) {
        if (replybox == null) {
          // lazily cache replybox, and adjust to suit this style:
          replybox = document.getElementById('comment-editor');
          if (replybox != null) {
            replybox.height = '250px';
            replybox.style.display = 'block';
            replyUrlParts = replybox.src.split('#');
          }
        }
        if (replybox && (commentId !== replyParent)) {
          document.getElementById(domId).insertBefore(replybox, null);
          replybox.src = replyUrlParts[0]
              + (commentId ? '&parentID=' + commentId : '')
              + '#' + replyUrlParts[1];
          replyParent = commentId;
        }
      };
 
      var hash = (window.location.hash || '#').substring(1);
      var startThread, targetComment;
      if (/^comment-form_/.test(hash)) {
        startThread = hash.substring('comment-form_'.length);
      } else if (/^c[0-9]+$/.test(hash)) {
        targetComment = hash.substring(1);
      }
 
      // Configure commenting API:
      var configJso = {
        'maxDepth': config.maxThreadDepth
      };
      var provider = {
        'id': config.postId,
        'data': items,
        'loadNext': paginator,
        'hasMore': hasMore,
        'getMeta': getMeta,
        'onReply': onReply,
        'rendered': true,
        'initComment': targetComment,
        'initReplyThread': startThread,
        'config': configJso,
        'messages': msgs
      };
 
      var render = function() {
        if (window.goog && window.goog.comments) {
          var holder = document.getElementById('comment-holder');
          window.goog.comments.render(holder, provider);
        }
      };
 
      // render now, or queue to render when library loads:
      if (window.goog && window.goog.comments) {
        render();
      } else {
        window.goog = window.goog || {};
        window.goog.comments = window.goog.comments || {};
        window.goog.comments.loadQueue = window.goog.comments.loadQueue || [];
        window.goog.comments.loadQueue.push(render);
      }
    })();
// ]]>
  </script>
</b:includable>
 
 
 
<b:includable id='commentDeleteIcon' var='comment'>
  <span expr:class='&quot;item-control &quot; + data:comment.adminClass'>
    <b:if cond='data:showCmtPopup'>
      <div class='goog-toggle-button'>
        <div class='goog-inline-block comment-action-icon'/>
      </div>
    <b:else/>
      <a class='comment-delete' expr:href='data:comment.deleteUrl' expr:title='data:top.deleteCommentMsg'>
        <img src='//www.blogger.com/img/icon_delete13.gif'/>
      </a>
    </b:if>
  </span>
</b:includable>
<b:includable id='backlinkDeleteIcon' var='backlink'>
  <span expr:class='&quot;item-control &quot; + data:backlink.adminClass'>
    <a expr:href='data:backlink.deleteUrl' expr:title='data:top.deleteBacklinkMsg'>
      <img src='//www.blogger.com/img/icon_delete13.gif'/>
    </a>
  </span>
</b:includable>
<b:includable id='comment_picker' var='post'>
  <b:if cond='data:post.forceIframeComments'>
    <b:include data='post' name='iframe_comments'/>
    <b:if cond='data:post.showThreadedComments'>
      <b:include data='post' name='threaded_comments'/>
    <b:else/>
      <b:include data='post' name='comments'/>
    </b:if>
  <b:else/>
    <b:if cond='data:post.commentSource == 1'>
      <b:include data='post' name='iframe_comments'/>
    <b:else/>
      <b:if cond='data:post.showThreadedComments'>
        <b:include data='post' name='threaded_comments'/>
      <b:else/>
        <b:include data='post' name='comments'/>
      </b:if>
    </b:if>
  </b:if>
</b:includable>
 
 
 
<b:includable id='comment_count_picker' var='post'></b:includable>
<b:includable id='comments' var='post'>
  <div class='comments' id='comments'>
    <a name='comments'/>
    <b:if cond='data:post.allowComments'>
      <h4><data:post.commentLabelFull/>:</h4>
 
      <b:if cond='data:post.commentPagingRequired'>
        <span class='paging-control-container'>
          <b:if cond='data:post.hasOlderLinks'>
            <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
              &#160;
            <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
              &#160;
          </b:if>
 
          <data:post.commentRangeText/>
 
          <b:if cond='data:post.hasNewerLinks'>
            &#160;
            <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
            &#160;
            <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
          </b:if>
        </span>
      </b:if>
 
      <div expr:id='data:widget.instanceId + &quot;_comments-block-wrapper&quot;'>
        <dl expr:class='data:post.avatarIndentClass' id='comments-block'>
          <b:loop values='data:post.comments' var='comment'>
            <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
              <b:if cond='data:comment.favicon'>
                <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
              </b:if>
              <a expr:name='data:comment.anchorName'/>
              <b:if cond='data:blog.enabledCommentProfileImages'>
                <data:comment.authorAvatarImage/>
              </b:if>
              <b:if cond='data:comment.authorUrl'>
                <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
              <b:else/>
                <data:comment.author/>
              </b:if>
              <data:commentPostedByMsg/>
            </dt>
            <dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
              <b:if cond='data:comment.isDeleted'>
                <span class='deleted-comment'><data:comment.body/></span>
              <b:else/>
                <p>
                  <data:comment.body/>
                </p>
              </b:if>
            </dd>
            <dd class='comment-footer'>
              <span class='comment-timestamp'>
                <a expr:href='data:comment.url' title='comment permalink'>
                  <data:comment.timestamp/>
                </a>
                <b:include data='comment' name='commentDeleteIcon'/>
              </span>
            </dd>
          </b:loop>
        </dl>
      </div>
 
      <b:if cond='data:post.commentPagingRequired'>
        <span class='paging-control-container'>
          <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
            <data:post.oldestLinkText/>
          </a>
          <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
            <data:post.olderLinkText/>
          </a>
          &#160;
          <data:post.commentRangeText/>
          &#160;
          <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
            <data:post.newerLinkText/>
          </a>
          <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
            <data:post.newestLinkText/>
          </a>
        </span>
      </b:if>
 
      <p class='comment-footer'>
        <b:if cond='data:post.embedCommentForm'>
          <b:if cond='data:post.allowNewComments'>
            <b:include data='post' name='comment-form'/>
          <b:else/>
            <data:post.noNewCommentsText/>
          </b:if>
        <b:else/>
          <b:if cond='data:post.allowComments'>
            <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
          </b:if>
        </b:if>
 
      </p>
    </b:if>
    <b:if cond='data:showCmtPopup'>
      <div id='comment-popup'>
        <iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
        </iframe>
      </div>
    </b:if>
 
    <div id='backlinks-container'>
    <div expr:id='data:widget.instanceId + &quot;_backlinks-container&quot;'>
       <b:if cond='data:post.showBacklinks'>
         <b:include data='post' name='backlinks'/>
       </b:if>
    </div>
    </div>
  </div>
</b:includable>
<b:includable id='comment-form' var='post'>
  <div class='comment-form'>
    <a name='comment-form'/>
    <b:if cond='data:mobile'>
      <h4 id='comment-post-message'>
        <a expr:id='data:widget.instanceId + &quot;_comment-editor-toggle-link&quot;' href='javascript:void(0)'><data:postCommentMsg/></a></h4>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
    <b:else/>
      <h4 id='comment-post-message'><data:postCommentMsg/></h4>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
    </b:if>
    <data:post.friendConnectJs/>
    <data:post.cmtfpIframe/>
    <script type='text/javascript'>
      BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
    </script>
  </div>
</b:includable>
<b:includable id='backlinks' var='post'>
  <a name='links'/><h4><data:post.backlinksLabel/></h4>
  <b:if cond='data:post.numBacklinks != 0'>
    <dl class='comments-block' id='comments-block'>
      <b:loop values='data:post.backlinks' var='backlink'>
        <div class='collapsed-backlink backlink-control'>
          <dt class='comment-title'>
            <span class='backlink-toggle-zippy'>&#160;</span>
            <a expr:href='data:backlink.url' rel='nofollow'><data:backlink.title/></a>
            <b:include data='backlink' name='backlinkDeleteIcon'/>
          </dt>
          <dd class='comment-body collapseable'>
            <data:backlink.snippet/>
          </dd>
          <dd class='comment-footer collapseable'>
            <span class='comment-author'><data:post.authorLabel/> <data:backlink.author/></span>
            <span class='comment-timestamp'><data:post.timestampLabel/> <data:backlink.timestamp/></span>
          </dd>
        </div>
      </b:loop>
    </dl>
  </b:if>
  <p class='comment-footer'>
    <a class='comment-link' expr:href='data:post.createLinkUrl' expr:id='data:widget.instanceId + &quot;_backlinks-create-link&quot;' target='_blank'><data:post.createLinkLabel/></a>
  </p>
</b:includable>
 
<b:includable id='threaded_comments' var='post'>
  <div class='comments' id='comments'>
    <a name='comments'/>
    <h4><data:post.commentLabelFull/>:</h4>
 
    <div class='comments-content'>
      <b:if cond='data:post.embedCommentForm'>
        <b:include data='post' name='threaded_comment_js'/>
      </b:if>
      <div id='comment-holder'>
         <data:post.commentHtml/>
      </div>
    </div>
 
    <p class='comment-footer'>
      <b:if cond='data:post.allowNewComments'>
        <b:include data='post' name='threaded-comment-form'/>
      <b:else/>
        <data:post.noNewCommentsText/>
      </b:if>
    </p>
 
    <b:if cond='data:showCmtPopup'>
      <div id='comment-popup'>
        <iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
        </iframe>
      </div>
    </b:if>
 
    <div id='backlinks-container'>
    <div expr:id='data:widget.instanceId + &quot;_backlinks-container&quot;'>
       <b:if cond='data:post.showBacklinks'>
         <b:include data='post' name='backlinks'/>
       </b:if>
    </div>
    </div>
  </div>
</b:includable>
<b:includable id='threaded-comment-form' var='post'>
  <div class='comment-form'>
    <a name='comment-form'/>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
    <data:post.friendConnectJs/>
    <data:post.cmtfpIframe/>
    <script type='text/javascript'>
      BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
    </script>
  </div>
</b:includable>
 
 
<b:includable id='iframe_comments' var='post'><b:if cond='data:post.allowIframeComments'><script expr:src='data:post.iframeCommentSrc' type='text/javascript'/><div class='cmt_iframe_holder' expr:data-href='data:post.canonicalUrl' expr:data-viewtype='data:post.viewType'/><b:if cond='data:post.embedCommentForm == &quot;false&quot;'><a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a></b:if></b:if></b:includable>
</b:widget>

Previsualizas los cambios y verás que hay sólo unas palabras en donde debería ir cada entrada, si efectivamente consigues este resultado puedes guardar tu plantilla.

Paso 2: Reestructura las entradas de tu blog como gustes:

Lo primero que necesitas es ubicar el siguiente código:

<div class='post'>
 
<b:if cond='data:blog.pageType == "index"'>
// Acá deberás pegar los códigos de los items que desees mostrar en las entradas del índice.
<b:else/>
// Esto se verá en entradas y páginas estáticas.
</b:if>
 
 
</div>

Si te fijas, hay una condicional que nos permite modificar las entradas de manera distintas tanto para el índice como para las entradas. Lo que haremos ahora será añadir todos los elementos que lleva una entrada, como título, cuerpo del artículo, etiquetas, etc. Observa un ejemplo:

<div class='post'>

<b:if cond='data:blog.pageType == "index"'> <!-- EN EL ÍNDICE -->
   <b:include name="titulos-entradas" />
   <b:include name="resumen-entrada" />
   <b:include name="leer-mas" />
   <b:include name="enlace-comentarios" />
   <b:include name="imagen-miniatura" />
<b:else/> <!-- DENTRO DE ENTRADAS Y PÁGINAS -->
   <b:include name="titulos-entradas" />
   <b:include name="cuerpo-entrada" />
   <b:include name="etiquetas-post" />
   <b:include name="autor-entrada" />
   <b:include name="fecha-entrada" />
</b:if>

</div>

Cada elemento <b:include> posee un atributo name el cual lo define como tal. Puedes probar con todos estos:

<b:include data='top' name='mensaje-estado'/> (Es el mensaje Mostrando entradas con X etiqueta)
<b:include name="autor-entrada" /> (Nombre del autor de la entrada)
<b:include name="leer-mas" /> (Inserta el Leer Más)
<b:include name="resumen-entrada" /> (Añade un breve sumario de la entrada)
<b:include name="cuerpo-entrada" /> (Inserta todo el contenido de la entrada)
<b:include name="enlace-comentarios" /> (Muestra el número de comentarios con su enlace)
<b:include name="editar-entrada" /> (El quickedit para modificar los posts rápidamente - Puede no funcionar)
<b:include name="etiquetas-post" /> (Inserta las etiquetas de la entrada)
<b:include name="fecha-entrada" /> (Muestra la fecha de publicación)
<b:include name="titulos-entradas" /> (Inserta el título de la entrada)
<b:include name="navegacion" /> (Entradas anteriores, Inicio, Entradas Recientes)
<b:include name="imagen-miniatura" /> (Imagen en miniatura en 72px)
<b:include name="primera-imagen" /> (Primera imagen del post, en tamaño original)

Mensaje del autor: Lamento la ausencia y la falta de atención, dentro de unos cuantos días todo volverá a la normalidad.

Atte. Víctor Calderón

sábado, 26 de enero de 2013

Añadir un ícono a cada una de las etiquetas de Blogger

Hace algún tiempo atrás vimos la manera de personalizar las etiquetas de las entradas de Blogger mediante CSS, y en otros blogs como Ciudad Blogger se ha visto la forma de incluir un ícono en las etiquetas, pero de manera grupal añadiendo una imagen al final de cada enlace.

Gracias a las condicionales en Blogger añadiremos un ícono pero a cada etiqueta de manera distinta, es decir que si la categoría es de música, entonces el ícono que aparecerá a su lado será un instrumento musical, una nota, etc.

Cómo añadir un ícono a las etiquetas del gadget de Blogger:

Paso 1: Añadiendo el gadget de etiquetas modificado:

Este paso es un poco más complicado debido a que necesitas ubicar correctamente el <b:section>. Para ello, deberás buscar una línea muy similar a esta (Búscala sin expandir los artilugios para que sea más sencillo):

<b:section class='sidebar' id='sidebar-wrapper' showaddelement='yes'/>

Recuerda que muy dificilmente la encontrarás idéntica a ésta, deberás fijarte en buscar el <b:section> con el atributo class='sidebar' (En caso de estar el gadget en la columna lateral del blog).

Si ya tienes un gadget de etiquetas dentro de esta sección, entonces deberás suprimirlo, bastaría con buscar un código similar a éste, obviamente se encontrará en el <b:section> que hayamos identificado anteriormente:

<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'/>

Este código lleva un atributo title, el cual corresponde al título del gadget. Si tu gadget lleva como título "Categorías" u otra cosa entonces deberás fijarte que el gadget lo lleve en éste atributo, o de lo contrario estarás suprimiendo otro en caso de tener varios.

Si ya lograste identificar el gadget, entonces deberás reemplazarlo por este código:

<b:widget id='Label99' locked='false' title='Etiquetas' type='Label'>
    <b:includable id='main'><div id="gadget-etiquetas">
            <h2><data:title/></h2>
        <ul>
            <b:loop values='data:labels' var='label'>
                <li expr:class='data:label.name'>
                    <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/></a>
                    </b:if>
                </li>
            </b:loop>
        </ul>
    </div></b:includable>
</b:widget>

Previsualiza los cambios y si no hay ningún inconveniente procedes a guardar la plantilla.

Nota: Te preguntará si deseas suprimir el gadget, deberás aceptar dicha modificación.

Paso 2: Añadir CSS en cada etiqueta:

Una vez que ya hayas realizado el paso anterior, deberás pegar el siguiente código antes de ]]></b:skin>:

#gadget-etiquetas ul {
margin:0;
font-family:tahoma;
}

#gadget-etiquetas a {
color:#777;
cursor:pointer;
}

#gadget-etiquetas li[class="Etiqueta uno"] {
list-style-image:url(URL-IMAGEN);
}
#gadget-etiquetas li[class="Etiqueta dos"] {
list-style-image:url(URL-IMAGEN);
}
#gadget-etiquetas li[class="Etiqueta tres"] {
list-style-image:url(URL-IMAGEN);
}
#gadget-etiquetas li[class="Etiqueta cuatro"] {
list-style-image:url(URL-IMAGEN);
}
#gadget-etiquetas li[class="Etiqueta cinco"] {
list-style-image:url(URL-IMAGEN);
}
#gadget-etiquetas li[class="Etiqueta seis"] {
list-style-image:url(URL-IMAGEN);
}
#gadget-etiquetas li[class="Etiqueta siete"] {
list-style-image:url(URL-IMAGEN);
}
#gadget-etiquetas li[class="Etiqueta ocho"] {
list-style-image:url(URL-IMAGEN);
}
#gadget-etiquetas li[class="Etiqueta nueve"] {
list-style-image:url(URL-IMAGEN);
}
#gadget-etiquetas li[class="Etiqueta diez"] {
list-style-image:url(URL-IMAGEN);
}

Deberás reemplazar el nombre etiqueta-XXXX por la etiqueta que corresponda (Respetando mayúsculas, tíldes, separaciones, etc), junto con añadir un ícono en el atributo list-style-image. Observa un ejemplo:

#gadget-etiquetas ul {
margin:0;
font-family:tahoma;
}

#gadget-etiquetas a {
color:#777;
cursor:pointer;
}

#gadget-etiquetas li[class="Música"] {
list-style-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdJtbhUv4hxYCWDHwtzfkm_uVDwGaQh0kTgVi1fc4TbH_EjqllRqcLeHgM1d_-xNMJl5iGi-vebDNuA8auCqGlxHZsTc2C144W_U3fMkB_TbPBB8f5Hh9ufFGDv06AlAEHi8rUoDN6gyc/s1600/music-icon.png) !important;
}
#gadget-etiquetas li[class="Arte"] {
list-style-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbpBStn9FwqqCyoMft_P9_WksyEM_9a3XGVr2rPBBiIuuOpmBDHDLd1_n2mocNaesjpawMb8LnnsYnIGSpusYLTBCo5BN94_QLhHwR2PdcGn3yQv3xiLRwA3_RPlapWeC-VMbZ_NZq2Cs/s1600/art_icon.png);
}

#gadget-etiquetas li[class="Vídeos"] {
list-style-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-5UeZ3Xs_v3bpcRdZFNT1usQgIw7eellNugfilUfUIvKFQRnTe1xsXkEvlL8apAYkupZEZM-uCXzLcAHhg_QYq4_lPSJ-EkqGyl7QcZnX1qH0mpYzQijySXirkaeM1Ryd_0wZDi0V6AY/s1600/video_icon.gif);
}
#gadget-etiquetas li[class="Fotografías"] {
list-style-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipa8rqVtdTKkiXGX2-dZBf-P3MkvLuRvPNgwkiywtpuKUR-wZupfxVnMMTplNehHHOVAwdAQq0caGCKSLcVVQd709x4sK8hmxIHO-HhWpbL1Ylc-0MozdpAuZXL9iWFGARl5gorXablZw/s1600/url.png);
}

El resultado será muy similar a este:

Cómo añadir un ícono a las etiquetas de las entradas:

Paso 1: Reemplazar las etiquetas por defecto:

Lo primero que debes hacer en este caso, es buscar el siguiente código dentro de tu plantilla (Con las plantillas de artilugios expandidas):

<span class='post-labels'>
<!--
Este contenido, junto a la etiqueta span deberá suprimirse
-->
</span>

Deberás reemplazarlo con este código:

<div class='post-labels'>
  <b:if cond='data:post.labels'>
  <data:postLabelsLabel/>
  <div class='labels'>
   <b:loop values='data:post.labels' var='label'>
    <a expr:class='data:label.name' expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'></b:if>
   </b:loop>
  </div>
    </b:if>
</div>

Si no lo encuentras, y si en tus entradas no aparecen las etiquetas, puedes añadirlo justo debajo de:

<data:post.body/>

Paso 2: Aplicando CSS a las etiquetas:

Debido a que ya no manipulamos viñetas como lo hicimos en el método de los gadgets, tendremos que hacerlo levemente distinto. Copia y pega el siguiente código antes de ]]></b:skin>:

.post-labels {
margin:20px 0 10px 0;
padding:10px;
}

.post-labels a {
display:inline-block;
padding-left:20px;
margin: 0 8px 0;
}

.post-labels a[class="Etiqueta uno"] {
background:url(URL-ICONO) no-repeat left;
}

.post-labels a[class="Etiqueta dos"] {
background:url(URL-ICONO) no-repeat left;
}

.post-labels a[class="Etiqueta tres"] {
background:url(URL-ICONO) no-repeat left;
}

.post-labels a[class="Etiqueta cuatro"] {
background:url(URL-ICONO) no-repeat left;
}

.post-labels a[class="Etiqueta cinco"] {
background:url(URL-ICONO) no-repeat left;
}

.post-labels a[class="Etiqueta seis"] {
background:url(URL-ICONO) no-repeat left;
}

.post-labels a[class="Etiqueta siete"] {
background:url(URL-ICONO) no-repeat left;
}

.post-labels a[class="Etiqueta ocho"] {
background:url(URL-ICONO) no-repeat left;
}

.post-labels a[class="Etiqueta nueve"] {
background:url(URL-ICONO) no-repeat left;
}

.post-labels a[class="Etiqueta diez"] {
background:url(URL-ICONO) no-repeat left;
}

Recuerda reemplazar etiqueta-XXXX por la etiqueta que corresponda (Respetando mayúsculas, tíldes, etc), junto con añadir un ícono en el atributo background. Observa un ejemplo:

.post-labels {
margin:20px 0 10px 0;
padding:10px;
}

.post-labels a {
display:inline-block;
padding-left:20px;
margin: 0 8px 0;
}

.post-labels a[class="Música"] {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdJtbhUv4hxYCWDHwtzfkm_uVDwGaQh0kTgVi1fc4TbH_EjqllRqcLeHgM1d_-xNMJl5iGi-vebDNuA8auCqGlxHZsTc2C144W_U3fMkB_TbPBB8f5Hh9ufFGDv06AlAEHi8rUoDN6gyc/s1600/music-icon.png) no-repeat left;
}
.post-labels a[class="Arte"] {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbpBStn9FwqqCyoMft_P9_WksyEM_9a3XGVr2rPBBiIuuOpmBDHDLd1_n2mocNaesjpawMb8LnnsYnIGSpusYLTBCo5BN94_QLhHwR2PdcGn3yQv3xiLRwA3_RPlapWeC-VMbZ_NZq2Cs/s1600/art_icon.png) no-repeat left;
}

.post-labels a[class="Vídeos"] {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-5UeZ3Xs_v3bpcRdZFNT1usQgIw7eellNugfilUfUIvKFQRnTe1xsXkEvlL8apAYkupZEZM-uCXzLcAHhg_QYq4_lPSJ-EkqGyl7QcZnX1qH0mpYzQijySXirkaeM1Ryd_0wZDi0V6AY/s1600/video_icon.gif) no-repeat left;
}
.post-labels a[class="Fotografías"] {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipa8rqVtdTKkiXGX2-dZBf-P3MkvLuRvPNgwkiywtpuKUR-wZupfxVnMMTplNehHHOVAwdAQq0caGCKSLcVVQd709x4sK8hmxIHO-HhWpbL1Ylc-0MozdpAuZXL9iWFGARl5gorXablZw/s1600/url.png) no-repeat left;
}

El resultado:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl. Donec dictum malesuada magna. Curabitur id nibh auctor tellus adipiscing pharetra. Fusce vel justo non orci semper feugiat. Cras eu leo at purus ultrices tristique.

Etiquetas:

Arte Música Vídeos Fotografías

Actualización: Se han reemplazado los selectores de clases por selectores de atributos para que puedan reconocerse etiquetas de 2 palabras o más.

jueves, 20 de diciembre de 2012

Blogger permite mencionar usuarios de Google+ en sus entradas

Desde Blogger Buzz nos llega esta interesante característica para nuestros blogs: Los usuarios con cuenta Google+ podrán mencionar a cualquier persona que se encuentre dentro de sus círculos.

Como podrás apreciar, cuando vayas por primera vez al editor de entradas de tu blog, verás un cartel informativo en el cual nos dan nota de esta nueva característica:

El uso de esta función es bastante simple, bastaría con presionar la tecla + o @ y enseguida empezar a escribir el nombre de usuario:

Si deseas personalizar este enlace, puedes hacer uso de la clase "g-profile" tal como se indica en el siguiente ejemplo:

.g-profile {
background:url(https://lh5.googleusercontent.com/-2r7nkB71SpM/AAAAAAAAAAI/AAAAAAAAAAA/esh5a6uxG9Q/s16-c-k/photo.jpg) no-repeat left;
color:rgba(0,0,0,0.8);
padding:0 0 0 20px;
text-shadow:none;
font-weight:bold;

}

El resultado será el siguiente (Sitúa la mano sobre el enlace):

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril +Ayuda Bloggers delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

lunes, 10 de diciembre de 2012

Desmenuzando los gadgets de Blogger: Entradas Populares

A grandes rasgos vimos la forma de crear una plantilla para Blogger, pero para podernos internar en la personalización completa de nuestra plantilla comenzaré con una lista de tutoriales en los que se buscará editar cada sección del blog detalladamente. En esta oportunidad hablaremos de cómo personalizar el gadget de entradas populares para así suprimir el estilo original y manejarlo a nuestro antojo.

Si tienes habilidad y si lees la guía completa puedes incluso adaptar el gadget a un slider Javascript, ya que modificaremos toda la estructura del gadget.

Paso 1: Modificando el cuerpo del gadget "Entradas Populares":

Debemos saber que todo gadget tiene condicionales, la mayoría de éstas son de configuración, esto quiere decir que éstas afectan en cómo nosotros hayamos configurado el gadget desde la opción "Diseño", por lo que sirven únicamente si nosotros modificamos algo desde esta sección.

Lo que haremos será suprimir este código condicional y todas sus dependencias, convertiremos el gadget en un sólo resultado que nosotros mismos crearemos. El código original sin modificar del gadget de entradas populares es el siguiente:

 <b:widget id='PopularPosts1' locked='false' title='Entradas populares' type='PopularPosts'>
<b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='data:showThumbnails == &quot;false&quot;'>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (3) Show only thumbnails -->
            <div class='item-thumbnail-only'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            </div>
            <div style='clear: both;'/>
          <b:else/>
            <!-- (4) Show snippets and thumbnails -->
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

Como lo puedes apreciar, contiene muchas condicionales que afectan el comportamiento del gadget y códigos que muchas veces al usuario promedio lo confunden. Lo que haremos será reemplazar todo el código anterior por el siguiente, una versión simplificada y funcional del gadget (Y si no tienes el código anterior o similar puedes añadirlo dentro de una etiqueta <b:section>):

<b:widget id='PopularPosts1' locked='true' title='Slider de imágenes' type='PopularPosts'>
<b:includable id='main'>
   <ul>
      <b:loop values='data:posts' var='post'>
      <li>
           <b:if cond='data:post.thumbnail'>
               <a expr:href='data:post.href' target='_blank'>
                    <img alt='' expr:src='data:post.thumbnail'/>
                </a>
            <b:else />

               <a expr:href='data:post.href' target='_blank'>
                    <img alt='' src='URL-IMAGEN-NO-DISPONIBLE'/>
                </a>
           </b:if>

             <a expr:href='data:post.href' class="titulo-entrada-gadget" ><data:post.title/></a>
             <div class="snippet"> <data:post.snippet/> </div>

      </li>
      </b:loop>
    <div class="clearfix" />
   </ul>


</b:includable>
</b:widget>

Previsualiza la plantilla y si consigues ver 10 entradas populares en el índice puedes guardar los cambios que has hecho.

Información importante:

El gadget debería devolver una estructura muy similar a esta, pero el código las etiquetas <li> y su contenido se repetirá por cada entrada:

<ul>
      <li>
              <a href="Url-de-la-entrada" target="_blank"><img alt="" src="Url-de-la-imagen-a-72px"></a>

              <a href="Url-de-la-entrada" class="titulo-entrada-gadget">Título de la entrada</a>

              <div class="snippet">
                     Resúmen de la entrada que aparecerá en la página principal.
              </div>
      </li>

<div class="clearfix" />
</ul>

Previsualicemos el resultado:

Mensaje Informativo para Blogger con jQuery UI
Gracias a Jquery UI , en tan sólo unas cuántas líneas podemos crear increíbles animaciones para nuestra web, ya que viene precargado con inf...
Personalizar fechas de entradas en Blogger
En este artículo veremos 2 métodos para personalizar las fechas con CSS3 y Javascript, ya que hace algún tiempo atrás vimos una forma para h...
Iniciativa #EmpujonAiniciaBlog en los premios Bitácoras 2012
iniciaBlog ha subido al puesto 6 según la Calificación parcial del 30 de Octubre de 2012 . Nuestro amigo Jesús González necesita mas que n...
Insertar música en el blog con la etiqueta </audio>
Hace poco vimos la forma de insertar vídeos gracias a la etiqueta de HTML5 , en esta oportunidad veremos la etiqueta , la c...

¿Lo ves poco estructurado? Veamos el siguiente paso.

Paso 2: Añadir atributos al gadget de entradas populares:

Si te preguntas por qué no usaremos las mismas clases e identificadores que vienen por defecto en el gadget, esto es debido a que en Blogger existe un código arbitrario que define los atributos por defecto en nuestra plantilla. Para poder obviar estas reglas, le asignamos otros nombres a cada elemento:

#PopularPosts1 ul {
/*Atributos del contenedor de las entradas populares*/
}

#PopularPosts1 li {
/*Cada elemento del contenedor, dentro de éste se encuentran otros más*/
}
 
#PopularPosts1 img {
/*Imágenes del gadget, anteriormente item-thumbnail*/
}

#PopularPosts1 div {
/*Resúmen del gadget, anteriormente item-snippet*/
}

.titulo-entrada-gadget {
/*Resúmen del gadget, anteriormente item-title*/
}

.clearfix {clear:both;} /*No tocar*/

Con algo de ingenio, puedes construir algo tan sencillo pero a la vez llamativo como esto:

Mensaje Informativo para Blogger con jQuery UI
Gracias a Jquery UI , en tan sólo unas cuántas líneas podemos crear increíbles animaciones para nuestra web, ya que viene precargado con inf...
Personalizar fechas de entradas en Blogger
En este artículo veremos 2 métodos para personalizar las fechas con CSS3 y Javascript, ya que hace algún tiempo atrás vimos una forma para h...
Iniciativa #EmpujonAiniciaBlog en los premios Bitácoras 2012
iniciaBlog ha subido al puesto 6 según la Calificación parcial del 30 de Octubre de 2012 . Nuestro amigo Jesús González necesita mas que n...
Insertar música en el blog con la etiqueta </audio>
Hace poco vimos la forma de insertar vídeos gracias a la etiqueta de HTML5 , en esta oportunidad veremos la etiqueta , la c...

Código CSS del ejemplo:

#PopularPosts1 ul {
width:90%;
margin:0 auto;
background:rgba(0,0,0,0.05);
padding:0 !important;
font-family:Open Sans; /*Requiere la fuente Open Sans de Google Web Fonts en 300*/
font-weight:300;
}

#PopularPosts1 li {
-moz-transition: 1s; /*Transición Firefox*/
-webkit-transition: 1s; /*Transición Chrome, Safari*/
-o-transition:1s; /*Transición Opera*/
transition: 1s; /*Transición Genérica*/
list-style:none !important;
padding:10px 5px;
float:left;
cursor:pointer;
width:48%;
border-bottom:1px solid rgba(0,0,0,0.1);
}

#PopularPosts1 li:hover {
background:rgba(255,255,255,0.4);
box-shadow: inset 0 0 120px rgba(0,0,0,0.3);
}


#PopularPosts1 img {
float:left;
padding:5px;
background:#EFF1F3;
border:1px solid white;
box-shadow:0 0 5px #CCCCCC;
margin: 0 10px 10px;
}

#PopularPosts1 div {
/*Sin atributos*/
}

#PopularPosts1 .titulo-entrada-gadget {
font-size:16px;
}

Extra: Imágenes mas grandes:

Oloman tiene un muy útil script que sirve para devolver la imagen por defecto del gadget en un tamaño mayor, si necesitas adaptar el widget a un slider puedes utilizar su tutorial.

martes, 27 de noviembre de 2012

Cómo hacer que cualquier usuario publique en Blogger sin ser autor (Actualizado)

En Blogger hay una interesante función conocida como "Mail2Blogger", muy pocos la conocen y hacen uso de esta característica. Para los que no sepan cual es su función, Mail2Blogger nos permite enviar entradas desde nuestro correo electrónico y así publicarlas en nuestro blog o guardarlas como borrador. Podemos hacer uso de esta interesante herramienta para que otros puedan publicar entradas sin necesidad de que establezcas su autoría.

Esto es muy útil si deseas crear un sitio de frases, página de confesiones, sistema similar a un foro o alguna otra cosa que se te ocurra.

Para ello, he creado un formulario a base de PHP básico y algo de CSS3, el cual podrás ponerlo dentro de un iframe en alguna parte de tu blog y así conseguir que otros publiquen artículos en él. Para ver un demo en funcionamiento puedes visitar el siguiente enlace:

Demo

El tutorial:

Primero les explicaré cómo funciona el sistema: Consta básicamente de un formulario que envía un correo electrónico a la dirección de tu Mail2Blogger. Al hacer esto, el sistema automáticamente publicará el artículo, o lo dejará en tu borrador según tu configuración. Para poder moderar las publicaciones te recomiendo que establezcas la segunda alternativa por defecto, pero si lo deseas puedes dejar el paso libre a cualquier post.

Paso 1: ¿Cómo configurar Mail2Blogger?:

Habilitar la característica de envío de entradas por correo electrónico es muy sencilla, símplemente en nuestro escritorio Blogger vamos a la opción "Configuración | Móviles y Correo electrónico", en ella estableceremos nuestras SecretWords y eliges la configuración que desees más conveniente:

Paso 2: El formulario PHP y su configuración básica:

Descarga este archivo .zip (Actualizado) y descomprímelo en donde desees, dentro hay un archivo con la extensión .PHP, en él busca la siguiente línea:

$tu_mail2blogger = 'usuario.secretwords@blogger.com'; // Inserta aquí tu correo Mail2Blogger

Reemplaza el correo que aparece por el que usas en Mail2Blogger, guarda el archivo y estará listo para subirse a algún servidor.

Puedes modificar algunos otros valores, pero te recomiendo únicamente que modifiques los atributos de la hoja de estilos para hacerla coincidir con tu blog.

Paso 3: Subir e insertar el formulario en tu blog:

Para este paso es necesario un servidor web (No Dropbox, Google Sites o similares), te recomiendo Nixiweb ya que posee ancho de banda y espacio ilimitados.

Una vez que hayas subido el archivo a tu servidor, lo insertas en la plantilla de la siguiente manera:

<iframe src='URL_ARCHIVO_PHP' style='height:320px;border:0; width:100%;' />

Modifica los valores width y height para cambiar el ancho y el alto del iframe, respectivamente.

Extra: Configurar la apariencia de las entradas en tu blog:

Por defecto he establecido el siguiente formato de salida al correo:

<span class="post-autor">Escrito por: Cloudx18</span>
<div class="post-body-enviado">
Este es el cuerpo de la entrada.
</div>

Nota: El título del post se agrega automáticamente dentro de la entrada normalmente.

Para poder establecer los atributos necesarios deberás utilizar los siguientes selectores CSS:

.post-autor {
/*Atributos del nombre del autor*/
}

.post-body-enviado {
/*Atributos del texto de la entrada*/
}

Nota: Para que los usuarios puedan hacer saltos de línea, es necesario que utilicen la etiqueta breakline o <br />

Si consideras que el editor es demasiado simple, puedes añadirle un editor WYSIWYG, o si lo amerita, puedo actualizar la entrada mas adelante con el editor avanzado.

Actualización Viernes 30 de Noviembre de 2012:

El sistema tenía muchos contras, uno de ellos era que los usuarios podían insertar HTML sin restricciones, un gran fallo de parte mía ya que los usuarios podían escribir etiquetas <script> y <style> (Gracias a Emilio Cobos por informarme sobre tamaño desastre y descuido).

Puedes descargar el sistema nuevamente modificado por Emilio, o bien descargar la actualización y corrección que incluí por mi cuenta, ambas opciones deberían funcionar correctamente.

La lista de opciones que incluí fueron las siguientes (Reescribí el sistema desde 0):

Validador del formulario: Necesario para que los usuarios deban escribir un mínimo de carácteres para poder enviar el artículo. Para cambiar los parámetros deberás modificar los siguientes datos:

Para el nombre:

if (validador.nombre.value.length < 4) {

Para el título:

if (validador.titulopost.value.length < 10) {

Para el post:

if (validador.mensaje.value.length < 20) {

Tampoco olvides modificar las siguientes líneas:

Para el nombre:

Mín. 4 Carácteres

Para el título:

Mín. 10 Carácteres

Para el post:

Mín. 20 Carácteres

Se ha añadido además el formulario dentro de una tabla para mantener los elementos alineados correctamente según el ancho del iframe.
Se agregó un Doctype y se corrigieron problemas de síntaxis.
Las palabras que lleven tilde y eñe (Ñ) debieran mostrarse correctamente.
Ya no se pueden ejecutar scripts ni aplicar hojas de estilos en ninguno de los campos ya que las etiquetas se suprimen y dejan el contenido fuera, puedes modificar la lista de etiquetas utilizables desde la siguiente línea:

// Usamos strip_tags para permitir sólamente algunas etiquetas, si alguna otra existe dentro del código, ésta se suprimirá y dejará el contenido ---- No incluyas las etiquetas <SCRIPT> ni <STYLE> por una cuestión de seguridad.
$cuerpo_seguro = strip_tags($cuerpo_post, '<p><a><br><b><u><i><ul><ol><li><span><img><blockquote><h1><h2><h3><h4><h5><h6><strike><stroke><div><font><input><button>');

Si deseas agregar un editor WYSIWYG, puedes usar Nicedit, es un sistema muy útil que sirve para reemplazar todos los textareas de una página web:

<script src="http://js.nicedit.com/nicEdit-latest.js" type="text/javascript"></script>
<script type="text/javascript">bkLib.onDomLoaded(nicEditors.allTextAreas);</script>

Este código debes pegarlo arriba de

</head>