domingo, 31 de julio de 2011

Los scripts ofuscados

Cuando un script está "ofuscado" no significa que esté enojado y haga cosas raras sólo para molestarnos, significa que está encriptado. De vez en cuando vemos esas cosas en códigos que nos dicen que utilicemos y no hay ningún problema, funcionan bien hasta que uno quiere hacer algún pequeño cambio en cuyo caso, simplemente resulta imposible.

¿Para qué se hace eso? Por dos razones: reducir su tamaño e impedir que se copie; ambas razones son ... digamos que discutibles por no decir absurdas.

Básicamente, minimizar un script es quitar espacios innecesarios, tabulaciones, comentarios y saltos de línea además de optimizar variables, funciones, etc, para que la cantidad de caracteres sea menor y de tal modo, se cargue más rápido. Eso es razonable cuando se trata de librerías o frameworks sofisticadas de gran volumen, cosas que uno ni siquiera se atrevería a mirar pero, si son scripts "normales", es bastante ridículo ya que sólo hará que su edición sea más difícil y la "ganancia" es prácticamente nula.

La cantidad de líneas de código que tenga un script no tiene relación con su velocidad. Puede poseer cuatro líneas y ser lenta o cien y ser rápida; lo que importa, no es su extensión sino qué procesos ejecuta y cómo los ejecuta.

Ofuscar scripts para impedir que se copien o se modifiquen es una tontera. Como cualquier cosa que carga el navegador, una vez que está allí, es editable, copiable y usable; sólo hay que saber cómo. No es un tema de copyrights o piraterías, es un tema absolutamente técnico, exento de interpretaciones morales.

Los scripts son cargados por el navegador, ya sea que estén en la misma página o en archivos externos; para que funcionen, deben ser accesibles, si son accesibles, pueden ser leídos y por lo tanto, copiados o modificados; ofuscarlos, sólo agrega un paso extra a esa tarea.


Hay muchos compresores/encriptadores, Google tiene el suyo Closure Compiler, Yahoo tiene el YUI compressor, incluso hay algunos online como JavaScript Obfuscator o /Packer/ que es de los más utilizados.

Por ejemplo, si quiero que esto se "ofusque":
function SINO(cual) {
var elElemento=document.getElementById(cual);
if(elElemento.style.display == 'block') {
elElemento.style.display = 'none';
} else {
elElemento.style.display = 'block';
}
}
marco la opción Base62 encode y Shrink variables y me dará como resultado este jeroglífico:
eval(function(p,a,c,k,e,r){e=function(c){return c.toString(a)};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('3 4(a){5 b=6.7(a);8(b.0.1==\'2\'){b.0.1=\'9\'}c{b.0.1=\'2\'}}',13,13,'style|display|block|function|SINO|var|document|getElementById|if|none|||else'.split('|'),0,{}))
Es obvio que esto tiene su proceso inverso así que puedo usar esas mismas herramientas para "desofuscar", no es nada del otro mundo.

Minimizar u ofuscar scripts tiene un problema extra, a veces, el resultado obtenido no funcionará porque son herramientas automáticas y es posible que determinadas cosas sean malinterpretadas.

Una alternativa extra la ofrece jsbeautifier que es una herramienta online donde podemos copiar y pegar cualquier código JavaScript y formatearlo con distintas opciones, agregando tabulaciones, llaves que falten, etc. Del mismo modo, basta poner cualquier script minimizado o encriptado y hacer click en el botón Beatify javascript superior para que lo haga legible y por lo tanto, editable.

Sólo hay una forma segura de evitar que alguien copie algo: NO PUBLICARLO en la web.

sábado, 30 de julio de 2011

viernes, 29 de julio de 2011

Dos gadgets para Google Plus

Google+ Feed Widget permite mostrar el contenido público de cualquier usuario, de manera similar a lo que hacen los gadgets de Twitter u otras redes sociales, configurando unos pocos parámetros tales como su tamaño y los colores de fondo y texto.

El único dato importante es el ID de nuestra cuenta que es el que se puede ver en la barra de direcciones al ingresar a Google Plus o en cualquiera página:
https://plus.google.com/00000000000000000000
https://plus.google.com/00000000000000000000/posts
Los cambios son previsualizados al instante y, una vez que nos decidimos, les solicitamos que nos den el código (Get the Embed code) que, simplemente, copiamos y pegamos allí donde quisiéramos mostrarlo, ya sea en una entrada, en una página estática o en un elemento HTML.

Cualquier ajuste, puede hacerse directamente en ese código ya que los datos son evidentes:
<iframe frameborder="0" border="0" cellspacing="0" src="http://stream.pluswidget.com/google-plus-widget/iframe/106189723444098348646/?width=300&height=500&shell_bg=303941&shell_text=ABC&shell_links=4D90FE&post_bg=303941&post_text=CCC&post_links=ABC&scroll_bg=303941&scroll_handle_text=456" width="300" height="500"></iframe>
No uso la red así que este es un ejemplo cualquiera:


Google Plus Widget es distinto; tiene más opciones que incluyen la posibilidad de mostrar o no mostrar las actualizaciones.

Al igual que con la anterior, basta agregar el ID de nuestra cuenta, definir colores, tamaños y tipos de fuente y luego, copair y pegar el código que nos dan:

<script type="text/javascript">mbgc='f5f5f5';ww='320';mbc='cecece';bbc='3F79D5';bmobc='3b71c6';bbgc='4889F0';bmoc='3F79D5';bfc='FFFFFF';bmofc='ffffff';tlc='cecece';tc='6a6a6a';nc='6a6a6a';bc='6a6a6a';l='y';fs='16';fsb='13';bw='100';ff='4';pc='4889F0';b='s'; pid='114786324472347150186';</script>
<script type="text/javascript" src="http://widgetsplus.com/google_plus_widget.js"></script>

Mensaje que cambia de color de fondo y del texto


Añadir un nuevo gadget HTML/Javascript y pegar el siguiente código:
Modificar el texto dentro del Div y adaptar el estilo.En el script cambiar los colores y velocidad.1000 = 1 segundo.Modificar el texto dentro del Div y adaptar el estilo.En el script cambiar los colores y velocidad.1000 = 1 segundo.Modificar el texto dentro del Div y adaptar el estilo.En el script cambiar los colores y velocidad.1000 = 1 segundo.Modificar el texto dentro del Div y adaptar el estilo.En el script cambiar los colores y velocidad.1000 = 1 segundo.

<div id='bgcolor' style="padding:10px;font-size:20px;text-align:center;width:95%;margin:auto">
El color del fondo y del texto cambia cada segundo!!!
</div>

<script language='JavaScript'>
bgrcolor = document.getElementById('bgcolor');
function color_uno() {
bgrcolor.style.backgroundColor='#000000';
bgrcolor.style.color='#00ff00';
setTimeout('color_dos()', 1000);
}

function color_dos() {
bgrcolor.style.backgroundColor='#3366CC';
bgrcolor.style.color='#ffffff';
setTimeout('color_tres()', 1000);
}

function color_tres() {
bgrcolor.style.backgroundColor='#ff0000';
bgrcolor.style.color='#ffff00';
setTimeout('color_uno()', 1000);
}

color_uno()
</script>

Modificar el texto dentro del Div y adaptar el estilo.

En el script cambiar los colores y velocidad.

1000 = 1 segundo.

Tabla de colores

Mover el gadget a al lugar que quierán mostrar el mensaje.

El color del fondo y del texto cambia cada segundo!!!

jueves, 28 de julio de 2011

Botones flotantes para compartir de Facebook, Twitter y Google +1

Hace ya algo de tiempo vimos cómo poner los botones de compartir de Facebook y Twitter en la parte superior de las entradas, pero ahora veremos cómo ponerlos en modo flotante tal como el ejemplo de este mismo post, verás que aun con subir o bajar el scroll de la página los botones permanecen ahí (en el lado izquierdo).
Además del botón Me gusta de Facebook, el botón para twittear, se ha incluido el botón +1 de Google.
Veremos cómo ponerlos de dos formas, o mejor dicho, con dos funciones diferentes, la primera será para que sólo se muestren en las entradas y que su función sea compartir (o recomendar) la entrada donde se ha hecho click en el botón.
La segunda opción será mostrarlo en todas partes inclusive en la portada, pero con la diferencia que no será para compartir las entradas, sino el blog completo.

El procedimiento es sumamente sencillo, sólo hay que entrar en Diseño | Edición de HTML, marcar la casilla Expandir plantillas de artilugios, y pegar antes de ]]></b:skin> lo siguiente:
table#RedesSociales{
position:fixed;
top:150px;
left:5px;
z-index:200;
}
Ahora busca esta línea:
<!-- clear for photos floats -->
Debajo de ella agrega este código:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<table border='0' cellpadding='6' id='RedesSociales'><tbody>

