4 opciones de iconos sociales para que sigan tu blog, usando una sola imagen y con animación

En un post anterior, vimos cómo agregar botones para que puedan seguir tu blog, usando una sóla imagen, de ese modo, no afectamos tanto la carga del blog. Hoy veremos otras opciones de iconos, usando texto emergente o tooltip con animación que conseguiremos con CSS3.

Preparé cuatro opciones con iconos y efectos distintos, pero usando el mismo efecto en el tooltip y estilo similar al que veía en Marcofolio, la técnica que usa no ofrece el sprite con los iconos, pero decidí adaptarlo, y usar una sola imagen.

Sólo elige el estilo que más te guste y/o se adapte a tu blog, y pones en tu plantilla, el código CSS y el código HTML de los botones que elegiste, siguiendo los pasos que están debajo de todas las opciones ;)

Demostración

CSS Y HTML de cada opción 

Opción 1

 CSS 

/* Botones social*/ul#m-soc{margin: 18px 0 0 10px;padding: 0;width: 280px;height: 66px;}
ul#m-soc:hover li {opacity:0.6;}ul#m-soc li {list-style: none;margin: 4px;padding: 0;float: left;border: none;}
ul#m-soc li a{background:url(http://2.bp.blogspot.com/-Aw_MibBJjy0/T1ky-ufuYrI/AAAAAAAAJFA/-h7XKBtLhvU/s1600/sprite1-compartidisimo.png) no-repeat 0 0; margin: 0;padding:0;display: block;position:relative;width: 48px;height: 48px;overflow: visible;}ul#m-soc li a.twitter{background-position: 0 0;}
ul#m-soc li a.facebook{background-position: -48px 0;}
ul#m-soc li a.google{background-position: -96px 0;}

ul#m-soc li a.youtube{
background-position: -144px 0;}
ul#m-soc li a.rss {
background-position: -192px 0;}
ul#m-soc li a span{background: #555;position:absolute;top:-10px;left:0;width:auto;height:auto;opacity:0;padding:5px;text-align:left;color:#fff;filter:alpha(opacity=0);white-space:nowrap;border-radius:3px;font-size:12px;-webkit-transition: all 0.25s ease-in-out;-moz-transition: all 0.25s ease-in-out;-o-transition: all 0.25s ease-in-out;-ms-transition: all 0.25s ease-in-out;transition: all 0.25s ease-in-out;}ul#m-soc li:hover{opacity:1}
ul#m-soc li a:hover{text-decoration:none}ul#m-soc li a:hover span{ opacity:.8;filter:alpha(opacity=80);top:-23px}

HTML

<ul id="m-soc">
<li><a class="twitter" href="#"><span>Seguir en Twitter</span></a></li><li><a class="facebook" href="#"><span>Facebook</span></a></li><li><a class="google" href="#"><span>Google+</span></a></li><li><a class="youtube" href="#"><span style="border:0;">YouTube</span></a></li>
<li><a class="rss" href="#"><span style="border:0;">Suscríbete</span></a></li></ul>

Opción 2

 CSS 

/* Botones social2*/
ul#m-soc2{  
margin: 18px 0 0 10px;padding: 0;width: 220px;height:50px;}
ul#m-soc2 li{
list-style: none;margin: 7px;padding: 0;float:left;border: none;}
ul#m-soc2 li a{
background: url(http://1.bp.blogspot.com/-WEUoFdODkl4/T1klwzMGoSI/AAAAAAAAJDU/RLpgmO0OHjs/s1600/sprite2-compartidisimo.png) no-repeat 0 0;
margin:0;padding:0;display: block;position:relative;
width: 33px;
height: 33px;
overflow: visible;
}
ul#m-soc2 li a.twitter{
background-position: 0 0;
}
ul#m-soc2 li a.facebook{
background-position: -33px 0;
}
ul#m-soc2 li a.google{
background-position: -66px 0;
}
ul#m-soc2 li a.rss{
background-position: -99px 0;
}
ul#m-soc2 li a.twitter:hover{
background-position: 0 -33px;
}
ul#m-soc2 li a.facebook:hover{
background-position: -33px -33px;
}
ul#m-soc2 li a.google:hover {
background-position:-66px -33px;
}
ul#m-soc2 li a.rss:hover{
background-position:-99px -33px;
}
ul#m-soc2 li a span{
background: #555;position:absolute;
top:-10px;left:-10px;width:auto;height:auto;opacity:0;
padding:3px;text-align:left;
color:#fff;filter:alpha(opacity=0);
white-space:nowrap;border-radius:3px;font-size:12px;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;} ul#m-soc2 li a:hover{text-decoration:none} 
ul#m-soc2 li a:hover span{
opacity:.7;
filter:alpha(opacity=70);
top:-23px}

 HTML 

