Mejora Tu Blogger: Barra Flotante

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 == "") this.value = "Buscar...";' onfocus='if (this.value == "Buscar...") this.value = "";' 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 + "feeds/posts/default"' 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("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/AVvXsEi1PyC_o6ltQsIae6pz2p9vKoQycYK7rLS7_xab3pq10wjmIGPD9T90TYnuYpFpVHt0OG3xxlV8hRl-zNsAaA2Cav-sarCIjuoKcuCxE1t6Lq6F90MyDwkniQoLG40XZ-k7NLEqK_yFQLU/s1600/ingles.png' width='24'/></a></td>

< td><a 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/AVvXsEiG7sHDVUMcGMovKcvEGcIw5wr6fdBixV0pjH27SuqeAGc1NoE93ZCg4rlUJ8S5sEPvb7lTcBRx2PQ6yH8IMDwn32x1vHMYtoMMudMIl7fl__FeA2wGkx8Xbq8Ecli2U4nZM0vECHxi9TA/s1600/portugues.png' width='24'/></a></td>

< td><a 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/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.

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Aviso o anuncio flotante que permanece fijo al navegar por el blog

Tras haber visto cómo incluir en el blog un cartel o aviso automático al pie de todas las entradas, descubriremos este otro truco de sencillísima configuración. Se trata de un recuadro que permanece flotando en una esquina del blog y que puede cerrarse con un solo clic.

Puedes ver el resultado en este blog de pruebas, desplazándote a través de la entrada para comprobar que el anuncio "flota" sea cual sea la posición a la que llegues.

Diseño>añadir gadget (elemento de página)>html-javascript

Pega el script:

<div id="blanuncio">
<a href="" onclick="blcartel_cierra(); return false"><img title="Cerrar nota" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimwCC3znP6SNf2XyoidMdRpukB6C0zP5su-25ARLhq7bH04-e0WGEf2W22QKxaVkwKln1WT_DAwfq3fV5nIOj-pQygdOU9twh89lWdOQGAkjhyphenhyphen6wwcol0U2uGHzXl2_EbxGHxTCpY08fyk/s320/blcerra.png" border="0" /></a> CONTENIDO AQUI
</div>

<script type="text/javascript">
var blbtn_cerrar=1.1
var blcartl_1 = 30
var blcartl_3="fromtop"
var blcartl_2 = 5
function blcartl_Activo(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function blcartl_nuevo(llamo) {
var blcartel_aparien = llamo + "="
var blcartel_cam = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(blcartel_aparien)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
blcartel_cam=unescape(document.cookie.substring(offset, end))
}
}
return blcartel_cam;
}
function blcartel_cierra(){
if (blbtn_cerrar)
document.cookie="remainclosed=1"
document.getElementById("blanuncio").style.visibility="hidden"
}
function blcartel_posicion(){
barheight=document.getElementById("blanuncio").offsetHeight
var blcartel1 = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var blcartt = document;
function blavis(id){
var bblaviso=blcartt.getElementById(id);
if (!blbtn_cerrar || blbtn_cerrar && blcartl_nuevo("remainclosed")=="")
bblaviso.style.visibility="visible"
if(blcartt.layers)bblaviso.style=bblaviso;
bblaviso.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
bblaviso.x = blcartl_1;
if (blcartl_3=="fromtop")
bblaviso.y = blcartl_2;
else{
bblaviso.y = blcartel1 ? pageYOffset + innerHeight : blcartl_Activo().scrollTop + blcartl_Activo().clientHeight;
bblaviso.y -= blcartl_2;
}
return bblaviso;
}
window.stayTopLeft=function(){
if (blcartl_3=="fromtop"){
var blcartel2 = blcartel1 ? pageYOffset : blcartl_Activo().scrollTop;
ftlObj.y += (blcartel2 + blcartl_2 - ftlObj.y)/8;
}
else{
var blcartel2 = blcartel1 ? pageYOffset + innerHeight - barheight: blcartl_Activo().scrollTop + blcartl_Activo().clientHeight - barheight;
ftlObj.y += (blcartel2 - blcartl_2 - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 6);
}

ftlObj = blavis("blanuncio");
stayTopLeft();
}
if (window.addEventListener)
window.addEventListener("load", blcartel_posicion, false)
else if (window.attachEvent)
window.attachEvent("onload", blcartel_posicion)
else if (document.getElementById)
window.onload=blcartel_posicion
</script>
<style type="text/css">
#blanuncio {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2tuhlMvCJKAU7oI7JkjJJSycf9iZxH2oX10oUfrD7gVkPfnRj8BuISwsw-hyXvRAlH9eZEf_912JYYU4J3qovLvF506w5Mp4DN26vCT9bsWfDE3OfXurZiviZCAj7YKaKcvApwQSMD0m1/s320/blfondd.png") repeat scroll left top transparent;
border:1px solid #CCCCCC;
padding:2px;
position:absolute;
visibility:hidden;
width:576px;
z-index:100;}
#blanuncio img {margin-right: 8px;}
#blanuncio a:link, #blanuncio a:hover, #blanuncio a:visited {color: #000000;}</style>

Reemplaza CONTENIDO AQUI por el contenido (texto) que tendrá el anuncio.

Puedes personalizar el ancho que tendrá el recuadro del anuncio editando el valor 576px en la línea resaltada en verde, al final del código.

Para cambiar la imagen de fondo del aviso, borra la línea marcada en azul e inserta la dirección de tu imagen.

Finalmente, si deseas editar la imagen de cierre borra la primera URL del script (resaltada en verde) e introduce la URL de tu icono.

En caso de no saber el procedimiento para obtener la URL de una imagen, accede a esta entrada.

Una vez editados los parámetros, procederemos a guardar el gadget.

Mejora Tu Blogger

Barras de herramientas flotantes con opción de cerrar

Como instalar una barra flotante en el blog

Sígue las publicaciones en Twitter

Mejores Maestros Blogger

Etiquetas

Archivo del blog