como colocar una imagen de fondo en blogger

Bueno, soy yo de nuevo, en este caso les enseñare como colocar una imagen de fondo en nuestro blog de la manera mas simple y directa....

Muchos usuarios de blogger dejan pasar por alto colocar una imagen de fondo en el blog, sin darse cuenta que es un recurso que nos ayuda bastante a la hora de querer tener el mejor diseño para nuestros visitantes, en esta entrada les mostrare como hacerlo de una manera simple, como ya les mencione; 

ahora vamos comenzando...

PRIMER PASO:

 BUSCA UNA FOTO QUE TE GUSTE Y QUE MIDA MAS DE 1024 X 728, QUE TENGA BUENA RESOLUCIÓN Y QUE TENGA MAS DE 500 KB, ESTO ES SI LO USAS COMO FONDO DE PANTALLA DE TU PC PUEDE SERVIR PARA TU BLOGGER.

SEGUNDO:

 LA TIENES QUE SUBIR A UN HOSTING, EN ESTE CASO UTILIZAREMOS  IMAGESHACK  

,

-AHORA SUBES TU IMAGEN  CON LA OPCIÓN DE MONITOR DE 19 PULGADAS QUE ES LA MAS COMÚN.

-CUANDO TERMINE COPIAS EL LINK QUE ESTA DONDE DICE ENLACE DIRECTO 

 (En ocasiones es necesario registrarse)

-AHORA VAS AL BLOG Y ENTRAS EN LA PESTAÑA DISEÑO LUEGO AÑADE UN GADGET HTML/JAVASCRIP:

LUEGO INSERTAS ESTE CÓDIGO HTML:

<style type="text/css">body {background-image: url("TU LINK DE IMAGESHACK VA AQUI"); background-position: center; background-repeat: no-repeat; background-attachment: fixed; }</style><div id="tag" style="position:absolute; left:0px; top:30px; "></div>

PONES TU DIRECCIÓN DE IMAGESHACK ENTRE LAS COMILLAS, LO GUARDAS Y LISTO YA TENEMOS NUESTRA IMAGEN DE FONDO EN NUESTRO BLOG.

Nota:  En este tutorial utilize el hosting  IMAGESHACK por mi preferencia, puedes usar el hosting que desees a tu gusto.

como poner una reseña acerca del autor

Hace unos meses publique una entrada donde enseñaba como agregar el truco de acerca del autor pero en blogs de un solo autor, pues recibi varias solicitudes de como agregar el truco en blogs con varios autores.

Para agregar este truco primero entra en la Edicion HTML de tu blog y con los artilugios expandidos busca y elimina lo siguiente:

<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'>
<data:post.author/>
</span>
</b:if>
</span>

Ahora debajo de <data:post.body/> pega lo siguiente:

    <b:if cond='data:post.author == &quot;Autor 1&quot;'>
    <div class='acercadelautor'>
    <img border='0' src='URL del avatar 1' style='float:left; margin:0 10px 10px 0; width:80px; height:80px;'/><span style='font-style:italic; font-size:10px;'>ESCRITO POR</span> <strong><data:post.author/></strong>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vulputate pellentesque nisl, id vulputate leo mollis quis. Maecenas mattis, justo et sagittis iaculis, ligula ipsum ullamcorper lectus, at vehicula odio sapien eu ante.</p>
    </div>
    </b:if>


    <b:if cond='data:post.author == &quot;Autor 2&quot;'>
    <div class='acercadelautor'>
    <img border='0' src='URL del avatar 2' style='float:left; margin:0 10px 10px 0; width:80px; height:80px;'/><span style='font-style:italic; font-size:10px;'>ESCRITO POR</span> <strong><data:post.author/></strong><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vulputate pellentesque nisl, id vulputate leo mollis quis. Maecenas mattis, justo et sagittis iaculis, ligula ipsum ullamcorper lectus, at vehicula odio sapien eu ante.</p>

    </div>
    </b:if>

