Muestra estrellas de valoración

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Mostrar estrellas de valoración en las entradas de tu blog
Algo admirado por muchos bloggers son las típicas estrellas de valoración que un gran número de sitios web poseen al final de sus artículos, vídeos o imágenes.

Es sin duda un artilugio muy atractivo que permite a los lectores de un espacio dar su opinión sobre el contenido publicado.

Hace tiempo publiqué una entrada en la que introducía un script proporcionado por el servicio Outbrain y con el que conseguíamos esto mismo. Desafortunadamente, las estrellitas tardaban algo en cargar e incluso mostraban publicidad ajena al blog.

Por ello he decidido hacer uso de JS Kit, un script cuya creación está en inglés y por tanto poco reconocido en los blogs de lengua latina o castellana. Además, pensé que mostrar el widget en inglés sería una desventaja para muchos por lo que traduje enteramente el script y obtuve un resultado como el que te muestro a continuación:


estrellas blogger, valorar estrellas blogger entradas, estrellas valoracion blogger, blogger rating widget, post blogger tips, blogger help


Diseño>Edición de HTML>expandimos artilugios



Busca la etiqueta <data:post.body/> en tu plantilla y justo debajo añade lo siguiente:

<div style='float:left; margin-right:3px;'/>
<div class='js-kit-rating' expr:path='data:post.url' expr:permalink='data:post.url' expr:title='data:post.title'>
</div>

De esta forma, las estrellas aparecerán en todo momento al pie de tus artículos.

Si prefieres mostrar las estrellas justo debajo del título de tus posts, añade el código bajo esta otra línea:

<div class='post-header-line-1'/>

Para hacer que únicamente se vean al abrir una entrada individualmente utiliza este otro código (en lugar del primero):

<b:if cond='data:blog.pageType == "item"'>
<div style='float:left; margin-right:3px;'/>
<div class='js-kit-rating' expr:path='data:post.url' expr:permalink='data:post.url' expr:title='data:post.title'>
</div>
</b:if>

Ahora encuentra la etiqueta </body> y encima agrega este bloque:

<div id='blEstrellasartic' style='padding-right: 6px;text-align: right;'><a href='http://goo.gl/VHSIZ'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCW57Dvm25BVflMw5mlj1_JD7fEaPpI9PjRSyKwyrZJWb8AOVaten9G4op69iq4EbP7WQAi-MtwrLY5r0klEcFgAW1Fo8CjkqQqiClr-pZgjduCmvbIACqq9rfya1BbpgWnXfxWp4yaysO/s320/blestrellas.png'/><script src='https://sites.google.com/site/scriptsbalcon/b/blestrellas%282%29.js'/></a></div>

Guarda la plantilla para terminar.

Secciones despegables del blog en cualquier sitio

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Blog desplegable en cualquier apartado o en la portada de tu bitácora
Si te pareció interesante la entrada sobre los títulos desplegables en las páginas de etiquetas, o aquel tutorial con el que podíamos aumentar la velocidad de carga del blog por medio de un script, este truco te resultará fascinante.

Pensé en combinar ambas ventajas en una misma instalación hasta dar con la idea de tener un 'blog desplegable' o bien en la portada del blog o bien en todos sus apartados.

Aquí te dejo una pequeña imagen que he construido para facilitar la explicación:




Diseño>Edición de HTML>Sin expandir artilugios



Busca algo similar a esto:

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
</b:section>

Ahora, según la configuración deseada, reemplázalo por uno de estos dos códigos:

Para mostrar el truco en la portada del blog...

<b:if cond='data:blog.url == data:blog.homepageUrl'><script language='javascript'>function blcnJJMostr() {
var blJJTE = document.getElementById("blcnJJMostrCon");
var blJJTE1 = document.getElementById("blcnJJMostrCon2");
if(blJJTE.style.display == "block") {
blJJTE.style.display = "none";
blJJTE1.innerHTML = "Ver Blog"; }
else {
blJJTE.style.display = "block";
blJJTE1.innerHTML = "Ocultar Blog"; } }</script><span style='margin-left:10px;padding:4px 6px;border:1px solid #cccccc;background:#f2f2f2;'><a href='javascript:blcnJJMostr();' id='blcnJJMostrCon2' style='text-decoration:none;'>Ver Blog</a></span>
<div id='blcnJJMostrCon' style='display: none;'><b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog2' locked='true' title='Entradas del blog' type='Blog'/>
</b:section></div></b:if><b:if cond='data:blog.url != data:blog.homepageUrl'><b:section class='mainJ' id='mainJ' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
</b:section></b:if>

Para mostrar el truco en todo el blog...

<script language='javascript'>function blcnJJMostr() {
var blJJTE = document.getElementById("blcnJJMostrCon");
var blJJTE1 = document.getElementById("blcnJJMostrCon2");
if(blJJTE.style.display == "block") {
blJJTE.style.display = "none";
blJJTE1.innerHTML = "Ver Blog"; }
else {
blJJTE.style.display = "block";
blJJTE1.innerHTML = "Ocultar Blog"; } }</script><span style='margin-left:10px;padding:4px 6px;border:1px solid #cccccc;background:#f2f2f2;'><a href='javascript:blcnJJMostr();' id='blcnJJMostrCon2' style='text-decoration:none;'>Ver Blog</a></span>
<div id='blcnJJMostrCon' style='display: none;'><b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
</b:section></div>

Guarda la plantilla y habrás terminado. Comprobarás que tu blog carga a una mayor velocidad y que navegar por él es más fácil pues el lector puede desplegar el contenido que le interesa leer.

Te aconsejaría añadir también el truco para insertar dos columnas sobre o bajo la zona de entradas, de manera que puedas mostrar gadgets de texto, imágenes o galerías de imágenes y crear un 'orden personalizado' en el blog.

Como mostrar las últimas entradas de una etiqueta en particular

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Estás leyendo Ultimas entradas de una etiqueta en particular en el blog (script), en

Ultimas entradas de una etiqueta en particular en el blog (script)

Mostrar las últimas entradas en nuestro blog es un complemento muy útil para los lectores que desean acceder con facilidad y rapidez al contenido recientemente publicado. Son muchos los procedimientos que ya hemos visto para instalar esta herramienta. Ultimas entradas con miniatura de imagen, Últimas entradas en movimiento (widget de control manual) e incluso Mostrar las últimas entradas de una etiqueta específica.

Este último truco es el que precisamente explicaré en esta entrada. No se trata del mismo tutorial sino que he dado con otro procedimiento más simple y efectivo para mostrar lo mismo: una lista con los títulos de tus últimos artículos bajo una etiqueta en particular.

A continuación te muestro una imagen del resultado:




Diseño>Edición de HTML>expandimos artilugios



Busca la etiqueta </head> en tu plantilla y justo antes añade estas líneas:

<script src='https://sites.google.com/site/editoriosus/fds/UltimsblJtetiq.js'/><link href='https://sites.google.com/site/editoriosus/fds/blJtetik.css' media='screen' rel='stylesheet' type='text/css'/><style>#UltimblJtetiqu a {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7jlCxccXOlsZLYbF1k8WVJIP9JaNi-s4faQegcPQg4XE1bpp7E7HRqePESCc8LYXp1_xM3bxI_Nfaqr94bnwwpZ0D6ug42LSVQ2Tq_oVLsMx2vkVHWLtV9NkZG3NvKMNfHGLntC9K7MI/") no-repeat scroll 0 -6px transparent;}</style>

Seguidamente guarda la plantilla.


Diseño>añadir gadget (elemento de página)>html-javascript



Agrega esto en su interior:

<div id="UltimblJtetiqu"><script src="http://TUBLOG.blogspot.com/feeds/posts/default/-/ETIQUETA?max-results=10&alt=json-in-script&callback=blJtetiq"></script></div>

Reemplaza TUBLOG por la dirección de tu blog (no hace falta que incluyas el http:// o el .blogspot.com ya que tal y como puedes ver ha sido insertado).

En ETIQUETA escribe la etiqueta tal y como aparece en tus entradas (con sus mayúsculas, minúsculas, tildes, acentos...) de manera que los últimos posts puedan mostrarse.

En la línea max-results=10 puedes controlar el número de títulos que aparecerán. Aumenta o disminuye la cifra (10).

Guarda el gadget para terminar.

Cómo abrir dos o más enlaces en un sólo click

Artículo publicado en el blog Ciudad Blogger, uno de los sitios con más información sobre tecnología Blogger Ve la entrada en su blog original.

No sé bien qué tan útil pueda ser, pero muchos preguntan cómo abrir dos páginas con un solo enlace, supongo que podría servir para abrir todas las redes sociales de un sitio con un solo click, o todos los blogs de un autor, etc., el uso ya dependerá de cada quien.


Sin embargo se recomienda que si lo usan avisen al lector que dicho enlace abrirá todas las páginas que han configurado, para que el usuario sepa que abrirá todas esas páginas, y no le abramos páginas que no ha solicitado.


La función para conseguir abrir varios links con un solo click es sencilla, es usar Javascript simple, nada extravagante. Puedes ver un ejemplo haciendo click el siguiente enlace, abrirá dos sitios sobre experimentos caseros y de física.

El código a utilizar es el siguiente:
<a href="javascript:void(0);" onclick="javascript:window.open('URL del enlace UNO', '_blank'); window.open('URL del enlace DOS', '_blank'); ">Abrir varios enlaces</a>
Agrega donde se indica las URLs de los enlaces y listo.

Si quieres que se abran más páginas entonces añade justo antes de las comillas dobles en color azul, una línea como esta:
window.open('URL de otro enlace', '_blank');

De esa forma podrás agrupar varios enlaces en uno solo.

Instala botones flotantes para recomendar tu blog en face, twitter y +1

Artículo publicado en el blog Ciudad Blogger, uno de los sitios con más información sobre tecnología Blogger Ve la entrada en su blog original.

Una de las primeras cosas que me preguntaron cuando cambié de plantilla fue cómo poner el botón que aparece al final y que al presionarlo aparecen los botones para compartir el blog.
Ya saben que no me guardo nada y todo se los comparto, así que en esta entrada vamos a ver cómo poner esos botones para promocionar el blog.

Se trata de un botón flotante que al presionarlo aparecerá un contenedor con un efecto de desvanecimiento y en él, los botones de Facebook, Twitter y +1.
Con ellos podremos compartir la portada del blog, pues no sólo hay que promocionar las entradas sino también el blog en general.




El efecto de desvanecimiento lo lograremos con Scriptaculous y Prototype, así que quien use jQuery tendrá que hacer unos cambios para que ambas librerías puedan funcionar al mismo tiempo.

La instalación de estos botones es bastante sencilla, primero entra en la Edición HTML de la plantilla y antes de ]]></b:skin> agrega estos estilos:
#botones-like {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0px 0px 4px #696969;
-moz-box-shadow: 0px 0px 4px #696969;
box-shadow: 0px 0px 4px #696969;
background-color: #eee; /* Color de fondo del botón */
padding: 5px;
font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
font-size: 10pt; /* Tamaño del texto */
color: #999999; /* Color del texto */
text-align: center;
position:fixed;
bottom:5px;
right:30px;
}
#expandirBotones{
background:#eee; /* Color de fondo del contenedor */
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0px 0px 6px #696969;
-moz-box-shadow: 0px 0px 6px #696969;
box-shadow: 0px 0px 6px #696969;
position:fixed;
bottom:40px;
right:30px;
}
Ahora antes de </head> pega este código; si ya lo tuvieras no hace falta ponerlo otra vez:
<script src='http://www.google.com/jsapi'></script>
< script>
google.load("prototype","1.7.0.0");
google.load("scriptaculous", "1.9.0");
< /script>
Luego pega antes de </body> lo siguiente:
<a href='javascript:Void(0)' onclick='Effect.toggle(&apos;expandirBotones&apos;,&apos;appear&apos;); return false' style='text-decoration:none;'><div id='botones-like'>&#161;Recomienda este blog!</div></a>
< table border='0' id='expandirBotones' style='display:none'>
< tr>
< td>&lt;iframe allowTransparency=&#39;true&#39; frameborder=&#39;0&#39; scrolling=&#39;no&#39; src=&#39;http://www.facebook.com/plugins/like.php?href=http://nombre-de-mi-blog.blogspot.com&amp;layout=box_count&amp;show_faces=false&amp;width=72&amp;height=63&amp;action=like&amp;font=tahoma&amp;colorscheme=light&#39; style=&#39;border:none; overflow:hidden; width:72px; height:63px&#39;&gt;&lt;/iframe&gt;</td>
< td><g:plusone href='http://nombre-de-mi-blog.blogspot.com' size='tall'/><script type='text/javascript'>
window.___gcfg = {lang: &#39;es&#39;};
(function() {
var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
})();
< /script></td>
< td><a class='twitter-share-button' data-count='vertical' data-lang='es' data-text='Me ha gustado este blog, seguro a ti también te gustará:' data-url='http://nombre-de-mi-blog.blogspot.com' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></td>
< /tr>
< /table>
Cambia la dirección de tu blog donde se indica, así como el mensaje que aparecerá en Twitter y listo.
En color verde puedes cambiar algunos aspectos del diseño, básicamente será el color de fondo y de texto.

El botón para compartir el blog aparecerá en todas las entradas, si deseas que aparezca sólo en la portada tendrás que encerrar el último código con la condicional que le corresponde.
Recuerda que no compartirá las entradas del blog, sino el blog en general. Si buscas botones para compartir las entradas puedes ver algunas opciones en la sección de Facebook.

Si ya estuvieras usando el botón +1 de Google entonces no hará falta repetir el código del script, así que busca esta línea todas las veces que la tengas y elimínala:
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'/>
Sólo dejaremos el script que hemos puesto en este código, excepto si has decido poner los botones sólo en la portada, si así fuera entonces no hará falta quitar esa línea salvo algunas excepciones.

ACTUALIZACIÓN: En Internet Explorer el botón de Facebook no se ve bien cuando se agrega de esta forma.

Cómo instalar un botón "Ir arriba" que aparece y desaparece

Artículo publicado en el blog Ciudad Blogger, uno de los sitios con más información sobre tecnología Blogger Ve la entrada en su blog original.

Botón !IrArriba" con jQuery que aparece y desaparece
1 de marzo de 2012 | |

Hace ya bastante tiempo vimos cómo poner las flechas de "Ir Arriba" e "Ir Abajo", ahí vimos tanto el método simple, como con un efecto deslizante usando Scriptaculous.

En esta ocasión veremos cómo poner el botón de "Ir Arriba" en el blog pero con la particularidad de que se encuentra oculto, sólo aparece cuando se baja la página y desaparece otra vez cuando se regresa a la parte superior del blog. Además, al funcionar con jQuery el desplazamiento de la página se vuelve con un efecto deslizante. Puedes verlo funcionar en este blog de pruebas, al bajar el scrollbar aparecerá el ícono para subir, una vez que subas al hacer click desaparecerá de nuevo.

Para ponerlo en tu blog entra en la Edición HTML y antes de </head> agrega jQuery:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>

Si ya lo tuvieras omite ese paso.
Ahora antes de ]]></b:skin> agrega los estilos:
/* Botón Ir Arriba
----------------------------------------------- */
#IrArriba {
position: fixed;
bottom: 30px; /* Distancia desde abajo */
right: 30px; /* Distancia desde la derecha */
}