<tr><td><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url+ &quot;&amp;layout=box_count&amp;show_faces=false&amp;width=73&amp;height=63&amp;action=like&amp;font=tahoma&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:73px; height:63px'/></td></tr>

<tr><td><a class='twitter-share-button' data-count='vertical' data-lang='es' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></td></tr>

<tr><td><script src='http://apis.google.com/js/plusone.js' type='text/javascript'/><g:plusone size='tall'/></td></tr>

</tbody></table>
</b:if>
Guarda los cambios y listo. Ese servirá para que se compartan las entradas individuales, así que no se verán en la portada, sólo ingresando a un post.

Pero si lo que quieres es compartir o que se recomiende la URL de tu blog y no las entradas, entonces en lugar de ese código, el que pondrías sería este:
<table border='0' cellpadding='6' id='RedesSociales'><tbody>

<tr><td>&lt;iframe allowTransparency=&#039;true&#039; frameborder=&#039;0&#039; scrolling=&#039;no&#039; src=&#039;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=73&amp;height=60&amp;action=like&amp;font=tahoma&amp;colorscheme=light&#039; style=&#039;border:none; overflow:hidden; width:73px; height:60px&#039;&gt;&lt;/iframe&gt;</td></tr>

<tr><td><a class='twitter-share-button' data-count='vertical' data-lang='es' data-text='Título del blog' 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>

<tr><td><script src='http://apis.google.com/js/plusone.js' type='text/javascript'/><g:plusone href='http://nombre-de-mi-blog.blogspot.com' size='tall'/></td></tr>

</tbody></table>
En este caso, hay que poner los datos que se indican en color rojo. Si usas un dominio propio entonces no pongas .blogspot.com sino la extensión de tu dominio propio. Por ejemplo, en lugar de ciudadblogger.blogspot.com sería ciudadblogger.com

En ambos casos podemos cambiar la posición de los botones, eso se controla en el primer código.
top:150px; es la distancia que habrá desde arriba, con un valor más alto los botones se bajarán.
left:5px; es la distancia que tendrán desde al lado, left indica que estarán a la izquierda, si los quieres a la derecha cambia left por right

Y listo. Otra forma de ofrecerle a los lectores la posibilidad de que valoren nuestro blog y entradas en las diferentes redes sociales.

Selección de botones CSS

WebResourcesDepot presenta una selección de botones creados con CSS3 que pueden ser descargados, utilizados o editados a gusto de cada uno. Algunos ejemplos como BonBon ya los había probado pero otros son novedosos y de todos ellos algo puede aprenderse.

CSS3 Buttons es un conjunto de 18 estilos con varios colores y formas.
Dolor lorem ipsumZardi es una serie de reglas de estilo creadas por Horacio Bella que pueden ser utilizadas parcial o totalmente.
Awesome Yellow Button »Super Awesome Buttons son botones con sombras, aptos para fondos claros u oscuros.
Fancy Buttons es complicado pero es para verlo y mirar el código fuente y experimentar.
Try to click me10 Nice CSS3 Buttons es interesant porque contiene explicaciones paso a paso

CSS3 Animated Bubble Buttons requiere el uso de imágenes de fondo; ver demo online


Y más:

Configurar favicon

En un post pasado vimos cómo agregar un favicon desde la plantilla, agregando un código sencillo.

1.§ Pues bien, ahora Blogger nos da una opción mucho más sencilla. Lo único que tenemos que hacer es ir a Diseño.

2.§ Veremos un pequeño recuadro en la parte izquierda donde dice Favicon. Damos click al enlace que está al lado (editar). Se abrirá un cuadro de diálogo desde donde subiremos nuestro favicon.


3.§ Le damos click a guardar y listo.

Últimas entradas con imagen miniatura, por categoría o etiqueta

Blogger ofrece muchos widgets, y por medio de ellos se pueden lograr muchas cosas, como crear un menú de navegación, mostrar los últimos comentarios por medio del feed etc., y sin necesidad de usar scripts adicionales, o agregar más código.



Una de esas cosas que podemos tener fácilmente  es mostrar "las útimas entradas con  imagen miniatura", por medio del widget de "lista de Blogs", ya que ese widget funciona con los feeds.


Hace tiempo Rosa, (que en paz descanse) publicó una entrada, en donde explicaba como mostrar las últimas entradas, usando este widget, ahora veremos, como mostrar las últimas entradas, de cierta categoría o etiqueta, usando ese widget.



