Insertar imágenes y vídeos en los comentarios de Blogger

14 de julio de 2014 Publicado por El Potro , Etiquetas:Comentarios , Trucos

¿Te ha pasado que quieres decir algo pero las palabras no son suficientes? A veces eso pasa cuando queremos comentar algo en algún blog, quizá un meme pueda resumir nuestra opinión, o un video pueda complementar nuestro comentario. Por desgracia el formulario de comentarios de Blogger no incluye la opción de subir fotos o incrustar vídeos, pero que Blogger no lo habilite no significa que no se pueda.

Lo que veremos en esta entrada es justamente eso, cómo insertar imágenes y vídeos en los comentarios del blog de una manera tan sencilla que sólo requiere de un paso.
El método que usaremos es similar a lo que hacemos cuando agregamos emoticons en los comentarios, de manera que lo que escribimos en el comentario se reemplaza por otro código, en este caso por el HTML necesario para mostrar las imágenes y los vídeos.

Puedes verlo funcionando en en este blog de pruebas.
Para insertar una imagen usa este código:

[img]URL de la imagen[/img]

Para insertar un video de YouTube o Vimeo usa este código:

[video]URL del video[/video]

Asombroso, ¿no? Y tal como lo prometí, la instalación es de un solo paso. Únicamente entra en Plantilla | Edición de HTML y antes de </body> pega lo siguiente:

<script>
//<![CDATA[
// Insertar imágenes y videos en los comentarios (ciudadblogger.com)
function InsertarImagenVideo(id) {
var IDelemento = document.getElementById(id),
sustituir = IDelemento.innerHTML;
sustituir = sustituir.replace(/\[img\](.[^\]]*)\[\/img\]/ig, "<img class='img-comentarios' src='$1'\/>");
sustituir = sustituir.replace(/\[video\]https:\/\/www\.youtube\.com\/embed\/(.*?)\[\/video\]/ig, "<iframe class='vid-comentarios' src='https://www.youtube.com/embed/$1'><\/iframe>");
sustituir = sustituir.replace(/\[video\](https:\/\/youtu\.be\/|https:\/\/www\.youtube\.com\/watch\?v\=)(.*?)\[\/video\]/ig, "<iframe class='vid-comentarios' src='https://www.youtube.com/embed/$2'><\/iframe>");
sustituir = sustituir.replace(/\[video\](http:\/\/youtu\.be\/|http:\/\/www\.youtube\.com\/watch\?v\=)(.*?)\[\/video\]/ig, "<iframe class='vid-comentarios' src='https://www.youtube.com/embed/$2'><\/iframe>");
sustituir = sustituir.replace(/\[video\](http:\/\/player\.vimeo\.com\/video\/)(.*?)\[\/video\]/ig, "<iframe class='vid-comentarios' src='http://player.vimeo.com/video/$2'><\/iframe>");
document.getElementById(id).innerHTML = sustituir;} InsertarImagenVideo('comment-holder');
//]]>
</script>
<style>

</style>

Debajo del script verás que también hemos colocado unos estilos, estos estilos son para darle un poco de personalización a las imágenes y a los vídeos que se mostrarán en los comentarios, como el borde, la sombra, y el tamaño. En color verde se especifica a qué corresponde cada una de esas áreas. Por supuesto puedes añadir más estilos si lo deseas.

Para que tus lectores sepan que pueden agregar imágenes y vídeos puedes poner un aviso de ello, esto puedes hacerlo desde Configuración | Entradas y comentarios | Mensaje del formulario de comentarios.

Cómo insertar imágenes y videos
En el caso de las imágenes, tú y los comentaristas deberán usar este código:

[img]URL de la imagen[/img]

Y en el caso de los vídeos, tanto de YouTube o Vimeo se usará este código:

[video]URL del video[/video]

En ambos casos deberás poner la URL de la imagen (o el video) donde corresponde.

Cómo obtener la URL de los videos

En YouTube puedes copiar la URL que aparece en la barra de direcciones del navegador cuando te encuentres viendo un video.
También puedes usar la URL que aparece en "Comparte este video".
O también puedes copiar la URL que aparece en el código de inserción dentro de "Insertar vínculo".
Todas estas URLs son válidas para usarse en los comentarios:

https://www.youtube.com/watch?v=GfxAEl15pDs

http://youtu.be/GfxAEl15pDs

https://www.youtube.com/embed/GfxAEl15pDs