#IrArriba span {
width: 60px; /* Ancho del botón */
height: 60px; /* Alto del botón */
display: block;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2lgVn5r7aUzAdiUcwYpD3X7x72SZ_8dGaHUks8UydeN4yI1BN6GshhvRzIBRKTBx1qWQblj4c3jsbvMD4m9lDZVK6XhbGa-yCgUgkKBD9D7TrwGxoXcYVf80Y6s31_A8dkOTLb0uav3U/s60/flecha-arriba.png) no-repeat center center;
}
Por último, antes de </body> agrega el script:
<div id='IrArriba'>
< a href='#Arriba'><span/></a>
< /div>
< script type='text/javascript'>
//<![CDATA[
// Botón para Ir Arriba
jQuery.noConflict();
jQuery(document).ready(function() {
jQuery("#IrArriba").hide();
jQuery(function () {
jQuery(window).scroll(function () {
if (jQuery(this).scrollTop() > 200) {
jQuery('#IrArriba').fadeIn();
} else {
jQuery('#IrArriba').fadeOut();
}
});
jQuery('#IrArriba a').click(function () {
jQuery('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});

});
//]]>
< /script>
Guarda los cambios y listo.
En color verde puedes ver dónde se modifica la distancia y el tamaño del botón. En caso de que quieras poner otra imagen distinta, cambia la URL en color azul por la de tu imagen; si haces eso deberás cambiar el ancho y alto del botón donde se indica de acuerdo a las medidas de tu imagen.

El ícono de la flecha estará del lado inferior derecho, si lo quisieras a la izquierda cambia
right: 30px; por left: 30px;
Y si lo quisieras arriba cambia bottom: 30px; por top: 30px;

Recuerda, que si ya tienes jQuery no debes poner el primer código, de lo contrario tendrás problemas de incompatibilidad.

Si te interesa otro método para tener el botón de Ir arriba, Ir abajo, e Ir al centro también con jQuery, puedes usar el método de Vku.

Promociona las entradas de tu blog

Artículo publicado en el blog Ciudad Blogger, uno de los sitios con más información sobre tecnología Blogger Ve la entrada en su blog original.

Promocionar las entradas del blog es de suma importancia si queremos darlo a conocer a más gente, pero de igual forma es de suma importancia ofrecerle a los lectores las herramientas para que puedan hacerlo de una forma sencilla.
Un recurso muy útil es colocar un área donde los lectores puedan copiar la URL de las entradas que quieren compartir, ya sea que copien la URL de la entrada, el código HTML que enlaza a ella, o el código para colocar el enlace de la entrada en un foro.
El resultado será un área como esta debajo de todas las entradas del blog que al hacer click en el área de texto se seleccionará el enlace (este ejemplo no, es sólo una imagen):



Para agregarlo a tu blog entra en Diseño | Edición de HTML, marca la casilla Expandir plantillas de artilugios y busca esta etiqueta:
<data:post.body/>
O si usas el Leer más automático busca este código:
<b:if cond='data:blog.pageType != &quot;item&quot;'>
< b:if cond='data:blog.pageType != &quot;static_page&quot;'>
< div style='text-align:justify;' expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
< script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
< span class='rmlink' style='float:right;'><a expr:href='data:post.url'>Leer más...</a></span>
< /b:if></b:if>
< b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
< b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

Justo debajo de cualquiera de esos dos agrega lo siguiente:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
< div class='compartir-post'>
< p>Si has encontrado útil este artículo puedes compartirlo desde tu blog, página Web o foro.</p>
< p>&lt;label for=&quot;aa-url&quot;&gt;URL:&lt;/label&gt;&lt;br /&gt;&lt;input size=&quot;80&quot; readonly=&quot;readonly&quot; onclick=&quot;this.focus();this.select();&quot; type=&quot;text&quot; id=&quot;aa-url&quot; value=&quot;<data:post.url/>&quot; /&gt;</p><p>&lt;label for=&quot;aa-forum&quot;&gt;Link HTML:&lt;/label&gt;&lt;br /&gt;&lt;input size=&quot;80&quot; readonly=&quot;readonly&quot; onclick=&quot;this.focus();this.select();&quot; type=&quot;text&quot; id=&quot;aa-forum&quot; value=&quot;&lt;a href=&amp;quot;<data:post.url/>&amp;quot;&gt;<data:post.title/>&lt;/a&gt;&quot; /&gt;</p><p>
& lt;label for=&quot;aa-forum&quot;&gt;Link para foros:&lt;/label&gt;&lt;br /&gt;
& lt;input size=&quot;80&quot; readonly=&quot;readonly&quot; onclick=&quot;this.focus();this.select();&quot; type=&quot;text&quot; id=&quot;aa-forum&quot; value=&quot;[url=<data:post.url/>]<data:post.title/>[/url]&quot; /&gt;</p>
< /div>
< /b:if>

Ahora agrega antes de ]]></b:skin> esto:
/* Compartir entradas
----------------------------------------------- */
.compartir-post {
background:#EFF5FB; /* Color de fondo del contenedor */
margin-top:30px;
padding-top:5px;
padding-bottom:5px;
padding-left:10px;
}
.compartir-post p {
font-size:12px; /* Tamaño de texto del mensaje */
}
.compartir-post input {
background:#ffffff;
border: 1px solid #A4A4A4; /* Borde de las celdas */
}


Guarda los cambios y listo. El resultado sólo aparecerá en las entradas individuales así que para verlo debes entrar a un post para cerciorarte que ha funcionado.

Por supuesto que a la caja para compartir le podemos cambiar el estilo, ya sea el color de fondo, agregar una imagen de fondo, tamaño de la letra, etc. Esas partes se modifican en las áreas que he puesto en color verde.

El contenedor como tal no tiene un tamaño específico pues se ajusta al ancho de las entradas, sin embargo, el ancho de las celdas donde aparecen los enlaces puede ajustarse modificando los números del primer código que insertamos y que están en color rojo.

Con esto hasta los lectores más novatos sabrán cuál es la URL de la entrada que les ha gustado y tendrán una forma más sencilla de poder copiar el enlace para compartirlo donde deseen.

Instala un elegante aviso flotante de suscripción al blog

Artículo publicado en el blog Ciudad Blogger, uno de los sitios con más información sobre tecnología Blogger Ve la entrada en su blog original.

otra vez vimos cómo poner un anuncio flotante que baja con la página el cual se usa con frecuencia para poner un aviso en el blog, pero también podemos darle otro uso y sacarle provecho para aumentar las suscripciones al feed.

Es decir, vamos a poner un aviso flotante de suscripción al blog de forma que cuando baje la página también baje la caja de suscripción.
Puedes ver un ejemplo en este blog de pruebas, y de paso puedes suscribirte ahí a este blog

Para ponerlo en tu blog primero debes tener activada la opción de suscripción por email en Feedburner. Si no lo has hecho entra a tu cuenta de Feedburner, haz click sobre el nombre de tu blog y luego click en la pestaña Publicize.

publicize feedburner
Ahora haz click en el enlace Suscripciones por Email que se encuentra en el menú lateral izquierdo.
A continuación haz click en el botón Activar y estará habilitada la función de suscripción por correo.

Ahora dentro de Blogger entra en Diseño > Edición de HTML y pega antes de </head> lo siguiente:
<style type='text/css'>
#anuncio {
position:absolute;
padding: 2px;
padding-top: 15px;
width: 280px; /* ancho del anuncio */
visibility: hidden;
z-index: 200;
top: 30px;
left: 30px;
}
#rss-mail {
/* color e imagen de fondo */
background: #FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtxoyxWHhvQJ_potwRAEiOMjZz-O-s3b3_JPqhfZQH-k9kSgsBiaFmC4dgkpaOZvg1_KhKSGD4YgNwAAX-FTwziIL0WdG0VlGoH316OQ94pejllVnImlyLbqKUg8gW9rIFAjjQKN780t0/s320/pattern_blk_point.png);
border:2px solid #FF8000; /* borde */
height:70px; /* alto de la caja */
}
#rss-mail span {
color:#FFFFFF; /* color del texto */
font-size:12px;
font-weight:bold;
line-height:30px;
}
#rss-submit {
background:#FF8000; /* color del botón */
border:0px;
}
.rss-box {
height:13px;
margin-top:10px;
color:#6E6E6E;
font-size:12px;
width:135px;
}
< /style>