Esto puede ser muy útil, cuando queremos mostrar las últimas entradas de cierto contenido, por ejemplo, vamos a suponer que tienes un blog de recetas, y quieres publicar las últimas entradas de la etiqueta: "pasteles",  o que tengas un blog de manualidades y quiere mostrar las ultimas entradas de la etiqueta: "fieltro", en cualquier caso, lo podemos lograr, de este modo que a continuación se explica.



Cómo hacerlo paso a paso...



Paso 1: Desde tu escritorio, ve a Diseño ► Elementos de la página, en la nueva interfaz de Blogger, (en Blogger in Draft) ve a Diseño.



Paso 2: Agrega el widget de "Lista de Blogs":




Widget de Lista de Blogs

Paso 3: Configúralo para que muestre:


  • Título del el elemento más reciente

  • Miniatura del elemento más reciente



...y también si quieres,  puede agregar el "Fragmento del elemento más reciente", y la fecha de la última actualización, pero no el ícono.




configuración del widget de lista de blogs



Paso 4: Ahora, has click en Agregar un blog a tu lista  y agregarás el siguiente enlace, para obtener el feed de la etiqueta que nos interesa:


http://MI-BLOG.blogspot.com/feeds/posts/default/-/ETIQUETA?start-index=1&max-results=1

Con ese enlace, se pueden obtener los Feeds de una etiqueta,  y con el parametro: start-index  podemos especificar el orden del contenido a mostrar; cambia, lo que esta marcado de rojo, donde dice: ETIQUETA, escribes el nombre de la etiqueta.



Deberás repetir esto, las veces necesarias según el número de entradas que quieras mostrar; cambiando el valor de start-index; tomando en cuenta que, cuando dice: "1", mostrará la última entrada con esa etiqueta, para leer la anterior en lugar de 1, pondrás 2, luego para la anterior a esa 3 y así sucesivamente.




Nota: Cuando uses una etiqueta con más de una palabra, escribes en medio de estas: %20




Por ejemplo, esta es mi etiqueta de "Explorando Blogger", y si la usará, la escribiría así:




Explorando%20Blogger





Paso 5: Guarda los cambios.



Paso 6: Luego necesitamos un poco de CSS, para eliminar el título del Blog, en cada artículo, también agregue otro poco de CSS básico, para que puedan personalizar el widget, y para agregarlo, lo pegan en Añadir CSS, desde el diseñador de plantillas (al hacerlo así, pueden editar el CSS añadido ahí mismo, las veces que quieran, y sin ingresar al HTML de la plantilla):


#BlogList1 h2 { /*El título del widget*/margin:0;

padding: 0;

background: url(tu-imagen.gif) no-repeat left top;

}

#BlogList1 ul{

margin: 0;

padding: 0;

width: 100%;

}

#BlogList1 .blog-title {

display: none; /*importante, eliminamos el título del Blog*/

}

#BlogList1 .item-title{ /*El título de cada artículo o post*/ margin:0;

padding:0;

}

#BlogList1 li img  { /*La imagen miniatura de cada post*/ background-color: #ffffff; /*ponemos fondo*/

padding: 4px;

margin: 0;

}

#BlogList1 ul li { /*estilos de cada elemento de la lista*/ border-bottom: 1px dashed #cccccc;  /*el borde*/

padding: 6px 0 0 0;

margin: 0;

}

#BlogList1 ul li a {

color: #7796d0; /*El color de el enlace*/ 

}


#BlogList1 ul li a:hover {

color: #7796d0; /*El color de el enlace al poner el puntero encima*/ 

}





Paso 7: Guarda los cambios, en APLICAR AL BLOG.




Paso 8: Finalmente, lo que resta es cambiar la URL en el código del widget, ya que, cuando se haga click sobre la imagen miniatura, nos llevará a la página de la etiqueta en cuestión (la que estamos usando) , y para ello, vamos a la edición de HTML de la plantilla, marcamos la casilla de expandir plantilla de artilugios, luego, buscamos, con la ayuda de "ctrl F", la siguiente linea:



<div class='item-thumbnail'>



Inmediatamente después viene esta linea:



<a expr:href='data:item.blogUrl' target='_blank'>



La cambiamos por esta:


<a expr:href='data:item.itemUrl' target='_blank'>

Al cambiarla, al hacer click sobre la imagen miniatura, iremos a la "entrada de esa imagen".



También, si no queremos que se abra en una nueva ventana, al hacer click sobre esta, eliminamos:



target='_blank'





Paso 9: Checamos en vista previa, y si todo luce bien, guardas los cambios.





¿y el DEMO?

Lo puedes ver ahora mismo en mi blog en últimas Plantillas, en mi caso, estoy mostrando la imagen miniatura y el título de la entrada...



Actualización: 08/01/2011. Agregue otro parámetro que es &max-results=1, para evitar que se repita la misma entrada.

miércoles, 27 de julio de 2011

Muy Tranquilo, un excelente blog para distraerse un buen rato

Alejándome un poco de los tutoriales y aportes que hago constantemente, hago entrega de un muy buen blog que en lo personal me ha encantado, a pesar de llevar un poco más de 1 mes de actividad, se vé bastante prometedor. Su nombre es Muy Tranquilo.


Lo que me ha llamado la atención de este blog es que se puede encontrar contenido de distinta índole, incluye datos curiosos sobre animales, frases, ciencia, noticias tecnológicas, contenido curioso y algunos vídeos que sin duda están muy interesantes.


Información de Muy Tranquilo:
Observaciones:
  • Considero este blog como una excelente referencia al momento de crear sus blogs, puede servirle a mas de uno como ejemplo.
  • Recomiendo que se suscriban a las feeds de Muy Tranquilo para conocer todas las actualizaciones.

Los últimos artículos de Muy Tranquilo:


Youtube Instant Search: Un plugin para JQuery


Youtube Instant Search es una pequeño plugin para jQuery que permite hacer búsquedas de videos y mostrar los resultados en tiempo real, aprovechando el API de Youtube y leyendo los feeds en formato JSON.

