Expandir y contraer gadgets con efecto deslizante

Muchas veces algunos gadgets se vuelven muy largos con el paso de tiempo, como el de Etiquetas, Archivo del blog, Lista de enlaces, etc. y estos comienzan a ocupar demasiado espacio en la sidebar, así que una buena forma de ahorrarnos ese espacio es contraer los gadgets para que se expandan sólo cuando el lector quiera verlos, y además de eso con un efecto deslizante. 
Puedes ver un ejemplo en este blog de pruebas.

Para hacer esto en los gadgets vamos a usar Scriptaculous que es el que le dará el efecto deslizante.
Sólo vamos a Diseño | Edición de HTML y marcamos la casilla Expandir plantillas de artilugios.
Agrega antes de </head> lo siguiente:
<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;prototype&quot;, &quot;1.6.1.0&quot;);
window.JSON = {
parse: function (st) { return st.evalJSON(); },
stringify: function(obj) { return Object.toJSON(obj); }
};
google.load(&quot;scriptaculous&quot;, &quot;1.8.3&quot;);
</script>
Ahora localizamos el gadget al que queremos aplicarle el truco, por ejemplo, un gadget HTML/Javascript sería más o menos así:
<b:widget id='HTML1' locked='false' title='Título del gadget' type='HTML'>
<b:includable id='main'>

<a href='#' onclick='Effect.toggle(&quot;
ExpandGadget1&quot;,&quot;slide&quot;); return false'>

<!-- only display title if it's non-empty -->

<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'>&#9660;&#9650; <data:title/></h2>
</b:if>

</a><div align='center' id='
ExpandGadget1' style='display: none; text-align:left;'>
<div class='widget-content'>
<data:content/>
</div>

</div>

<b:include name='quickedit'/>

</b:includable>
</b:widget>
Agrega lo que está en color rojo y listo. Aquí lo que se debe tomar en cuenta es que cada vez que se ponga en un gadget se debe cambiar lo que está en color azul por otro nombre, por ejemplo ExpandGadget2, ExpandGadget3, etc. o cualquier otro nombre pero nunca debe ser igual a otro que ya tengamos.

Es seguro que la estructura de algunos gadgets no se vean como el del ejemplo pues éstos varían según el tipo de gadget que sean, pero para saber dónde debemos poner el código sólo hay que guiarnos por los códigos que están en color gris, así que sólo localiza la primera línea gris y debajo pega el primer código en rojo, luego localiza la segunda parte gris y ahí deberás pegar alrededor lo otro en color rojo, y por último busca la última línea gris y arriba de ella pega el último código rojo.

No está de más recordarles que se usa Scriptaculous y que no es compatible con jQuery, así que si usas jQuery entonces deberás realizar el hack para que puedan funcionar las dos librerías juntas.

visto en ciudad blogger
Leer más...

Enmarcar entradas y gadgets

Algunas veces las plantillas suelen ser muy "planas" y nos hacen sentir como que los gadgets o las entradas se pierden entre ellos mismos pues no se distingue dónde empiezan y dónde acaban.
Así que una opción para delimitar los espacios de éstos es enmarcar las entradas y gadgets del blog y así definir cada uno con un borde. Por supuesto que podemos elegir si se lo aplicamos sólo a las entradas, o únicamente a los gadgets.

Haremos que las entradas se vean más o menos así.



Y los gadgets así.

Veamos pues cómo enmarcar entradas y gadgets tanto en las plantillas "nuevas" como en las "antiguas" de Blogger. Para cualquiera de las dos entra en Diseño | Edición de HTML, y ahora...
Para plantillas hechas con el Diseñador de plantillas de Blogger

Antes de ]]></b:skin> agrega esto:
.post-outer {
border: 1px solid #000;

border-radius:0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
padding:15px;
margin: 20px 0;
}
.column-right-outer .widget, .column-left-outer .widget {
border: 1px solid #000;

border-radius:0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
padding:10px;
margin: 10px 0;
}
.footer-inner .widget {
border: 1px solid #000;

border-radius:0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
padding:10px;
margin: 10px 0;
}

El tamaño, tipo y color del borde se modifica en border: 1px solid #000;
También puedes elegir que los bordes sean redondeados, sólo cambia los valores en color azul por unos más altos, por ejemplo 10px entre más alto sea el valor más redondeadas serán las esquinas.
El primer bloque corresponde a los bordes de las entradas, el segundo bloque a los bordes de los gadgets de la sidebar, y el tercer bloque a los gadgets del footer. Si no quieres aplicar el enmarcado a una de estas áreas sólo elimina el que le corresponde.

En el caso de algunos diseños de las plantillas Awesome Inc y Ethereal en lugar del primer bloque, el que utilizaremos será este:
.date-outer {
border: 1px solid #000;

border-radius:0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
padding:15px;
margin: 40px 0;
}

Para las Plantillas antiguas de Blogger

Antes de ]]></b:skin> agrega esto:
.post {
border:1px solid #000;

border-radius:0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
}
.main .post {margin:20px 0; padding:15px;}
.sidebar .widget {
border:1px solid #000;

border-radius:0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
margin:15px 0;
padding: 10px;
}
.footer .widget {
border:1px solid #000;

border-radius:0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
margin:15px 0;
padding: 10px;
}
De igual forma el primer bloque es para las entradas, el segundo para la sidebar, y el tercero para el footer.

Ya sea que uses una plantilla del Diseñador, o una plantilla antigua, quizá tengas que modificar la separación del borde pues en algunos casos podrá quedar muy pegado al contenido. Esa separación se modifica en el padding que aparece en los estilos. Y en el caso de la distancia entre gadgets y gadget o entrada y entrada, esa se controla en el margin, el primer valor es el margen superior e inferior, y el segundo valor es el margen izquierdo y derecho.

Estos métodos son únicamente para plantillas oficiales de Blogger, para cualquier otra plantilla personalizada les recomiendo contacten al autor de su plantilla para preguntar sobre el procedimiento.
 
visto en ciudad blogger.
Leer más...

Poner separadores en los gadgets

Si usamos bordes tendremos un resultado como este.


Y si usamos imágenes podrá verse más o menos así.