< script type='text/javascript'>
//<![CDATA[
var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 30 //set x offset of bar in pixels
var startY = 15 //set y offset of bar in pixels
var verticalpos="fromtop" //enter "fromtop" or "frombottom"

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("anuncio").style.visibility="hidden"
}

function staticbar(){
barheight=document.getElementById("anuncio").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("anuncio");
stayTopLeft();
}
if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
//]]>
< /script>

Luego busca la etiqueta </body> y antes de ella pega esto:
<div id='anuncio'>
< div id='rss-mail'>
< a href='Javascript:void' onClick='closebar(); return false'><img align='right' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKGyhzMjbbi5wdYXZIgRXXR6AjvMhyphenhyphenZSbv9SRXgf3pxln2oF0ajRyzrJnF1nI-qQCtRGrIMNRX0UkbYSLOddzxjt5-j8cJBH0rsIRarG2PEZi3E8z_YYSkpgru9S-aX_Z02pQYQ8Rgswo/s320/cerrar.png'/></a>

< span>Recibe las actualizaciones directo a tu correo</span><br/>

< img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFWwhVWd-PdGdMW81O7s2x979RuigTydecL79PrMi5MA7TAz9MZpll1EiPqAuWREquhEgI2OL4o_RjHR44eFZY4hx2xazgquvYIKX8LIJb_fza5q3T4H4veHI6YaZXYq-fdue54ZfciHM/s1600/rss-icono.png' style='padding:5px; float:left;'/>
< form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=miblog&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
< input name='email' type='text/'/>
< input name='uri' type='hidden' value='miblog'/><input name='loc' type='hidden' value='es_ES'/><input id='rss-submit' type='submit' value='Suscribir'/></form></div></div>

Ahora sólo cambia lo que está en color rojo por el nombre de tu feed, por ejemplo, la URL de tu feed de Feedburner es algo como esto:
http://feeds.feedburner.com/miblog

El nombre de tu feed es lo que está en rojo, tal cual, sin espacios; así es como deberás ponerlo en el código donde se indica.
Lo que está en color azul puedes cambiarlo por otro texto, te recomiendo que no sea un texto muy largo.

En el primer código puedes personalizar la apariencia de la caja de suscripción, puedes guiarte por las anotaciones en color verde para saber a qué corresponde cada cosa.

De esta forma tendrás la posibilidad de conseguir más suscripciones a tu feed de una forma muy llamativa, además que la caja de suscripción puede cerrarse haciendo click en el ícono de cerrar.

Cambiar el tamaño de la letra con una barra

Artículo publicado en el blog Ciudad Blogger, uno de los sitios con más información sobre tecnología Blogger Ve la entrada en su blog original.