Es nuy sencillo de agregar y personalizar. primero, si no la tenemos, debemos agregar la librería jQuery cosa que hacemos colocando esto antes de </head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
Y debajo, el script con el plugin:
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$(".search_input").keyup(function() {
var search_input = $(this).val();
var keyword= encodeURIComponent(search_input);
var yt_url='http://gdata.youtube.com/feeds/api/videos?q='+keyword+'&format=5&max-results=1&v=2&alt=jsonc';
$.ajax({
type: "GET",
url: yt_url,
dataType:"jsonp",
success: function(response){
if(response.data.items){
$.each(response.data.items, function(i,data){
var video_id=data.id;
var video_title=data.title;
var video_viewCount=data.viewCount;
var video_frame="<iframe width='500' height='300' src='http://www.youtube.com/embed/"+video_id+"' frameborder='0' type='text/html'></iframe>";
var final="<div id='title'>"+video_title+"</div><div>"+video_frame+"</div><div id='count'>"+video_viewCount+" Views</div>";
$("#result").html(final);
});
} else {
$("#result").html("<div id='no'>No Video</div>");
}
}
});
});
});
//]]>
</script>
Allí, veremos algunos detalles configurables, el más importante es lo definido en var video_frame que es lo que escribirá el código HTML con el video donde podemos cambiar los valores de width y height a gusto así como agregarle parámetros extras a la URL de src para configurar la forma en que se mostrarán.

Para utilizar el plugin, basta que coloquemos dos DIVs; uno con el control para hacer la búsqueda y otro vacío donde se mostrarán los resultados; estos, los ponemos en cualquier parte donde quisiéramos verlos:
<div id="input_box">
<input type="text" class='search_input' />
</div>
<div id="result"></div>
Un poco de CSS para armar todo:
<style>
/* el DIV donde colocamos el buscador */
#input_box {
text-align: center;
width:500px;
}
/* el cuadro de búsqueda */
.search_input {
font-size: 20px;
padding: 5px;
text-align: center;
width: 400px;
}
/* el DIV donde se mostrarán los resultados */
#result {
background-color: #000;
margin-top:25px;
min-height:380px;
width:500px;
}
/* un texto, sólo visible cuando no hay resultados a mostrar */
#no { text-align: center; }
/* el título del video encontrado */
#title {
font-size: 18px;
height: 40px;
line-height: 1;
padding-bottom: 10px;
text-align: center;
}
/* el texto inferior con el contador de YouTube */
#count {
height: 20px;
padding-top: 10px;
text-align: right;
}
</style>
Y eso es todo.

Cambiando la etiqueta seleccionada del widget de las etiquetas







Anteriormente les decía, como crear una caja o bloques en los enlaces del widget de las etiquetas.



Hay una limitación, que no tomé en cuenta, y que Blogger define en el código de ese widget, que es, convertir el enlace de la etiqueta seleccionada en texto, es decir, ya no es un enlace, y al no ser enlace, no se aplican los estilos o CSS, que declaramos para cada enlace de la etiqueta:




Etiqueta seleccionada



Luego, cuando les mostraba Como crear botones en los enlaces de las etiquetas, decidí desaparecer el enlace seleccionado, al fin que cuando se estuviera en la página de ese enlace, no se querría volver a ingresar a la misma etiqueta, y de todos modos no sería posible, pues ya no es enlace, es texto, y además, se perdían los estilos declarados y no se veía el botón.



#Label1 span[dir=ltr]{

display: none;

}




Con el código anterior, evitamos cambiar el estilo o mejor dicho, no mostramos la etiqueta seleccionada, solamente cuando está seleccionada.



Pensando en esos casos, y en una solución más estética, podemos convertir la etiqueta seleccionada, en un enlace, y luego, crear una clase, para el enlace de la etiqueta seleccionada, y crear un estilo "diferente", para que nuestros usuarios sepan, que está seleccionada cierta etiqueta, como pasa con el enlace seleccionado, del widget de las páginas estáticas, en las plantillas de Blogger.



¿Suena mejor verdad?, es más sencillo de lo que parece, y habiendo usado los estilos o CSS de cada tutorial que les mencionaba, sólo necesitaremos, cambiar un poco el código del widget de las etiquetas, y declarar algunos estilos (CSS) para el enlace seleccionado, para que pueda diferente.



Como hacerlo paso a paso



Paso 1. Vamos a Diseño ► Edición de HTML, expandimos plantilla de artilugios, y con la ayuda de "Ctrl F", buscamos estas lineas de código:





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



Tip: Podemos buscar el "nombre que le pusimos a el Widget", y bajarnos un poco, hasta encontrar esa parte.



Paso 2: Luego, cambiamos la parte resaltada de rojo, por esto:


<b:if cond='data:label.name == data:blog.searchLabel'><a class='seleccionado' expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>



Nota: Es el que viene al principio después de <li>.



Con el código anterior, estamos convirtiendo el nombre de la etiqueta seleccionada en enlace, y además le estamos agregando una clase, con el fin de darle estilos diferentes, para que, se sepa que "estamos en esa etiqueta".



Paso 3: Ahora declaramos los estilos de la "etiqueta seleccionada", y los agregamos en Añadir CSS,  es decir,  desde nuestro escritorio, vamos a Diseño ► Diseñador de plantilla► Avanzado► Añadir CSS y lo pegamos ahí en el campo:




#Label1 a.seleccionado{

background-color: #f9a6f4; /*Color del fondo del enlace*/


}

Nota: Puse el mismo color de fondo, del hover.



Ahora cuando se haga click en un enlace de la etiqueta, sabremos que está seleccionada esa etiqueta,  ya que lucirá diferente, pero con el mismo padding (la misma separación)  del bloque:









y ¿que pasará, en el caso de los botones en los enlaces de las etiquetas?



Si se quiere lograr lo mismo, que es, convertir el texto de la etiqueta seleccionada en enlace, y poner un estilo diferente al enlace seleccionado, haremos lo mismo, y también, eliminados esta parte del CSS:



#Label1 span[dir=ltr]{

display: none;

}



¿Y la DEMO?



La demo de los botones lo puedes ver aquí en mi blog, selecciona una etiqueta y observa lo que pasa, en el enlace o etiqueta seleccionada, y en el caso de la cajita o bloques en los enlaces puedes ver el mismo blog de prueba.



Funciona en todos los navegadores, incluyendo el único e inigualable IE6 (Internet explorer 6).



Nota: El estilo de la etiqueta seleccionada, sólo funciona al estar en la página principal, ya que si se navega con por medio de los enlaces de navegación de Blogger, en las páginas de etiquetas, la url cambia de forma dinámica.

Actualización:  Ahora puedes navegar entre las páginas de etiquetas, y el enlace seleccionado conservará el estilo asignado con CSS ;)



Cualquier inquietud, duda o comentario, no dudes en comentarla :)

Blogger Games plantilla gratuita para Blogger



La última plantilla de Arianne se llama Blogger Games, es una plantilla indicada para sitios relacionados con juegos y la proporciona con un completo tutorial que nos ayudará a configurar la plantilla a nuestras necesidades. También ofrece la posibilidad de descargar el modelo SIN slide en la sidebar.

martes, 26 de julio de 2011

Fondo gradiente en Blogger con CSS3