Veremos cómo hacerlo para las plantillas antiguas de Blogger, y las hechas con el Diseñador de plantillas de Blogger. En cualquier de los dos casos entra en Diseño | Edición de HTML y luego...
Para plantillas hechas con el Diseñador de plantillas de Blogger

Si quieres que el separador sea un borde agrega antes de ]]></b:skin> lo siguiente:
.column-right-outer .widget, .column-left-outer .widget {
border-bottom:4px solid #000;

padding-bottom:20px;
}

Si quieres que el separador sea una imagen entonces en lugar de lo anterior agrega esto:
.column-right-outer .widget, .column-left-outer .widget {
background: url(URL de la imagen)no-repeat 50% 100%;
padding-bottom:70px;

border:0;
}

Para las Plantillas antiguas de Blogger


De igual manera agrega antes de ]]></b:skin> lo siguiente si quieres que el separador sea un borde:
.sidebar .widget {
border-bottom:4px solid #000;

padding-bottom:20px;
}

O bien, si quieres que el separador de los gadgets sea una imagen entonces lo que deberás agregar será esto:
.sidebar .widget {
background: url(URL de la imagen)no-repeat 50% 100%;
padding-bottom:70px;

border:0;
}

Agrega la URL de la imagen del separador donde se indica si es que te decidiste por el separador con imágenes. Si la imagen fuera muy alta cambia donde dice padding-bottom:70px; por una valor más grande hasta que la imagen se muestre por completo.

En el caso de los separadores con bordes puedes modificar el grosor, tipo y color del borde, eso se hace donde dice border-bottom:4px solid #000;
4px es el grosor, solid es el tipo de borde, puedes cambiarlo por dotted, dashed, double, groove, ridge, outset, o inset, y #000 es el color del borde.
En donde dice padding-bottom:20px; podemos controlar la distancia entre cada gadget.
Como dije antes, es un procedimiento bastante simple que quizá la parte más difícil será decidirnos por un estilo que nos guste.
Leer más...

Tabview para agrupar varios gadgets en uno solo

Los tabviews son elementos que nos permiten agrupar en un solo contenedor varios gadgets y que pueden seleccionarse por medio de pestañas.
Su función principal es ahorrarnos espacio en el blog para evitar tener dispersos gadgets de la misma categoría y así poder agrupar en uno solo varios gadgets. Hay varios métodos para crear tabviews, algunos requieren jQuery, otros Mootools, o cualquier otro script.



Para agregarlo a tu blog entra en Diseño | Edición de HTML y antes de ]]></b:skin> pega los estilos:

/* Tabview
----------------------------------------------- */
.tabviewcont{
margin:15px 0;
padding:0;
clear:both;
}

.tabviewnav {

margin:0;
padding:3px 0; /* Si usas plantilla del Diseñador cambia el 0 por 15px */
font-size:12px; /* Tamaño de la fuente en las pestañas */
font-weight:bold;
}
.tabviewnav li {
list-style:none;
margin:0;
display:inline;
}
.tabviewnav li a {
padding:3px 6px;
margin-right:1px;
background:#0B243B; /* Color de las pestañas */
border-radius:5px 5px 0 0;
-moz-border-radius:5px 5px 0 0;
-webkit-border-radius:5px 5px 0 0;
text-decoration:none;
color:#fff;
}
.tabviewnav li a:hover {
color:#fff;
background:#084B8A; /* Color de la pestaña al pasar el cursor */
text-decoration:none;
}
.tabviewnav li.tabviewactive a,
.tabviewnav li.tabviewactive a:hover {
background:#084B8A; /* Color de la pestaña activa */
color:#fff;
}
.tabviewcont .tabviewtab {
padding:5px;
border:1px solid #ccc; /* Borde del contenedor general */
background:#fff; /* Color de fondo del gadget */
}
.tabviewcont .tabviewtab h2,
.tabviewcont .tabviewtabhide {
display:none;
}
.tabviewtab .widget-content ul{
list-style:none;
margin:0 0 10px 0;
padding:0;
}
.tabviewtab .widget-content li {
border-bottom:1px solid #ccc;
margin:0 5px;
padding:2px 0 5px 0;
}

Ahora antes de </head> pega este script:

<script type='text/javascript'>
// Tabview para agrupar gadgets


//<![CDATA[

