Botón "ir arriba" que aparece y desaparece

Al igual que en poner botón “ir arriba” e “ir abajo” este script nos sirve para subir hacia arriba de la página cuando estemos abajo, la única particularidad es que el botón, ícono o imagen que pongas solo aparecerá cuando bajemos el scroll, y desaparecerá una vez que hagas click en él y subas a la cabecera del blog.

Puedes verlo funcionando aquí.  

Para poner este truco entra en Plantilla, Editar html, y antes de </head> pegas la librería Jquery:

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

Ten en cuenta que si anteriormente ya has puesto en tu blog JQuery, no tendrás que ponerlo otra vez. Solo asegúrate que sea la última versión.

Ahora nuevamente buscamos en la plantilla ]]></b:skin> y justo antes ponemos los estilos que definirán el botón o la imagen que pondrás:

/* Botón Ir Arriba
----------------------------------------------- */
#IrArriba {
position: fixed;
bottom: 30px;
left: 30px;
}

#IrArriba span {
width: 50px;
height: 30px;
display: block;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5wArdvlEMAWiYzQS3rwehGfdsrBgJdd_G9sxUQESAhclJGU9SASVZFDh3-FC6rMMwWdD6d8NHhl6IHCdWmcB8e7rq24rEn6dAEDO-vDYm7HSmzAdCdFXYCcsmx7jZuVDtTmwyJStIFFM/w50-h30-no/Sin+t%25C3%25ADtulo.png) no-repeat center center;
}

Ahora solo falta poner el script que hará que este artilugio eche a andar. Para ello buscamos </body> y antes de ahí pegamos el script:

<div id='IrArriba'>
<a href='#Arriba'><span/></a>
</div>
<script type='text/javascript'>
//<![CDATA[
// Botón para Ir Arriba
jQuery.noConflict();
jQuery(document).ready(function() {
jQuery("#IrArriba").hide();
jQuery(function () {
jQuery(window).scroll(function () {
if (jQuery(this).scrollTop() > 200) {
jQuery('#IrArriba').fadeIn();
} else {
jQuery('#IrArriba').fadeOut();
}
});
jQuery('#IrArriba a').click(function () {
jQuery('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});

});
//]]>
</script>

Solo cambia https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5wArdvlEMAWiYzQS3rwehGfdsrBgJdd_G9sxUQESAhclJGU9SASVZFDh3-FC6rMMwWdD6d8NHhl6IHCdWmcB8e7rq24rEn6dAEDO-vDYm7HSmzAdCdFXYCcsmx7jZuVDtTmwyJStIFFM/w50-h30-no/Sin+t%25C3%25ADtulo.png por la Url de tu imagen. Procura que el tamaño de la imagen no exceda de 50x30px para que no distorsione en tu blog. Ahora, si quieres que el botón (o lo que hayas puesto) vaya al lado derecho cambia left: 30px por right: 30px. Y eso es todo.

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.