Existen demasiados tipos de gradientes, en distintas direcciones y tamaños, pero en esta oportunidad nos centraremos únicamente en uno circular superior.

El gradiente se verá mas o menos así:

Ejemplo Fondo gradiente


Esta es una muestra de lo que se puede hacer con gradientes en CSS nivel 3.

Tutorial por Cloudx18 de Ayuda Bloggers.


¿Cómo añadir un fondo gradiente en Blogger?


Debes saber que esto funciona sobre navegadores webkit (Chrome, Safari, etc), bajo Firefox, y sobre la futura versión de Internet Explorer (IE10)

Primero, vé a ''Diseño | Edición HTML'' (''Plantilla | Editar Plantilla'' si utilizas Blogger 2011), deberás buscar en la zona CSS  el body (Antes de ]]></b:skin>), el cual se encuentra casi al inicio.

Es un código muy similar a este:
body {

Debajo de este, deberás pegar el siguiente:
background:#111; /*Color de fondo si no funciona el efecto en algun navegador*/
background-image:-moz-radial-gradient(center -100px 45deg, circle farthest-corner, #444 150px, #111 300px); /*Gradiente Firefox*/
background-image: -ms-radial-gradient(center -100px 45deg, circle farthest-corner, #444 150px, #111 300px); /*Gradiente IE10*/
background-image:-webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111)); /*Gradiente webkit*/

Guarda los cambios y listo.

Importante:
  • Es posible que en blogs con cabeceras muy grandes no se pueda ver porque el contenido lo sobreponga, para ello aumenta el valor 150 y 300 de todos los códigos y listo.

Offtopic: Perdón por posponer todo lo que me han pedido algunos, o si me demoro en responder los comentarios, pero necesito tiempo para estudiar (Finales de semestre), cuando me estabilice volveré a publicar nuevamente en el blog con la atención de siempre.

Actualización del botón Google+1

Google ha anunciado que su botón Google+1 ha sido actualizado y por lo tanto, recomienda que todos aquellos que lo han agregado a sus sitios o blogs, modifique el código que, puede ser generado en la página de desarrolladores del mismo servicio.

Hasta hace un rato, la herramienta sólo mostraba el nuevo código si ingresábamos a ella en idioma inglés.

De todos modos, el nuevo código sólo exige reemplazar el script que se mostraba en esta entrada:
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;es&#39;} </script>
Por este otro:
<script type="text/javascript">
window.___gcfg = {lang: 'es'};
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
Que debe ser colocado DESPUÉS de la última etiqueta g:plusone utilizada, por ejemplo, justo antes de </body>.

Botón Google+1 (PlusOne) en una barra flotante

Sé que ya muchos están usando el botón Google+1 en el blog para que los usuarios puedan recomendar las entradas que les parecen interesantes. Pero también podemos colocar el botón +1 (Plus One) para que se recomiende no la entrada sino la página principal del blog.
Y para ya no poner nada en las entradas (por si ya tienes ahí el botón) vamos a colocar el botón Google +1 en una barra flotante abajo de la página, de esta forma tus lectores podrán recomendar tu blog.

Puedes ver el ejemplo en esta misma entrada, al final aparece una barra. En ella se muestra un texto que invita a los lectores a recomendar el blog, luego, tal como hicimos para poner un mensaje al hacer click en el botón +1 haremos que el primer mensaje desaparezca al hacer click y que en su lugar se muestre un mensaje de agradecimiento, y al hacer click nuevamente para deshacer el voto se mostrará un mensaje diferente.

Como sé que a muchos les puede parecer molesto tener siempre la barra visible, he incluido una cookie (a duras penas lo hice) para que el lector sólo lo vea una vez por semana, aunque por supuesto este tiempo lo puedes configurar a tu gusto.

Empecemos. Primero entra en Diseño | Edición de HTML y pega antes de </head> esto:
<script type='text/javascript'>
//<![CDATA[
// Cookies
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}

function eraseCookie(name) {
createCookie(name,"",-1);
}
//]]>
</script>
Ahora pega antes de ]]></b:skin> estos estilos:
/* Barra Plus One
----------------------------------------------- */
#barraPlus1 {
position:fixed;
bottom:0px;
left:0;
height:24px;
background:#000; /* Color de la barra */
width:100%;
padding:5px;
filter:alpha(opacity=70); /* Transparencia de la barra */
-moz-opacity:0.7; /* Transparencia de la barra */
-khtml-opacity: 0.7; /* Transparencia de la barra */
opacity: 0.7; /* Transparencia de la barra */
z-index:900;
}
#mensajePlus1, #textoPlus1 {
color:#D8D8D8; /* Color del texto */
font-family:Verdana; /* Tipo de fuente */
font-size:16px; /* Tamaño del texto */
vertical-align: middle;
display:table-cell;
}
.botonPlus1 {
display:table-cell;
padding-left:20px;
}
.cerrarTextoPlus1 {display:none !important;}
A continuación busca la etiqueta <body> o esta línea:
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
Debajo de cualquiera de ellas dos agrega este código:
<script type='text/javascript'>
//<![CDATA[
// barra Google +1 (ciudadblogger.com)
function saludoPlus1(plusone) {
var div_ty = document.getElementById("mensajePlus1");
if (plusone.state == "on") {
document.getElementById('textoPlus1').className='cerrarTextoPlus1';
div_ty.innerHTML = "¡Gracias por recomendarnos! Tu voto es importante para nosotros.";
} else {
document.getElementById('textoPlus1').className='cerrarTextoPlus1';
div_ty.innerHTML = "Parece que ya no te gustamos, ojalá nos des otra oportunidad.";
}
}
//]]>
</script>

<div align='center' id='barraPlus1'>
<span id='textoPlus1'>&#191;Te ha gustado el blog? Qué tal si nos regalas un +1</span>
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'/>
<div id='mensajePlus1'/><span class='botonPlus1'><g:plusone callback='saludoPlus1' href='http://nombre-de-mi-blog.blogspot.com'/></span>
</div>

<script type='text/javascript'>
//<![CDATA[
var divName = document.getElementById("barraPlus1");
if(!readCookie('cookiePlus1')) {
divName.style.display='block';
createCookie('cookiePlus1', 'cookiePlus1', 7); // Número de días que dejará de verse
}
else {
divName.style.display='none';
}
//]]>
</script>
Ahora vamos a personalizar todo esto. En el segundo código, el de los estilos, está señalado en color verde algunas áreas que se pueden modificar como el color de fondo, tamaño de la letra, etc. Ahí mismo se controla la transparencia que tiene la barra, con un valor más alto se hace menos transparente, con uno más bajo se hace más transparente.