En donde dice Autor 1 y Autor 2 debes poner el nick de los autores tal como aparece en el blog respetando las mayúsculas, minúsculas y espacios, eso es muy importante.


Si quieres agregar otro autor solo debes agregar otro bloque como el siguiente:

 <b:if cond='data:post.author == &quot;Autor 3&quot;'>
<div class='acercadelautor'>
<img alt='' border='0' src='URL del avatar 3' style='float:left; margin:0 10px 10px 0; width:80px; height:80px;'/><span style='font-style:italic; font-size:10px;'>ESCRITO POR</span> <strong><data:post.author/></strong><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vulputate pellentesque nisl, id vulputate leo mollis quis. Maecenas mattis, justo et sagittis iaculis, ligula ipsum ullamcorper lectus, at vehicula odio sapien eu ante.</p>
</div>
</b:if>

Ahora para darle un poco de estilo haremos uso del CSS que deberas pegar antes de  ]]></b:skin>

.acercadelautor {
background:#EFFBFB; /* Color de fondo */
border:1px solid #ccc; /* Borde */
letter-spacing:normal;
color:#424242; /* Color del texto */
text-transform:none;
font-size:12px; /* Tamaño del texto */
padding:5px;
margin:10px 0 10px 0;
}
.acercadelautor strong {
color:#1C1C1C; /* Color del nombre del autor */
font-weight:bold;
font-size:13px; /* Tamaño de letra del nombre del autor */
padding-left:5px;
}

Como vez es muy facil solo es cuestion de pegar unos cuantos codigos y arreglarlo a vuestro gusto.

Para finalizar aclaro que los resultados solo se veran en las entradas.

Gadget de Top Comentaristas para Blogger

Los comentaristas son una parte fundamental de cualquier blog, ya que ellos son los que le dan vida al blog, abriendo y causando debates lo que genera mas actividad en las entradas.

Por eso es muy importante saber cuales son los usuarios mas activos del blog, los usuarios que mas comentan, y es por esto que hoy les presento un espectacular método para la lista de top comentaristas del blog.

El gadget se vera de la siguiente manera:

Esta nueva forma del gadget de Top Comentaristas, viene con el avatar del usuario y esta hecho en JavaScript, este código pertenece a MS-Potilas, yo solo he modificado algunos atributos dando como resultado un código mas optimizado.

Para agregar este gadget tienes que entrar a Diseño, Añadir gadget, HTML/JavaScript y pegar el siguiente código:

<style type="text/css">
.top-commenter-line {margin: 3px 0;}
.top-commenter-line .profile-name-link {padding-left:0;}
.top-commenter-avatar {vertical-align:middle;}
</style>
<script type="text/javascript">
//
// Top Commentators gadget with avatars, by MS-potilas 2012.
// Gets a list of top commentators from all comments, or specified number of days in the past.
// See http://yabtb.blogspot.com/2012/05/top-commenters-gadget-with-avatars.html
//
// CONFIG:
var maxTopCommenters = 8;   // how big a list of top commentators
var minComments = 1;        // how many comments must top commentator have at least
var numDays = 0;            // from how many days (ex. 30), or 0 from "all the time"
var excludeMe = true;       // true: exclude my own comments
var excludeUsers = ["Anonymous", "someotherusertoexclude"];     // exclude these usernames
var maxUserNameLength = 42; // 0: don't cut, >4: cut usernames
//
var txtTopLine = '<b>[#].</b> [image] [user] ([count])';
var txtNoTopCommenters = 'No top commentators at this time.';
var txtAnonymous = '';      // empty, or Anonymous user name localized if you want to localize
//
var sizeAvatar = 28;
var cropAvatar = true;
//
var urlNoAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJARkTwpg2RxRyZpuJA2KxSvnyhxTwTg90WpTkjc-Ci4IRSBj-qKsOjOvquVrKqUF2YdQPrNxLvlLWrGkXvsRiPvNVxI94f7XEggMfZJ-sCjcP9jPnZuyJKi2H0LiY5Am9YgnbxwOCc94/"+sizeAvatar+"/avatar_blue_m_96.png"; // http://www.blogger.com/img/avatar_blue_m_96.png resizeable
var urlAnoAvatar = 'http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=' + sizeAvatar;
var urlMyProfile = ''; // set if you have no profile gadget on page
var urlMyAvatar = '';  // can be empty (then it is fetched) or url to image
// config end
// for old IEs & IE modes:
if(!Array.indexOf) {
 Array.prototype.indexOf=function(obj) {
  for(var i=0;i<this.length;i++) if(this[i]==obj) return i;
  return -1;
}}
function replaceTopCmtVars(text, item, position)
{
  if(!item || !item.author) return text;
  var author = item.author;

  var authorUri = "";
  if(author.uri && author.uri.$t != "")
    authorUri = author.uri.$t;

  var avaimg = urlAnoAvatar;
  var bloggerprofile = "http://www.blogger.com/profile/";
  if(author.gd$image && author.gd$image.src && authorUri.substr(0,bloggerprofile.length) == bloggerprofile)
    avaimg = author.gd$image.src;
  else {
    var parseurl = document.createElement('a');
    if(authorUri != "") {
      parseurl.href = authorUri;
      avaimg = 'http://www.google.com/s2/favicons?domain=' + parseurl.hostname;
    }
  }
  if(urlMyProfile != "" && authorUri == urlMyProfile && urlMyAvatar != "")
    avaimg = urlMyAvatar;
  if(avaimg == "http://img2.blogblog.com/img/b16-rounded.gif" && urlNoAvatar != "")
    avaimg = urlNoAvatar;
  var newsize="s"+sizeAvatar;
  avaimg = avaimg.replace(/\/s\d\d+-c\//, "/"+newsize+"-c/");
  if(cropAvatar) newsize+="-c";
  avaimg = avaimg.replace(/\/s\d\d+(-c){0,1}\//, "/"+newsize+"/");

  var authorName = author.name.$t;
  if(authorName == 'Anonymous' && txtAnonymous != '' && avaimg == urlAnoAvatar)
    authorName = txtAnonymous;
  var imgcode = '<img class="top-commenter-avatar" height="'+sizeAvatar+'" width="'+sizeAvatar+'" title="'+authorName+'" src="'+avaimg+'" />';
  if(authorUri!="") imgcode = '<a href="'+authorUri+'">'+imgcode+'</a>';

  if(maxUserNameLength > 3 && authorName.length > maxUserNameLength)
    authorName = authorName.substr(0, maxUserNameLength-3) + "...";
  var authorcode = authorName;
  if(authorUri!="") authorcode = '<a class="profile-name-link" href="'+authorUri+'">'+authorcode+'</a>';

  text = text.replace('[user]', authorcode);
  text = text.replace('[image]', imgcode);
  text = text.replace('[#]', position);
  text = text.replace('[count]', item.count);
  return text;
}

var topcommenters = {};
var ndxbase = 1;
function showTopCommenters(json) {
  var one_day=1000*60*60*24;
  var today = new Date();

  if(urlMyProfile == "") {
    var elements = document.getElementsByTagName("*");
    var expr = /(^| )profile-link( |$)/;
    for(var i=0 ; i<elements.length ; i++)
      if(expr.test(elements[i].className)) {
        urlMyProfile = elements[i].href;
        break;
      }
  }

  if(json && json.feed && json.feed.entry && json.feed.entry.length) for(var i = 0 ; i < json.feed.entry.length ; i++ ) {
    var entry = json.feed.entry[i];
    if(numDays > 0) {
      var datePart = entry.published.$t.match(/\d+/g); // assume ISO 8601
      var cmtDate = new Date(datePart[0],datePart[1]-1,datePart[2],datePart[3],datePart[4],datePart[5]);

      //Calculate difference btw the two dates, and convert to days
      var days = Math.ceil((today.getTime()-cmtDate.getTime())/(one_day));
      if(days > numDays) break;
    }
    var authorUri = "";
    if(entry.author[0].uri && entry.author[0].uri.$t != "")
      authorUri = entry.author[0].uri.$t;

    if(excludeMe && authorUri != "" && authorUri == urlMyProfile)
      continue;
    var authorName = entry.author[0].name.$t;
    if(excludeUsers.indexOf(authorName) != -1)
      continue;

    var hash=entry.author[0].name.$t + "-" + authorUri;
    if(topcommenters[hash])
      topcommenters[hash].count++;
    else {
      var commenter = new Object();
      commenter.author = entry.author[0];
      commenter.count = 1;
      topcommenters[hash] = commenter;
    }
  }
  if(json && json.feed && json.feed.entry && json.feed.entry.length && json.feed.entry.length == 200) {
    ndxbase += 200;
    document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&start-index='+ndxbase+'&alt=json-in-script&callback=showTopCommenters"></'+'script>');
    return;
  }

  // convert object to array of tuples
  var tuplear = [];
  for(var key in topcommenters) tuplear.push([key, topcommenters[key]]);

  tuplear.sort(function(a, b) {
    if(b[1].count-a[1].count)
        return b[1].count-a[1].count;
    return (a[1].author.name.$t.toLowerCase() < b[1].author.name.$t.toLowerCase()) ? -1 : 1;
  });

  // list top topcommenters:
  var realcount = 0;
  for(var i = 0; i < maxTopCommenters && i < tuplear.length ; i++) {
    var item = tuplear[i][1];
    if(item.count < minComments)
        break;
    document.write('<di'+'v class="top-commenter-line">');
    document.write(replaceTopCmtVars(txtTopLine, item, realcount+1));
    document.write('</d'+'iv>');
    realcount++;
  }
  if(!realcount)
    document.write(txtNoTopCommenters);
}
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&alt=json-in-script&callback=showTopCommenters"></'+'script>');
</script>

Ahora solo queda guardar los cambios y listo.

Para modificar el numero de usuarios que se muestran en el gadget, busca en el código var maxTopCommenters = 8;  y cambia el 8 por el numero que quieras.

Para modificar el tamaño del avatar de los comentaristas busca en el código var sizeAvatar = 28; y cambia el numero 28 por el numero de pixeles que desees.

Entradas Relacionadas con Miniaturas y efecto Hover

Ya he publicado un par de tutoriales de entradas relacionadas con imagen en miniatura,pero el truco que traigo como lo dice el titulo trae incorporado el efecto Hover,si no sabes que es el efecto hover entonces te lo explico:


El efecto Hover consiste en la alteración del aspecto de un elemento de la interfaz gráfica cuando se sitúa el puntero sobre el mismo, pero no se ha seleccionado aún.

El efecto queda de la siguiente manera:

El script pertenece a Spice Your Blog y le hice algunos cambios para adaptarlo a nuestran necesidades.

Para agregar este truco pega antes de ]]></b:skin> lo siguiente:

