He visto que muchos de quienes usanbarras de herramientas como Wibiya han tenido que quitarla porque interfiere con el funcionamiento de algunos scripts comoScriptacoulous 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 propiabarra 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.
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
/bodydiv id='ToolBar'img border='0' class='cerrar' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil4gmkWGxrFzKg8hIiMqJRfIHLI8hjFU4YQJyBvId07q8hSC5v-V6lHlL-XPI_dnBn4sEaSAm_Li06il92rvL3raCbWusW5x7LI9BqkP8QgF0aR9eFNt9U6NLmImx1KrMCM7LAA_AhSww/s1600/close.gif' title='Cerrar esta barra' width='19'/table border='0' cellpadding='3'trtd 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 == "") this.value = "Buscar...";' onfocus='if (this.value == "Buscar...") this.value = "";' size='28' type='text' value='Buscar...'//form/tdtd 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/AVvXsEjNzEba3oWYKABYH6h1xwWFM2cpF31Vaw-Nnv1v2i7PRe4pmYJd0XOYP8uOGWxl89r20ROzT8_9lwIBRZLRa-eIT4JfLQWVN8tb7K6tSnlsPLZwmN7KzPZvJthz4UPM3nRTbvC2OBR95vI/s1600/m-facebook.png'//a/tdtda href='http://twitter.com/usuario' title='Sígueme en Twitter'img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV8qv7xMqjoh4oyhpNgMe1RFYAwR2PdhrQf0NgIiPkEPay_sKXaTVl8etA_mLz286kIiUSg56B5tp_ALOyNZHgXt96em5g5JDWq-o3c4Q31RJ_voZj6uulGFaFU8zP1Y076-m8ov5rBXw/s1600/m-twitter.png'//a/tdtda expr:href='data:blog.homepageUrl + "feeds/posts/default"' title='Suscribete al feed'img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUajMTdZeIyQ8DW9qwXIRIKDi6V24zVggk_L9VLZGmjKKDwlWkVrDu7aACyLHEqi-r8OExEIj882bY2kylji41RCVxSAFw2HODszsEOTbOOq6BzANf6J0-f8bQQtOfAKP-Zu9Bj9Rf-3M/s1600/m-feed.png'//a/tdtd 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/ascript src='http://platform.twitter.com/widgets.js' type='text/javascript'//tdtda 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'//tdtda href='http://www.facebook.com/sharer.php' name='fb_share' title='Publicar en Facebook' type='button'Compartir/ascript src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'//tdtd style='padding-left:60px;'a href='Javascript:void(0)' onclick='window.open("http://www.google.com/translate?u="+encodeURIComponent(location.href)+"&langpair=auto%7Cen&hl=es&ie=UTF8"); return false;' rel='nofollow' title='English'img align='absbottom' alt='English' border='0' height='24' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwi0hgO5Ry7BELG_sEGcnUpyhXS3aLUJQ7YTviYzweyT4xPqOrPhiRTEiTWCleykrgN0Qola3A7WPp12rdI-1nA_z6MhXHTpwU7-2wQ7qFwJ78T9DZ6kmb5dkEjtyBjsqwd0_9okbWDek/s1600/ingles.png' width='24'//a/tdtda href='Javascript:void(0)' onclick='window.open("http://www.google.com/translate?u="+encodeURIComponent(location.href)+"&langpair=auto%7Cpt&hl=es&ie=UTF8"); return false;' rel='nofollow' title='Português'img align='absbottom' alt='Portuguese' border='0' height='24' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8geiRS7NCyHJwUcIhcywPaM51hsDXVd_lZKtDQVeA9EnaQFFcpZsoLDIe2wz0AIReZr_oVtly0R5lC_23jITVZn3fNQq7FOFFUgv6hHhJ7HggISdVuqMZaBsI59xScMpHhlX6VUdGayQ/s1600/portugues.png' width='24'//a/tdtda href='Javascript:void(0)' onclick='window.open("http://www.google.com/translate?u="+encodeURIComponent(location.href)+"&langpair=auto%7Cfr&hl=es&ie=UTF8"); return false;' rel='nofollow' title='Française'img align='absbottom' alt='Spain' border='0' height='24' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4gk20mQMFNyQamSkBCA-Qskbsb792K5TektHlg49Mnyv6Qpf6MX7hSxXIJsC8ocL0UVo2RUqKUlscHamTvEWzU6LGEvdl_Bgb3CZhVO8OAaXGusaryO3xy9GIRaO-ZOI4P3W67OKu6N8/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:
tdAquí 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.