El primer texto en rojo es el mensaje que aparece cuando el lector recomienda el blog, el segundo texto es el mensaje cuando deja de recomendarlo, y el tercero es el mensaje que aparece por defecto cuando carga la página.
Un poco más abajo se señala dónde se debe cambiar la dirección de tu blog.

Por último, en color azul verás el 7, ese es el número de días que dejará de verse la barra estática, transcurrido ese tiempo el lector podrá verla de nuevo, a menos claro que él haya borrado las cookies de su navegador. Ese valor puedes cambiarlo por el que quieras.
Yo en mi ejemplo lo he puesto para que dure unos minutos nada más, así que cuando actualices esta página, dejes un comentario o ingreses a otra entrada dejará de verse, pero después estará ahí de vuelta.

El resultado me parece que puede ser muy óptimo para recomendar el blog con el botón +1 de Google, sobre todo porque podemos seguir usando el botón que recomienda las entradas, y al mismo tiempo usar este que recomendará el blog, no las entradas.

lunes, 25 de julio de 2011

Buzz. Una librería para manejar audio

Buzz es una pequeña librería de Javascript que fue pensada para poder controlar fácilmente las posibilidades que da la etiqueta AUDIO en los navegadores que las soportan.

Pese a su tamaño es muy poderosa porque permite ejecutar los archivos en distintos formatos de modo automático e incorpora una enorme variedad de funciones para controlar su ejecución; la documentación no es abundante pero se puede entender.

Como todas estas nuevas etiquetas, por ahora, nos vemos inmiscuidos en esa lucha de formatos soportados y no soportados, lo que hace que como usuarios, estemos limitados u obligados a, como mínimo, duplicar la información.

En este caso, el script soporta formatos AAC, MP3, OGG y WAV pero, no todos los navegadores soportan los cuatro y por lo tanto, no hay forma de tener un solo archivo de audio y que este se reproduzca siempre:


ACC
MP3
OGG
WAV


Igualmente, veamos cómo funciona.

Una vez alojado el script en un servidor y agregado antes de </head>:
<script type="text/javascript" src="URL_buzz.js"></script>
o copiado directamente en la plantilla:
<script type'text/javascript'>
//<![CDATA[
....... aquí colocamos el contenido del archivo buzz.js
//]]>
</script>
Ya lo tenemos funcionando y listo para usar. Para eso, creamos objetos con JavaScript de varios modos:
var unaudio = new buzz.sound( "URL_archivo.ext");
donde unaudio es cualquier nombre que querramos usar y que identificará a ese archivo que es único, por ejemplo: musica.mp3.
var otroaudio = new buzz.sound( "URL_archivo", { formats: [ "ogg", "mp3" ] });
donde le agregamos los formatos disponibles y en ese caso, no ponemos la extensión del archivo ya que hay dos que tienen el mismo nombre con diferente extensión.

Los formatos aceptados son cuatro así que si dispusiéramos de cuatro archivos, pondríamos: { formats: [ "ogg", "mp3", "aac", "wav" ] }

Por defecto, los audios son pre-cargados y no se ejecutan de modo automático. Llegado el caso, esto puede cambiarse, modificando los parámetros correspondientes, tanto globalmente como para cada archivo en particular.

Todo se maneja con JavaScript así que es simple de usar; siempre, usamos el nombre definido al crear el objeto; esta son algunas de las funciones:
  • nombre.play(); comienza a ejecutar el audio
  • nombre.pause() pausa la ejecución
  • nombre.stop() detiene la ejecución
  • nombre.togglePlay() permuta entre play y pause
  • nombre.isPaused() devuelve TRUE si se ha pausado
  • nombre.isEnded() devuelve TRUE si ha terminado
  • nombre.loop() lo ejecuta repetidamente
  • nombre.unloop() detiee el loop
  • nombre.mute() silencia el audio
  • nombre.unmute() vuelve a escucharse
  • nombre.toggleMute() permuta entre esos dos estados
  • nombre.isMuted() devuelve TRUE si se ha silenciado
  • nombre.setVolume(valor) establece el volumen (0 a 100, 80 por defecto)
  • nombre.getVolume() devuelve el valor del volumen actual
Por ejemplo, si tenemos definido un audio:
<script>
var ejemplo = new buzz.sound( "URL_archivo", { formats: [ "ogg", "mp3" ] });
</script>
Podemos usar enlaces de cualquier tipo para ejecutar algunas de esas funciones, sean estos texos o imágenes:
<a href="javascript:void(0);" onclick="ejemplo.play();"> PLAY </a>
<a href="javascript:void(0);" onclick="ejemplo.pause();"> PAUSE </a>
<a href="javascript:void(0);" onclick="ejemplo.stop();"> STOP </a>

<a href="javascript:void(0);" onclick="ejemplo.togglePlay();"> TOGGLE AUDIO </a>

nombre.play()nombre.pause()nombre.stop()


O bien podemos crear funciones de alguna clase, mezcándolas:
<script>
function togglesonido(obj) {
obj.togglePlay();
if (obj.isPaused()) {
document.getElementById("mostrar").innerHTML = "pausado";
} else {
document.getElementById("mostrar").innerHTML = "playing";
}
}
</script>

<a href="javascript:void(0);" onclick="togglesonido(ejemplo);"> FUNCION </a> <span id="mostrar"></span>

togglePlay


Obviamente, hay que tner en cuenta que si se utiliza la precarga de archivos, la demora podría lleagr a ser importante si es que agregamos demasiados o si estos son voluminosos.

Respaldar todas las imágenes subidas a Blogger con Google+

Blogger, usa el espacio ofrecido por picasa para almacenar sus imágenes.

Cada imagen subida en en nuestros blog van a un álbum que se crea en Picasa.

Google+ ofrece un servicio en el cual podemos hacer algunos respaldos, entre ellos los álbumes de Picasa.

Para poder respaldar tenemos que tener una cuenta en Google+

Después entramos en Google cuentas, Liberación de datos


Como se ve en la imagen, hay varias opciones para respaldar.

Podemos respaldar una opción o todas.

Yo he elegido respaldar los álbumes web de Picasa.


Al terminar de cargar (es muy rapido) le damos en "CREATE ARCHIVE".

Ahí dice 207.8MB, no se asusten es mucho menos.


Vieron, cambio a 46.1MB.
Ahora para descargar le damos al botón "Download".
Elegimos donde guardar.
Va a descargar en un archivo comprimido Zip.

Si quieren respaldar mas opciones:

Le damos al botón "Add another service".


Mas abajo vemos las otras opciones y elegimos la que queramos agregar.
Seguimos los pasos anteriores.


