Ciudad Blogger

Inicio » Archivos de agosto 2011

Yahoo! Web Player: Reproductor de MP3 y videos

Menú vertical desplegable tipo acordeón con jQuery

Bombay TV: Una película con tus propios subtítulos

Qué hacer si... Me copiaron el blog

Es un hecho que hay distintos tipos de entradas, esto varía en función de las cualidades del autor, y de la temática del blog. Así que seguro habrá entradas donde el autor comparta un video que le gustó, relate como estuvo su día, o simplemente se queje de lo mal que lo trata la vida.

Pero otros en cambio, crean artículos más elaborados o más artísticos. Así que algunos autores pueden dedicar varias horas en componer una entrada, horas dedicadas a la investigación, creación de imágenes, práctica, corrección, redacción, y todo aquello que deje una entrada tal como el autor la visualizó en su mente. Y un día, de repente, el autor se entera que esa entrada a la que le dedicó tiempo y esfuerzo, fue copiada y publicada por alguien más.

Está claro que, salvo que sea privado, cualquier contenido que se sube a la red está disponible para todos. Pero ojo, que, publicar, no es sinónimo de dominio público.

Seguro que muchas veces queremos que nuestras publicaciones sean conocidas, y compartidas en todo el mundo, pero un copy & paste no es la manera más ética de hacerlo, ni mucho menos, atribuirnos el trabajo de alguien más.

Es por ello que Gerard, empleado de Google dice:

"Cualquier material fruto de tu creación está inmediatamente protegido por leyes de protección de los derechos del autor. En el caso específico de Blogger seguimos la ley DMCA estadounidense."

Ante esa situación, hay dos variantes, que quien ha plagiado el contenido lo publique en un servicio que no pertenezca a Google, o que lo publique en un servicio de Google, como por ejemplo en Blogger.

Si el contenido copiado está en Blogger, podemos usar un formulario para notificar la presunta infracción. Dicho formulario se encuentra en el siguiente enlace:

[Notificación de presunta infracción de derechos de autor: Blogger]

Ese formulario es el que recomienda la DMCA (Digital Millennium Copyright Act), o sea la ley estadounidense de derechos de autor. Y una copia de este se envía a Chilling Effects, que es la organización que recopila y publica las quejas de los denunciantes por material plagiado en Internet.

Antes de completar el formulario, debes plantearte si en verdad el contenido que reclamarás es completamente tuyo, de lo contrario, si incluyes información falsa por derechos que no te pertenecen entonces podrías terminar pagando varios miles de dólares a causa de honorarios de abogados. Pero sí estás seguro que el contenido es tuyo, entonces puedes proceder.

En él deberás poner tu nombre completo, el nombre de tu empresa (sólo si aplicara el caso), nuevamente tu nombre completo, dirección de correo electrónico, y tu país de residencia.

Luego, en Ubicación del ejemplo autorizado del material debes explicar cuál es el material protegido y dónde se encuentra, por ejemplo: "Estas entradas son obra mía y fueron publicadas primeramente en miblog.com", o "La fotografía de la puerta azul es de mi pertenencia".

Después, en Identifique y describa el material protegido por derechos de autor agrega la o las URLs de tu blog donde se encuentra el material original, por ejemplo:

"http://nombre-de-mi-blog.com/2011/08/poema.html"

En la siguiente área deberás agregar la o las URLs donde se encuentra el material que te copiaron, por ejemplo:

"http://ejemplo.blogspot.com/2010/11/entrada.html"

Si es más de una URL haz click en el enlace 'Añadir un campo adicional' para agregar una URL más.

Por último selecciona la fecha de tu denuncia, marca las casillas donde estás de acuerdo con los términos, y escribe nuevamente tu nombre, el cual deberá ser exactamente igual a como lo escribiste anteriormente.

Casi de inmediato deberá llegarte un correo con la copia de tu reclamación. Y si todo sale bien en aproximadamente dos días o una semana las entradas de quien te copió habrán sido eliminadas.

Algunas veces podrán enviarte un correo diciéndote que esos enlaces del presunto infractor fueron removidos, otras veces no te avisarán.

Eso es si las entradas duplicadas se encuentran en Blogger, si están en otro lado que no sea un servicio de Google entonces ese formulario no te servirá, pues Blogger no puede remover enlaces de otros sitios que no le pertenecen. En esos casos debes ponerte en contacto con el administrador de ese sitio para solicitarle que remueva el material, o que incluya la fuente del artículo original. Si el administrador no lo hace, y si dispones de tiempo y energía, tendrás que iniciar una denuncia formal acorde a las leyes de tu país.

