Likebox de Facebook flotante... y deslizante

Este likebox dejará de funcionar.  Facebook lo reemplazará por este nuevo Plugin

Esta caja la vi en El balcón de Jaime, pero era con una lista de enlaces, y  aunque le he puesto el likebox de Facebook y modificado apenas una milésima para mis propósitos, este truco se adapta muy fácilmente a cualquier artilugio que queramos ponerle dentro, y su efecto deslizante es ideal para quienes deseen ahorrar espacio en el blog.

Puedes ver el likebox de Facebook funcionando en esta misma entrada en la parte inferior izquierda. 

Para ponerlo solo entra en Diseño, Añadir gadget, Html Javascript y dentro pega el siguiente código:

<script src="http://sites.google.com/site/scriptsbalcon/b/blprototype.js" type="text/javascript"></script>

<script src="http://sites.google.com/site/scriptsbalcon/b/blsidebarefecto.js" type="text/javascript"></script>

<script src="http://sites.google.com/site/scriptsbalcon/b/blsidebarflotante.js" type="text/javascript"></script>

<style>

#blsidebar_flotante{text-align:left;}

#blsidebar_flotante h2 {color:#000000;font-family:arial;font-size:14px;font-weight:normal;margin:10px;}

#blsidebar_flotante ul{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}

#blsidebar_flotante li a{width:100%;}

#blsidebar_flotante li a:link,

#blsidebar_flotante li a:visited{color:#000000;display:block;list-style-type:none;}

#blsidebar_flotante li {color:#000000;display:block;list-style-type:none;margin:0 20px 4px;padding:2px;width:120px;}

#blsidebar_flotante li a:hover{padding-left: 2px;text-decoration:none;}

#blsidebar_flotante {background:none repeat scroll 0 0 #ffffff;border:7px solid #273f83;height:auto;left:0;position:fixed;top:300px;width:auto;

z-index:1002;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px; }

#blsidebarflt_main img {text-align: center; padding:4px; border: none;}

#blsidebarflt_lat img{border:none;}

#blsidebarflt_main{float:left;height:260px;overflow:auto;padding:4px;width:200px;}

#blsidebarflt_lat {float:left;height:137px;width:35px;}

#credit {float:right;}

body{font-size:75%;}

a{outline: none;}

a:active{outline: none;}

#blsidebarflt_links{width:200px;}</style>

<div id="blsidebar_flotante">

<div id="blsidebarflt_main" style="display:none;">

<div id="blsidebarflt_links">

<div id="fb-root"></div>

<script>(function(d, s, id) {

  var js, fjs = d.getElementsByTagName(s)[0];

  if (d.getElementById(id)) return;

  js = d.createElement(s); js.id = id;

  js.src = "//connect.facebook.net/es_LA/all.js#xfbml=1";

  fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-like-box" data-href="https://www.facebook.com/pages/tu-cuenta" data-width="200" data-height="260" data-show-faces="true" data-stream="false" data-header="false"></div></div></div>

    

<a id="blsidebarflt_lat"><img alt="Abrir sidebar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHYO4_82f7g_h5LWAiqPtmNwyJeZZnrxB9U91W4h4Fhlnfe1JGL7r5-6BvnqiPYjGmgMYj899TpVaGmj_s8bK0wIjzjUiaK1aFo58bofYSIXfjl5HkS02xr2EwoxhGQeF13V8JY20sSXc/s140/boton-facebook.jpg" /></a></div>

Si la caja contenedora te queda muy abajo, combia top:300px; por un número más bajo hasta que quede a la altura que quieres. Dode pone tu cuenta cambia por tu cuenta de Facebook  y listo. La caja se abrirá al dar clic en ella, y se cerrará con otro clic.

Cambiar los links de navegación por los títulos de las entradas

 En una entrada anterior ya vimos cómo reemplazar los links de “entradas recientes” “entradas anteriores” sustituyéndolos por el texto que uno quiera o incluso reemplazándolos por una imagen.

Ahora vamos a ver cómo sustituir estos links para que salga el título de las entradas de nuestro blog. O sea, reemplazaremos esto:

Entradas recientes                Página principal                               Entradas anteriores

Por algo más o menos así:

Metatags (Keywords)                                  Inicio                          Fanbox de twitter

En el blog                                                                                         en el blog

Para que este artilugio funcione dentro de nuestra plantilla primeramente tenemos que agregar Jquery, pues esto funciona con esa librería, de modo que entra en Diseño, Edición Html, y con los artilugios expandidos pega antes de </head> la librería Jquery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

Recuerda que si ya tienes Jquery agregado en el blog no es necesario que lo vuelvas a poner.

Revisa en vista previa, y si todo está ok pones guardar.

Ahora vamos a Diseño, Añadir Gadget, Html Javascript, y dentro de este gadget pega el siguiente código:

 <script type="text/javascript">
$(document).ready(function(){
var newerLink = $("a.blog-pager-newer-link").attr("href");
$("a.blog-pager-newer-link").load(newerLink+" .post-title:first", function() {
var newerLinkTitle = $("a.blog-pager-newer-link:first").text();
$("a.blog-pager-newer-link").text("<< " + newerLinkTitle);
});
var olderLink = $("a.blog-pager-older-link").attr("href");
$("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() {
var olderLinkTitle = $("a.blog-pager-older-link").text();
$("a.blog-pager-older-link").text(olderLinkTitle + " >>");//rgt
});
});
</script><style type="text/css">
#blog-pager{font-family: Arial,helvetica,sans-serif;font-size: 14px;}#blog-pager-newer-link {font-size:85%;width:200px;text-align:left;}#blog-pager-older-link {font-size:85%;width:200px;text-align:right;}</style>

Cambia lo que está resaltado en celeste que es la fuente del texto, si lo quieres de otra forma; y font-size: 14px; es el tamaño del texto. Con esto, el script ahora mostrará el título de la entrada anterior al igual que la más reciente. Si quieres que el texto “Página principal” cambie por “Inicio” o por una imagen, revisa esta entrada, o si quieres déjalo así, es tu desición.