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

?ltimas entradas por categor?as con imagen en miniatura

Algunas veces queremos tener todo muy organizado para que nuestros lectores puedan encontrar con mayor facilidad los temas de su inter�s, y es ah? cuando en lugar de poner un gadget con las ?ltimas entradas queremos poner s? las ?ltimas entradas pero por categor?as, de manera que puedas mostrar las ?ltimas entradas por cada etiqueta que quieras y adem?s mostrar la miniatura de dicho elemento.

Para poner en tu blog este gadget de ?ltimas entradas por categor?as realizaremos estos sencillos pasos:
1.- Entra en Dise?o | Edici?n de HTML y antes de ]]></b:skin> pega lo siguiente:

/* ?ltimas entradas por categor?as
--------------------------------- */
img.label_thumb{
float:left;
border:1px solid #8f8f8f; /* Borde de las miniaturas */
margin-right:10px !important;
height:55px; /* Alto de las miniaturas */
width:55px; /* Ancho de las miniaturas */
}
.label_with_thumbs {
float: left;
width: 100%;
min-height: 70px;
margin: 0px 10px 2px 0px;
padding: 0;
}
ul.label_with_thumbs li {
padding:8px 0;
min-height:65px;
margin-bottom:10px;
}
.label_with_thumbs a {}
.label_with_thumbs strong {padding-left:0px;}

2.- Luego antes de </head> pega este script:

<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<ul class="label_with_thumbs">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
{s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}else thumburl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9dV1XR9bWAU6bwTHrlZ-ObhwxLAP7QR2MsyVpA6k816ce4nzGCxCo0qwBbZ65tqciXu9kYzUj0swUMcciPY0aWYy6CpTCO35vDXLUGJl6I36n1G2dBjCATFJP6nT9SplMBqFD1oGrQtY/';}
var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Ene";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Abr";monthnames[5]="May";monthnames[6]="Jun";monthnames[7]="Jul";monthnames[8]="Ago";monthnames[9]="Sep";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dic";document.write('<li class="clearfix">');if(showpostthumbnails==true)
document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><br>');if("content"in entry){var postcontent=entry.content.$t;}
else
if("summary"in entry){var postcontent=entry.summary.$t;}
else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');}
else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}
var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}
if(showcommentnum==true)
{if(flag==1){towrite=towrite+' | ';}
if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}
if(displaymore==true)
{if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">M?s �</a>';flag=1;;}
document.write(towrite);document.write('</li>');if(displayseparator==true)
if(i!=(numposts-1))
document.write('');}document.write('</ul>');}
//]]>
</script>

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

<script type='text/javascript'>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 100;</script>
<script type="text/javascript" src="/feeds/posts/default/-/Nombre-de-la-etiqueta?published&alt=json-in-script&callback=labelthumbs"></script>

En donde dice Nombre-de-la-etiqueta va el nombre de la etiqueta que quieres mostrar, tal como es, respetando may?sculas y min?sculas. En el caso que la etiqueta contenga espacios o acentos lo mejor es que ingreses a la etiqueta y te fijes en la URL que aparece en la barra de direcciones del navegador, al final de la URL vendr? el nombre de la etiqueta tal como debe ponerse, por ejemplo, si tuviera espacios se ver?a as?:

http://Nombre-de-mi-blog.blogspot.com/search/label/Nombre%20etiqueta

Tambi�n dentro de �ste ?ltimo c?digo hay unas ?reas que podemos personalizar, true significa que lo mostrar? y false que no lo mostrar?.

var numposts ? N?mero de entradas a mostrar
var showpostthumbnails ? Mostrar o no las miniaturas
var displaymore ? Mostrar o no el enlace para leer m?s
var displayseparator ? Mostrar o no un separador
var showcommentnum ? Mostrar o no el n?mero de comentarios
var showpostdate ? Mostrar o no la fecha de las entradas
var showpostsummary ? Mostrar o no el resumen de las entradas
var numchars ? N?mero de caracteres en los res?menes

Y en el segundo c?digo hay una URL en color naranja, esa es la imagen que se mostrar? cuando la entrada no contenga ninguna imagen, puedes cambiarla por otra imagen si lo deseas.