Es decir, las que tienen el término watch, las que tienen el acortador youtu.be, y las que incluyen el término embed. Cualquiera de ellas funcionará.

Consideraciones finales.

Este método es únicamente para plantillas que tengan comentarios anidados, o sea, con opción de "Responder". Si tu blog no tiene la opción de "Responder" no funcionará.
Es necesario que los comentarios se muestren debajo de la entrada, y no en ventana emergente, página completa, etc.
Se admiten todos los formatos de imágenes convencionales (JPG, PNG, GIF).
En el caso de los vídeos se aceptan vídeos de YouTube y Vimeo.
Ten en cuenta que la inclusión de imágenes y vídeos en los comentarios pueden reducir la velocidad de carga del blog.

Este tipo de trucos puede resultar muy atractivo y útil en muchos blogs, pero siempre con moderación para no abusar con el número de imágenes y vídeos que podrían ralentizar la carga. Si se le da un buen uso, este tipo de opciones podría mejorar la experiencia del lector al momento de interactuar con el autor y con los demás comentaristas del blog.

Leave a comment

Menú horizontal con buscador expandible

30 de julio de 2014 Publicado por El Potro , Etiquetas: Menús206 comentarios,

El menú horizontal con buscador integrado parece ser uno de los favoritos por muchos blogueros. Esta es una variante, se trata de un menú horizontal con subpestañas y que incluye un buscador que se expande al pasar el cursorsobre él cubriendo casi todo el ancho del menú. Puedes verlo funcionando en este blog de pruebas.

Este menú está hecho únicamente con CSS por lo que no tendrás que preocuparte por la compatibilidad con librerías de scripts, ni con navegadores pues funciona bien con todos los navegadores en sus últimas versiones.

El efecto expandible lo conseguimos también con CSS, y es simple, sólo establecemos que el ancho del buscador sea de 0px en su estado normal, y luego aumentamos el ancho al pasar el cursor sobre él. Juego de niños, ¿no? ;)

ATENCIÓN: Si usas una plantilla original de Blogger primero necesitas seguir los pasos de esta entrada, de lo contrario el menú podría no verse o funcionar correctamente.

Para poner este menú en tu blog entra en la Edición HTML de tu plantilla, y antes de ]]></b:skin> pega los estilos CSS:

#menuBuscador {
position: relative;
width: 95%; /* Ancho del menú */
height: 40px;
padding-left: 14px;
background: #CC2A41; /* Color de fondo */
}
.menusearch {
padding:0;
margin:0;
list-style:none;
position:relative;
z-index:5;
font-family:"Lucida Sans Unicode", "Trebuchet Unicode MS", "Lucida Grande",sans-serif;
}
.menusearch li:hover li a {
background:none;
}
.menusearch li.top {display:block; float:left;}
.menusearch li a.top_link {
display:block;
float:left;
height:40px;
line-height:40px;
color:#fff; /* Color de los títulos */
text-decoration:none;
font-size:14px; /* Tamaño de la fuente */
padding:0 0 0 12px;
cursor:pointer;
}
.menusearch li a.top_link span {
float:left;
display:block;
padding:0 24px 0 12px;
height:40px;
}
.menusearch li a.top_link span.down {
float:left;
display:block;
padding:0 24px 0 12px;
height:40px;
}
.menusearch li a.top_link:hover, .menusearch li:hover > a.top_link {color:#fff;}
.menusearch li:hover {position:relative; z-index:2;}
.menusearch ul,
.menusearch li:hover ul ul,
.menusearch li:hover ul li:hover ul ul,
.menusearch li:hover ul li:hover ul li:hover ul ul,
.menusearch li:hover ul li:hover ul li:hover ul li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

.menusearch li:hover ul.sub {
left:0;
top:40px;
background:#351330; /* Color de fondo del submenú */
padding:3px;
white-space:nowrap;
width:200px;
height:auto;
z-index:3;
}
.menusearch li:hover ul.sub li {
display:block;
height:30px;
position:relative;
float:left;
width:200px;
font-weight:normal;
}
.menusearch li:hover ul.sub li a{
display:block;
height:30px;
width:200px;
line-height:30px;
text-indent:5px;
color:#fff;
font-size:14px;
text-decoration:none;
}
.menusearch li ul.sub li a.fly {
/* Color de fondo del submenú */
background:#351330 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY4YvR7gTWgIFIt7Vlb_gcQxMP8ouIfa5n7qgwn9qclv2JUN9FOe7BsmbbYT3C_SgvMX7w3XtTbwa9FUQB5MJcbG9tfd-J1IgweX4XQTNNNDOvaEIBg09unZ26yFKASh0aX6bWAbdBmVCC//) 185px 10px no-repeat;}
.menusearch li:hover ul.sub li a:hover {
background:#CC2A41; /* Color de fondo al pasar el cursor */
color:#fff;
}
.menusearch li:hover ul.sub li a.fly:hover, .menusearch li:hover ul li:hover > a.fly {
/* Color de fondo al pasar el cursor */
background:#CC2A41 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY4YvR7gTWgIFIt7Vlb_gcQxMP8ouIfa5n7qgwn9qclv2JUN9FOe7BsmbbYT3C_SgvMX7w3XtTbwa9FUQB5MJcbG9tfd-J1IgweX4XQTNNNDOvaEIBg09unZ26yFKASh0aX6bWAbdBmVCC//) 185px 10px no-repeat; color:#fff;}

.menusearch li:hover ul li:hover ul,
.menusearch li:hover ul li:hover ul li:hover ul,
.menusearch li:hover ul li:hover ul li:hover ul li:hover ul,
.menusearch li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul {
left:200px;
top:-4px;
background: #351330; /* Color de fondo del submenú */
padding:3px;
white-space:nowrap;
width:200px;
z-index:4;
height:auto;
}
#search input[type="text"] {
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVG30l_a3Kn4_SsifhEMk5BhvgG4PIxNiWyQCu1Ro5Abhw3r25NBPCASiZytJ-oMRyMq1P8FsB1arqSLwzdvEgOxNvTNdqSL-n2sQCZO0ovIiwZ5V8cW4NHJtgNxZ9OjRwkrmWnmRKAQI/s32/buscar.png) no-repeat center left;
position: absolute;
right:3px; /* Distancia del buscador desde la derecha */
outline:none;
font-size: 13px; /* Tamaño de la fuente del buscador */
color: #ccc;
width: 0;
margin: 0;
padding: 12px 0 12px 35px;
z-index: 1000;
border: 1px solid #fff;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#search input[type="text"]:hover, #search input[type="text"]:focus {width:94%} /* Ancho del buscador cuando se expande */

Luego en Diseño crea un gadget HTML/Javascripty ahí pega lo siguiente:

<div id='menuBuscador'>
<ul class='menusearch'>
<li class='top'><a class='top_link' href='URL del enlace'><span>Pestaña 1</span></a></li>

<li class='top'><a class='top_link' href='#'><span class='down'>Pestaña 2</span></a><ul class='sub'><li><a class='fly' href='#'>Pestaña 2.1</a><ul>
<li><a href='URL del enlace'>Pestaña 2.1.1</a></li>
<li><a href='URL del enlace'>Pestaña 2.1.2</a></li>
<li><a href='URL del enlace'>Pestaña 2.1.3</a></li>
</ul>
</li>
<li class='mid'><a class='fly' href='#'>Pestaña 2.2</a>
<ul>
<li><a href='URL del enlace'>Pestaña 2.2.1</a></li>
<li><a href='URL del enlace'>Pestaña 2.2.2</a></li>
<li><a href='URL del enlace'>Pestaña 2.2.3</a></li>
<li><a class='fly' href='#'>Pestaña 2.2.4</a>
<ul>
<li><a href='URL del enlace'>Pestaña 2.2.4.1</a></li>
<li><a href='URL del enlace'>Pestaña 2.2.4.2</a></li>
<li><a href='URL del enlace'>Pestaña 2.2.4.3</a></li>
</ul>
</li>
<li><a href='URL del enlace'>Pestaña 2.2.5</a></li>
<li><a class='fly' href='#'>Pestaña 2.2.6</a>
<ul>
<li><a href='URL del enlace'>Pestaña 2.2.6.1</a></li>
<li><a href='URL del enlace'>Pestaña 2.2.6.2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='URL del enlace'>Pestaña 2.3</a></li>
<li><a href='URL del enlace'>Pestaña 2.4</a></li>
<li><a href='URL del enlace'>Pestaña 2.5</a></li>
</ul>
</li>

<li class='top'><a class='top_link' href='#'><span class='down'>Pestaña 3</span></a>
<ul class='sub'>
<li><a href='URL del enlace'>Pestaña 3.1</a></li>
<li><a href='URL del enlace'>Pestaña 3.2</a></li>
<li><a href='URL del enlace'>Pestaña 3.3</a></li>
<li><a href='URL del enlace'>Pestaña 3.4</a></li>
</ul>
</li>

<li class='top'><a class='top_link' href='#'><span class='down'>Pestaña 4</span></a>
<ul class='sub'>
<li><a href='URL del enlace'>Pestaña 4.1</a></li>
<li><a class='fly' href='#'>Pestaña 4.2</a>
<ul>
<li><a href='URL del enlace'>Pestaña 4.2.1</a></li>
<li><a href='URL del enlace'>Pestaña 4.2.2</a></li>
<li><a href='URL del enlace'>Pestaña 4.2.3</a></li>
<li><a href='URL del enlace'>Pestaña 4.2.4</a></li>
<li><a href='URL del enlace'>Pestaña 4.2.5</a></li>
<li><a href='URL del enlace'>Pestaña 4.2.6</a></li>
</ul>
</li>
<li><a href='URL del enlace'>Pestaña 4.3</a></li>
<li><a href='URL del enlace'>Pestaña 4.4</a></li>
<li><a href='URL del enlace'>Pestaña 4.5</a></li>
<li><a href='URL del enlace'>Pestaña 4.6</a></li>
</ul>
</li>

<li class='top'><a class='top_link' href='#'><span class='down'>Pestaña 5</span></a>
<ul class='sub'>
<li><a href='URL del enlace'>Pestaña 5.1</a></li>
<li><a href='URL del enlace'>Pestaña 5.2</a></li>
<li><a href='URL del enlace'>Pestaña 5.3</a></li>
</ul>
</li>
</ul>


<form action='/search' id='search' method='get' name='searchForm' style='display:inline;'>
<input id='search-box' name='q' onblur='if (this.value == "") this.value = "Buscar...";' onfocus='if (this.value == "Buscar...") this.value = "";' size='28' type='text' value='Buscar...'/></form>

</div>

Ya sólo deberás guardar los cambios. El primer código son los estilos, ahí verás en color verde dónde cambiar los colores, fuentes, etc., o sea, el aspecto del menú. En color rojo van las URLs y los nombres de tus pestañas y subpestañas.

Antes de  puedes agregar más pestañas. Por ejemplo: si quisieras añadir otra pestaña simple, agrega una línea como esta:

<li class="top"><a href="URL del enlace" class="top_link"><span>Pestaña</span></a></li>

Si quisieras agregar una pestaña con subpestañas entonces agrega este código:

<li class="top"><a href="#" class="top_link"><span class="down">Pestaña</span></a>
<ul class="sub">
<li><a href="URL del enlace">Sub pestaña</a></li>
<li><a href="URL del enlace">Sub pestaña</a></li>
<li><a href="URL del enlace">Sub pestaña</a></li>
</ul>
</li>

Y si quisieras que una de las subpestañas tuviera otras subpestañas entonces elimina una línea como la que está en color naranja y cámbiala por un código como este:

<li><a href="#" class="fly">Sub pestaña</a>
<ul>
<li><a href="URL del enlace">Otra Sub pestaña</a></li>
<li><a href="URL del enlace">Otra Sub pestaña</a></li>
<li><a href="URL del enlace">Otra Sub pestaña</a></li>
</ul>
</li>

Eso es todo, menos complicado de lo que parece. Sin duda es un menú que hay que considerar, no sólo por lo atractivo del buscador, sino por la posibilidad de agregar subpestañas y sin necesidad de usar ningún script. Además que podemos personalizarlo tanto como queramos

Leave a comment

Evitar que una entrada aparezca en los resultados de Google

18 de agosto de 2014 Publicado por El Potro , Etiquetas:Posicionamiento

64 comentarios,

Algunas veces por diversas razones podremos enfrentarnos con la situación de no querer que una entrada en particular se muestre en los resultados de búsqueda de Google, quizá porque has eliminado esa entrada y sigue apareciendo en los resultados, o por cuestiones de privacidad, estrategia de posicionamiento (SEO), etc.
Si bien la mayoría de nosotros queremos ser amados por Google, también podemos decirle "aquí no". De manera que, puedes crear una(s) excepción(es) para que Google no muestre en sus resultados las entradas que no quieras que aparezcan ahí.

Eliminé una entrada y ¡sigue apareciendo en Google!

Por ejemplo, podría darse el caso de que nos vemos obligados a eliminar alguna entrada de nuestro blog, ya sea por cuestiones personales, legales, arrepentimiento, o la razón que sea. Lo ideal sería que al eliminarla desapareciera para siempre del universo, pero la mayoría de las veces no es así, al menos no de inmediato como quisiéramos. Si la entrada estaba indexada por los motores de búsqueda entonces es posible que esa entrada se siga mostrando en los resultados de Google, aun sin importar que esa URL sea inaccesible.

No es mayor problema, pero hay quienes no quieren que haya rastro alguno de esa entrada, sobre todo porque aun cuando esa entrada ya no exista alguien podría verla desde la caché.

Lo que tenemos que hacer en estos casos es pedirle a Google que elimine dicha entrada de los resultados de búsqueda, y hacerlo es muy sencillo, para ello usaremos las Herramientas para webmasters de Google.

Primero ingresa a la herramienta Eliminar contenido obsoleto, pega ahí la URL de la entrada que ya no existe y da click en Solicitar eliminación.

En ese momento Google analizará la URL, si comprueba que en verdad ya no existe te confirmará con un "This content is gone", así que da click nuevamente en Solicitar eliminación, y a esperar a que los robots hagan su trabajo.

¿Y qué pasa si no he eliminado ninguna entrada pero no quiero que ese post aparezca en Google?

También puede darse el caso que no quieras que una entrada en particular se muestre en los resultados de búsqueda, pero no quieres eliminarla de tu blog, sólo no quieres que aparezca en Google, quizá porque esa entrada pueda afectarte el posicionamiento, o porque no es relevante para ti o tus lectores.

Como no quieres eliminarla de tu blog entonces tienes que decirle a los robots que no indexen esa entrada, y para ello usaremos la herramienta que Blogger nos ofrece desde la configuración del blog, así que nos dirigimos a Configuración | Preferencias para motores de búsqueda | Rastreadores e indexación, y en donde dice Archivo robots.txt personalizado da click en Editar para habilitarlo en caso de que no lo hayas hecho antes.

Ahí agrega lo siguiente:

User-agent: Mediapartners-Google
Allow: /

User-agent: *
Disallow: /20014/08/mi-entrada-que-ya-no-existe.html
Disallow: /search
Allow: /

Sitemap: http://nombre-de-mi-blog.blogspot.com/feeds/posts/default?orderby=UPDATED

Ahí deberás agregar la URL de la entrada que no quieres que aparezca en los resultados de Google y que será ignorada por los robots.
Si quisieras añadir más de una entrada sólo agrega otra línea igual con su URL correspondiente, por ejemplo:

Disallow: /20014/08/mi-entrada-que-ya-no-existe-1.html
Disallow: /20014/08/mi-entrada-que-ya-no-existe-2.html

Nota que en las URLs no ponemos el nombre del blog pues no es necesario, sólo agrega desde la diagonal que aparece antes de la fecha (o de la P en caso de que se tratara de una página estática).
Al mismo tiempo hemos aprovechado para añadir nuestro sitemap en el archivo robots.txt, ahí deberás poner el nombre de tu blog donde se indica.

Para asegurarte que todo está bien puedes comprobar tu archivo robots.txt en las Herramientas para webmasters, sólo considera que los robots se toman unos días en pasar por el blog así que la comprobación no la verás de inmediato.

Leave a comment

Ticker automático para mostrar las últimas entradas del blog

6 de septiembre de 2014 Publicado por El Potro , Etiquetas:Gadgets , Trucos

232 comentarios,

Un ticker viene siendo como una barra de noticias donde pasan los titulares tipo marquesina. Su uso básicamente es para mostrarle a los lectores cuáles son las entradas más destacadas, aunque en nuestro caso lo usaremos para mostrar las últimas entradas del blog, eso sí, de forma automática para no tener que estar agregando entradas a cada rato ni tener que estar editando nada.

Nuestro ticker de noticias lo haremos con jQuery, y sé que algunos dirán ¡pero por qué, si podemos hacerlo con la etiqueta MARQUEE!.
Ciertamente podemos hacerlo con MARQUEE, pero ese elemento no es un estándar además que su desplazamiento suele ser muy tosco con lo que muchas veces el texto se vuelve difícil de leer. También podríamos hacerlo con animaciones CSS pero en los navegadores antiguos no funcionaría, así que por eso usaremos jQuery para crear el efecto de marquesina, además podremos elegir la velocidad y dirección de desplazamiento

El demo puedes verlo aquí mismo, si pasas el cursor sobre un título el ticker se detendrá:

Y ya que lo hemos hecho automático para no batallar editando también lo haremos de un solo paso, así que su instalación es únicamente copiar y pegar. Para ello copia el siguiente código, y entra en Diseño | Añadir un gadget | HTML/Javascripty ahí pégalo.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.marquee/1.3.1/jquery.marquee.min.js" type="text/javascript"></script>
<style>
#headlines {
overflow:hidden;
position:relative;
line-height:25px;
background:#34495e; /* Color de fondo */
height:45px;
padding:0 0 0 135px;
}
#headlines h3 {
color:#fff;
font-family:Oswald, sans-serif;
font-size:17px;
font-weight:400;
text-transform:uppercase;
margin-left:-115px;
margin-top:10px;
position:absolute;
}
#headlines .right_arrow {
padding:0 38px 0 110px;
display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUMrngtPJSmDlwgDwumkgjUsVc-977QMb2RNNcZjUJINAlUgVBYZgdLUpnUXbDM9i_0q-YPzAlx8q9eH8qdx0XXiw0L1qUmA-jADlJA-qYWsko5cJ40g3ufTZOcwqtjUmfJDgXjudcQolB/s41/arrow.png) no-repeat right center;
height:46px;
line-height:46px;
position:absolute;
left:0;
top:0;
}
#ticker_post {
position:relative;
margin:0;
margin-left:20px;
height:50px;
width:auto;
}
.marquee {
width: 980px; /* Ancho del área donde se muestran las entradas */
overflow: hidden;
line-height: 45px;
}
.js-marquee a {
font-family:Oswald, sans-serif;
font-size:15px; /* Tamaño de los textos */
color: #FFF; /* Color de los textos */
padding-bottom: 20px;
text-decoration: none;
}
.ticker_separator {
color:#FFF; color: #FFF; /* Color del separador de las entradas */
margin:0 10px;
}
</style>
<div id='headlines'>
<h3>Lo Último</h3>
<div class='right_arrow'></div>
<script>
var blog_url = "http://nombre-de-mi-blog.blogspot.com";
var numero_post = 10; // Número de entradas a mostrar
</script>
<script type="text/javascript" src="http://yourjavascript.com/946415552/ticker.js"></script></div>
<div style='clear:both;'></div>
<script>
$(window).load(function() {
$('.marquee').marquee({
direction: 'left', // Dirección de la marquesina, usar left o right
duration: 25000, // Velocidad
pauseOnHover: true,
duplicated: true
});
});
</script>