Acá el resultado con tres opciones y con todas:

Usar Tiptip en Blogger

Tiptip es un sistema de tooltips basado en jQuery el cual permite mejorar los tooltips normales. Es muy simple y a su vez se puede personalizar bastante bien.

Vista Previa de Tiptip 1.3
El estilo variará un poco de la versión de la imagen.

Instalar Tiptip en Blogger:

Paso 1: Añadiendo el script:

En ''Diseño | Edición HTML'' (''Plantilla | Editar plantilla'' si usas Blogger 2011) busca el siguiente código:
</head>
Arriba de este, deberás pegar el siguiente:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'></script>
<script src='http://dl.dropbox.com/u/28164309/Ayuda%20Bloggers/Aportes/tiptip13ayudabloggers.js'></script>
<script type='text/javascript'>
//<![CDATA[
jQuery.noConflict();
jQuery(function () {
    jQuery(".tooltip").tipTip()
});
//]]>
</script>

Paso 2: Añadiendo CSS:

Ahora deberás buscar la siguiente línea:
]]></b:skin>

Arriba de esta, pega el siguiente fragmento:
/* TipTip CSS - Version 1.3 */

#tiptip_holder {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99999;
}

#tiptip_holder.tip_top {
    padding-bottom: 5px;
}

#tiptip_holder.tip_bottom {
    padding-top: 5px;
}

#tiptip_holder.tip_right {
    padding-left: 5px;
}

#tiptip_holder.tip_left {
    padding-right: 5px;
}

#tiptip_content {
    font-size: 11px;
    color: #fff;
    text-shadow: 0 0 2px #000;
    padding: 4px 8px;
    border: 1px solid rgba(255,255,255,0.25);
    background-color: rgb(25,25,25);
    background-color: rgba(25,25,25,0.92);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(transparent), to(#000));
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    box-shadow: 0 0 3px #555;
    -webkit-box-shadow: 0 0 3px #555;
    -moz-box-shadow: 0 0 3px #555;
}

#tiptip_arrow, #tiptip_arrow_inner {
    position: absolute;
    border-color: transparent;
    border-style: solid;
    border-width: 6px;
    height: 0;
    width: 0;
}

#tiptip_holder.tip_top #tiptip_arrow {
    border-top-color: #fff;
    border-top-color: rgba(255,255,255,0.35);
}

#tiptip_holder.tip_bottom #tiptip_arrow {
    border-bottom-color: #fff;
    border-bottom-color: rgba(255,255,255,0.35);
}

#tiptip_holder.tip_right #tiptip_arrow {
    border-right-color: #fff;
    border-right-color: rgba(255,255,255,0.35);
}

#tiptip_holder.tip_left #tiptip_arrow {
    border-left-color: #fff;
    border-left-color: rgba(255,255,255,0.35);
}

#tiptip_holder.tip_top #tiptip_arrow_inner {
    margin-top: -7px;
    margin-left: -6px;
    border-top-color: rgb(25,25,25);
    border-top-color: rgba(25,25,25,0.92);
}

#tiptip_holder.tip_bottom #tiptip_arrow_inner {
    margin-top: -5px;
    margin-left: -6px;
    border-bottom-color: rgb(25,25,25);
    border-bottom-color: rgba(25,25,25,0.92);
}

#tiptip_holder.tip_right #tiptip_arrow_inner {
    margin-top: -6px;
    margin-left: -5px;
    border-right-color: rgb(25,25,25);
    border-right-color: rgba(25,25,25,0.92);
}

#tiptip_holder.tip_left #tiptip_arrow_inner {
    margin-top: -6px;
    margin-left: -7px;
    border-left-color: rgb(25,25,25);
    border-left-color: rgba(25,25,25,0.92);
}

/* Webkit Hacks  */
@media screen and (-webkit-min-device-pixel-ratio:0) {   
    #tiptip_content {
        padding: 4px 8px 5px 8px;
        background-color: rgba(45,45,45,0.88);
    }
    #tiptip_holder.tip_bottom #tiptip_arrow_inner {
        border-bottom-color: rgba(45,45,45,0.88);
    }
    #tiptip_holder.tip_top #tiptip_arrow_inner {
        border-top-color: rgba(20,20,20,0.92);
    }
}

Guarda los cambios y listo.

Paso 3: Usando Tiptip:

Cada vez que quieras usar Tiptip, deberás añadir la clase tooltip y un título al contenido de la siguiente forma (Son ejemplos):

Para un enlace:
<a class='tooltip' href='URL-DE-DESTINO' title='Título del tiptip'>NOMBRE ENLACE</a>

Para una imagen:
<img class='tooltip' title='Título del tiptip' src='URL-IMAGEN'/>

Como puedes apreciar se le han añadido 2 líneas:
  • class='tooltip' 
  • title='Título del tiptip'
Con ellas especificamos el título del tooltip y definimos la clase.

Wallpapers-calendario para julio

Este mes casi ya se va, pero aún podemos seguir disfrutando y escoger un wallpaper-calendario de Smashing Magazine para el escritorio de nuestra PC.

Descargar

domingo, 24 de julio de 2011

Cuando cambiar un color es una tarea imposible

Es común que pregunten por qué no cambia el color de un título aunque no hay errores de sintaxis y a simple vista, todo parece normal.

Obviamente, eso dependerá de cada caso pero, el error más común es no tener en cuenta que ese título también es un enlace y por lo tanto, lo que debe cambiarse no es el color del contenedor sino el color del contenido.

Si el HTML es algo así:
<h3 class="post-title">
<a href="UNA_URL">el texto del título</a>
</h3>
La etiqueta H3 (o cualquier otro encabezado) es el contenedor y la etiqueta A es el contenido.

En una página web, es común que se defina el estilo de los enlaces de manera genérica y eso, afectará a todos ellos, sin importar donde estén; en este ejemplo, todos serán de color rojo y al poner el cursor encima cambiarán a amarillo:
a, a:visited, a:link  { color: red; }
a:hover { color: yellow; }
Si luego, definimos el color de las etiquetas H3 como verdes, no veremos ese cambio:
h3 { color: green; }
Para que el cambio tenga efecto, debe definirse la regla para el enlace; esto, traducido al español, significa que los enlaces que estén dentro de una etiqueta H3, sean de color verde:
h3 a { color: green; }
Lo mismo puede ocurrir si hay reglas de estilo menos genéricas pero que definen los estilos de cierto sector, por ejemplo:
.post-body a { color: black; }
.sidebar a { color: brown; }
#footer-wrapper a { color: cyan; }
Todos los enlaces contenidos dentro de esos rectángulos, serán afectados por las propiedades establecidas así que, si quiere modificarse uno de sus contenidos, hay que agregar nuevas reglas; no sólo para títulos sino para cualquier otra etiqueta, indicando de manera precisa cuál es el elemento a modificar:
.sidebar h2 a { color: green; }
.sidebar li a { color: green; }
.sidebar li a span { color: green; }

