Barras de herramientas flotantes con opción de cerrar

Artículo publicado en el blog Ciudad Blogger, uno de los sitios con más información sobre tecnología Blogger Ve la entrada en su blog original.

He visto que muchos de quienes usan barras de herramientas como Wibiya han tenido que quitarla porque interfiere con el funcionamiento de algunos scripts como Scriptacoulous y Prototype, y otros han optado por eliminar esos scripts con tal de seguir usando esa barra de herramientas.

Bueno, para quienes prefieren tener una barra de herramientas personalizada que no les dé esos problemas y les permita seguir usando otros scripts veamos cómo crear nuestra propia barra de herramientas flotante con opción de cerrar.

La barra de herramientas contiene un buscador, enlace de suscripción al feed, enlace para seguirnos en Twitter, Facebook, botón para compartir en Google Buzz, Twitter, Facebook y traductor en tres idiomas.

Puedes verlo funcionando en este blog de pruebas.

Para ponerlo en tu blog entra en Diseño | Edición de HTML y antes de ]]></b:skin> pega esto:

/* Barra de Herramientas
----------------------------------------------- */
#ToolBar {
background:#CEE3F6; /* Color de la barra */
border-top:1px solid #ccc; /* Color del borde superior */
margin: 0;
bottom:0px;
right:0;
width: 100%;
height:35px;
overflow: auto;
position: fixed;
}
.cerrar {
float: right;
margin-top:6px;
padding-right: 10px;
cursor: hand;
cursor: pointer;
}
.search-text {
color: #ccc;
text-align: center;
}

Ahora antes de </head> pega lo siguiente:

<script type='text/javascript'>
// Barra de Herramientas (ciudadblogger.com)
//<![CDATA[
var toolb_arr = new Array();
var toolb_clear = new Array();
function toolbFloat(toolb) {
toolb_arr[toolb_arr.length] = this;
var ftrpointer = eval(toolb_arr.length-1);
this.pagetop = 0;
this.cmode = (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body;
this.toolbsrc = document.all? document.all[toolb] : document.getElementById(toolb);
this.toolbsrc.height = this.toolbsrc.offsetHeight;
this.toolbheight = this.cmode.clientHeight;
this.toolboffset = toolbGetOffsetY(toolb_arr[toolbpointer]);
var toolbbar = 'toolb_clear['+toolbpointer+'] = setInterval("toolbFloatInit(toolb_arr['+toolbpointer+'])",1);';
toolbbar = toolbbar;
eval(toolbbar);
}

function toolbGetOffsetY(toolb) {
var toolbTotOffset = parseInt(toolb.mtasrc.offsetTop);
var parentOffset = toolb.toolbsrc.offsetParent;
while ( parentOffset != null ) {
toolbTotOffset += parentOffset.offsetTop;
parentOffset = parentOffset.offsetParent;
}
return toolbTotOffset;
}
function toolbFloatInit(toolb) {
toolb.pagetop = toolb.cmode.scrollTop;
toolb.toolbsrc.style.top = toolb.pagetop - toolb.mtaoffset + "px";
}
function closeTopAds() {
document.getElementById("ToolBar").style.visibility = "hidden";
}
//]]>
< /script>

Después agrega este código antes de </body>

<div id='ToolBar'>
< img border='0' class='cerrar' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7gIdiVmU9WfB-OU1-MCAy8jOcPfMyhvxZvaCaXJ8_N4xIRbUh-RMtvNtLf6jTHV5SBo9iWhX8IY2Pg-D5CZHZLgr8yxMHBmRPNrNJkjEuVR4uEYR5QBn4AqW1H6lww9HW6FJiFluUsSI/s1600/close.gif' title='Cerrar esta barra' width='19'/>

< table border='0' cellpadding='3'>
< tr>
< td style='padding-left:30px; padding-right:50px;'><form action='/search' id='search' method='get' name='searchForm' style='display:inline;'>
< input class='search-text' name='q' onblur='if (this.value == &quot;&quot;) this.value = &quot;Buscar...&quot;;' onfocus='if (this.value == &quot;Buscar...&quot;) this.value = &quot;&quot;;' size='28' type='text' value='Buscar...'/></form></td>

< td style='padding-left:20px;'><a href='http://www.facebook.com/usuario' title='Sígueme en Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0MFEBMpQkPKY3bVxv3d4W3v0I7pUn5hL5Vtyj5V6E9zoUb9BdDi_8WG25YKAin9KinKcfmsaGAqViZBBLeO-JTsjfKXlDQO3qPU1m1IBvLrE5vaDd5-uq83qkQA9RxUu-j7Iajqbwe0w/s1600/m-facebook.png'/></a></td>

< td><a href='http://twitter.com/usuario' title='Sígueme en Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiofK5p157HgtT2w6KS4M_Gl0JWLL5ibO9yNZ0LO1OleeWvDIoofEeGEcyGG5jqAmdf1594oK_nD49FMTIK3hDqdfxwSjWqmSz-5B-SXB-HVLPRKLUs212YFYiKZ9h53XtvdUqsjbMXsfY/s1600/m-twitter.png'/></a></td>

< td><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' title='Suscribete al feed'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghH-sDpRAunfO64N62_nSc6jLOyTMIj2r9UXjtUKjnkcsiA28o5iDhQTsAuLvuMG51bQeRMpOGdqqf8JLIBM1uukEsab7Ic6GfWvSm6s3d8TsR2z8-gMItK0Z7NytwJJH1ip8_w4AGA5E/s1600/m-feed.png'/></a></td>

< td style='padding-left:40px;'><a class='twitter-share-button' data-count='horizontal' data-lang='es' href='http://twitter.com/share' title='Publicar en Twitter'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></td>

< td><a class='google-buzz-button' data-button-style='small-count' data-locale='es' href='http://www.google.com/buzz/post' title='Publicar en Google Buzz'/>
< script src='http://www.google.com/buzz/api/button.js' type='text/javascript'/></td>

< td><a href='http://www.facebook.com/sharer.php' name='fb_share' title='Publicar en Facebook' type='button'>Compartir</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/></td>

< td style='padding-left:60px;'><a href='Javascript:void(0)' onclick='window.open(&quot;http://www.google.com/translate?u=&quot;+encodeURIComponent(location.href)+&quot;&amp;langpair=auto%7Cen&amp;hl=es&amp;ie=UTF8&quot;); return false;' rel='nofollow' title='English'><img align='absbottom' alt='English' border='0' height='24' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1PyC_o6ltQsIae6pz2p9vKoQycYK7rLS7_xab3pq10wjmIGPD9T90TYnuYpFpVHt0OG3xxlV8hRl-zNsAaA2Cav-sarCIjuoKcuCxE1t6Lq6F90MyDwkniQoLG40XZ-k7NLEqK_yFQLU/s1600/ingles.png' width='24'/></a></td>

< td><a href='Javascript:void(0)' onclick='window.open(&quot;http://www.google.com/translate?u=&quot;+encodeURIComponent(location.href)+&quot;&amp;langpair=auto%7Cpt&amp;hl=es&amp;ie=UTF8&quot;); return false;' rel='nofollow' title='Português'><img align='absbottom' alt='Portuguese' border='0' height='24' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG7sHDVUMcGMovKcvEGcIw5wr6fdBixV0pjH27SuqeAGc1NoE93ZCg4rlUJ8S5sEPvb7lTcBRx2PQ6yH8IMDwn32x1vHMYtoMMudMIl7fl__FeA2wGkx8Xbq8Ecli2U4nZM0vECHxi9TA/s1600/portugues.png' width='24'/></a></td>

< td><a href='Javascript:void(0)' onclick='window.open(&quot;http://www.google.com/translate?u=&quot;+encodeURIComponent(location.href)+&quot;&amp;langpair=auto%7Cfr&amp;hl=es&amp;ie=UTF8&quot;); return false;' rel='nofollow' title='Française'><img align='absbottom' alt='Spain' border='0' height='24' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKaRjSb36_vfNLF5l5vUUFgy5Xr3UMxP1-wMNUBbP9yna43kkpef_tOV03PHfCu6HZHhUni_h7dmFd9nmgVVwkg0aVoexv5h162TAXuv5DdNezA91rC9w2O5SSMU_iol_MXjGwhl4J0Ww/s1600/Frances.png' width='24'/></a></td>

< /tr>
< /table>
< /div>

Por último cambia lo que está en color rojo por las URLs de tu Facebook y Twitter.
Puedes cambiar el color de la barra donde se indica en color verde dentro del primer código que agregaste.

Si lo deseas puedes agregar otros elementos, como un contador de visitas, enlaces, etc. sólo agrega antes de </tr> un bloque como este:

<td> Aquí el contenido extra </td>

Añade donde se indica el contenido que quieres agregar y listo.
Como ves, no es necesario depender de sitios externos ni quebrarte la cabeza para poder tener una barra de herramientas en tu blog.