En donde se indica en color rojo deberás poner el nombre de tu blog, en color verde verás dónde cambiar el color de fondo así como el número de entradas a mostrar, velocidad, y dirección de desplazamiento.
No olvides cambiar el /* Ancho del área donde se muestran las entradas */ ajústalo a la medida que necesites.
Recuerda que estamos usando jQuery así que si ya lo tuvieras elimina la primera línea del código.

Este gadget utiliza dos scripts para funcionar, ambos ya están alojados pero si lo deseas puedes descargarlos y subirlos a tu propio alojamiento para no depender de otros.

No olvides que el ticker muestra las últimas entradas del blog sin distinción de etiqueta, si quieres que muestra las últimas entradas de una etiqueta en particular tendrás que editar el archivo ticker.js y añadir lo que se muestra en color rojo:

var entries;var feed;var feed_url=blog_url.match(/\/$/)?blog_url:blog_url+"/";feed_url+="feeds/posts/default/-/Nombre-de-la-etiqueta";

¿En dónde se ve mejor? Eso depende del gusto de cada quién y del diseño de cada plantilla, usualmente los tickers de noticias se ponen arriba o de bajo de la cabecera, o arriba de las entradas, pero como dije, eso depende del gusto de cada quién.

Descargar archivos

Leave a comment