Promueve tu blog: Agrega botones de Facebook, Twitter, Google Buzz...



Ahora que la mayoría de las redes sociales como Twitter y Facebook, ofrecen botones oficiales,  no podemos desaprovechar la oportunidad de usarlos, con el fin de Promover nuestro blog, son muy llamativos y tienen contador, cosa que los hace interesantes, y a todo mundo parece gustarles (me incluyo).



Hoy les voy a decir, como ponerlos en su blog de forma alineada, y para facilitarles las cosas, voy a poner el código de dos estilos de botones disponibles, que tienen contador, yo lo acabo de agregar a mi blog, así que pueden ver el DEMO, aquí mismo.



Ustedes, solo necesitan cambiar la URL de su blog, marcada de rojo, y en el caso del botón de Twitter, el ID, (nombre de usuario) si es que tienen página de Twitter, en el código respectivamente.



Opción 1:




* Actualización: Eliminé el botón de Google Buzz, ya que ese servicio ha desaparecido.





Botones para compartir en la columna lateral




Paso 1:  Ve a Diseño, Elementos de la página y pega el código de los botones, en tu columna lateral, eligiendo la opción HTML/Javascript, y edita lo marcado de rojo, por la URL de tu blog, en el caso de Twitter, pon el ID de tu página de Twitter *:




<ul id="botones-home">

<li><a href="http://twitter.com/share" class="twitter-share-button" data-url="http://compartidisimo.blogspot.com" data-count="horizontal" data-via="compartidisimo" data-lang="es">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></li>

<li><iframe src="http://www.facebook.com/plugins/like.php?locale=es_ES&amp;href=http%3A%2F%2Fcompartidisimo.blogspot.com&amp;send=false&amp;layout=button_count &amp;width=110&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=verdana&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:21px;" allowtransparency="true"></iframe></li>
 </ul>



*En donde dice:


data-via="compartidisimo"






Cambia: compartidisimo por tu ID (nombre de usuario) de Twitter, eso sirve para que cada vez que se twittee tu blog, se recomiende seguirte, si no tienes cuenta de twitter, elimina esa linea.



Paso 2: Guardas los cambios.




Paso 3:   Ahora lo que falta es alinearlos, y eso lo lograremos con CSS, entonces, desde nuestro escritorio, vamos a Diseño► Diseñador de Plantillas ►Avanzado► Añadir CSS, y ahí en el campo, pegamos el siguiente código:



ul#botones-home{

margin: 0;

padding: 0;

width: 100%;

}

ul#botones-home li {

float: left;

padding: 0;

margin: 3px 4px 5px 0;

list-style: none;

}



Nota: Recuerda dar enter después de una llave de cierre }, para que sea interpretado el código que agregaste.



Paso 4: Guarda los cambios en APLICAR AL BLOG, y listo!.





Opción 2: 






Botones para compartir en la columna lateral
El fondo y estilos del titulo es el que tiene mi plantilla*




Paso 1: Ve a Diseño, Elementos de la página y agrega el código de los botones, en la columna lateral, eligiendo la opción HTML/Javascript, y edita lo marcado de rojo, por la URL de tu blog, en el caso de Twitter, pon el ID de tu página de Twitter *:






<ul id="botones-home">

<li class="b-twitter"><a href="http://twitter.com/share" class="twitter-share-button" data-url="http://compartidisimo.blogspot.com" data-count="vertical" data-via="compartidisimo" data-lang="es">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></li>

<li class="b-facebook"><iframe src="http://www.facebook.com/plugins/like.php?locale=es_ES&amp;href=http%3A%2F%2Fcompartidisimo.blogspot.com&amp;send=false&amp;layout=box_count &amp;width=85&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=verdana&amp;height=65" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:85px; height:65px;" allowtransparency="true"></iframe></li>
 </ul>






*En donde dice:


data-via="compartidisimo"






Cambia: compartidisimo por tu ID de Twitter (nombre de usuario), eso sirve para que cada vez que se twittee tu blog, se recomiende seguirte.






Paso 2: Guardas los cambios.



Paso 3:  Para alinearlos,  estando en nuestro escritorio, vamos a Diseño► Diseñador de Plantillas ►Avanzado► Añadir CSS, y ahí en el campo para añadir CSS, pegamos  lo siguiente:


/*Botones para compartir en la columna lateral*/

ul#botones-home{

margin: 0;

padding: 0;

width: 100%;

}

ul#botones-home li {

float: left;

padding: 0;

margin: 0 10px 0 5px; /*separamos los botones*/

position: relative;

height: 70px;

list-style: none; /*eliminamos la viñeta*/

}

li.b-twitter { /*el boton de Twitter*/

top: 0;

left: 0;

width: 75px;

}

li.b-facebook { /*El boton de Facebook*/

top: 2px;

left: 0px;

width: 90px;

}


Nota: Recuerda dar enter después de una llave de cierre }, para que sea interpretado el código que agregaste. Puedes cambiar la separación de los botones, editando el valor de: left,también puedes editar el ancho del espacio (width) para cada botón, procurando que no vaya a ser más angosto de lo que necesita.



TIP: Para editar la separación de los botones, puedes agregar: background:#000000; en: ul#botones-home li  para que el fondo se ponga de color negro, y  puedas ver, cuanto espacio ocupa cada botón respectivamente, haces los ajustes que quieras, y luego lo eliminas,  para que puedas ver como queda, al mismo tiempo que haces los cambios.



Paso 4: Guarda los cambios en APLICAR AL BLOG, y listo!.





Anotaciones:



  • No puse el botón de Google +1, pero si ustedes quieren, claro que lo pueden poner, y lo tienen que hacer colocandolo dentro de la etiqueta li :



<li> código del botón de Google +1</li>







...y que pueden conseguir en la página oficial de Google.




  • En la Opción 2, creamos una clase para cada botón, y poder alinearlos de forma separada, a cada uno.




Conclusiones:

Sin duda, una forma muy poderosa de promover nuestro blog, es a través de las redes sociales, por ello, necesitamos facilitarles las cosas a nuestros usuarios o visitas,  usando los botones que dispone cada red social, de ese modo, ellos podrán ayudarnos a promover nuestro blog. Claro que también podemos personalizarlos, pero esa ya es otra historia.



Referencias

Códigos de los botones de las respectivas páginas:

Google Buzz

Twitter

Facebook