document.write('<style type="text/css">.tabview{display:none;}<\/style>');function tabviewObj(argsObj){var arg;this.div=null;this.classMain="tabview";this.classMainLive="tabviewcont";this.classTab="tabviewtab";this.classTabDefault="tabviewtabdefault";this.classNav="tabviewnav";this.classTabHide="tabviewtabhide";this.classNavActive="tabviewactive";this.titleElements=['h2','h3','h4','h5','h6'];this.titleElementsStripHTML=true;this.removeTitle=true;this.addLinkId=false;this.linkIdFormat='<tabviewid>nav<tabnumberone>';for(arg in argsObj){this[arg]=argsObj[arg]}this.REclassMain=new RegExp('\\b'+this.classMain+'\\b','gi');this.REclassMainLive=new RegExp('\\b'+this.classMainLive+'\\b','gi');this.REclassTab=new RegExp('\\b'+this.classTab+'\\b','gi');this.REclassTabDefault=new RegExp('\\b'+this.classTabDefault+'\\b','gi');this.REclassTabHide=new RegExp('\\b'+this.classTabHide+'\\b','gi');this.tabs=new Array();if(this.div){this.init(this.div);this.div=null}}tabviewObj.prototype.init=function(e){var childNodes,i,i2,t,defaultTab=0,DOM_ul,DOM_li,DOM_a,aId,headingElement;if(!document.getElementsByTagName){return false}if(e.id){this.id=e.id}this.tabs.length=0;childNodes=e.childNodes;for(i=0;i<childNodes.length;i++){if(childNodes[i].className&&childNodes[i].className.match(this.REclassTab)){t=new Object();t.div=childNodes[i];this.tabs[this.tabs.length]=t;if(childNodes[i].className.match(this.REclassTabDefault)){defaultTab=this.tabs.length-1}}}DOM_ul=document.createElement("ul");DOM_ul.className=this.classNav;for(i=0;i<this.tabs.length;i++){t=this.tabs[i];t.headingText=t.div.title;if(this.removeTitle){t.div.title=''}if(!t.headingText){for(i2=0;i2<this.titleElements.length;i2++){headingElement=t.div.getElementsByTagName(this.titleElements[i2])[0];if(headingElement){t.headingText=headingElement.innerHTML;if(this.titleElementsStripHTML){t.headingText.replace(/<br>/gi," ");t.headingText=t.headingText.replace(/<[^>]+>/g,"")}break}}}if(!t.headingText){t.headingText=i+1}DOM_li=document.createElement("li");t.li=DOM_li;DOM_a=document.createElement("a");DOM_a.appendChild(document.createTextNode(t.headingText));DOM_a.href="javascript:void(null);";DOM_a.title=t.headingText;DOM_a.onclick=this.navClick;DOM_a.tabview=this;DOM_a.tabviewIndex=i;if(this.addLinkId&&this.linkIdFormat){aId=this.linkIdFormat;aId=aId.replace(/<tabviewid>/gi,this.id);aId=aId.replace(/<tabnumberzero>/gi,i);aId=aId.replace(/<tabnumberone>/gi,i+1);aId=aId.replace(/<tabtitle>/gi,t.headingText.replace(/[^a-zA-Z0-9\-]/gi,''));DOM_a.id=aId}DOM_li.appendChild(DOM_a);DOM_ul.appendChild(DOM_li)}e.insertBefore(DOM_ul,e.firstChild);e.className=e.className.replace(this.REclassMain,this.classMainLive);this.tabShow(defaultTab);if(typeof this.onLoad=='function'){this.onLoad({tabview:this})}return this};tabviewObj.prototype.navClick=function(event){var rVal,a,self,tabviewIndex,onClickArgs;a=this;if(!a.tabview){return false}self=a.tabview;tabviewIndex=a.tabviewIndex;a.blur();if(typeof self.onClick=='function'){onClickArgs={'tabview':self,'index':tabviewIndex,'event':event};if(!event){onClickArgs.event=window.event}rVal=self.onClick(onClickArgs);if(rVal===false){return false}}self.tabShow(tabviewIndex);return false};tabviewObj.prototype.tabHideAll=function(){var i;for(i=0;i<this.tabs.length;i++){this.tabHide(i)}};tabviewObj.prototype.tabHide=function(tabviewIndex){var div;if(!this.tabs[tabviewIndex]){return false}div=this.tabs[tabviewIndex].div;if(!div.className.match(this.REclassTabHide)){div.className+=' '+this.classTabHide}this.navClearActive(tabviewIndex);return this};tabviewObj.prototype.tabShow=function(tabviewIndex){var div;if(!this.tabs[tabviewIndex]){return false}this.tabHideAll();div=this.tabs[tabviewIndex].div;div.className=div.className.replace(this.REclassTabHide,'');this.navSetActive(tabviewIndex);if(typeof this.onTabDisplay=='function'){this.onTabDisplay({'tabview':this,'index':tabviewIndex})}return this};tabviewObj.prototype.navSetActive=function(tabviewIndex){this.tabs[tabviewIndex].li.className=this.classNavActive;return this};tabviewObj.prototype.navClearActive=function(tabviewIndex){this.tabs[tabviewIndex].li.className='';return this};function tabviewAutomatic(tabviewArgs){var tempObj,divs,i;if(!tabviewArgs){tabviewArgs={}}tempObj=new tabviewObj(tabviewArgs);divs=document.getElementsByTagName("div");for(i=0;i<divs.length;i++){if(divs[i].className&&divs[i].className.match(tempObj.REclassMain)){tabviewArgs.div=divs[i];divs[i].tabview=new tabviewObj(tabviewArgs)}}return this}function tabviewAutomaticOnLoad(tabviewArgs){var oldOnLoad;if(!tabviewArgs){tabviewArgs={}}oldOnLoad=window.onload;if(typeof window.onload!='function'){window.onload=function(){tabviewAutomatic(tabviewArgs)}}else{window.onload=function(){oldOnLoad();tabviewAutomatic(tabviewArgs)}}}if(typeof tabviewOptions=='undefined'){tabviewAutomaticOnLoad()}else{if(!tabviewOptions['manualStartup']){tabviewAutomaticOnLoad(tabviewOptions)}}
//]]>
</script>
Por último busca esta línea:
<div class='column-right-inner'>
O si usas una plantilla antigua de Blogger busca esta línea:
<div id='sidebar-wrapper'>
Pega debajo de cualquiera de esas dos líneas lo siguiente:
<div class='tabview'>
<b:section class='tabviewtab' id='Pestaña1' maxwidgets='1'/>
<b:section class='tabviewtab' id='Pestaña2' maxwidgets='1'/>
<b:section class='tabviewtab' id='Pestaña3' maxwidgets='1'/>
</div>
Guarda los cambios, y entra en Diseño | Elementos de la página, ahí verás las nuevas áreas para agregar los gadgets, los identificarás porque tienen mayor separación que los demás.


Sólo tienes que dar click en Añadir un gadget para agregar el gadget a la pestaña que le corresponde, o bien, arrastrar un gadget que ya tengas a esa sección.

Si quieres agregar más pestañas sólo añade antes del último </div> una línea como esta:

<b:section class='tabviewtab' id='Pestaña4' maxwidgets='1'/>
Toma en cuenta que cada línea que agregues deberá tener un ID diferente, por ejemplo Pestaña5, Pestaña6, etc.

Puedes agregar varios tabviews, sólo repite el último paso y recuerda cambiar de igual forma el nombre de los IDs.

Si deseas agregarlo en una entrada para mostrar un contenido entonces el código que deberás añadir en tu post será este:

<div class='tabview'>
<div class='tabviewtab' id='Pestaña1' title='Título de la pestaña'>
... Aquí el contenido ...

</div>
<div class='tabviewtab' id='Pestaña2' title='Título de la pestaña'>
... Aquí el contenido ...

</div>
<div class='tabviewtab' id='Pestaña3' title='Título de la pestaña'>
... Aquí el contenido ...

</div>
</div>

Ahí agrega el contenido que quieras donde se indica y el título de la pestaña, y de igual forma puedes añadir más pestañas antes del último </div> añadiendo un fragmento como este:

<div class='tabviewtab' id='Pestaña4' title='Título de la pestaña'>
... Aquí el contenido ...

