MAPA DEL SITIO

GRACIAS A TU DONACION ESTA PAGINA PODRA SEGUIR FUNCIONANDO
Comentarios de Puntadas católicas
COMPARTE ESTA ENTRADA





SIGUENOS
Síguenos en TwitterSiguenos en FacebookSiguenos en Google+Siguenos en PicasaSiguenos en YouTubeSiguenos en BloggerSiguenos en Blogger


Barra de herramientas flotante con opción de cerrar.


toolbar

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

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='http://4.bp.blogspot.com/_dsEG33PDaHw/TN8UsPkB8VI/AAAAAAAAAdY/zs77UsJStFE/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='http://4.bp.blogspot.com/_dsEG33PDaHw/TNzPsurlbuI/AAAAAAAAAcE/sNefMdyYh-0/s1600/m-facebook.png'/></a></td>

<td><a href='http://twitter.com/usuario' title='Sígueme en Twitter'><img src='http://1.bp.blogspot.com/_dsEG33PDaHw/TNzPtQIPiOI/AAAAAAAAAcM/rQVyNhK1FmM/s1600/m-twitter.png'/></a></td>

<td><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' title='Suscribete al feed'><img src='http://1.bp.blogspot.com/_dsEG33PDaHw/TNzPs3FY12I/AAAAAAAAAcI/2NvFgP9v2YM/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='http://4.bp.blogspot.com/_dsEG33PDaHw/TNzQI9O-NuI/AAAAAAAAAcU/ENsHnGCHVg4/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='http://1.bp.blogspot.com/_dsEG33PDaHw/TNzQJJ0fNRI/AAAAAAAAAcY/apqApqwLZWU/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='http://4.bp.blogspot.com/_dsEG33PDaHw/TN86dO4BE3I/AAAAAAAAAdo/2IXB-4sMV3Y/s1600/Frances.png' width='24'/></a></td>

</tr>
</table>
</div>
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.

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.


Tal vez te interese

Related Posts Plugin for WordPress, Blogger...
TRANSLATE


EnglishcvFrenchGermanSpainItalianDutchRussianPortugueseJapaneseKoreanArabicChinese Simplified

Archivo del blog

Entradas populares

Seguidores

 
Gadget de animacion Social - Widgets para Blogger

[PR] 求む!タイピング初心者