<ul id="m-soc2"><li><a class="twitter" href="#"><span>Twitter</span></a></li><li><a class="facebook" href="#"><span>Facebook</span></a></li><li><a class="google" href="#"><span>Google+</span></a></li><li><a class="rss" href="#"><span>Suscríbete</span></a></li></ul>

Opción 3

 CSS 

/* Botones social3*/
ul#m-soc3{  
margin: 18px 0 0 10px;padding: 0;width: 220px;height:50px;}
ul#m-soc3 li{list-style: none;margin: 4px;padding: 0;float:left;border: none;}
ul#m-soc3 li a {
background:url(http://2.bp.blogspot.com/-1iSzINNp5eg/T1kraVj3_gI/AAAAAAAAJEE/WP_5VVhaVjg/s1600/sprite3-compartidisimo.png) no-repeat 0 0; margin:0;padding:0;display: block;position:relative; width: 33px;height: 33px;overflow: visible; 
}
ul#m-soc3 li a.rss{
background-position: 0 0;
}
ul#m-soc3 li a.twitter{
background-position: -33px 0;
}
ul#m-soc3 li a.facebook{
background-position: -66px 0;
}
ul#m-soc3 li a.google{
background-position: -99px 0;
}
ul#m-soc3 li a span{
background: #555;position:absolute;
top:-5px;left:-10px;width:auto;height:auto;opacity:0;
padding:3px;text-align:left;
color:#fff;filter:alpha(opacity=0);
white-space:nowrap;border-radius:3px;font-size:12px;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
} ul#m-soc3 li a:hover{text-decoration:none} 
ul#m-soc3 li a:hover span{
opacity:.7;
filter:alpha(opacity=70);
top:-23px}

 HTML 

<ul id="m-soc3">
<li><a class="rss" href="#"><span>Suscríbete</span></a></li><li><a class="twitter" href="#"><span>Twitter</span></a></li><li><a class="facebook" href="#"><span>Facebook</span></a></li><li><a class="google" href="#"><span>Google+</span></a></li></ul>

Opción 4

 CSS 

/* Botones social4*/
ul#m-soc4{  
margin: 18px 0 0 10px;padding: 0;width: 250px;height:55px;}
ul#m-soc4 li{
list-style: none;margin: 4px;padding: 0;float:left;border: none;}
ul#m-soc4 li a {
background: url(imagen.png) no-repeat 0 0;width:41px;height:40px;
margin:0;padding:0;display: block;position:relative;
overflow: visible;
}
ul#m-soc4 li a.twitter{
background-position: 0 -41px;
height:38px;
}
ul#m-soc4 li a.facebook{
background-position: -41px -40px;
}
ul#m-soc4 li a.google{
background-position:-82px -40px;
}
ul#m-soc4 li a.youtube{
background-position:-123px -40px;
}
ul#m-soc4 li a.rss{
background-position:-164px -40px;
}
ul#m-soc4 li a.twitter:hover{
background-position: 0 0;
}
ul#m-soc4 li a.facebook:hover{
background-position: -41px 0;
}
ul#m-soc4 li a.google:hover{
background-position: -82px 0;
}
ul#m-soc4 li a.youtube:hover{
background-position: -122px 0;
}
ul#m-soc4 li a.rss:hover{
background-position: -163px 0;
}
ul#m-soc4 li a span{
background: #555;position:absolute;
top:-10px;left:-10px;width:auto;height:auto;opacity:0;
padding:3px;text-align:left;
color:#fff;filter:alpha(opacity=0);
white-space:nowrap;border-radius:3px;font-size:12px;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
} ul#m-soc4 li a:hover{text-decoration:none} 
ul#m-soc4 li a:hover span{opacity:.8;
filter:alpha(opacity=80);
top:-23px}

 HTML 