Recuerda que el gadget muestra las ultimas entradas de una etiqueta en particular, por lo tanto, si quieres mostrar las ?ltimas entradas de otras etiquetas entonces s?lo tienes que repetir el paso #3 por cada categor?a adicional que quieras agregar.

Botones de Facebook

La otra vez MaG@S RaDioMuSiC me comentaba que en la red hay muchos botones para Twitter pero muy pocos para Facebook. Por alguna raz?n los dise?adores gr?ficos no le han puesto mucha atenci?n a ello y desconozco por qu�. Yo no soy dise?ador ni nada que se le parezca pero me tom� un tiempo para hacer estos cinco botones de Facebook que aunque son muy pocos espero que alguno les agrade por si consideran usarlo para enlazar su p?gina o perfil de Facebook desde su blog.

Son 5 y est?n en formato PNG, s?lo hay que subirlos a un hosting y en un elemento HTML/Javascript poner un c?digo simple de imagen con enlace:

<a href="http://www.facebook.com/usuario"><img src="URL de la imagen" /></a>

Siento no poder hacer botones a petici?n pero espero que al menos �stos sean de su agrado.

Abrir ventana al cargar el blog con Shadowbox

Desde que vimos c?mo usar ventanas modales con Shadowbox muchos son los que han tenido la inquietud por saber c?mo hacer que estas ventanas modales puedan abrirse al cargar el blog sin necesidad de hacer click en ning?n enlace, tal como han podido verlo an ingresar a esta entrada.

Estas pueden resultar muy ?tiles para mostrar publicidad, avisos, recordatorios, o cualquier cosa que pondr?amos en una ventana popup pero con la elegancia que Shadowbox sabe dar.

Si no tienes Shadowbox primero sigue los pasos de instalaci?n que se explican en esta entrada.

Y luego, ya que lo tengas puesto, o si ya lo usas desde antes, s?lo agrega antes de </head> lo siguiente:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script type='text/javascript'>
// <![CDATA[
Shadowbox.init({
language: "es",
players: ['html']
});
function AlertMessage()
{
Shadowbox.open({
player: 'html',
content: 'C?digo HTML de lo que se mostrar?',
height: 300, // Alto de la ventana modal
width: 500 // Ancho de la ventana modal
});
}
setTimeout('Shadowbox.close()', 10000);
window.onload = AlertMessage;
// ]]>
</script>
</b:if>

Por ?ltimo s?lo hay que colocar lo que queremos mostrar, eso se agrega en donde se indica en color azul. Si quieres agregar una imagen con enlace, o una animaci?n en Flash (SWF), etc. entonces s?lo agrega en donde se indica en color azul el c?digo HTML de lo que quieres mostrar.

Por ejemplo, si quieres mostrar una imagen en la ventana modal entonces s?lo agrega el c?digo normal que usar?as en una imagen:

<a href="URL del enlace" target="_blank"><img src="URL de la imagen"/></a>

O si fuera una DIV con un texto, o algo m?s elaborado entonces ser?a as?, por ejemplo:

<div style="padding:20px; color:#fff;">Lorem ipsum dolor sit amet</div>

Y lo mismo ser?a si quisieras mostrar un archivo en Flash (SWF), s?lo agrega el c?digo correspondiente y listo.

Luego, en color verde se indica d?nde se cambia el ancho y alto de la ventana modal.

La l?nea en color rojo es para que la ventana se cierre sola en determinado tiempo, sino quieres que se cierre autom?ticamente entonces elim?nala, pero si quieres que s? se cierre sola entonces ah? puedes cambiarle el tiempo que permanecer? abierta en milisegundos (se cambia el n?mero en negrita), as? como est? tardar? abierta 10 segundos.

Pero ojo, no son 10 segundos desde que aparece la ventana modal sino desde que se ingresa al blog, as? que si tu blog es muy tardado y la ventana modal tarda un poco en cargar entonces podr? verse por menos tiempo o si es mucho el tiempo de carga simplemente no se ver?.