ul#related-posts{
font-family:"Droid Sans",Helvetica,Arial,sans-serif;
font-size:10px;
list-style: none;
margin: 20px 0;
padding: 0;
text-transform: none;
}
ul#related-posts li{
float: left;
height: auto;
margin:0 5px;
padding: 2px 1px 2px;
list-style-type:none;
}
*html ul.rp#related-posts li{
margin:0 13px;
}
ul#related-posts li a {
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
border: 2px solid #FFFFFF;
display: block;
height: 72px;
position: relative;
width: 72px;
}
ul#related-posts li a {
color: #474C51;
text-decoration: none;
text-shadow: 0 1px 0 #FFFFFF;
}
ul#related-posts li .overlay {
height: 66px;
line-height: 16px;
padding:6px 0 0 6px;
position: absolute;
width: 66px;
z-index: 10;
}
ul#related-posts li .overlay {
}
ul#related-posts li a:hover .overlay {
background: #fff;
display: block !important;
opacity:0.9;
}
ul#related-posts li img {
bottom: 0;
padding:0px !important;
}
ul#related-posts li a:hover {
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

Ahora debajo de  <div class='post-footer'> (buscas esta linea con los artilugios expandidos) agrega lo siguiente:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<h3>Entradas Relacionadas</h3>
<script type='text/javascript'>
var defaultnoimage=&quot;http://www.webaholic.co.in/other/no-image.jpg&quot;;
var maxresults=6;
</script>
<script src='http://suyb.googlecode.com/files/rph.js' type='text/javascript'/>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/>
</b:loop>