<ul id="m-soc4"><li><a class="twitter" href="#"><span>Twitter</span></a></li><li><a class="facebook" href="#"><span>Facebook</span></a></li><li><a class="google" href="#"><span>Google+</span></a></li><li><a class="youtube" href="#"><span>YouTube</span></a></li><li><a class="rss" href="#"><span>Suscríbete</span></a></li></ul>

Cómo poner los botones en tu blog paso a paso

Vas a necesitar los dos códigos para que funcionen los botones, el que dice "CSS", y que dice "HTML" debajo de cada opción.

Paso 1. Ve a Plantilla > Diseñador de plantillas > Avanzado > Añadir CSS y en el campo pones el código CSS de los botones que elegiste, y guarda los cambios en "Aplicar al Blog".

Paso 2. Ve a Diseño, o a elementos de la página en la vieja interfaz, y pega el código HTML de los botones que elegiste, en la columna lateral u otra sección, eligiendo la opción HTML/Javascript. Sustituye la almohadilla (#) por la dirección web de tu página en cada red social respectivamente. También puedes cambiar el texto del tooltip si así lo deseas. Luego guardas los cambios.

Notas:
El efecto deslizante no funciona en IE, fuera de eso todo funciona bien.
Puedes invertir la posición de los iconos donde se usan dos columnas de iconos en el sprite.
Puedes descartar un icono, eliminando el CSS y el HTML que corresponda a éste.

Actualizaciónes: He agregado la imagen del sprite en el CSS, está resaltada con rojo, de todos modos, te recomiendo ámpliamente que la alojes por tu propia cuenta, para evitar problemas ;)

20/marzo/2012: Agregué una linea de código en el CSS, para que no se subraye el texto, en el texto del tooltip, esto ocurre sólo en las plantillas que tienen una regla que hace que se agregue el subrayado a todos los textos de los enlaces en la plantilla, al poner el puntero del ratón sobre un enlace.

Actualicé los iconos de Google Plus en las opciones 1,2 y 3. Ahora son coloraditos...

Créditos por los iconos:
Desing Kindle
designdeck.co.uk
danieleckermann
xeloader


No olvides compartirlo, sólo toma unos segundos ;)

Resueltos los problemas en los comentarios anidados con la actualización de Blogger

Hubo una actualización de Blogger en el script de los comentarios anidados, que resuelve los siguientes problemas, según compruebo, y que a muchos nos causó dolores de cabeza:

• El problema de incompatibilidad con el widget de perfil de Twitter.
• El problema de que al entrar a un post, la página daba un salto hasta el fondo, específicamente al formulario de comentarios, en navegadores como Firefox, Internet Explorer y Opera.
• Se ponía la página en blanco en Internet explorer, al ingresar a un post.
• El problema de compatibilidad con scriptaculous.

Si usas plantillas personalizadas, muy probablemente tendrás que hacer la actualización del script manualmente, antes de hacerlo te recomiendo guardar una copia de seguridad de tu plantilla por si pegas algo mal, y verificar en vista previa que todo luzca bien, antes de guardar el cambio.  

Si no lo haces, seguramente tendrás problemas, y el enlace de "Responder" no funcionará. Al parecer también hubo cambios en el HTML de los comentarios, y si tenias cambios en esa parte, como personalizar el mensaje que aparece arriba de el formulario, probablemente habrá que modificarlo un poco para que se vea como quieres, aunque esto no afecta el funcionamiento de los comentarios.

Cuéntanos tu experiencia :)

Miles de ideas de decoración para inspirarte

Houzz es un sitio increíble, perfecto para los amantes de la decoración de interiores y exteriores. Actualmente cuenta con un repertorio enorme de fotografías que los mismos usuarios suben, entre ellas, fotografías de los portafolios de diseñadores profesionales en interiorismo, arquitectos, aficionados o entusiastas de la decoración, etc.

Puedes buscar fácilmente fotografías basándote en el estilo que quieras ver, por ejemplo, asiático, tradicional, contemporáneo, etc, y a su vez, filtar los resultados según el espacio que te interesa, como cocina, habitación para el bebé, terraza, porche, jardín, etc.