Cambiar los iconos de los gadgets en las Vistas Dinámicas

16 de septiembre de 2014 Publicado por El Potro , Etiquetas:Trucos

21 comentarios,

Pese a que las plantillas de Vistas Dinámicas no son 100% personalizables hay quienes prefieren usarlas por la forma como se muestran las entradas. Y aunque no se puedan personalizar del todo hay ciertas cosas que sí podemos modificar, en este caso veremos cómo cambiar los iconos de los gadgets de la sidebar.

Los iconos originales de estas plantillas son blancos, y muy sobrios. No hay nada de malo en ello, pero quizá muchos quieran añadir unos iconos mas acorde a la temática del blog, o al gusto del autor. Así que vamos a ver cómo cambiarlos.

¿Recuerdas la entrada para poner iconos en el gadget de Páginas? Pues el método es el mismo, usaremos el selector :nth-of-type para encontrar el gadget de la sidebar y reemplazar su imagen.

Lo único que tienes que hacer es ingresar a Plantilla | Personalizar | Avanzado | Añadir CSS, ahí agrega lo siguiente:

.ss, #gadget-dock > div:nth-of-type(1) .gadget-icons img,
.ss, #gadget-dock > div:nth-of-type(2) .gadget-icons img,
.ss, #gadget-dock > div:nth-of-type(3) .gadget-icons img,
.ss, #gadget-dock > div:nth-of-type(4) .gadget-icons img,
.ss, #gadget-dock > div:nth-of-type(5) .gadget-icons img,
.ss, #gadget-dock > div:nth-of-type(6) .gadget-icons img,
.ss, #gadget-dock > div:nth-of-type(7) .gadget-icons img,
.ss, #gadget-dock > div:nth-of-type(8) .gadget-icons img,
.ss, #gadget-dock > div:nth-of-type(9) .gadget-icons img,
.ss, #gadget-dock > div:nth-of-type(10) .gadget-icons img {
display: none !important;
}