Tambi�n se puede mostrar contenido un poco m?s "complejo", aunque �ste m�todo no funciona del todo bien en Google Chrome. Aun as?, si lo quieres hacer, deber?s crear un documento HTML que incluir? todo lo que quieres mostrar, ser? como una mini p?gina Web.

Para ello abre el Bloc de notas y dentro de �l pega esto:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
...Aqu? van los estilos CSS...
</style>
</head>
<body>

...Aqu? pegamos el contenido que queremos mostrar...

</body>
</html>

Ah? donde se indica pega el contenido que quieres, y si requiere de estilos se colocan donde se indica tambi�n.
Cuando termines ve a Archivo | Guardar como... y ponle el nombre popup.html o con cualquier otro nombre pero al final deber? decir .html

Luego cambia el Tipo a Todos los archivos, y dale Guardar.

Con esto lo estaremos guardando en formato de p?gina Web, as? que probablemente te aparezca un mensaje de advertencia donde te dir? que est?s guardando el archivo en otro formato, s?lo da click en S? para guardar el archivo.

Sube ese archivo HTML a un hosting y obt�n su URL, esa URL es la que pondr?s en donde se indica en color azul.

Y donde dice player: 'html', c?mbialo por player: 'iframe',

Puede parecer complicado esto ?ltimo de armar el contenido "complejo" pero no lo es tanto, obviamente si no est?s muy familiarizado (a) con el HTML lo mejor es poner algo muy sencillo como la URL de una imagen y problema resuelto.

Es importante aclarar (porque s� que me lo preguntar?n) que no se mostrar? una vez y ya, sino que se mostrar? s?lo en la portada del blog. Si quieras que se muestre en cualquier parte del blog entonces elimina la primera y ?ltima l?nea del c?digo que est?n en cursiva.

Si quisieras que s?lo se muestre en las p?ginas est?ticas, o s?lo en las entradas, o en una parte espec?fica del blog entonces elimina de igual modo la primera y ?ltima l?nea y en su lugar pon las l?neas del c?digo condicional que sea m?s apropiado para ti.

Dividir el footer del blog

Ya vimos c?mo dividir la cabecera del blog y c?mo dividir el crosscol, ahora le toca el turno al pie del blog, o sea, a la parte que se encuentra hasta abajo de la plantilla mejor conocida como footer. As? que en esta entrada veremos c?mo dividir el footer del blog en tres columnas para poder agregar ah? algunos gadgets.

Pasaremos de esto:

A esto:

Para los que usan una plantilla del Dise?ador de Plantillas de Blogger eso puede hacerse desde el momento de la creaci?n de la plantilla, s?lo hay que ir dentro del Dise?ador de Plantillas y en la pesta?a Dise?o hay que elegir la estructura de la plantilla, en la secci?n Dise?o de pie de p?gina puede seleccionarse el footer simple, dividido en dos, o dividido en tres.

O bien, tambi�n puede hacerse directo en la plantilla, as? que vamos a ver c?mo dividir el footer del blog tanto en esas plantillas como en las plantillas antiguas.

Empezaremos con las plantillas hechas con el Dise?ador de Plantillas de Blogger, primero vamos a quitar temporalmente cualquier gadget que haya en esa ?rea, puedes arrastrarlo a la sidebar, ya cuando termines con los cambios podr?s moverlo de nuevo al footer.

Ya que est� libre esa ?rea entra en Dise?o | Edici?n de HTML y SIN expandir los artilugios busca esta l?nea:

<b:section-contents id='footer-1'/>

O si ya est? dividido en dos busca esta otra:

<b:section-contents id='footer-1'/><b:section-contents id='footer-2-1'/><b:section-contents id='footer-2-2'/>

Ya localizada cualquiera de esas partes elim?nala con cuidado y en su lugar pon esto:

<b:section-contents id='footer-1'/><b:section-contents id='footer-2-1'/><b:section-contents id='footer-2-2'/><b:section-contents id='footer-2-3'/>