Y si estás del otro lado de la moneda, no hagas copy & paste, publica contenido original. Ciertamente puedes publicar algo de lo que ya otros han hablado, pero puedes hacerlo con un punto de vista diferente, seguro tendrás algo más que aportar a ese tema, incluso puedes hacerlo más interesante.

Y si tu pereza es más grande que tu creatividad, primero pide permiso al autor para publicar su material, y agrega un enlace a la fuente original.

Por supuesto en estos temas hay opiniones divididas, habrá quienes están a favor, y otros en contra. Probablemente. Pero quienes sí quieran hacer válidos sus derechos de autor pueden hacer su reclamación pertinente, y los que no, pues no.

Tal vez haga falta recordar que NO existe un método 100% seguro para evitar que te copien contenido de tu blog, aunque hay una docena de métodos para bloquear contenido, hay tres docenas más de métodos para eludirlos.

Referencia | Foro de ayuda de Blogger

Incluir los FeedFlare de Feedburner en el feed (y en el blog)

El Fanbox de Facebook, flotante y con efecto deslizante

Aunque Facebook Slide Likebox es una extensión de Joomla también podemos usarlo en Blogger.

Se trata de un gadget que muestra una pestaña en un extremo del blog, y al pasar el cursor sobre ella aparece el fanbox de Facebook con un efecto deslizante. Puedes verlo en esta misma entrada, se encuentra en el lado derecho de la ventana.

El gadget funciona con jQuery que es el que le da ese efecto deslizante, así que usaremos ese script, un poco de CSS y el FanBox de Facebook.

Lo primero es entrar en Diseño | Edición de HTML y antes de </head> pega el script:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

<script type="text/javascript">
jQuery.noConflict();
jQuery(function (){
jQuery(".slide_likebox").hover(function(){
jQuery(".slide_likebox").stop(true, false).animate({right:"0"},"medium");
},function(){
jQuery(".slide_likebox").stop(true, false).animate({right:"-250"},"medium");
},500);
return false;
});
</script>

Ahora antes de ]]></b:skin> agrega los estilos:

.slide_likebox {
float:right;
width:288px;
height:345px;
background: url(https://lh6.googleusercontent.com/-VW_GzzYnZJ0/TkiZQFcBc2I/AAAAAAAABmg/fa9_qWV8Cu4/fb_bg.png) no-repeat !important;
display:block;
right:-250px;
padding:0;
position:fixed;
top: 130px;
z-index:1002;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.likeboxwrap {
margin-top:2px;
margin-left:-5px;
width:238px;
height:325px;
background-color:#fff;
overflow:hidden;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.likeboxwrap iframe {margin:-1px}

Por último entra en Diseño | Elementos de la página | Añadir gadget | HTML/Javascript y ahí pega esto:

<div class="slide_likebox"> <div style="color: rgb(255, 255, 255); padding: 8px 5px 0pt 50px;"><span><div class='likeboxwrap'><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fnombre-de-tu-pagina-de-facebook&width=240&colorscheme=light&connections=15&stream=false&header=false&height=350" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:240px; height:320px;" allowtransparency="true"></iframe></div></span></div></div>

Ese código contiene el Fanbox, así que cambia donde se indica el nombre de tu página, y listo.
No requiere muchos pasos ni mayor trabajo, a menos que quieras hacerle modificaciones.

La pestaña, así como el fondo del gadget es una imagen, así que si deseas cambiarle el color o tamaño tendrás que editar la imagen que se encuentra en el área de los estilos.
Lo ideal sería no modificar el tamaño, pero en caso de que desees hacerlo deberás -como dije- editar la imagen, cambiar las medidas tanto en los estilos como en el Fanbox, pero además mirar la entrada donde hablamos cómo agregar el fanbox sin borde, pues ese mismo procedimiento hemos usado aquí también, así que ahí podrás ver qué se necesita restar en las medidas del Fanbox.

Pero claro, eso es sólo si quieres modificar su tamaño, sino entonces no necesitarás nada más que los tres primeros pasos y podrás tener este Fanbox de Facebook, flotante y con efecto deslizante en tu blog.

Cambiar el nombre a los datos del post-footer

Anteriormente vimos cómo cambiar de lugar los datos del post-footer, vimos la forma de ponerlos debajo del título de la entrada. Ahora veremos cómo cambiarle el nombre a esos datos, por ejemplo, que en lugar de que diga 'Etiquetas' diga 'Categorías', o en lugar de 'Publicado por' diga 'Autor'.

Si usas una plantilla original de Blogger entonces la cosa es sumamente sencilla pues el mismo Blogger nos da la opción de cambiar los datos del post footer, sólo entra en Diseño | Elementos de la página y da click en Editar sobre el elemento Entradas del blog.

Ahí verás marcadas las opciones que aparecen (o debieran aparecer) al pie de tus entradas.

En esa ventana verás en los recuadros, el título que aparece en cada uno de esos datos:

Publicado por
en
comentarios
Etiquetas
Reacciones
ubicación

Todos esos nombres los puedes cambiar ahí mismo por los que quieras. Guarda los cambios y listo, los nuevos nombres aparecerán en el post-footer de tus entradas.

Si tu plantilla no es original de Blogger entonces podría existir la posibilidad de que ya tenga los nombres cambiados desde la plantilla, en esos casos expande los artilugios y con CTRL + F busca el nombre que aparece, por ejemplo 'Posted by', y cámbialo por el que quieras.

Aun si tuvieras una plantilla original de Blogger también puedes hacer estos cambios de nombres directo en la plantilla. Sólo entra en Diseño | Edición de HTML, marca la casilla Expandir plantillas de artilugios, busca el código correspondiente a cada área:

Para cambiar el Publicado por

<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<b:if cond='data:post.authorProfileUrl'>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
<meta expr:content='data:blog.blogId' itemprop='articleBody/aiaBlogId'/>
<meta expr:content='data:post.id' itemprop='articleBody/aiaPostId'/>
<a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
<span itemprop='name'><data:post.author/></span>
</a>
</span>
<b:else/>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<meta expr:content='data:blog.blogId' itemprop='articleBody/aiaBlogId'/>
<meta expr:content='data:post.id' itemprop='articleBody/aiaPostId'/>
<span itemprop='name'><data:post.author/></span>
</span>
</b:if>
</b:if>
</span>

Para cambiar la palabra En

<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
</b:if>
</b:if>
</span>

Para cambiar la palabra Etiquetas

<span 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 != "true"'>,</b:if>
</b:loop>
</b:if>
</span>

Para cambiar la palabra Comentarios

<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</b:if>
</span>

Para cambiar Ubicación

<span class='post-location'>
<b:if cond='data:top.showLocation'>
<b:if cond='data:post.location'>
<data:postLocationLabel/>
<a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
</b:if>
</b:if>
</span>

Cambia las partes en rojo por los nombres que quieras darles y listo. En el caso de los comentarios hay dos líneas que cambiar, la primera corresponde a la palabra en singular (cuando sólo hay 1 comentario), y la segunda a la palabra en plural.

Si estos datos no los tienes entonces puedes agregarlos marcando las casillas de esos datos dentro de Entradas del blog, y si eso no fuera suficiente entonces puedes agregarlos directamente debajo de <div class='post-footer'>

Agregar botones de redes sociales en el blog

Estos son unos botones muy sencillos pero muy prácticos para que nuestros lectores puedan seguirnos en las diferentes redes sociales. No es nada del otro mundo, sólo son iconos agrupados en una lista que tienen un efecto pushbutton al pasar el cursor sobre ellos.

Los botones son tres: Google +, Facebook, y Twitter, pero se pueden agregar más.

Puedes verlos en esta misma entrada.

Para poner estos botones de las redes sociales en tu blog sólo entra en Diseño | Edición de HTML y antes de ]]></b:skin> agrega los siguientes estilos:

/* Botones de Redes Sociales
----------------------------------------------- */
.BotonesSociales li {
border:1px solid #6E6E6E !important; /* Color del borde */
padding:5px !important;
margin:0 5px 6px 5px;
background:#ccc; /* Color de fondo */
list-style:none;
}
.BotonesSociales li a {
font-weight:bold; /* Texto en negrita */
text-decoration:none;
color:#1C1C1C !important; /* Color del texto */
}
.BotonesSociales li a:hover {
color:#2E9AFE !important; /* Color del texto al pasar el cursor */
position:relative;
top:1px;
left:1px;
}
.BotonesSociales span {
padding-left:10px;
}
.BotonesSociales img {
vertical-align:middle;
border:0;
}

Ahora entra en Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript, y ahí pega esto:

<ul class="BotonesSociales">
<li><a href="https://plus.google.com/u/0/usuario"><img src="https://lh4.googleusercontent.com/-Jgd9rk6kRYM/TkC3KlKR6YI/AAAAAAAABl0/26vANOtT7LI/google_plus.png" /> <span>Agrégame en tus círculos</span></a></li>
<li><a href="http://www.facebook.com/usuario"><img src="https://lh3.googleusercontent.com/-cEItxWOllgk/TkC3K99nKrI/AAAAAAAABl8/vS3V49UFD2o/facebook.png" /> <span>Hazte fan en Facebook</span></a></li>
<li><a href="http://twitter.com/usuario"><img src="https://lh3.googleusercontent.com/-jchNp-BEnME/TkC3Kxs3yuI/AAAAAAAABl4/c2Z8_KkFWTs/twitter.png" /> <span>Sígueme en Twitter</span></a></li>
</ul>

Para finalizar cambia los nombres de usuario o ID donde se indica en color rojo y listo. Puedes modificar la apariencia cambiando los estilos en las anotaciones que están de color verde dentro del primer código.

Si quieres agrega más botones sólo añade antes de </ul> una línea como esta por cada botón extra cambiando la URL del enlace, la URL de la imagen y el texto:

<li><a href="URL del enlace"><img src="URL de la imagen" /> <span>Texto</span></a></li>

Y ahora sí, es todo.

Configurar dominio de Name.com en Blogger

Cuando los gadegts no se pueden guardar

Mostrar una cabecera diferente en las entradas del blog

En la entrada anterior vimos cómo mostrar una cabecera diferente en cada página de etiquetas, y algunos han preguntado si puede hacerse lo mismo pero con las entradas, es decir, que en la portada se muestre la cabecera de siempre, pero al ingresar a las entradas se muestre otra cabecera.

El procedimiento aquí es mucho más sencillo y menos complicado que el anterior pues sólo haremos dos condiciones. Uno que hará que la primera cabecera no se muestre en las entradas y otro para que la segunda cabecera sólo sea visible al ingresar a las entradas individuales.

Puedes ver un ejemplo en este blog de pruebas, al ingresar en algún post verás que la cabecera ha cambiado.

Lo primero que haremos será entrar en Diseño | Edición de HTML y SIN expandir los artilugios buscamos esta línea:

<b:widget id='Header1' locked='true' title='Nombre de mi blog (cabecera)' type='Header'/>

Justo debajo de ella agrega esta línea:

<b:widget id='Header2' locked='true' title='Nombre de mi blog (cabecera)' type='Header'/>

Con eso ya tenemos las dos cabeceras que necesitamos, ahora vamos a condicionarlas.
Para ello agrega antes de </head> lo siguiente:

<b:if cond='data:blog.pageType == "item"'>
<style>
#Header1 {display:none;}
body#layout #Header1 {display:block !important;}
</style>
</b:if>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
#Header2 {display:none;}
body#layout #Header2 {display:block !important;}
</style>
</b:if>
<b:if cond='data:blog.pageType == "archive"'>
<style>
#Header2 {display:none;}
</style>
</b:if>
<b:if cond='data:blog.pageType == "index"'>
<style>
#Header2 {display:none;}
</style>
</b:if>
<b:if cond='data:blog.pageType == "static_page"'>
<style>
#Header2 {display:none;}
</style>
</b:if>

Y listo. Por último entra en Diseño | Elementos de la página y verás las dos cabeceras, la primera es la que se muestra en la portada, y la segunda la que se mostrará en las entradas individuales.

Ahí puedes darle click en Editar para cambiarle la imagen que quieras. Fue rápido ¿no?
Es una forma sencilla de mostrar una cabecera diferente en las entradas del blog.

Mostrar una cabecera diferente en las etiquetas

Me preguntaba el otro día pixeltuxpan si era posible mostrar una cabecera distinta por cada etiqueta del blog. La respuesta es sí, aunque no sé si haya un método más fácil pero este es el único que se me ocurre por ahora. Se trata de usar las condicionales para elegir dónde ocultar elementos del blog.

Lo que haremos será agregar una cabecera adicional por cada etiqueta que tengamos y la condicionaremos para que sólo se muestre ahí.
Puedes ver un ejemplo en este blog de pruebas; en la portada verás la cabecera estándar, pero si navegas por las etiquetas del blog (Deportes, Juegos, Música) verás que aparece una cabecera diferente en cada una de esas páginas de etiquetas.

Así que mostraremos una cabecera distinta en cada página de etiquetas del blog. Pero en la portada, entradas, páginas independientes y páginas de archivo se verá la misma cabecera de siempre que usas en el blog.

Empecemos, primero entra en Diseño | Edición de HTML y SIN expandir los artilugios busca esta línea:

<b:widget id='Header1' locked='true' title='Nombre de mi blog (cabecera)' type='Header'/>

Justo debajo de ella agrega esta línea:

<b:widget id='Header2' locked='true' title='Nombre de mi blog (cabecera)' type='Header'/>

Agrega una línea como esa por cada etiqueta que tengas, sólo deberás cambiar el ID de la cabecera (lo que está en color rojo), por ejemplo, si agregas una más sería Header3, luego Header4, y así consecutivamente. Nunca deberán repetirse los IDs.

Por ejemplo, si hubieses agregado tres cabeceras entonces se vería así:

<b:widget id='Header2' locked='true' title='Nombre de mi blog (cabecera)' type='Header'/>
<b:widget id='Header3' locked='true' title='Nombre de mi blog (cabecera)' type='Header'/>
<b:widget id='Header4' locked='true' title='Nombre de mi blog (cabecera)' type='Header'/>

Con eso ya tendrás todas las cabeceras de tus etiquetas. Entra en Diseño | Elementos de la página y verás todas las cabeceras que has agregado. Dale click en Editar a cada una de ellas y agrega la imagen que tendrá cada cabecera.

Cuando termines de asignarle su imagen a las cabeceras regresa a Diseño | Edición de HTML. Ahí vamos a condicionar que la cabecera del blog general se oculte en esas etiquetas. Eso lo hacemos agregando antes de </head> lo siguiente:

<b:if cond='data:blog.url != data:blog.homepageUrl'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "archive"'>
<b:if cond='data:blog.pageType != "static_page"'>
<style type='text/css'>
#Header1 {
display: none;
}
</style>
</b:if>
</b:if>
</b:if>
</b:if>