Ya antes vimos dos opciones para cambiar el tamaño de la letra del blog, en cualquiera de los dos se tiene que hacer click en un tamaño para que se aplique la medida de la fuente. En esta opción el cambio del tamaño es gradual y es usando MooTools, una librería Javascript de efectos.

Puedes ver un ejemplo en este blog de pruebas, en la sidebar verás una barra, usa el selector para cambiar el tamaño de la letra, desplazalo hacia la derecha para agrandar el tamaño, y hacia la izquierda para hacerla más pequeña.

Antes de pensar en ponerlo considera que MooTools al igual que otras librerías no es compatible con otros scripts, así que si usas Scriptaculous o jQuery seguramente no funcionará.

Ahora sí, entra en Plantilla | Edición de HTML y pega antes de </head> lo siguiente:
<script src='http://sites.google.com/site/ciudadbloggerfiles/Home/mootools.js' type='text/javascript'/>
< script type='text/javascript'>
window.addEvent(&#39;domready&#39;, function(){

var el = $(&#39;myElement&#39;),
font = $(&#39;fontSize&#39;);

new Slider(el, el.getElement(&#39;.knob&#39;), {
steps: 35, // Tamaño máximo de la letra
range: [8], // El 8 es el tamaño mínimo
onChange: function(value){
font.setStyle(&#39;font-size&#39;, value);
}
}).set(font.getStyle(&#39;font-size&#39;).toInt());

});
< /script>

< style type='text/css'>
div.slider {
width: 220px; /* ancho de la barra */
height: 16px; /* alto de la barra */
background: #eee; /* color de la barra */
}
div.slider div.knob {
background: #0080FF; /* color del selector */
width: 16px; /* ancho del selector */
height: 16px; /* alto del selector */
cursor: move;
}
div#fontSize {
height: 40px;
}
< /style>

Luego busca esta parte y agrega lo que está en color rojo:
<div id='fontSize'>
< div id='main-wrapper'>
< b:section class='main' id='main' showaddelement='no'>
< b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
< /b:section>
< /div>
</div>

Por último entra en Diseño | Añadir un gadget | HTML/Javascript y pega esto:
<div id="myElement" class="slider">
< div class="knob"></div>
< /div>
< p>Mueve la barra hacia los lados para cambiar el tamaño de la letra.</p>

Con eso el tamaño de la letra de las entradas cambiará desplazando el selector de la barra de un lado a otro. Si deseas que también cambie el tamaño de la letra de todo el blog entonces la primera línea en color rojo deberá ir antes de <div id='content-wrapper'> y la otra parte roja antes de <!-- end content-wrapper -->

Puedes cambiar el aspecto de la barra y el selector modificando lo que se indica en color verde.
Sin duda es un método muy elegante para cambiar el tamaño de la letra del blog que el lector agradecerá.

Galería de Imágenes en tus entradas

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Estás leyendo Sencilla galería de imágenes en tus entradas, en

Sencilla galería de imágenes en tus entradas

Desde que vimos como instalar una mini-galería de imágenes o slideshow en la barra lateral del blog muchos preguntaron si podría incluirse en una entrada. Por desgracia, la apariencia que debería tener la galería se pierde al mostrarla en un post y las imágenes suelen desordenarse.

Y bueno, después de haber estado unas horas frente al blog de pruebas aquí les traigo esta novedosa aplicación: un álbum o galería de imágenes sólo para entradas.

Una de las ventajas que ofrece el truco es que las imágenes cargarán a mayor velocidad.

Comprueba aquí el resultado:

La instalación es sorprendentemente rápida y sencilla.


Diseño>Edición de HTML>expandimos artilugios



Busca la etiqueta </head> en tu plantilla y justo antes añade esto:

<link href='https://sites.google.com/site/editoriosus/fds/blJJGaleriaartic1.css' media='screen' rel='stylesheet' type='text/css'/><style type='text/css'>.blJJTeGaleris img {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwG6AJT4W2kp3RYNtvBUCeWS5MWau3reF1niSY2x_CLnQY2FN4e5y1KRbhzfPMWOvX3Y309oAvxoXbFfF8RYZdr90oDxBDAGp3ks4tb6ExsqaHmbgtoJXxe8KOxG8vxDCM9EO8cHR2iBQ/s320/balcnminiaut.png") no-repeat scroll 0 0 transparent;}</style>

Ahora guarda la plantilla. Accede a la entrada en la que te gustaría mostrar el álbum o crea una nueva para comprobar el resultado.

Este es el código necesario:

<div id="balCCGaleriaJaim1">
<a href="javascript:void(0);" class="blJJTeGaleris"><img width="100" src="URL IMAGEN 1"><span><img width="380" src="URL IMAGEN 1"><br>TITULO IMAGEN 1</span></a><a href="javascript:void(0);" class="blJJTeGaleris"><img width="100" src="URL IMAGEN 2"><span><img width="380" src="URL IMAGEN 2"><br>TITULO IMAGEN 2</span></a><a href="javascript:void(0);" class="blJJTeGaleris"><img width="100" src="URL IMAGEN 3"><span><img width="380" src="URL IMAGEN 3"><br>TITULO IMAGEN 3</span></a><a href="javascript:void(0);" class="blJJTeGaleris"><img width="100" src="URL IMAGEN 4"><span><img width="380" src="URL IMAGEN 4"><br>TITULO IMAGEN 4</span></a>
</div>

Reemplaza en cada caso URL IMAGEN X con la dirección de tu imagen (debe introducirse dos veces) y TITULO IMAGEN X con el texto que aparecerá bajo cada fotografía.

En caso de querer mostrar más imágenes, haz uso de otro bloque como este dado que únicamente puedes insertar cuatro imágenes en cada álbum (pero un número ilimitado de éstos últimos).

No olvides que al poner este código en la entrada, debes hacerlo en la pestaña de 'Edición de HTML' y no en la de 'Redactar'.



Pulsa el botón Publicar y listo

Cómo instalar un carrusel de imagenes (Con Scriptaculuos)

Artículo publicado en el blog Ciudad Blogger, uno de los sitios con más información sobre tecnología Blogger Ve la entrada en su blog original.




Este es un carrusel de imágenes de Brian R. Miedlar que muestra las imágenes con un efecto de deslizamiento y regresa al inicio una vez llegado a la última imagen. Está hecho con Scriptaculous así que quienes usen jQuery ya saben que deberán aplicar un hack para que ambos scripts funcionen.
Puedes ver un ejemplo funcionando en este blog de pruebas.

Para poner este carrusel de imágenes en tu blog primero necesitas descargar este archivo, descomprimirlo, y subir los archivos a un hosting.
Luego, entra en la Edición HTML de tu plantilla y agrega antes de </head> esto:
<!-- Prototype y Scriptaculous-->
< script src='http://www.google.com/jsapi'></script>
< script>
google.load("prototype","1.7.0.0");
google.load("scriptaculous", "1.9.0");
< /script>
< !-- Prototype y Scriptaculous-->


< script language='javascript' src='URL del archivo os.js' type='text/javascript'/>
< script language='javascript' src='URL del archivo carousel.js' type='text/javascript'/>
< script language='javascript' src='URL del archivo application.js' type='text/javascript'/>

Si ya tienes Scriptaculous y Prototype no hace falta que agregues el código gris, pero el resto sí. Ahí coloca donde se indica en color rojo las URLs de los archivos que subiste previamente.

Ahora antes de ]]></b:skin> pega los estilos.
.carousel {
position:relative;
clear:both;
left:20px; /* Distancia desde la izquierda */
margin-top:10px;
margin-bottom:20px; /* Margen inferior */
border:2px solid #D8D8D8; /* Borde del carrusel */
background-color:#F2F2F2; /* Color de fondo */
}
.carousel .navButton {cursor:pointer; display:block; text-indent:-9999px; background-repeat:none; z-index:10;}
.carousel .container { position:absolute; overflow:hidden; }
.carousel .items { position:absolute; }

#Carousel2 {
height:88px; /* Alto del contenedor */
width:685px; /* Ancho del contenedor */
}
#Carousel2 .container {
left:26px;
top:12px;
width:630px; /* Ancho del contenedor de las imágenes */
height:100px; /* Alto del contenedor de las imágenes */
}
#Carousel2 .items { top:0; left:2px;
width:1700px; /* Ancho total de todas las minaturas */
}
#Carousel2 .item { height:70px; width:70px; float:left; clear:right; }
#Carousel2 .item .icon img { position:relative; left:0px; width:65px !important; height:65px; cursor:pointer;}
#Carousel2 .navButton { position:absolute; bottom:0px; width:24px; height:87px; }
#Carousel2 .navButton.previous { left:0px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZNb48FqY0hjO_u6yyQMxvbhBteiJ6Q0qfrzVDiVopSGR_C7sSp0DgAsMvJpdY4HJFj3cIfyC4hGnP-oJChudoihQADZsy6NHzxS1dVU94fCwpNRueBzwjwxK9JeqXaaQjGs4eqBnv5Ms/s87/button-left.png); }
#Carousel2 .navButton.next { right:2px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg401CFNHFforLginO_sG4A7QSq7MFggnHNz9TzWEiSpYCyxGFd4c4RgRSfsD4ZcUC0VlUS_WWRoUpHTHy9H-5xM4Lnl9pJuQSgm6cOfsgTkmxZqfJq5DrVMdaIr3NTSyk92kzfLd5UTnY/s87/button-right.png); }
#Carousel2 .item .key { display:none;}
#Carousel2 .item .picture { display:none;}
Después entra en Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript, o si usas la nueva interfaz entra en Diseño | Añadir un gadget | HTML/Javascript, y ahí pega la estructura del carrusel:
<div id="Carousel2" class="carousel">
< div class="button navButton previous" style="display:none;">Atrás</div>
< div class="button navButton next" style="display:none;">Adelante</div>
< div class="container">
< div class="items">