#gadget-dock > div:nth-of-type(1) .gadget-icons {
background: url(URL de la imagen) no-repeat center !important;
}

#gadget-dock > div:nth-of-type(2) .gadget-icons {
background: url(URL de la imagen) no-repeat center !important;
}

#gadget-dock > div:nth-of-type(3) .gadget-icons {
background: url(URL de la imagen) no-repeat center !important;
}

#gadget-dock > div:nth-of-type(4) .gadget-icons {
background: url(URL de la imagen) no-repeat center !important;
}

Ya sólo deberás poner la URL de las imágenes donde se indica. La primera URL corresponde a la imagen del primer gadget, la segunda al del segundo gadget y así sucesivamente.

El código está preparado para los cuatro primero gadgets de tu sidebar, si tuvieras más sólo añade un fragmento como este por cada gadget extra que tengas:

#gadget-dock > div:nth-of-type(5) .gadget-icons {
background: url(URL de la imagen) no-repeat center !important;
}

Ese será para el quinto gadget, si tuvieras un sexto agrega otro fragmento igual y cambia el 5 por 6, etc.

TRUCO EXTRA

Si quieres mantener siempre visible la sidebar agrega este código:

#gadget-dock {
right: 0!important;
}

Como puedes ver no es nada difícil cambiar los iconos de las Vistas Dinámicas y lo mejor es que no tenemos que meternos con el HTML si no que lo hacemos todo únicamente con CSS.
Cambiar los iconos de los gadgets nos da la posibilidad de tener un blog más personalizado y único, ¿no crees?