<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</b:if>

Por ultimo guardas los cambios.

Como vez es muy facil de agregar,espero que les sea de utilidad y si tienen alguna duda no olviden comentar.

Huevo Bookmarking con efecto deslizante al abrirse

Todos los bloggeros buscan formas unicas de poner marcadores sociales ya que es atraves de ellos que los lectores comparten nuestros articulos y es por ello que  cumplen un papel vital en el blog.

Dentro de este contexto hoy les presento el "Huevo Bookmarking", este gadget consta de un pelicular huevo que al pasar el cursor sobre el se abre con un espectacular efecto deslizante y mostrando asi los marcadores sociales que lleva dentro.

Para agregar este truco pega antes de </head> lo siguiente:

<script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/><script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/><script type='text/javascript'>stLight.options({publisher: &quot;bea50586-2b9f-448d-947a-01385f28e305&quot;, onhover:false}); </script><link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/>

Ahora encima de </body> pega lo siguiente:

<div style='position: fixed; bottom: 2%; left: 2%;'><div class='shareEgg' id='shareThisShareEgg'/></div><script type='text/javascript'>stlib.shareEgg.createEgg(&#39;shareThisShareEgg&#39;, [&#39;facebook&#39;,&#39;twitter&#39;,&#39;googleplus&#39;,&#39;linkedin&#39;,&#39;blogger&#39;,&#39;stumbleupon&#39;,&#39;sharethis&#39;], {title:&#39; <data:blog.pageTitle/>&#39;,url:&#39;<data:blog.url/>&#39;,theme:&#39;shareegg&#39;});</script>

Por ultimo solo guarda los cambios.

Iconos Sociales que giran 360 grados

En esta oportunidad les quiero compartir un pack de iconos sociales en forma de huevos que giran 360 grados al pasar el cursos sobre ellos.

En el pack vienen incluidos los iconos de Facebook, Google +, Twitter, RSS FEED y Yahoo!.

Pueden ver el truco funcionando aqui :

Para agregar este truco en tu blog pega en un elemento HTML/JavaScript lo siguiente:

<center><div id="socialicons"><a href="URL FACEBOOK" target="_blank"><img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9sMDKW2Sz1TX7n-_py-jvWKqtVf8TC-ZsT7iyG79amFjMSPKc5qJGH7AmLMbu-bjfvecMp3GCi1k5DXrunNT2SzYf2xwMzDo0smOwtAx_v0Y01d_tCHShkagCMJcjo8JhmxrI2BS-T8k/s64/facebook.png" /></a><a href="URL GOOGLE PLUS" target="_blank"><img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKTcZ3d1BsLsTPPwtFauaFvUqsPvz3Ai4VH_REGgXHDHwFffcOJR3qEEOKrxH8lhRTCZmZCRZC1w2XOqP_piXCF59ikpKTr4ZuSlnPgQrGzhhQn9nr_Ps5vzunMAlMb5LeVdAkjbF4G5I/s64/google%252B.png"  /></a><a href="URL TWITTER" target="_blank"><img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqi4o_1u38-3rio9j5QjZPqQj06LVmMQvEXsZngUtnRq9RQ7bnGsWLrS0_nQ35komEXKivKV4FH3gccUZ6VIrTYcAlyEs0kAByYL-JiPG14SHaXkzH-p5ndsgc-bcY6Cmu33XgzPwcggY/s64/twitter.png"  /></a><a href="URL FEED" target="_blank"><img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2SMj37zNnOvS9BIA2HIv7hPkYy4aUkYtClwR3pHHOuOUG7P0G6lru0pzbORWlU_GjvXKMGg4dY8DODpPUMDI8na_aU4K5nu25mOFllHNxaHrTLTBpjz7dVPgTllxeSPdeLD0k0qoHW3Q/s64/rss.png" /></a><a href="URL YAHOO" target="_blank"><img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikdeRIum3Tt8esAPLyUBMIx9KrPnCUEH9YbYpjnoOdXBlgohLLVdMBHbXxhHHNBGev93rd721F3ALZ-gw0vodtMSw1XqlC0DKJLpFzbe2zY-IwaUQFlvm10R_ldvIVtcB07soxQT0TCRQ/s64/yahoo.png"  />

</div></center>
<style>
#socialicons img{
 -moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;}