< div class="item">
< div class="key caption">Thumb</div>
< div class="icon">
< a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
< div class="picture"></div>
< /div>


< div class="item">
< div class="key caption">Thumb</div>
< div class="icon">
< a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
< div class="picture"></div>
< /div>


< div class="item">
< div class="key caption">Thumb</div>
< div class="icon">
< a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
< div class="picture"></div>
< /div>


< div class="item">
< div class="key caption">Thumb</div>
< div class="icon">
< a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
< div class="picture"></div>
< /div>


< div class="item">
< div class="key caption">Thumb</div>
< div class="icon">
< a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
< div class="picture"></div>
< /div>


< div class="item">
< div class="key caption">Thumb</div>
< div class="icon">
< a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
< div class="picture"></div>
< /div>


< div class="item">
< div class="key caption">Thumb</div>
< div class="icon">
< a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
< div class="picture"></div>
< /div>


< div class="item">
< div class="key caption">Thumb</div>
< div class="icon">
< a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
< div class="picture"></div>
< /div>


< div class="item">
< div class="key caption">Thumb</div>
< div class="icon">
< a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
< div class="picture"></div>
< /div>


< div class="item">
< div class="key caption">Thumb</div>
< div class="icon">
< a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
< div class="picture"></div>
< /div>


< div class="item">
< div class="key caption">Thumb</div>
< div class="icon">
< a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
< div class="picture"></div>
< /div>


< div class="item">
< div class="key caption">Thumb</div>
< div class="icon">
< a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
< div class="picture"></div>
< /div>


< div class="item">
< div class="key caption">Thumb</div>
< div class="icon">
< a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
< div class="picture"></div>
< /div>


< div class="item">
< div class="key caption">Thumb</div>
< div class="icon">
< a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
< div class="picture"></div>
< /div>


< div class="item">
< div class="key caption">Thumb</div>
< div class="icon">
< a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
< div class="picture"></div>
< /div>


< div class="item">
< div class="key caption">Thumb</div>
< div class="icon">
< a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
< div class="picture"></div>
< /div>


< div class="item">
< div class="key caption">Thumb</div>
< div class="icon">
< a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
< div class="picture"></div>
< /div>


< div class="item">
< div class="key caption">Thumb</div>
< div class="icon">
< a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
< div class="picture"></div>
< /div>


< div class="item">
< div class="key caption">Thumb</div>
< div class="icon">
< a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
< div class="picture"></div>
< /div>



</div>
</div>
</div>


Ahí agrega las URLs de los enlaces y las URLs de las imágenes. La URL del enlace es opcional por si deseas que la imagen enlace a alguna entrada.

En el segundo código he puesto en color verde algunos estilos que puedes personalizar tales como el color del borde y el color de fondo. Las flechas son imágenes así que si quieres cambiarles su color o usar otras, tendrás que cambiar las dos URLs que se encuentran en ese código.


El tamaño.
El ancho del carrusel yo lo he puesto de 685px, así que debajo de la cabecera podría quedar muy bien. Si quieres cambiar la longitud entonces tendrás que cambiar el /* Ancho del contenedor */ (que es el tamaño de todo el carrusel), el /* Ancho del contenedor de las imágenes */ (que es el área donde se muestran las miniaturas), y el /* Ancho total de las miniaturas */ que es el ancho real que ocupan todas las miniaturas juntas.

Si agregas más imágenes o si quitas algunas, también tendrás que modificar el ancho total de las miniaturas, de lo contrario se mostrarán algunas imágenes debajo de otras.