Leave a comment

¿Qué pasará con mi blog cuando muera?

25 de septiembre de 2014 Publicado por El Potro , Etiquetas:Básicos 66 comentarios,

La muerte es algo en lo que regularmente preferimos no pensar, particularmente en la propia. La cultura nos educa a evadirla y entre menos hablemos de ella menos incómodos nos sentiremos, a no ser que hayamos tomado un curso de tanatología, pero por lo general no estamos preparados para recibirla como un hecho irremediable.

No sabemos cuándo moriremos, ni tampoco tenemos la certeza de que mañana seguiremos con vida, no hay garantía de ello. Es por eso que debemos estar preparados, o al menos dejar todo listo para cuando partamos de este mundo. Incluyendo nuestro blog.

Imagina que tienes un accidente y mueres de forma repentina, ¿has pensado qué pasará con gran parte del contenido que subiste a Internet a lo largo de tu vida?
Si como yo eres un entusiasta de los productos de Google seguro tendrás fotos, vídeos, correos, y varios documentos que quizá quieras "proteger" o conservar cuando ya no estés. Pero, ¿cómo?

Google está consciente de esta problemática y pone a nuestra disposición una herramienta con la que podemos elegir qué sucederá con los distintos productos de Google (o nuestra cuenta entera) después de estar inactiva por un largo tiempo. De esta manera podremos decidir si le dejamos acceso a nuestra cuenta a un familiar o amigo, o si simplemente se elimina.