Al abrir una cuenta, que por supuesto es gratuita, puedes guardar tu colección de fotografías favoritas o "Idealbooks", para tenerlas siempre disponibles, o compartirlas en tu sitio web o blog, u otros medios, y a su vez, puedes subir fotografías de tus propios proyectos de decoración de tu casa u oficina, etc, y añadir la dirección web de tu página o blog, siendo esto último ideal para profesionales en el ramo que busquen promover sus servicios, sobre todo para quienes residen en Estados Unidos.

Hace tiempo visito este sitio, y más de una vez me a servido de inspiración en el desarrollo de un proyecto de decoración en mi casa; así que si que si andas en busca de ideas para algún proyecto en tu hogar u oficina, echa un vistazo, seguramente encontrarás inspiración.

¿No funciona el enlace de "Responder" de los comentarios anidados?, prueba esta solución...

Desde ayer por la tarde, empecé a tener problemas con los comentarios, no funcionaba el enlace de "Responder",  me extrañó, y empece a preguntar si a otros les pasaba en G+ y Twitter,  y desde G+ el Potro de Ciudad Blogger me comentaba que desde hace aproximadamente dos semanas, empezó a tener algunos problemas de forma esporádica.

Decidí averiguar un poco, y empecé por el script de los comentarios (me alegra haberlo hecho) sustituyéndolo en mi plantilla por el script de una plantilla sin modificaciones de Blogger, y santo remedio, empezó a funcionar el enlace.

Actualización explicándolo paso a paso:
Si tienes el mismo problema muy probablemente se deba a que no tienes en tu plantilla una actualización que hizo Blogger al sistema de comentarios anidados, y tendrás que hacerlo manualmente:

Cómo hacerlo paso a paso

Paso 1. Ve a la Edición de HTML de la plantilla, marca la casilla de expandir plantillas de artilugios, y busca la parte del código que marque de rojo, con la ayuda de ctrl F, en algunas ocaciones, según me han comentado, esa parte si se actualiza, y ya aparece como async='async', el problema entonces es el script que está debajo y que puse de color morado:

<script defer='defer' expr:src='data:post.commentSrc' type='text/javascript'/>
  <script type='text/javascript'>
    (function() {
      var items = <data:post.commentJso/>;
      var msgs = <data:post.commentMsgs/>;
      var postId = &#39;<data:post.id/>&#39;;
      var feed = &#39;<data:post.commentFeed/>&#39;;
      var authorName = &#39;<data:post.author/>&#39;;
      var authorUrl = &#39;<data:post.authorUrl/>&#39;;
      var blogId = &#39;<data:top.id/>&#39;;
      var baseUri = &#39;<data:post.commentBase/>&#39;;
      var maxThreadDepth = &#39;<data:post.commentMaxThreadDepth/>&#39;;
// <![CDATA[
      feed += '?alt=json&v=2&orderby=published&reverse=false&max-results=50';
      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) {
                console.log(entry.gd$extendedProperty[k].name + ' - ' + entry.gd$extendedProperty[k].value);
                if (entry.gd$extendedProperty[k].name == 'blogger.itemClass') {
                  comment.deleteclass += ' ' + entry.gd$extendedProperty[k].value;
                }
              }
            }
            comments.push(comment);
          }
        }
        return comments;
      };
      var paginator = function(callback) {
        if (hasMore()) {
          var url = feed;
          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 == authorName
              && comment.author.profileUrl == authorUrl;
          return matches ? 'true' : '';
        } else if ('deletelink' == key) {
          return baseUri + '/delete-comment.g?blogID=' + 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 tok = 'comment-form_';
      var hash = window.location.hash || '';
      var startThread = hash.indexOf(tok) == 1 ? hash.substring(tok.length + 1) : undefined;
      // Configure commenting API:
      var configJso = {
        'maxDepth': maxThreadDepth
      };
      var provider = {
        'id': postId,
        'data': items,
        'loadNext': paginator,
        'hasMore': hasMore,
        'getMeta': getMeta,
        'onReply': onReply,
        'rendered': true,
        '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>

Paso 2. Ya que encontarste todo ese código, lo sustituyes por el siguiente, si el primer script (y que puse de azul) ya aparecía actualizado, es decir ya aparece como async='async',  entonces, sólo sustituyes el que está debajo:

<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;
                }
              }
            }
            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>