Para añadir más imágenes agrega antes de los </div> en color azul un pedazo de código como este:
<div class="item">
< div class="key caption">Thumb</div>
< div class="icon">
< a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
< div class="picture"></div>
< /div>


Para alinear el gadget sólo cambia la distancia desde la izquierda (en color verde) por otro valor, uno más grande hará que se recorra hacia la derecha.

El carrusel muestra grupos de 5 imágenes en cada avance o retroceso, si deseas modificar este valor deberás editar el archivo application.js y ahí dentro buscar esta parte:
setSize: 5,
Ese 5 es el número de imágenes que se muestran en cada avance, sólo cámbialo por el que quieras.

A modo de consejo: como los scripts son tres pueden ser lentos en cargar así que se recomienda alojar los scripts en la plantilla.

Y ahora sí, es todo.

Cómo hacer efecto de aumentar el título al pasar el cursor

Artículo publicado en el blog Ciudad Blogger, uno de los sitios con más información sobre tecnología Blogger Ve la entrada en su blog original.

Esto de las transiciones con CSS3 es algo que a todos encanta por la variedad de efectos que podemos obtener y sin necesidad de utilizar ningún script, todo es CSS.
Uno de estos efectos que me han preguntado es cómo hacer para que la imagen de la cabecera (o el título del blog en caso de que no tengamos imagen) pueda aumentar al pasar el cursor con este efecto suave y deslizante.











Primero hay que procurar tener la imagen en un tamaño grande, esto es para que no se pixele al aumentarse. Con esto quiero decir que si por ejemplo, la imagen de la cabecera aumentará a 400px de ancho entonces el ancho original de la imagen debe ser de 400px o más.

Luego, hay que saber las medidas que tendrá la imagen cuando esté pequeña, para eso tendremos que sacar las medidas proporcionalmente para que no se desproporcione al reducirla (¿ves? te dije que algún día te serviría)

Ahora sí, entra en la Edición HTML de la plantilla y agrega antes de ]]></b:skin> lo siguiente:
#header img {
width:200px; /* Ancho de la imagen en su estado normal */
height:200px; /* Alto de la imagen en su estado normal */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#header img:hover {
width:400px; /* Ancho de la imagen al pasar el cursor */
height:400px; /* Alto de la imagen al pasar el cursor */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}


Cambia los valores de width y height, width es el ancho de la imagen, y height el alto, en color verde verás a cuál corresponde cada una.
Si lo crees conveniente puedes agregar unos márgenes para que la imagen no parezca que se va hacia la derecha, es decir, que dé la impresión que el zoom es desde el centro, para ello agrega debajo de #header img:hover { esto:
margin-top:-10px;
margin-left:-30px;
Puedes jugar con esos valores hasta que des con los correctos.

Pero si no usas una imagen como cabecera entonces también puedes aplicar este efecto al título del blog.


Nombre de mi blog




El procedimiento es similar; agrega antes de ]]></b:skin> esto:
#header h1 {
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#header h1:hover {
font-size:80px; /* Tamaño del texto al pasar el cursor */
color:#FF00FF; /* Color del texto al pasar el cursor */
margin-left:-30px; /* Margen izquierdo */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
Aquí es menos complicado pues no tienes que saber las medidas de ninguna imagen, sólo debes poner el tamaño de la fuente que tendrá el título del blog al pasar el cursor. Aunque por supuesto puedes agregar ahí otras propiedades como un color diferente, y también puedes usar los márgenes para que el texto se aumente desde el centro, pero si no quieres estas dos últimas opciones puedes eliminarlas sin problema.


Y así de sencillo puedes tener tu cabecera del blog con efecto de zoom al pasar el cursor, aunque, lamento desilusionar a los usuarios de Internet Explorer pues ellos no verán ningún efecto de deslizamiento. Otra razón más para usar un navegador moderno.

Cómo instalar un gadget de etiquetas en forma de menú despegable

Artículo publicado en el blog Ciudad Blogger, uno de los sitios con más información sobre tecnología Blogger Ve la entrada en su blog original.

Ya que seguimos con el tema de ahorrar espacio en el blog veamos cómo podemos mostrar las etiquetas en forma de menú desplegable, esto será para ahorrar espacio y para tener las etiquetas con otro estilo diferente al tradicional.
Cuando usamos el gadget de etiquetas éstas se muestran en forma de lista ordenada:



Lo que haremos será que se muestren de esta forma:





Sólo necesitas entrar en Diseño | Edición de HTML, marcar la casilla Expandir plantillas de artilugios y buscar este código:
<ul>
< b:loop values='data:labels' var='label'>
< li>
< 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>
< b:if cond='data:showFreqNumbers'>
< span dir='ltr'>(<data:label.count/>)</span>
< /b:if>
< /li>
< /b:loop>
< /ul>
Elimínalo y en su lugar pega esto:
<br/>
< select class='menu-etiquetas' onchange='location=this.options[this.selectedIndex].value;'>
< option>Selecciona una categoría</option>
< b:loop values='data:labels' var='label'>
< option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
< /option>
< /b:loop>
< /select>
Con eso será suficiente. Puedes cambiar el texto Selecciona una categoría donde se indica. Si quieres que no se muestren el número de entradas que tiene cada etiqueta elimina lo que está en color azul.

También puedes darle un poco de color para que se vea más o menos de esta forma:



Si lo quieres así sigue el mismo procedimiento pero adicionalmente deberás pegar antes de
]]></b:skin> este código:
.menu-etiquetas {
background-color: #CEE3F6; /* Color de fondo */
color: #000000; /* Color del texto */
}
Ahí puedes cambiar los colores donde se indica.
No está de más decir que primero necesitas tener el gadget de Etiquetas... digo, por si alguien busca el código y no lo encuentra.

¿Qué es un feed? por Ciudad Blogger

Artículo publicado en el blog Ciudad Blogger, uno de los sitios con más información sobre tecnología Blogger Ve la entrada en su blog original.




La mayoría ya debe saber qué es un feed y cómo funciona, pero para los que apenas están comenzando con un blog o recién se adentran al mundo de la información electrónica, y no saben qué es el feed y para qué sirve, vamos a explicarlo con esta entrada.

¿Qué es un feed?