</div>

Recuerda que, si tu sidebar es muy angosta no conviene que pongas muchas pestañas, o que los títulos de las pestañas sean muy largos, de lo contrario las pestañas se encimarán.

También debes tomar en cuenta que este gadget no acelera la velocidad de carga del blog, es únicamente para agrupar gadgets en uno solo, incluso -dependiendo de cada blog- podría tardar un poco en cargar el tabview.


visto en ciudad blogger
Leer más...

Mostrar los Seguidores en otro blog


Seguro no es el caso de todos pero habrá quienes en algún momento tengan la necesidad de poner el gadget de Seguidores de su blog en otro blog distinto. No me refiero a exportar tus seguidores a otro blog pues eso como tal no estoy seguro que se pueda.
A lo que me refiero es a poder mostrar el gadget de seguidores del blog principal en otro blog diferente y que los lectores también puedan hacerse seguidores desde ese segundo blog.

Para conseguir que el gadget de Seguidores se muestre en otro blog entra a Google Friend Connect, ahí busca en la columna izquierda el nombre de tu blog y da click en él.

Aparecerá un pequeño menú, busca Configuración y luego selecciona la pestaña Avanzados.

Una vez hecho eso busca el punto número 2 que dice Otras opciones, ahí verás un recuadro titulado Direcciones alternativas.

Dentro del recuadro encontrarás dos URLs de Blogger, justo debajo de ellas agrega la URL del otro blog donde quieres mostrar a tus seguidores y guarda los cambios.

Luego regresa al pequeño menú del lado izquierdo, da click en Gadgets y selecciona Miembros.

Configura tu gadget de seguidores con el ancho y colores que quieras, cuando termines da click en Generar código.

Ya sólo copia ese código y dirígete al blog donde deseas mostrar tus seguidores, ahí pega en un elemento HTML/Javascript el código que copiaste y listo.

Verás que en ese blog se muestra el mismo número de seguidores que tienes en tu blog principal. Aunque en algunos casos quizá diga que no hay seguidores, pero si le das click en Unirte o en Acceder de inmediato se mostrarán todos los seguidores.

Un dato curioso es que en ese momento verás que el gadget tradicional de Seguidores de tu blog principal habrá cambiado ligeramente, básicamente habrá cambiado el color del botón para unirse el cual tendrá un color azul y mostrará un texto distinto al habitual.
Otra "curiosidad" es que en adelante te llegará un correo cada vez que alguien se haga seguidor de tu blog, pero si te enfada recibir esos correos puedes eliminar esas notificaciones haciendo click en el enlace que viene en los mismos correos.

Como dije al principio, quizá no sea útil para todos pero si algún día alguien necesita hacerlo por equis razón entonces ahí está la información.
Leer más...

Agregar una descripción a las etiquetas del blog

En algunas ocasiones es necesario ser lo más descriptivo posible con ciertas áreas del blog como por ejemplo en las páginas de etiquetas; ya sea porque quizá la etiqueta que elegimos no dice mucho sobre la temática de la que se habla, o porque el público al que está dirigido el blog necesita más detalles para su comprensión.
Así que una forma de ser más explícitos es agregar una descripción en las páginas de las etiquetas para cuando el lector haga click en esa etiqueta pueda tener una introducción sobre lo que encontrará en esa categoría.

Como también soy malo describiendo las cosas mejor mira en este blog de pruebas que enlaza a la etiqueta Juegos. Si das click en otras etiquetas verás que la descripción cambia y ninguna de ellas se ven ni en la portada ni en las entradas individuales.


Para agregar estas descripciones a las páginas de etiquetas haremos uso de los códigos condicionales para que -redundantemente- condicionemos que sólo se muestren en la etiqueta que especifiquemos, por lo tanto puedes hacerlo para todas las etiquetas de tu blog o sólo para las que elijas.

Primero ingresa a Diseño | Edición de HTML, marca la casilla Expandir plantillas de artilugios y busca esta línea:
<b:include data='top' name='status-message'/>
Si no la tienes probablemente la eliminaste para ocultar el mensaje "Mostrando entradas con la etiqueta..."
Si ese es tu caso entonces busca este código:
<!-- posts -->
<div class='blog-posts hfeed'>
Debajo de cualquier de esos códigos agrega esto:
<b:if cond='data:blog.url == &quot;http://nombre-de-mi-blog.blogspot.com/search/label/Nombre-de-la-etiqueta&quot;'>
<div id='IntroEtiquetas'>
<img src='URL de la imagen' style='float: left; border:0; margin: 0 5px 10px 0;'/>
...Aquí va la descripción de la etiqueta...

</div>
</b:if>
Escribe el nombre de tu blog y el de la etiqueta donde se indica. Si lo deseas también puedes agregar una imagen, pero si no, puedes quitar el código de la imagen y no pasa nada.
Ese código es para una sola etiqueta, si deseas más sólo agrega debajo de él otro código igual cambiando obviamente el nombre de la etiqueta y su descripción.

Ya que hayas hecho eso añade antes de ]]></b:skin> los estilos:
#IntroEtiquetas {
background:#6E6E6E; /* Color de fondo */
color:#000; /* Color del texto */
padding:20px;
}
Son estilos muy básicos pero que puedes mejorar agregando más o modificando los existentes para que se adapten a tu gusto.

Como ves es un procedimiento muy simple que puede ayudar a ilustrar las categorías de tu blog haciéndolas más personalizadas.


tomado de ciudad blogger
Leer más...

La Edición de HTML en la nueva interfaz de Blogger

Desde que en abril se anunció la nueva interfaz de Blogger mucho se ha esperado de ella pero pocos han sido quienes han tenido la oportunidad de usarla. Estos "afortunados" -como dice Blogger-, seguro ya saben que esta nueva interfaz no tiene la opción de editar la plantilla desde la Edición de HTML. Únicamente podemos cambiar de plantilla, o bien, cambiar de lugar o eliminar los gadgets desde lo que usualmente conocemos como Elementos de la Página y que ahora sólo se llama Diseño.


