En el día de hoy les voy a brindar algo muy interesante se trata de crear nuestra propia barra de herramientas al estilo de insitebar y Wibiya pero con la diferencia de que es de ustedes mismos no tienen que depender de ningún sitio web para tener su propia barra de herramientas en esos sitios ya mencionados arriba nos brindan esa barra pero según algunas personas dicen que interfieren con algunos scripts no lo se ya que no lo he provado,en vagabundia nuestro compañero JMiur tambien nos muestra una forma de insertar una barra al igual que el potro en su sitio , bueno esta barra va a estar ubicada en la parte de abajo y contiene contador de visitas tiene para suscribirse a los feed a twitter facebook y google+ seguido de los botones para compartir de twitter google+ y el botón me gusta de facebook siguiendo del botón add this que tiene infinidad de sitios para compartir también tiene un buscador y con la opción de cerrar la barra para las personas que no la deseen o no quieran utilizarla, nuestra propia barra de herramientas es muy fácil de instalarla en nuestro sitio siguiendo tres simples pasos.
Para implementar el código en nuestro sitio vamos a diseño > Edición de HTML > y click a Expandir plantillas de artilugios
Recuerden que para una búsqueda mas rápida usen Ctrl+F y en el buscador ponen lo que quieran buscar .
en este caso vamos a buscar </head>
Una ves encontrado, arriba le colocamos el siguiente código :
<!-- Barra de Herramientas -->
<style type='text/css'>
#ToolBar { /* -- este va ser el id de la barra -- */
-moz-border-radius: 2px; /* -- borde de las esquinas -- */
-moz-box-shadow: 0 0 10px #ffffff inset; /* -- ancho del efecto -- */
background: #090909 none; /* -- color de fondo de la barra -- */
border: #000000; /* -- color del borde de la barra -- */
color: #fff; /* -- color del texto -- */
bottom:0px;
right:0;
width: 100%; /* -- ancho de la barra -- */
height:35px; /* -- altura de la barra -- */
valign-middle; /* -- alineación de la barra esta al medio -- */
position: fixed; /* -- posición fija -- */
}
.cerrar { /* -- el botón de cerrar -- */
float: right; /* -- alineación a la derecha -- */
margin-top:4px; /* -- alineación hacia arriba -- */
padding-right: 5px; /* -- distancia a la derecha -- */
cursor: hand;
cursor: pointer;
}
.search-text { /* -- este es el buscador -- */
-moz-border-radius: 0px; /* -- esto es si lo quieres con borde -- */
-moz-box-shadow: 0 0 10px #000000 inset; /* -- ancho del efecto -- */
background: #ffffff none; /* -- color de fondo -- */
border: #000000; /* -- color del borde -- */
color: #494949; /* -- color del texto -- */
font-size: 13px; /* -- tamaño del texto -- */
width: 120px; /* -- ancho del buscador -- */
}
</style>
<!-- final de la barra de herramientas -->
Una ves colocado sin ir tan lejos bajas hacia abajo y después del </head> vas a ver <body> si no lo ven es porque se puede encontrar así <body expr:class='"loading" + data:blog.mobileClass'> o parecido el caso es que esta después del </head>
Y vamos a colocar el siguiente código después del <body>
<script src='http://dl.dropbox.com/u/25944020/BarradeHerramientastubetrucos.com.js' type='text/javascript'/>
Y por ultimo buscamos </body>
y antes de el colocamos el siguiente código:
<div id='ToolBar'>
<img border='0' class='cerrar' onClick='closeTopAds();return false;' src='http://dl.dropbox.com/u/25944020/close%20%281%29.gif' title='Cerrar la barra' width='13'/>
<!-- tubetrucos.com -->
<table border='0' cellpadding='0' cellspacing='2'>
<tr>
<td style='padding-left:30px; padding-right:40px;'><script id='_wau3lf'>var _wau = _wau || []; _wau.push(["classic", "5888vmnyml25", "3lf"]);(function() { var s=document.createElement("script"); s.async=true; s.src="http://widgets.amung.us/classic.js";document.getElementsByTagName("head")[0].appendChild(s);})();</script></td>
<td style='padding-right:5px; padding-right:5px;'>
<a href='http://feeds.feedburner.com/TU ID DE FEEDBURNER' target='_blank'><img alt='Subcribete a nuestro RSS Feed' src='http://dl.dropbox.com/u/25944020/para%20tube%20rss.png' style='width: 28px; height: 28px;' title='Subcribete a nuestro RSS Feed'/></a>
</td>
<td style='padding-right:5px; padding-right:5px;'>
<a href='http://twitter.com/TU ID DE TWITTER' target='_blank'><img alt='Siguenos en Twitter' src='http://dl.dropbox.com/u/25944020/para%20tube%20twitter.png' style='width: 28px; height: 28px;' title='Siguenos en Twitter'/></a>
</td>
<td style='padding-right:5px; padding-right:5px;'>
<a href='http://www.facebook.com/TU ID O NOMBRE DE FACEBOOK' target='_blank'><img alt='Siguenos en Facebook' src='http://dl.dropbox.com/u/25944020/para%20tube%20facebook.png' style='width: 28px; height: 28px;' title='Siguenos en Facebook'/></a>
</td>
<td style='padding-right:5px; padding-right:40px;'>
<a href='AQUI VA LA URL DE GOOGLE+' target='_blank'><img alt='Siguenos en google+' src='http://dl.dropbox.com/u/25944020/google%2B1%20tube%29.gif' style='width: 28px; height: 28px;' title='Siguenos en google+'/></a>
</td>
<td style='padding-right:5px; padding-right:5px;'>
<a class='twitter-share-button' data-count='horizontal' data-via='TU ID DE TWITTER' href='https://twitter.com/share'>Tweet</a><script src='//platform.twitter.com/widgets.js' type='text/javascript'/>
</td>
<td style='padding-right:5px; padding-right:5px;'>
<g:plusone size='medium'/>
</td>
<td style='padding-right:5px; padding-right:5px;'><iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/like.php?href&send=false&layout=button_count&width=110&show_faces=false&action=like&colorscheme=light&font&height=21' style='border:none; overflow:hidden; width:110px; height:21px;'/>
</td>
<td style='padding-right:0px; padding-right:0px;'><div class='addthis_toolbox addthis_default_style '>
<a class='addthis_button_compact' href='http://www.addthis.com/bookmark.php?v=250&pubid=xa-4ee7b2e11998dcca'/>
</div><script src='http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4ee7b2e11998dcca' type='text/javascript'/>
</td>
<td style='padding-right:10px; padding-left:110px;'><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='20' type='text' value='Buscar...'/></form></td>
<!-- tubetrucos.com -->
</tr>
</table>
</div>
Fácil verdad, bueno lo que esta en rojo lo deben de cambiar por sus datos id de twitter de facebook y la url de google+
el primer código que les brinde arriba son los estilos de la barra arlado de cada cosa les puse a que se refiere
por si quieren hacerle algún cambio a sus gusto
el ultimo código es la barra con sus cosas si quieren cambiar algo los códigos se encuentran dentro de esto
<td style='padding-right:5px; padding-right:5px;'>
aquí va el código ,palabras o lo que quieran poner
</td>
En el código de google +1 no hay que hacer nada, lo único que si no tienen el botón +1 en algún lugar de tu sitio entonces tienen que añadir el siguiente codigo en la cabecera o delante de la etiqueta body.
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang: 'es-419'}
</script>
Bueno es todo recuerden que compartir y comentar no cuesta nada si pueden y creen que esta información les es útil denle click a los botoncitos en los que quieran compartir de facebook,twitter,google+ y bitacoras y así otros que también necesitan el código lo podrán ver muchas gracias.
:)
:(
;)
:D
;;-)
:-/
:-O
X(
B-)
#:-S
:((
:))
=))
~X(
:-t
8-
=P~
#-o
=D7
:-SS
:-q
:-bd
Hola!una pregunta puede ponerse una imagen de fondo?
ResponderEliminarHola Cocofansclub gracias por tu visita y por comentar,por supuesto que si se puede visita esta url y y vas a ver como se hace:
ResponderEliminarLa siguiente url es para ponerle fondo a nuetro sitio.
http://www.tubetrucos.com/2011/08/poner-una-imagen-de-fondo.html"
La siguiente url es para poner un fondo a algun contenido.
http://www.tubetrucos.com/2011/12/poner-una-imagen-de-fondo-nuestro.html"
Espero y te sirvan estas url si tienes alguna duda no dudes en preguntarme.saludos
Oie kero tener un recuadro de comentar en mi Blog: Saves cOMo SE HACE? www.skatepark-la-pincoya-shucky.blogspot.com
ResponderEliminarHola shucky! en todos los blog esta el recuadro para comentar solo lo debes de activar para eso vas a escritorio click en Configuración y despues en Comentarios y ahi se encuentra todo acerca de los comentarios lo primero es mostrar y ocultar seleciona mostrar y mas abajo seleciona donde lo quieres Página completa,Ventana emergente
ResponderEliminarDebajo de la entrada y otras opciones que tu quieras darle a los comentarios una ves echo todo le das click a guardar configuracion y ya vas a tener el recuadro de comentarios.saludos
Porfavor.. podrías arreglar el código, me aparece un error de sintaxis en dreamweaver y no me funciona a pesar que lo subi a mi servidor.
ResponderEliminarPodrías dejar una web de DEMO de la barra para poder extraer el código.
Ya que yo copie todo muy bien y como se debe pero en la parte del body me aparece error de sintaxis como si el codigo estuviera mal generado.
Muy buena explicacion y me quedo de maravilla muchas gracias lo queria desde hace tiempo.recomendado.jesus
ResponderEliminarHola jesus cuanto me alegro que te haya gustado,gracias por tu visita.saludos.
ResponderEliminarHola Alec Gonzalez la verdad no se que habras copiado mal.copialo y pegalo otravez en un blog de pruebas y veras que te funciona bien,si no hasme saber.saludos
Muy buen post y detallado , De seguro les va ha servir a muchos que usan webs.
ResponderEliminarmuchas gracias por la visita y comentario.saludos
Eliminar