En este diseño vamos a realizar una barra de herramientas que contenga varios enlaces de suscripción como los ejemplos de Twitter,Facebook,Google Buzz,Traductor, esta sera una herramienta que tendrá nuestra propia personalización existe un proveedor que nos enlaza directamente nuestra propia barra editada desde su pagina como lo es Wibiya pero si dentro de nuestra plantilla de diseño contamos con Scripts de Scriptacoulus y Prototype tendremos serios problemas ya que interfiere con estos scripts muchos los pueden eliminar pero otros si desean dejarlos pueden utilizar este código que les proporcionare.
Como ejemplo tomaremos el blog de mi amigo el potro donde podemos ver funcionando esta Barra de Herramientas.
Bien para comenzar nuestra instalación sin programas ajenos y solo utilizando este código que proporciono:
Para realizar la colocación en el blog nos dirigimos a la pestaña de : Diseño | Edición de HTML | Expandir artilugios.
Antes de ]]></b:skin> pegamos el siguiente código:
/* 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> pegaremos lo siguiente:
<script type='text/javascript'>Después de agregar lo anterior pegaremos el siguiente código antes de </body>
// 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>
<div id='ToolBar'>Después de esforzarnos en la colocación de los códigos anteriores cambiaremos la sección de color rojo por las URLs que tenemos en facebook y Twitter, también podemos cambiar el color de la barra donde se indica el color verde que esta dentro del primer código que colocamos.
<img border='0' class='cerrar' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGsCuTAjVK4WIxe3kTyk06oVR-Zix3J6RyXz5XM24HxZQz_iQACCf5wjRdOlCMnDDypk1qfEeayOjHzOChyphenhyphenNB9zpJiHkokwwHgAUt3aPIoT3FvH3EbeBCFZmJvqosLI8oOqU07W52bIW8/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/AVvXsEiWoQX2-jI5avbqRu9LST8c5R2Xp378vKOKaFVSNgqntai76BYNNfKguaV291vDEZaNfxZ9c2NIMdVXfIUeMZHQWaEOkiVZ-KnczAeO20AgmyF04mkTqzmrsCp0KI6n0xt4KrvjR_v9ogU/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/AVvXsEgfU5P4xSer5pPkQJb5wILUP3mi4FZuWVnUIuIj0nvJyX3HYmFGEauJSKtsFZhftD070rtfyzJtokoLBTEHy9nqz9s8HuHxdJP0W_hYBpaXh1PutTlHALzIqx7XxtOhg-Dj2Teak9EtlVM/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/AVvXsEjj4PiXDANWQsvdIJTUpI_-_TTrdZsLpZStFETDni3smz88nrkTipOlzTRvT-mfUCgyvb7hcVOlrTfIo0-7sb8_9pc1BL3CEJp5ioleCaRz2Mh0TELl7C-oG1rJV7mikIwlqJUzCV-u16U/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/AVvXsEgd8J7J9LZblt2PpnqmnBgTMZrTZnTO5gTfvIQh6X_DL_BB6Nq2MIwCa-8kAHFJU-RFR0yqZYbVYvXkJDF294Ib1ytNcwfE-pGYEpenG1MU-40lMgL9zkbwSr2ijs8jmecHj2UdJVqF6c0/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/AVvXsEj0laiGbeK-TSvXlwWgo-FSHDpTzhEoW2KcUtgadMZX1KphSZKkdme2faS51kVeK6oFDj-8WuZfjDCZ8SNir4Wlgm1cN4ylkUSTWdmp_wr5mis7ylE1-MtyoRjPAicNuWBByJYbNRz3i2M/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/AVvXsEg-adSvM0UBp_ezw3fmE5dfl0lbbUqs7mMaH6A1rh7gs0xSJdKYVT1I7Teb-ChiTa3-dYhSpUUyYaBbC9Cl0WWV-6_OGUhkASEwDmSIQW9HkZ-RDZZLFWn413iEjHeGTavSVQIy8Twm-t0/s1600/Frances.png' width='24'/></a></td>
</tr>
</table>
</div>
Si deseamos colocar nuestro propio contador de visitas, enlaces , etc. solo debemos agregar antes de </tr> un bloque como el siguiente:
<td> Aquí el contenido extra </td>
Solo vamos a añadir donde indicamos el contenido que queremos agregar y listo, nuestra barra quedara como nosotros la queramos diseñar a nuestra manera.
.png "English"){kind=small}
0 comentarios:
¡Gracias por dejar tu opinión! Por favor procura que tus comentarios estén dentro de tema, que no sean promocionales (spam), ilegales u ofensivos, de otro modo, serán borrados.