#socialicons img:hover{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);}
</style>

Ahora solo cambia lo que esta en color azul por lo que se indica en cada caso.

Espero que les sea de agrado este pequeño truco y sigan visitando mi blog.

FanBox de Facebook flotante que baja con la página

Ya he publicado otras entradas donde muestro varias opciones para agregar el fanbox de facebook pero el de hoy tiene varias opciones que pueden resultar interesante y es que es flotante y que baja con la pagina con efecto deslizante ademas de tener un boton de cerrar.

Puedes ver el truco en accion en el siguiente blog de pruebas.

Para agregar este truco ve a Edición de HTML y pega antes de </head> lo siguiente:

 <style type='text/css'>
#anuncio {
position:absolute;
padding: 2px;
padding-top: 15px;
width: 280px; /* ancho del anuncio */
visibility: hidden;
z-index: 200;
top: 30px;
left: 30px;
}
#rss-mail {
/* color e imagen de fondo */
background: #F1F8E0 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMViMHnT-Hiq27jOOzOCm8hz194vmJRhm4Rohgfjj-XfWapNCdRK_oxQVWvjy6M289oYS9XInvfQeMLNEVQBGzzdGsOBIP0QaCUbFM8UTRKo05R0iP7pAcWoUozlje5rpQlEUvapO9F6mK/s0/z-bg.png);
border:2px solid #FF8000; /* borde */
height:275px; /* alto de la caja */
}
#rss-mail span {
color:#FFFFFF; /* color del texto */
font-size:12px;
font-weight:bold;
line-height:30px;
}
#rss-submit {
background:#FF8000; /* color del botón */
border:0px;
}
.rss-box {
height:13px;
margin-top:10px;
color:#6E6E6E;
font-size:12px;
width:135px;
}
</style>

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

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

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

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

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

Ahora antes de  </body> pega lo siguiente:

 <div id='anuncio'>
<div id='rss-mail'>
<a href='Javascript:void' onClick='closebar(); return false'><img align='right' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJlxGJeDTcvO9TbCfXUENoK-i4L1ImlW8ZnaxIWobRmJ6p3SQ5LmzxZH5xkq4kTd76KznwkQPMbX17hT36Ly3THpowN7MBBak_pzkF6sm-iBa341VZD2r6pzi8A705mcugXb9t1xLkrgg/s320/cerrar.png'/></a>

<script src='http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/es_LA' type='text/javascript'/><script type='text/javascript'>FB.init(&quot;1b8f0f706c312c05f42224b5b3399f80&quot;);</script><fb:fan connections='8' profile_id='XXXXXXXXX' stream='' width='275'/>
</div></div>

Donde estas las XXXXXXXXX pones la ID de tu pagina en Facebook.


¿Como averiguo la id de mi página en Facebook?

[1] Accedemos a nuestra página de Facebook.



[2] Nos fijamos entonces en url que se muestra en el navegador, y que será algo como esto:

http://www.facebook.com/home.php?#!/pages/edit/?id=174666062584624

Esos números que se muestran al final de la url, son la id de nuestra página, y son los números que hemos de colocar en el código del gadget "Like Box" sustituyendo a las XXXXXXXXXXXX.

Por ultimo guardas los cambios.