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. 

Efecto de opacidad en las imágenes

Uno de los trucos que más me gusta es éste que da un efecto de opacidad (desvanecimiento) a las imágenes que tenemos en el blog. Además de ser sencillo de implementar, hace que nuestro blog luzca elegante.

 

Puedes ver el truco en funcionamiento en este blog de pruebas. 

 

Para darle ese efecto de opacidad a las imágenes de las entradas del blog, solo pega antes de </head> el siguiente código para las imagines seleccionadas:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'/>
<script type='text/javascript'>
$(document).ready(function() {
$('.blImaggjtef').fadeTo('slow', 1.0);
$('.blImaggjtef').hover(function() {
$(this).fadeTo('slow', 0.5);
}, function() {
$(this).fadeTo('slow', 1.0);
});
});
</script>

Esto para las imágenes que pongas dentro de tu sidebar en un gadget. Además, tendrás que agregar de forma manual la clase 'blImagjtef'  dentro del código o url de las imágenes, de modo que quede así:

<img class='blImagjtef' src='url-imagen'/>

Pero si quieres que todas las imágenes que pongas en las entradas tengan este efecto, sin tener que recurrir a este proceso manual, además de tedioso, en ese caso deberás poner este otro código:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'/>
<script type='text/javascript'>
$(document).ready(function() {
$('img').fadeTo('slow', 1.0);
$('img').hover(function() {
$(this).fadeTo('slow', 0.5);
}, function() {
$(this).fadeTo('slow', 1.0);
});
});
</script>

Con esto, todas las imágenes de tu blog quedarán con ese efecto de opacidad que le da cierto aire de profesionalismo, ¿no crees?