Como todo lo que está en Blogger in Draft es de pruebas, sería muy apresurado decir que es definitivo que la Edición de HTML no la volveremos a ver. Así que bien puede ser que definitivamente no la incluyan o que más adelante lo hagan. Lo cierto es que en estos casos lo mejor es no especular y dejar que de la boca mano de Blogger salga la versión oficial con sus merecidos argumentos, aunque ya sabemos que siempre lo hace más tardado de lo que debería.

Mientras tanto, los "afortunados" que ya disponen de esta nueva interfaz aún pueden editar la plantilla desde la Edición de HTML, ya sea usando la versión normal de Blogger o ingresando a una URL antigua.

Como esta interfaz está disponible sólo desde Blogger in Draft, entonces la primera opción es dejar de usar esta interfaz como escritorio predeterminado. Así que entramos en Blogger, desmarcamos la casilla Establacer Blogger en borrados como predeterminado, cerramos la sesión e ingresamos al Blogger "normal".


Habiendo hecho esto podrás utilizar nuevamente la versión oficial actual que es la que la mayoría conocemos y que sí dispone de la Edición de HTML.

Otra opción es que, si no quieres estar entrando y saliendo de esa interfaz cada vez que vayas a editar la plantilla entonces a través de un link puedas acceder a la antigua interfaz de Blogger in Draft y así puedas utilizar la Edición de HTML.
Para ello necesitas ingresar a tu cuenta de Blogger, y en la barra izquierda localiza el nombre de tu blog y luego haz click en Escritorio.


Al hacer esto verás en la barra de direcciones de tu navegador una dirección que contiene la ID de tu blog, es una serie de números fácil de reconocer.

Copia esa ID y luego usa este enlace:
http://draft.blogger.com/html?blogID=XXXXXXXXXXXXXXXXX

Cambia lo que está en rojo por la ID de tu blog y podrás acceder a la Edición de HTML de la antigua interfaz de Blogger in Draft.

Como también sería muy tedioso tener que estar buscando la ID de tu blog a cada rato puedes agregar esa URL a tus marcadores (favoritos) y así tener un acceso mucho más fácil.

Lo dicho, no hay nada definitivo de manera oficial pero mientras tanto estas son unas opciones para poder editar la plantilla del blog. Y claro, que si ya tienes esta interfaz aprovecha la opción de Enviar comentarios para que puedas quejarte libremente :)

Leer más...

Mostrar una imagen diferente en los links rotos de las imágenes

Algunos tienen la mala costumbre de hacer hot-linking en su blog, es decir, andan navegando por la red, encuentran una imagen, consiguen su URL y la usan para mostrar dicha imagen en su blog. Es es el hot-linking, y lo único que hace es que perjudiquemos el ancho de banda del sitio al que le hemos tomado la foto. Pero además de eso corres el riesgo de que el dueño del sitio Web elimine la imagen y te quedes sin ella.

Cuando eso sucede obviamente la imagen ya no se mostrará en el blog y en su lugar veremos el típico icono que representa que una el vínculo de una imagen está roto, o sea que el link de esa imagen no funciona.

Pero esa no es la unica razón por la que pueda aparecernos ese icono, a veces aun cuando subimos las imágenes a nuestro propio hosting el servidor puede estar caído, la conexión puede andar lenta, sin querer eliminamos la foto, o simplemente hemos copiado mal la URL de la imagen. En cualquiera de esos casos puede aparecer el icono de la que hablo que indica que la imagen no existe o no cargó.

Lo que veremos hoy es cómo mostrar una imagen diferente al habitual icono predeterminado que trae el navegador, de manera que podamos cambiar la imagen que se muestra cuando la URL de la imagen está rota.
Así que cambiaremos esto:

Por una imagen personalizada, como por ejemplo, esta:


Para conseguirlo usaremos un script muy corto que lo que hace es detectar el tamaño ancho de la imagen, si lo encuentra en cero entonces mostrará la imagen que hemos elegido.
Sólo debes entrar en Diseño | Edición de HTML y antes de </head> pegar lo siguiente:
<script type='text/javascript'>
//<![CDATA[
// Script para sustituir imágenes rotas
function ImagenOk(img) {
if (!img.complete) return false;
if (typeof img.naturalWidth != "undefined" && img.naturalWidth == 0) return false;
return true;
}
function RevisarImagenesRotas() {
var replacementImg = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLeZQ6htzpYsD1iOO7QfTqP0uNKRm_2C-rfOPqM6S4B6Mj3sy8EA7d48bVOPHWXMdMalQs_RuNVhUaWb47SQjBVCfIhZMaAkYkGjK_m9u_85PAmRMtV7XvnExi7YX5LguIg-iXAam3Mqk/";
for (var i = 0; i < document.images.length; i++) {
if (!ImagenOk(document.images[i])) {
document.images[i].src = replacementImg;
}}}
window.onload=RevisarImagenesRotas;
// ]]>
</script>
Lo que está en color rojo es la URL de la imagen de ejemplo que he puesto, pero puedes cambiarla por alguna que tú diseñes o el icono que tú elijas.

Cabe aclarar, que este script no sustituirá las imágenes de los hostings que añaden su propia imagen para indicar que la imagen ha sido eliminada como es el caso de TinyPic y Photobucket.
Recuerda que, para evitar en lo mayor posible que las imágenes no se vean, no uses la imagen de alguien más, mejor sube tus imágenes a Picasa y así te evitarás muchos dolores de cabeza.

El script está probado en Firefox 5, Google Chrome 12, Opera 11, Safari 5, Internet Explorer 7, 8 y 9. En todos funciona, si no ves el icono personalizado de inmediato entonces tienes que esperar a que cargue el blog por completo.


tomado de ciudad blogger
Leer más...

Poner emoticons en Blogger estilo Facebook

Las palabras no siempre son suficientes para expresar alguna emoción, sobre todo en el mundo cibernético donde todo tiene el sentido connotativo que cada uno le da. Es ahí cuando los emoticonos salen a nuestro rescate para poder reflejar algún estado de ánimo o gesto que a veces es más fácil expresar con una imagen.

Por esa razón muchos optan por usar emoticons en los comentarios del blog, y es eso mismo lo que haremos con esta entrada. Veremos cómo agregar emoticons en el blog estilo Facebook, es decir, con los mismos emoticons que usa Facebook en su chat y muro. Puedes verlos funcionando en este blog de pruebas.
Estos son los emoticones que verás:

Estos emoticons (emoticones, emoticonos, smiles, o como le quieras llamar) aparecerán sólo en los comentarios, y para ello usaremos un script de Vagabundia que ingeniosamente hace que los emoticons sólo se ejecuten en el cuerpo de los comentarios para no interferir con otras áreas.

Primero entra en Diseño | Edición de HTML, marca la casilla Expandir plantillas de artilugios y agrega antes de </head> el siguiente script:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
function emoticonComentario(emoticon) {
if(!document.getElementById) {return;}
bodyText = document.getElementById(emoticon);
cambiarLetra = bodyText.innerHTML;

// :)

cambiarLetra = cambiarLetra.replace(/:\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimlrDHMkHLMhG1OeF9jSyJ3FYAC2L9x3arnvlM8NeSnkmI-e-T1Ug2YaClN1oloO0yxRxSRbs6LPlJrO4eB5CDhNJ7wH4c5qGuBKhnpjcEmvWyWpBohIpQIKcHtvm8XNs7tH4Cc_xkfvw/" />');

// :(

cambiarLetra = cambiarLetra.replace(/:\(/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcsbjxP-ZkWlESA9tx660xp6VMatiV6pkBvsXV9eOzOJPY4jHeGNe0nCqudnfaguaiJd3WUgLzFgHPDn2qphUdBuDL1rd1-Q8OXvaV5gMlASKNIZhXE5GjE0TVpZ07GbDYFwQZh_xdG7E/" />');

// ;)

cambiarLetra = cambiarLetra.replace(/;\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiV2pbHoFlsDFMbvEhTXjpvfryCuOQnhFYQxfuN59vn77Bk7w3BdP3V10HcZqxAxP2unhB7EYpY18yVmYK3XsDqW4yWbtCDf6llvHPyypkxawFRjY5nXHWvorEBqs37foJum-NaolTEOE/" />');

// :P

cambiarLetra = cambiarLetra.replace(/:\P/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJRwWkG_1VhrDPyPUqzFZijXLJnjiX5hG_jqkAxgqloFErQjAW-uKaZ7VcLNHqgVt0lbc220WE3kaHuvCzGcmY6geOcFdRIc6C6fnofrTvOZpgVXSpQqh0pqNCf6Fl4D17vyWPg_CHNaw/" />');
cambiarLetra = cambiarLetra.replace(/:\p/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJRwWkG_1VhrDPyPUqzFZijXLJnjiX5hG_jqkAxgqloFErQjAW-uKaZ7VcLNHqgVt0lbc220WE3kaHuvCzGcmY6geOcFdRIc6C6fnofrTvOZpgVXSpQqh0pqNCf6Fl4D17vyWPg_CHNaw/" />');

// :D

cambiarLetra = cambiarLetra.replace(/:D/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy6bS5xFjEsr7VRtNS7XdcV0HSuBqFXoaDV9JGHmoz_DSUBANWNAWiBzW_1IK_qCB4ddBePX4LplDZgxxxmb7flT_qZoTJQ_NlJg4gcjsb0z8n42oXNvZi1_Zss5FXpKpnpW5tJFQSmzg/" />');
cambiarLetra = cambiarLetra.replace(/:d/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy6bS5xFjEsr7VRtNS7XdcV0HSuBqFXoaDV9JGHmoz_DSUBANWNAWiBzW_1IK_qCB4ddBePX4LplDZgxxxmb7flT_qZoTJQ_NlJg4gcjsb0z8n42oXNvZi1_Zss5FXpKpnpW5tJFQSmzg/" />');

// XD

cambiarLetra = cambiarLetra.replace(/XD/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCFTJ2sttj-mRUnvFkp2Z49knQ4aULgafWsVWQCmB_Gf33nbWhviJ4XOqDFFvx0No8eUYD24i8rEVr6vGGTTgPUSDbGKm7P1iq84lIG_jN8t1v4nah9X9SbI160N8HHyKhBSRnr34AEpA/" />');

// :S

cambiarLetra = cambiarLetra.replace(/:S/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjht9XtzYYXTQISo7c919UoCS_w2M8dUOXrH_lQmJVnvyFpD3jNjtuFs_y61LwhW4qiF1V-FAPvKUnPSb4bT_NLwGo1UdVR3BKz03twjHQmEIE8D0iGpZpZJehedv9fMY2-pFeFuKpkzlw/" />');
cambiarLetra = cambiarLetra.replace(/:s/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjht9XtzYYXTQISo7c919UoCS_w2M8dUOXrH_lQmJVnvyFpD3jNjtuFs_y61LwhW4qiF1V-FAPvKUnPSb4bT_NLwGo1UdVR3BKz03twjHQmEIE8D0iGpZpZJehedv9fMY2-pFeFuKpkzlw/" />');

// X(

cambiarLetra = cambiarLetra.replace(/X\(/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhziUntU-20b4E8Ifhk-UsI337SyTpty2Rxp6svvnXSAs_9q9R-rkKEevpiKc7CHxcLq3C7kpKa2IGNpERnuU-KZPKK7vzk5qtH8t5VEd5kuwjBS7Y1-OWhnGiff4nqASNYS8ATmLuF2Qg/" />');

// :'(

cambiarLetra = cambiarLetra.replace(/:'\(/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv97uP1pFOQ9pW10JdCmLbWLGGFvtVNm2ji1S_fxFDH9nb4crHAfumjmoILinMr-SoqhW1MuSYTtqJKA-RCZJFSGFGr-_ymB-SxTvRnWgD6L8fm9mCEEhk3zTzyUFo40XZKByVRzW_oQw/" />');

// 8)

cambiarLetra = cambiarLetra.replace(/8\)/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW6JDXXOk4YFvMGQY74Aza6C6LlVijY0EYjEvw3aHeQW4iDKGGnl_mhsGVyO_odvixiAhWagN1cxS1BpVhrLSSQ6iWIBk4w8ccvy7vixaNFUGdzQnLtQsoPu-GwCgY9gC9hQaFpGQsrdc/" />');

// :O

cambiarLetra = cambiarLetra.replace(/:\O/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_RsNhDzItbvWp6XvB48hP0wUG2DMFRyhb8pa08l40nEUhdoEwtr4LIRffE6GMUalLS3_TMsesk2-BFWfVDxuQzZWy4UjlMsz9v0CRPPhnVEWeLvfDNRaBQOZotIWms_LUorjxhaxMv78/" />');
cambiarLetra = cambiarLetra.replace(/:\o/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_RsNhDzItbvWp6XvB48hP0wUG2DMFRyhb8pa08l40nEUhdoEwtr4LIRffE6GMUalLS3_TMsesk2-BFWfVDxuQzZWy4UjlMsz9v0CRPPhnVEWeLvfDNRaBQOZotIWms_LUorjxhaxMv78/" />');

// :*

cambiarLetra = cambiarLetra.replace(/:\*/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaoqiTNysyzN9buMPINGzCcOu1IwcmSiPLdjQPQj-_t4J1-cWVbUqAFs198LPi1VvUDn6CexD2euNo5MWK9-WNT-WVzBwBm3PrbYbc4G7rWNk09ZPVc3FTY7O54KKXzcyhmtBQqGTTNi8/" />');

// :A

cambiarLetra = cambiarLetra.replace(/:A/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqHZwA9mlUy9KSuZo7tfub0vEVutAf0aQPQYdU91yML_-T9x9bW-dM2jlphZEfpoHuXdWatvUYPqd86ib2sZuqy2K0ZStAuZVJ3mvpBMLdn0eh8Gep6SWkB5rgTv8_QmPul8Buu-RHEIc/" />');
cambiarLetra = cambiarLetra.replace(/:a/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqHZwA9mlUy9KSuZo7tfub0vEVutAf0aQPQYdU91yML_-T9x9bW-dM2jlphZEfpoHuXdWatvUYPqd86ib2sZuqy2K0ZStAuZVJ3mvpBMLdn0eh8Gep6SWkB5rgTv8_QmPul8Buu-RHEIc/" />');

// 3:

cambiarLetra = cambiarLetra.replace(/3:/g,'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8Gv9ZcxklMXea19ca3GWtbDuxud5r2z-5AZm5UjHV7J4lcUC-Os244-aE88ZT6zip0vVwYNElXxTmiWQZ2tS5ycCWzMudsu-BGfuo-0klkUt0VDFsNYjkDynT92COJdFnG16manxrz48/" />');

bodyText.innerHTML = cambiarLetra;

}
//]]>
</script>
</b:if>

Ahora busca esta parte:
<p>
<data:comment.body/>
</p>

Y cámbiala por este código:
<p expr:id='&quot;combody-&quot; + data:comment.anchorName'><data:comment.body/></p>
<script type='text/javascript'>
emoticon = &quot;combody-&quot; + &quot;<data:comment.anchorName/>&quot;;
emoticonComentario(emoticon);
</script>

Luego busca esta línea:
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
Muy posiblemente la encontrarás dos veces, justo debajo de la segunda que encuentres agrega esto, que es la imagen que se mostrará arriba del formulario de comentarios:
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnRSP3JaYgDtr6lBeln4BN7CBvv-mekKJaLLXkq3HuA3ejgWgqGlshxHlM50FrBBQdeJVcYYHb1QKFSLVOHTkpDDa-1yIn7INbFv9IpEcR3s7gNuGxaINO73xVMj0y0V9GX1An0yR-yb4/'/>
Y listo, tendrás estos emoticonos en tu blog. Estas imágenes son tomadas del mismo Facebook y tienen el contorno ligeramente marcado de blanco, por lo que se recomienda usarlo en blogs con colores claros para que no se note ese pequeño borde alrededor de ellas.
O si lo prefieres puedes cambiar los iconos por los tuyos, sólo busca las URLs de las imágenes del primer código que corresponden a cada juego de caracteres, los he señalado en color verde para que sean más fácil de encontrar.
tomado de ciudad blogger.
Que los disfruten
Leer más...

Crear un intro para el blog



Cuando es la primera vez piensas en hacer un blog seguro se te viene a la mente algo más del estilo página Web con algún tipo de pantalla de bienvenida, pero luego descubres que una página Web no es lo mismo que un blog, y aunque un blog tiene demasiados puntos positivos a favor de repente hay quien quiere usar estos elementos de las páginas Webs para su propio blog, tal es el caso de las pantallas de presentación o intros.

Aunque hay muchos métodos para ello algunos de estos requieren que se cree un documento html que será el se muestre como presentación, sin embargo esto no es muy recomendable cuando se trata de posicionar el blog. Así que experimentando un poco diseñé un método con el cuál no usaremos páginas adicionales para no afectar el PageRank, y para evitar dañar el posicionamiento o ser sancionados por Google no ocultaremos el contenido del blog, sólo usaremos dos capas, una que es el contenido del blog le pondremos un z-index muy bajo, y otra que será el intro con otro z-index pero más alto, esto hará que los robots de Google puedan leer el contenido del blog sin problemas.

Este intro para el blog aunque es algo sencillo puede tener más elementos si lo desean, ya será a opción de cada quien, yo por lo pronto sólo le puesto una imagen de presentación, un botón para entrar y música de fondo. Y atención, que sólo se verá en la portada del blog para que no sea molesto para los lectores, así que cuando naveguen por las entradas o páginas del blog el intro no será visible. Puedes ver el demo en este blog de pruebas.

Ahora veamos cómo ponerlo, primero entra en Diseño | Edición de HTMl y busca esta etiqueta:
<body>
O si usas una plantilla del Diseñador de Plantillas de Blogger entonces busca esta línea:
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

Justo debajo de cualquiera de una de ellas agrega lo siguiente:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
body {margin:0; padding:0; overflow:hidden;}
.entrar, #navbar-iframe, .navbar {display:none;}
.BlogOculto {z-index:-100;} #Intro {z-index:5000;}
#Intro {text-align:center;
background:#000; /* Color de fondo de la pantalla */
position:absolute;
width:100%;
height:100%;
overflow-x:hidden;
}
p.btnEntrar a {
font-size: 16px; /* Tamaño de la letra del botón */
font-style: italic;
font-weight: bold;
text-decoration: none;
color: #1C1C1C; /* Color de la letra del botón */
background: #ccc; /* Color de fondo del botón */
padding: 6px;
border: 1px solid #2E2E2E; /* Color del borde del botón */
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
p.btnEntrar a:hover {position:relative; top:1px; left:1px;}
</style>

<div id='Intro'>

<div style='margin-top:200px;'>
<!-- Inicio del contenido del intro -->


<img src='
URL de la imagen'/>
<p class='btnEntrar'>&lt;a href=&quot;javascript:void(0);&quot; onClick=&quot;document.getElementById(&#39;BlogContenedor&#39;).className = &#39;quitarIntro&#39;, document.getElementById(&#39;Intro&#39;).className = &#39;entrar&#39;, document.getElementById(&#39;ElementosAudio&#39;).innerHTML = &#39;&#39;, document.body.style.overflow=&#39;auto&#39; &quot;&gt;
Entrar&lt;/a&gt;</p>

<div id='ElementosAudio'>

<iframe allowfullscreen='' frameborder='0' height='0' src='http://www.youtube.com/v/
XXXXXXX&amp;autoplay=1&amp;loop=1' width='0'/>
</div>

<!-- Fin del contenido del intro -->

</div>
</div>
</b:if>

<span class='BlogOculto' id='BlogContenedor'>
Y luego busca la etiqueta </body> y arriba de ella agrega esto:
</span>
¿Es todo? Sí, eso es todo, ahora sólo vamos a personalizarlo.
En el primer código que hemos agregado están señalados en color verde algunos aspectos como el color que tendrá el intro, el tamaño de letra del botón, color del botón, etc.

Luego, en donde dice URL de la imagen puedes poner la URL de la imagen del logotipo de tu blog, alguna imagen de bienvenida o cualquier otra imagen. El texto del botón 'Entrar' puede cambiarse por cualquier otro, ahí lo he señalado en negrita, o bien, si lo deseas puedes reemplazar el botón por una imagen, sólo elimina el texto Entrar y en su lugar pon el código de una imagen:
<img src="URL de la imagen" />
Si haces eso entonces deberás eliminar el borde y color de fondo del botón señalado en color verde.
Pero es MUY IMPORTANTE que si cambias ese texto o si pones una imagen en su lugar NO modifiques el código púrpura que se encuentra alrededor.
Cualquier elemento que quiera agregarse al intro debe ir antes de donde dice Fin del contenido del intro o después de Inicio del contenido del intro. Regularmente los intros no tienen muchos elementos por cuestión de presentación, así que entre menos cosas tenga mejor.
En donde dice margin-top:200px es la distancia que tendrán los elementos del intro respecto a la parte superior de la pantalla, puede modificarse por otro valor.

Yo le he puesto una música de fondo utilizando un video de YouTube sólo que le he puesto en ceros los valores de alto y ancho para que el reproductor sea invisible. Si deseas poner también una música de fondo entonces cambia las XXXXXXX por la ID del video que quieres poner.
Si quisieras poner un archivo en flash SWF quita el código del reproductor (sólo lo gris) y en su lugar pon el código del SWF. Pero ojo, que sólo debe eliminarse lo que está en color gris.
Si no deseas poner audio, ni tampoco un archivo en flash puedes eliminar el código gris o dejarlo como está.
 
tomado de ciudad blogger.

Leer más...

Botón para compartir por Twitter y Facebook

Cada vez más son las personas que tienen una cuenta en Twitter y Facebook, y ambas redes sociales se han convertido en un buen medio de promoción para los blogs, así que podemos aprovechar estas vías y poner un botón que permita compartir una entrada en cualquiera de estas dos redes.
El botón de Facebook es un script de Fbshare.me que permite enviar contenido a Facebook y al mismo tiempo marca cuántas veces se ha compartido ese post.
El botón de Tweetmeme hace lo mismo, permite enviar la entrada a Twitter y cuenta las veces que se ha hecho esto.
Podemos combinar ambos servicios para tener en el mismo espacio ambas posibilidades de compartir y promocionar.

Para colocarlos en tu blog entra en Diseño > Edición de HTML, marca la casilla Expandir plantillas de artilugios y busca esta etiqueta:

<b:if cond='data:post.title'>

Y justo debajo de ella pega esto:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- boton tweetmeme -->
<div style='float: right;'>
<ul style='list-style:none;'><li>
<script type='text/javascript'>
tweetmeme_url = &#39;<data:post.url/>&#39;;
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/></li>
<br/>
<!-- boton facebook -->
<li><script>var fbShare = {
url: &#39;<data:post.url/>&#39;,
}</script>
<script src='http://widgets.fbshare.me/files/fbshare.js'/></li></ul>
</div>
</b:if>

El resultado será este:

tweetmeme facebook

Los botones quedan acomodados uno encima del otro, si los quisieras en línea horizontal, es decir, uno seguido del otro, entonces usa este código:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- boton tweetmeme -->
<div style='float: right;margin-left:10px;'>
<script type='text/javascript'>
tweetmeme_url = &#39;<data:post.url/>&#39;;
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
<!-- boton facebook -->
<script>var fbShare = {
url: &#39;<data:post.url/>&#39;,
}</script>
<script src='http://widgets.fbshare.me/files/fbshare.js'/>
</div>
</b:if>

El resultado será este:

tweetmeme facebook

Aun si tampoco ninguno de esos te gustara puedes usar la versión mini que sería esta:

tweetmeme facebook

En ese caso el código sería este:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- boton facebook -->
<div style='float: right;'>
<script>var fbShare = {
url: &#39;<data:post.url/>&#39;,
size: &#39;small&#39;,
}</script>
<script src='http://widgets.fbshare.me/files/fbshare.js'/>
<!-- boton tweetmeme -->
<script type='text/javascript'>
tweetmeme_url = &#39;<data:post.url/>&#39;;tweetmeme_style = &#39;compact&#39;;
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
</div>
</b:if>

Tres buenas opciones para compartir tus entradas, si lo deseas puedes poner sólo un botón, ya sea el de Tweetmeme o el de Facebook, sólo quita la parte del código que corresponda, al inicio de cada código tiene la etiqueta que especifica si es de Tweetmeme o de Facebook.

En cualquiera de los tres casos los botones sólo se verán al estar dentro de una entrada, esto es para que tengan un mejor funcionamiento.
Leer más...