Para configurar esta herramienta, ingresa al Administrador de cuentas inactivas y da click en Configurar.

Quizá estés pensando que es un poco riesgoso porque bien podrías no entrar a tu cuenta de Google por diversas razones y no necesariamente signifique que hayas fallecido. Google también ha pensado en eso, así que te avisará de 1 a 3 meses antes de cumplirse el tiempo de inactividad y de que tu cuenta se desactive.

Para que esto sea posible deberás añadir un número telefónico y adicionalmente podrás añadir otra dirección de correo, por estos medios Google te notificará antes de que tu cuenta deje de ser accesible.

También deberás establecer el periodo de inactividad, es decir, después de cuánto tiempo Google marcará tu cuenta como inactiva. Este periodo puede ser de 3 a 18 meses.

Puedes agregar hasta 10 contactos de confianza a quienes se les notificará que tu cuenta ha quedado inactiva.

Adicionalmente -y si lo deseas- podrás marcar la casilla Compartir mis datos con este contacto y luego elegir qué productos de Google quieres compartir con él/ella. Esta opción es por si quieres que tu contacto guarde la información que te importa más.

Por seguridad agrega el número telefónico de tu contacto, a través del móvil recibirá un código con el que podrá entrar a tu cuenta una vez que se cumpla el tiempo de inactividad. Tu contacto podrá descargar tus documentos por tres meses, déjale claro esto para que lo haga dentro del tiempo permitido.

En este apartado también puedes añadir una respuesta automática para todos los correos entrantes. Esta respuesta sólo se enviará una vez que tu cuenta esté inactiva.

Por supuesto también puedes elegir que tu cuenta se elimine. Toma en cuenta que si activas esta opción todos los productos de Google que usas se eliminarán, así que tu blog también se eliminará una vez que tu cuenta esté inactiva.

Yo por mi parte prefiero no eliminar mi cuenta, pero cada quién decidirá lo más conveniente para la suya.

Esto es para Google, por desgracia no todos los productos que usamos día a día ofrecen este tipo de herramientas. La buena noticia es que hay sitios como Death Switch que funcionan de manera similar, ahí podemos almacenar todas nuestras contraseñas; cuando dejemos de entrar por un tiempo el sistema nos enviará notificaciones, si después de haber transcurrido un tiempo no respondemos entonces nuestras contraseñas serán enviadas a un contacto que hayamos elegido.
Una opción por de más interesante, aunque habrá que ver qué tan segura está nuestra información en este tipo de servicios.

Decidas lo que decidas recuerda que hombre precavido...

Leave a comment

Lluvia en el blog

6 de octubre de 2014 Publicado por El Potro , Etiquetas:Efectos , Festividades 53 comentarios,

Los que somos un tanto bohemios disfrutamos de la lluvia tanto como de una buena taza de café. Y ya que nos gustan tanto las precipitaciones pluviales vamos a ver cómo poner lluvia en el blog con Javascript para darle un poco de nostalgia al blog y que bien puede usarse para las próximas fiestas de Halloween. El ejemplo aquí mismo.

Este script de Giffy se pone y se quita en un solo paso. Adicionalmente le he añadido un sonido suave de lluvia, pero este es opcional.

Para poner esta lluvia en el blog, entra en la Edición HTML de tu plantilla, y antes de </body>pega este código:

<div style="display:none;">
<script type="text/javascript" src="http://blogparts.giffy.me/0117/parts.js"></script><p style="text-align: center;margin:0;padding:0;">
<a href="http://giffy.me/baby/"><img style="border:0;" src="http://blogparts.giffy.me/0117/parts.gif" alt="降水確率100%ブログパーツ;" /></a></p>
<p style="text-align:center;font-size:12px;margin:10px 0 0 0;padding:0;">
[PR] <a href="http://typing.twi1.me/" rel="nofollow">楽しくタイピング練習！</a></p>
</div>
<iframe allowtransparency='true' frameborder='0' marginheight='0' marginwidth='0' scrolling='no' src='http://audio-play.blogspot.com/p/lluvia.html' style='height:0; width:0;'></iframe>

Lo que está en color naranja es el iframe que contiene el sonido de la lluvia, si no quieres el sonido elimina toda esa parte.
En lo que concierne al script, no tiene opciones de configuración pero creo que tampoco hace falta ya que cumple con su cometido.

Leave a comment