Ahora debajo de ese código agrega este:

<b:if cond='data:blog.url != "URL de la etiqueta UNO"'>
<style type='text/css'>
#Header2 {
display: none;
}
</style>
</b:if>

Agrega un código como este último por cada etiqueta que tengas, y del mismo modo cambia los IDs de las cabeceras (Header3, Header4, etc.). También pon donde se indica la URL de la etiqueta. Nuevamente supongamos que fueron tres cabeceras las que añadiste, entonces se vería así:

<b:if cond='data:blog.url != "URL de la etiqueta UNO"'>
<style type='text/css'>
#Header2 {
display: none;
}
</style>
</b:if>

<b:if cond='data:blog.url != "URL de la etiqueta DOS"'>
<style type='text/css'>
#Header3 {
display: none;
}
</style>
</b:if>

<b:if cond='data:blog.url != "URL de la etiqueta TRES"'>
<style type='text/css'>
#Header4 {
display: none;
}
</style>
</b:if>

Recuerda que deberás pegar un código como ese por cada etiqueta que tengas, y en cada uno de ellos añadir la URL de la etiqueta de cada una.

Y listo, cuando termines podrás ver que en la portada de tu blog tienes la cabecera de siempre, pero si ingresas a la página de una etiqueta tendrás la cabecera que elegiste para esa categoría.