Con eso estar? dividido el footer en tres columnas. No se ver? la columna extra hasta abajo que se aprecia en la imagen de ejemplo pues en el caso de esas plantillas los gadgets pueden arrastrase arriba de los cr�ditos y funcionar? de igual manera.

En el caso de las plantillas antiguas de Blogger el procedimiento es un poco diferente; primero habremos de quitar cualquier gadget de ah?, y luego SIN expandir artilugios busca este c?digo:

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

Elim?nalo y en su lugar coloca este otro:

<div id='footer-wrapper'>

<div id='footer0' style='text-align: center; padding: 5px;'>
<b:section id='footer-superior' preferred='yes'/>
</div>

<div id='footer1' style='width: 32%; float: left; margin:0; padding: 5px;'>
<b:section class='footer' id='foot1' preferred='yes' style='float:left;'/>
</div>

<div id='footer2' style='width: 31%; float: left; margin:0; padding: 5px;'>
<b:section class='footer' id='foot2' preferred='yes' style='float:left;'/>
</div>

<div id='footer3' style='width: 32%; float: right; margin:0; padding: 5px;'>
<b:section class='footer' id='foot3' preferred='yes' style='float:right;'/>
</div>

<div style='clear:both;'/>

<div id='footer4' style='text-align: center; padding: 5px;'>
<b:section id='footer-inferior' preferred='yes'/>
</div>

<div style='clear:both;'/>
</div>

Dependiendo de cada plantilla quiz? sea necesario ajustar los porcentajes a valores m?s peque?os por si alguna de esas ?rea se moviera hacia abajo, ya depender? de cada caso y que cada quien experimente con las medidas que m?s se ajusten a su plantilla.

Si quisieras agregarle un poco de estilos a esa ?rea s?lo agrega antes de ]]></b:skin> lo siquiente:

#footer-wrapper h2{
background:#0B243B; /* Color de fondo de los t?tulos */
color:#fff; /* Color del t?tulo */
margin: 0.0em 0 .5em;
padding: 4px 3px;
text-align: center;
font-size: 16px; /* Tama?o de la fuente del t?tulo */
}
.footer{
background:#ccc; /* Color de fondo de los gadgets */
}

Y con eso tendr?s el footer del blog dividido para que puedas aprovechar su espacio y agregar m?s gadgets de forma ordenada en el blog.

Dividir el crosscol del blog

El crosscol es esa ?rea debajo de la cabecera en la que la mayor?a de las veces a?adimos un men? horizontal, aunque muchas otras veces queremos que nos rinda m?s ese espacio para a?adir m?s gadgets y la mejor forma de hacerlo es dividir el crosscol del blog para que pueden entrar m?s gadgets en una fila, es decir, que si originalmente se ve as?:

Con las respectivas divisiones pueda verse as?:

Empecemos, lo primero es entrar en Dise?o | Elementos de la p?gina y cerciorarse que no haya ning?n gadget en esa ?rea, si tienes alguno lo mejor es moverlo a la sidebar u otro lugar moment?neamente, ya despu�s podr?s ponerlo de nuevo ah?, s?lo tienes que arrastrarlo y soltarlo en el lugar donde lo quieras mover.

Ya que est? libre esa ?rea entonces vamos a Dise?o | Edici?n de HTML y SIN expandir los artilugios busca este c?digo:

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol'/>
</div>

O si usas una plantilla del Dise?ador de Plantillas de Blogger entonces busca este c?digo:

<div class='region-inner tabs-inner'>
<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes' />
<b:section class='tabs' id='crosscol-overflow' showaddelement='no'/>
</div>

Cualquiera de esos c?digos que tengas elim?nalo y en su lugar pon este:

<div class='region-inner tabs-inner' id='crosscol-wrapper' style='text-align:center'>

<div id='crosscol0' style='text-align: center; padding: 5px;'>
<b:section class='tabs' id='crosscol-superior' preferred='yes'/>
</div>

<div id='crosscol1' style='width: 33%; float: left; margin:0; padding: 5px;'>
<b:section class='tabs' id='cross1' preferred='yes' style='float:left;'/>
</div>