Un feed es un medio por el cual los usuarios pueden leer las entradas de un sitio Web o parte de ellas; el feed en sí es un archivo que contiene la información del contenido del blog y que se actualiza de forma automática.
Esto significa que cuando estés interesado en un blog puedes suscribirte a su feed y de esta forma sabrás cuando haya un contenido nuevo el cual podrás leerlo desde tu lector de feeds.
Seguro te preguntarás si existe una ventaja al suscribirse a un feed, y la respuesta es sí; supongamos que te gustan 50 blogs que lees regularmente, ¿te imaginas tener que estar entrando a esos 50 blogs a cada rato para saber si han escrito algo nuevo? Podrías perder mucho pero mucho valioso tiempo. En cambio si te suscribes al feed de esos blogs sabrás cuando haya una nueva entrada en alguno de ellos sin haber tenido que ir hasta cada uno de esos sitios para averiguarlo.

En palabras más cortas, suscribirte a un feed hace que en lugar de que tú vayas a la información sea la información la que vaya hacia a ti.

¿Cómo me suscribo al feed de un blog?

Cuando te interese estar al tanto de las actualizaciones de un blog puedes suscribirte al feed de éste. En la mayoría de los casos verás este icono y haciendo click en él o en el enlace que esté junto a él podrás conseguir la suscripción a ese blog.
O bien, si ya usas un lector de feeds sólo necesitas agregar en él la URL del blog y el lector de feeds se encargará de buscar el feed por ti.

¿Cómo puedo leer los feeds a los que me suscribo?

Cuando te suscribes a un feed necesitas elegir un lector de feeds que es el lugar donde se almacenarán todos los feeds a los que te suscribas y será éste lector quien visite de forma periódica esos blogs que te gustan para informarte cuando haya contenido nuevo; éste lector puede ser una aplicación para tu computadora, un sitio online como Google Reader, o desde tu correo electrónico.
En cualquiera de los dos primeros casos necesitas entrar cuando lo desees para revisar si hay algún artículo nuevo en cualquiera de todos los sitios donde estás suscrito; en el caso de la suscripción por correo no necesitarás hacerlo pues cuando haya un nuevo artículo en alguno de los blogs a los que estás suscrito te llegará un correo con la información respectiva.

¿Cómo activo el feed de mi blog para que la gente se suscriba?

Si tienes un blog de Blogger entonces ya tienes un feed de forma automática y por defecto está activado para que tus lectores puedan suscribirse a él.
Para verificar que tu feed está activado entra en Configuración | Feed del sitio | Permitir feeds del blog, ahí puedes seleccionar Completo si es que quieres que aparezca todo el contenido de la entrada en los feeds, o Corto si quieres que sólo se vea el título del post.
La URL del feed de tu blog es en todos los casos así:
http://nombre-de-mi-blog.blogspot.com/feeds/posts/default

¿Qué es un gestor de feeds?

Un gestor de feeds se encarga de administrar los feeds de los blogs que posees. Estos gestores se ocupan de distribuir a los suscriptores las actualizaciones del contenido de tu blog, y en la mayoría de los casos te muestran estadísticas de tus feeds tales como el número de suscriptores. El más popular, reconocido por las distintas herramientas que tiene, es Feedburner, que además es un producto de Google. En la próxima entrada veremos cómo crear un feed ahí.


Y ya que estamos con este tema recuerda que puedes suscribirte a nuestro feed para leernos deste tu lector o también puedes suscribirte por correo electrónico.

Cómo incluyir los fleedfare en el feed y en el blog

Artículo publicado en el blog Ciudad Blogger, uno de los sitios con más información sobre tecnología Blogger Ve la entrada en su blog original.

Los FeedFlare son enlaces para compartir que se agregan debajo de los feeds, son algo así como los marcadores sociales pero dentro del feed.
Si estás suscrito al feed de Ciudad Blogger entonces habrás notado (o no), que debajo del resumen de las entradas aparecen unos enlaces, esos links son los FeedFlare, y que pueden ser usados por ejemplo para twittear la entrada, enviarla por correo a un amigo, publicarla en Facebook, etc. En otras palabras, son enlaces que permitirán al lector promocionar nuestras entradas.




Para activarlos entra a tu cuenta de Feedbuner | Optimize, y selecciona FeedFlare del menú izquierdo. Ahí marca de las casillas de la primera fila, los servicios que quieres que aparezcan. Cuando termines da click en Activar.



Un poco arriba del botón Activar, y que después se llamará Guardar, verás el ejemplo de cómo se verán tus FeedFlare, si pasas el cursor encima de ellos podrás cambiarlos de posición.


Cada vez que marques una nueva casilla, o que los cambies de posición tienes que dar click en Guardar.

Además de los FeedFlare oficiales también podemos usar algunos externos, y mejor aun, en español. Por la red debe haber varios de ellos, yo les compartiré los que uso, que son: Meneame, Me gusta (de Facebook), Twitter, Bitácoras, y Enviar (por correo).

Para agregarlos busca debajo de los FeedFlare oficiales, donde dice Personal FeedFlare.


Ahí agrega una de estas URLs, o todas, si quieres.

Meneame
http://ciudad-blogger.googlecode.com/files/meneame.xml
Me gusta
http://ciudad-blogger.googlecode.com/files/like.xml
Twitter
http://ciudad-blogger.googlecode.com/files/twitter.xml
Bitacoras
http://bitacoras.com/bitacoras_com.feedflare.xml
Enviar por correo
http://ciudad-blogger.googlecode.com/files/emailthis.xml


Ya que los hayas agregado tendrás que marcar las casillas de la primera fila y dar click en Guardar.
Si te diera problemas al guardarlos entonces agrega uno por uno, es decir, agrega uno, lo guardas, lo activas, y sigues con el siguiente.

Pero el uso de los FeedFlare no acaba ahí, también podemos usarlos dentro del blog. Esto es que los FeedFlare pueden aparecer al pie de la entrada como links para compartir.



Para agregarlos en el blog marca las casillas de los links que quieres, pero ahora serán los de la segunda fila.
Ya que estén marcados da click en Guardar, y arribita de ese botón verás el texto Get the HTML code to put FeedFlare on your site; del menú desplegable selecciona Blogger...


Se abrirá una ventana con un código para copiar, un código como este:
<script charset='utf-8' expr:src='&quot;http://feeds.feedburner.com/~s/Nombre-de-mi-blog?i=&quot; + data:post.url' type='text/javascript'/>
Copia el código de esa ventana, luego entra en Diseño | Edición de HTML, marca la casilla Expandir plantillas de artilugios, y pega el código que copiaste anteriormente, debajo de:
<div class='post-footer'>
Guarda los cambios y listo, también tendrás los FeedFlare de Feedburner en el blog.

Aquí les dejo el enlace del catálogo de FeedFlare de feedburner:
http://www.feedburner.com/fb/a/help/flarecatalog
Si hay alguno que te guste sólo copia el enlace junto a Copy this URL, y lo pegas tal como explicamos en la entrada.
Related Posts Plugin for WordPress, Blogger...