Cuando hayas terminado verás que en los Elementos de la página sólo aparece el gadget de la cabecera original. Si después quisieras editar las otras cabeceras entonces tendrás que quitar momentáneamente el código que pusimos antes de </head>, eso las mostrará todas de vuelta, edítalas y regresa el código de nuevo a su lugar.

Los que tienen muchas etiquetas en su blog seguro ya salieron corriendo pero los que se quedaron seguro podrán complementar este "truco" con el de mostrar una descripción en las etiquetas del blog.

Current DNS Record(s)
Record Type	Record Host	Record Answer	TTL	Priority (MX)	Delete All

Current DNS Record(s)
Record Type	Record Host	Record Answer	TTL	Priority (MX)	Delete All
	.tublog.com

Current DNS Record(s)
Record Type	Record Host	Record Answer	TTL	Priority (MX)	Delete All
A	tublog.com	216.239.32.21	1800		Edit Delete
A	tublog.com	216.239.34.21	1800		Edit Delete
A	tublog.com	216.239.36.21	1800		Edit Delete
A	tublog.com	216.239.38.21	1800		Edit Delete
CNAME	www.tublog.com	ghs.google.com	1800		Edit Delete

Yahoo! Web Player: Reproductor de MP3 y videos

Menú vertical desplegable tipo acordeón con jQuery

Bombay TV: Una película con tus propios subtítulos

Qué hacer si... Me copiaron el blog

Incluir los FeedFlare de Feedburner en el feed (y en el blog)

El Fanbox de Facebook, flotante y con efecto deslizante

Cambiar el nombre a los datos del post-footer

Agregar botones de redes sociales en el blog

Configurar dominio de Name.com en Blogger

Cuando los gadegts no se pueden guardar

Mostrar una cabecera diferente en las entradas del blog

Mostrar una cabecera diferente en las etiquetas

Últimos artículos

Artículos más visitados

Blogs de ayuda

Únete en Facebook

Ciudadanos

Agréganos en Google+

Archivo del blog