<div id='crosscol2' style='width: 33%; float: left; margin:0; padding: 5px;'>
<b:section class='tabs' id='cross2' preferred='yes' style='float:left;'/>
</div>

<div id='crosscol3' style='width: 33%; float: right; margin:0; padding: 5px;'>
<b:section class='tabs' id='cross3' preferred='yes' style='float:right;'/>
</div>

<div style='clear:both;'/>
</div>

Guarda los cambios y listo, puedes ingresar a Elementos de la P?gina y ya podr?s ver tu crosscol dividido en tres partes.
Si quisieras que s?lo estuviera dividido en dos y no en tres partes entonces elimina el c?digo en color gris, y cambia los 33% que est?n a los lados por 49%
F?cil y r?pido ?no?

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;}
body#layout #Intro {display:none !important;}
</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 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>

<div class='BlogOculto' id='BlogContenedor'>

Y luego busca la etiqueta </body> y arriba de ella agrega esto:

</div>

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

Si tu blog tiene m?sica que se reproduce al entrar al blog te recomiendo que le quites el autoplay, de lo contrario tambi�n se escuchar? en el intro del blog. De igual forma, si tienes un video o gadget en flash en las entradas o dentro de la plantilla tendr?s que seguir los pasos de esta entrada para que el video o gadget no se sobreponga.

Y ahora s?, parece que es todo, que lo disfruten :)

Ver las publicaciones de todos tus amigos y p?ginas en Facebook

En algunas ocasiones me han comentado quienes son fans de la p?gina de Ciudad Blogger en Facebook que nunca ven las actualizaciones de la p?gina en su timeline, ni tampoco las publicaciones de otras p?ginas de las que son fans.

Seguro t? tambi�n habr?s notado que muchas de las publicaciones de estas p?ginas que te gustan nunca aparecen en tu timeline de noticias y parecer?a que es porque nunca publican nada pero cuando entras directo a su p?gina te das cuenta que no es as?.

Esto sucede porque en las ?ltimos cambios que realiz? Facebook (uno de los tantos que siempre hace) hizo que por defecto s?lo aparezcan las publicaciones de las personas y p?ginas con las que m?s interact?as, as? que si te hiciste fan de alguna p?gina y nunca diste click en un Me gusta, o nunca comentaste alguna publicaci?n de esa p?gina entonces lo m?s seguro es que nunca volver? a aparecer en las actualizaciones de tus noticias.

As? que para solucionar esto tienes dos opciones, una es que entres a la p?gina de la que eres fan y hagas click en Me gusta en algunas de sus publicaciones, o bien que comentes en algunas de sus publicaciones, si lo haces durante un par de d?as o una semana entonces se incluir?n de nuevo sus publicaciones en tu timeline de Noticias.

Para que las publicaciones de esa p?gina sigan apareciendo s?lo necesitas mantener esa interacci?n con comentarios o clicks de Me gusta.

La otra opci?n es cambiar la configuraci?n de Facebook para que puedas ver las publicaciones de todos tus amigos y p?ginas de la que eres fan.

Para hacer eso entra a tu cuenta de Facebook y en la parte de arriba dentro de la secci?n Noticias haz click en M?s recientes, ah? se desplegar? un men? y haz click en Editar opciones

Se abrir? una peque?a ventana, ah? ver?s que dice Mostrar publicaciones de, haz click en el men? desplegable de al lado y selecciona Todos tus amigos y p?ginas.

De inmediato podr?s ver en tu timeline de Noticias que ya aparecen todas las publicaciones de todos tus amigos y p?ginas que antes no ve?as.

Si quisieras ocultar la publicaci?n de alguna de estas p?ginas o de amigos s?lo busca alguna publicaci?n de ese autor y pasa el cursor por el lado derecho hasta que aparezca un ?cono de una cruz y haz click ah?.

En el men? desplegable que aparecer? selecciona Ocultar todas las publicaciones de XXXXX, y con eso dejar?s de ver las publicaciones de esa p?gina o persona en tus Noticias.

?Por qu� es bueno que tus lectores tambi�n conozcan esto? Pues porque quiz? muchos de los fans de tu p?gina no saben que est?s actualizando contenido en tu blog y eso representa una p�rdida significativa de visitas.