Nota: El código anterior, lo estoy tomando de una plantilla de Blogger sin editar, que ha sido actualizada.

Paso 3. Verifica en vista previa que todo luce bien, y si es así guarda los cambios.

Espero sea útil, ya me contarás...

Ultima actualización:  febreo 25, 2012.

Deshabilitar el botón derecho del mouse: ¿una acción innecesaria o un mal necesario?

Te decides a compartir tus conocimientos y experiencias en un blog o sitio web, y te invade la duda de si deberías o no proteger el contenido contra el plagio, cosa bastante común en la red.

Luego, investigando, te das cuenta de que puedes deshabilitar el botón derecho del mouse, para frustar los intentos de aquellos que no vacilan en copiar lo que tanto te costó redactar, o bien esas imágenes a las que dedicaste tanto trabajo y esfuerzo.

Pero, ¿será la mejor opción deshabilitar el botón derecho del mouse, para evitar que te copien tu contenido?  Reflexionemos un poco sobre esto.

¿Por qué no hacerlo?

Es limitante, y  puede resultar molesto, desconcertante, incluso insultante
No todos los usuarios de tu blog, estarán pensando en copiar tu contenido, y entre ellos seguramente habrá usuarios que utilicen constantemente todas aquellas opciones que trae consigo el navegador a través del botón derecho del mouse.

Al inhabilitar esta función, los usuarios se verán imposibilitados a usar dichas opciones y peor aún, podrían molestarse por tan drástica decisión que tomaste, incluso, podrían dejar de visitar tu blog.

Es inútil
Puede copiar el contenido no sólo desde tu blog, sino a través del feed, si por ejemplo facilitas a tus usuarios la suscripción a tu sitio por medio del correo electrónico. Desde sus bandejas de correo lo pueden copiar sin problemas, a menos que hayas cambiado la opción, y no reciban el post completo.

No es un remedio infalible
Además el método comúnmente usado no es infalible, ya que investigando un poco, sabrán que es posible habilitar el botón derecho del mouse de nuevo, con seguir unos simples pasos.

Piensa esto: al final de cuentas, cualquier usuario que esté decidido a copiar tu contenido lo hará, aún pongas miles de trampas.

Y ¿qué si sólo deshabilito el botón derecho del mouse para que no copien las imágenes?

Para el caso de las imágenes, el usuario puede hacer una captura de pantalla y santo remedio, de todos modos se llevarán la imagen.

Pienso que si se quiere proteger imágenes, ya sea por que éstas se venden, etc, deberían publicarse en un tamaño más pequeño que el original,  y ponerse marca de agua, cosa que hacen aquellas páginas que se dedican a vender gráficos online.

Sin duda podemos usar alternativas más amigables, cuando se intenta proteger las imágenes, sin afectar tanto a los usuarios de nuestro sitio, siendo claros con los términos de uso que le pueden dar a éstas y en general a todo tu contenido.

Y ¿qué si alguien copia mi contenido?

Como usuario de Blogger, puedes reportar cualquier infracción de derechos de autor, completando este formulario, te puedo asegurar que si tomarán cartas en el asunto, aunque antes, no descartes la posibilidad de ponerte en contacto con el administrador del sitio que está usando tu contenido sin previa autorización, de ese modo, quizás no sea necesario tomar medidas más drásticas.

+ información y otros puntos de vista:
Don't disable right click
Deshabilitar el botón derecho del mouse en una página...
Si nos copian...

Imagen obtenida de:
tips4pc.com

Gracias, muchas gracias

Reitero mi total y sincero agradecimiento a todos y cada uno de ustedes por estar al pendiente de mi, por toda la buena vibra transmitida en sus comentarios tan bonitos y llenos de buenos deseos. Ya estoy recuperada gracias a Dios.

En estos momentos sigo contestando los comentarios pendientes y que recibí durante mi ausencia, sobre preguntas y dudas en los diferentes tutoriales, etc, espero no saltarme ninguno, y si es así, recuérdamelo por favor.

Gracias por estar :D