Crear un feed en Feedburner y vincularlo con Blogger

En la entrada anterior ve?amos qu� es un feed y para qu� sirve, ahora continuaremos con este tema para novatos (y no tanto) para explicar c?mo crear el feed en Feedburner para que sea Feedburner quien se encargue de administrar el feed de nuestro blog.

Como mencionaba en aquella entrada, Feedburner es un gestor de feeds que no har? un feed diferente al de tu blog sino que se encargar? de administrar el que ya tienes asign?ndole una nueva URL y entreg?ndote datos ?tiles como estad?sticas de tus suscriptores, la opci?n de ofrecer suscripciones por correo entre muchas otras cosas.

Empecemos, primero entra a la p?gina de Feedburner, si es la primera vez que entras quiz? te pida iniciar sesi?n pero descuida, que al ser un producto de Google puedes ingresar con los mismos datos con los que ingresas a tu cuenta de Blogger.

Una vez que ingreses ver?s la opci?n para agregar la URL de tu blog, recuerda que primero debes tener activado el feed en tu blog (ver c?mo hacerlo)

La URL de tu blog es as?:

http://nombre-de-mi-blog.blogspot.com/feeds/posts/default

Ya que la hayas ingresado es posible que te diga que se han encontrado dos feeds en tu blog, uno Atom y otro RSS, puedes seleccionar cualquiera de las dos opciones, ambos son v?lidos.

Ya sea que te haya aparecido esa opci?n o no, el siguiente paso ser? elegir un nombre y URL para tu feed, puedes seleccionar el nombre que quieras, lo m?s habitual es que sea el nombre de tu blog, la URL del feed igual es al gusto tuyo, puedes escoger la que quieras siempre que est� disponible.

Una vez elegido el nombre y URL de tu feed te saldr? un mensaje de confirmaci?n d?ndote la nueva URL de tu feed de Feedburner, copia esa URL pues la necesitar?s m?s adelante.

A continuaci?n puedes elegir algunas opciones que te mostrar?n, puedes seleccionar todas si quieres o no hacerlo, o bien, hacerlo despu�s.

Con esto concluimos la parte de Feedburner, ahora vamos a vincularlo con Blogger para que la URL original del feed de tu blog redireccione a la nueva URL del feed que acabas de crear.

Para ello entra en Blogger y dir?gete a Configuraci?n | Feed del sitio, y en el espacio donde dice Publicar URL redireccionada pega la URL de tu feed que acabas de crear y que copiaste previamente.

Guarda los cambios y listo, si ingresas a la URL original del feed de tu blog ver?s que te redirecciona a la URL del feed de Feedburner y el aspecto de �ste ser? distinto.

De momento no podr?s ver las estad?sticas de tus suscriptores pues reci�n lo acabas de crear y necesita unas horas para recopilar esa informaci?n, pero pasadas unas horas podr?s entrar a la p?gina de Feedburner y ver ah? el n?mero de suscriptores que tienes entre otras cosas.

Si de una vez quieres activar la suscripci?n por correo electr?nico puedes hacerlo, para ello entra en Feedburner y ve a Publicize | Suscripciones por Email y da click en Activar.

Una vez activado ver?s ah? mismo dos c?digos, puedes copiar el primero y pegarlo en un elemento HTML/Javascript de tu blog para que aparezca la caja de suscripci?n que despu�s puedes personalizar con las indicaciones de esta entrada, esta otra, o esta otra.

Si quieres evitarte el proceso de activar la suscripci?n y pegar el c?digo en tu blog tambi�n puedes hacerlo directamente desde Blogger con el gadget de Suscripci?n por Email.

Recuerda que, al crear tu feed de Feedburner no significa que el feed original de tu blog dejar? de funcionar, ambas URLs de los feeds funcionar?n si problemas, pues en s? sigue siendo el mismo feed s?lo que con una URL diferente y con otras opciones para administrar.

Si te interesan m?s entradas sobre el tema visita la secci?n Feeds para conocer m?s posts acerca de los feeds.