[SOLUCIONADO] a muchos nos sirve - barra similar a wibiya

[JOKEROBSCURO]

Hola, llevo unos dias tratando de implementar una barra similar a la de Wibiya, en mi tema (FlexSqueeze) y me ha ido mal, digo similar porque no me agrada tener algo externo y por lo que he leido alenta mucho la carga de wordpress y, ademas, porque deseo que tenga algunos botones personalizados con acceso a mis paginas, en vez de que sea tanto una barra social. De momento he probado todos estos plugins y ninguno me ha servido

The WordPress Bar
WP-Super Bar
WP External Links Bar
Wibiya Bar
Meebo Bar
Apture
Quick Navigation Panel
Hello Bar
ViperBar
Attention Bar
Easy Heads Up Bar
Notification Toolbar
Quick Notice Bar
FooBar (Premium)
Attention Grabber (Premium)
WP Top Bar
Social Toolbar

Pero la mayoria solo sirve para poner acceso a las redes sociales o para poner uno que otro link en el blog, ademas de que algunos no permiten cambiarle el lugar.

Se que con codigo (html – css y script) se puede crear una similar y se que no le agregaria peso adicional a la carga de la pagina (como sucede con wibiya), pero la informacion que he encontrado es simple aplicada a blogspot, pero poco para wordpress. Yo se que a mas de alguno le sale facil pero yo llevo enredandome varios dias y por lo que he leido no soy el unico que tiene este problema, muchos quieren barras similares y personalizables, pero no hay informacion disponible (ninguna con la que yo pudiera dar) y yo se que la mayoria aqui sabe bastante.

La otra que me llama bastante la atencion (y de la que muchos hablan, pero nadie sabe como implementar) es la que aparece en mashable.com, supongo que esa sera algo mas compleja de implementar pero estaria muy pro, poder lograrla pero a mi me sirve que flote abajo.

Cualquier orientacion, ayuda, patrocinio, etc, sirve .

Gracias

Saludos

*****

Bueno segui buscando y encontre el tutorial (en ingles) posiblemente a muchos les servira ya que esta muy bien explicado

http://wp.tutsplus.com/tutorials/add...ordpress-blog/

Pueden usarlo como base para modificar todo lo que quieran...

Saludos

[RokuMetal]

Lo mejor que puedes hacer es implementarlo manualmente, hacer el código tu mismo en HTML y CSS, yo he implementado una barra en este sitio:

http://worldanime.tv

Si es lo que buscas, pues te guío a hacer algo parecido, logos en tu barra, hasta widgets.

[JOKEROBSCURO]

me gusta Rokumetal, dime cuando empezamos, pero a mi me interesaria abajo, no arriba :)

Gracias por responder

[RokuMetal]

Si la quieres abajo, tienes que editar el archivo footer.php de tu wordpress, la posición de la barra va depender del como esté acomodado tu código en tu archivo footer.php, todo esto va constar de CSS y HTML. Me imagino que tienes algo de experiencia en eso.

Tenemos que poner el código siguiente (este lo pones hasta arriba del archivo, no estoy seguro aquí de se vaya a posicionar, ya veremos):

Código:

<div class="barra-footer">
</div>

Ahora, vamos a crear la clase correspondiente del div que hemos puesto, tendrás que poner esto en tu style.css, o el archivo CSS que estés usando:

Código:

.barra-footer{
	width:100%; 
	height:40px; 
	background:red;
	bottom:0;
	left:0;
	position:fixed;
}

Por ahora, has eso, y fíjate ahora como aparece en tu página web. Ten en cuenta, que los valores que puse en la clase .barra-footer los puedes modificar a tu gusto a excepción de width, bottom, left y position, que son los que posicionan correctamente la barra, si quieres cámbialos y has tus comparaciones.

Me avisas, para poder seguir.

[JOKEROBSCURO]

RokuMetal he estado corto de tiempo, pero la pruebo lo antes posible y te comento :). Sorry por la demora en responder...

Jokerobscuro

[JOKEROBSCURO]

Genial Rokumetal, me funciono C: y carga rapidisimo y no sobrecarga la pagina, ahora supongo que el siguiente paso seria poner una tabla dentro de <div></div> y poder introducir botones y cosas asi?

Sorry por la demora, tuve que arreglar el tema que uso que me arrojaba un error y varias otras cosas mas...

Hay alguna forma para que se oculte presionando un boton? creo que hay un comando hidden creo, pero mi conocimiento de programacion todavia esta en pañales

Estuve haciendo una pruebas tratando de agregar una barra similar en header.php pero no me resulto ¿se agrega en algun otro lugar?

Código:

<div class="barra-header">
</div>

Código:

.barra-header{
	width:100%; 
	height:40px; 
	background:red;
	bottom:0;
	left:0;
	position:fixed;
}

Eso fue lo que hice ¿Esta mal?

Saludos

[RokuMetal]

Hola, que bueno que te resultó, ahora, si quieres que la tabla aparezca arriba debes modificar el CSS que te puse, para ser exactos:

bottom:0;

En ves de bottom:0, le pones "top:0;"

Dentro de los <div></div>, ahí se ponen las cosas que necesitas poner, eso si, vas a tener que manejar listas <li> dependiendo de cuantas cosas quieras meter, porque si no se te irán hacia abajo.

Para quitar la barra al presionar un botón, eso se hace con algo de JQUERY, si tu barra estará en en footer, tendrás que meter el código Jquery en footer.php:

En este enlace te menciona algo parecido a lo que quieres: http://www.w3schools.com/jquery/jquery_hide_show.asp

Esto es a prueba y error, estamos al pendiente.

[JOKEROBSCURO]

Hola RokuMetal, he estado aprendiendo css y jquery para hacer la barra, finalmente hice una barra en css y me funciona bien en mi computador, pero tengo un problema.

La barra será utilizada en varios sub-dominios, por lo que hice una carpeta en "public" llamada "archivos" y dentro puse el archivo css de la barra llamado "estilobarraprincipal.css". La barra la he puesto en el header y en el footer y sigue sin funcionar.

Para enlazar la barra, al <div class="barra-header">, escribo lo siguiente

<link type="text/css" rel="stylesheet" href="archivos/estilobarraprincipal.css">

o tambien

<link type="text/css" rel="stylesheet" href="www.midominio.com/archivos/estilobarraprincipal.css">

He puesto esto dentro del <div class="barra-header"> y fuera de él, lo he puesto dentro y tambien el <head>, arriba y abajo de <meta... etc>, arriba y abajo de <title... etc>

El <div class="barra-header"> esta compuesto por lo siguiente:

<div class="barra-header">
<div>la div que contiene el menu
<ul>
<li>las listas del menu</li>
</ul>

</div>

</div>

En mi pc se ve y funciona muy bien, pero es en el momento de insertarlo en el sitio web donde tengo problemas ¿Que crees que estoy haciendo mal?

Jokerobscuro.

[RokuMetal]

Intenta importar el estilo CSS con el siguiente código:


<STYLE TYPE="text/css" MEDIA="all">
<!--
@import url(http://www.htmlhelp.com/style.css);
-->
</STYLE>

Prueba con ese, si no funciona pues duplica el archivo css en los otros subdominios.

[JOKEROBSCURO]

Hola Rokumetal, gracias a ti esta casi todo resuelto, la barra me funciona bastante bien, salvo por un pequeño detalle... Por alguna razon no queda sobre todo, es decir, al parecer algunas capas dentro de los temas de wordpress son mas relevantes que la capa de la barra y al bajar se pierde entre los botones y banners cuando bajo.

Como hago para que quede sobre todo lo demas, probe moverla desde el footer al index y luego al header, pero no funciono ¿Sabes como solucionar el problema?

****

Respecto a los problemas de importacion del archivo css desde otra carpeta, descubri que el problema lo ocasionaba un plugin de chat, una vez que lo saque, pude instalar la barra sin problemas...

Jokerobscuro.

[RokuMetal]

Ya veo, que bien que se solucionó tu problema de la importación.

Ahora, para que la barra salga encima de todos los objetos de tu web tienes que agregar un atributo a tu div principal de la barra, o sea:

<div class="barra-footer"></div>

A esa clase llamada "barra-footer" le agregas:

z-index: 99999;

Lo que hace ese atributo es definir que capas estarán encima o debajo de otras, obviamente, le estas metiendo un valor tremendo, "99999", con eso solucionas tu problema.

Avisame que onda, aquí ando.

[JOKEROBSCURO]

Funciono perfecto, gracias Rokumetal, creo que ya se puede dar por terminado el tema :).

De todas maneras lo guardare en favoritos porque no creo que sea la unica barra que haga... espero que sigamos en contacto

Jokerobscuro.

[RokuMetal]

Que bien que ya quedó!!

Ahora si lo único que has agregado es puro HTML en la barra, trata de poner código PHP dentro de la barra para implementar un cuadro de inicio de sesión u otra cosa que se te ocurra.

Nos vemos pronto, y acá seguimos!

[JOKEROBSCURO]

En PHP me metere pronto, pero necesitaba sacar la barra lo antes posible porque tengo que terminar la pagina... pero esta entre mis planes inmediatos... aprender mas sobre programacion, el tema me parece interesante pero siempre me faltaba tiempo...

Ahora se que sabiendo hacer las cosas me demoro mucho menos en terminarlas...

nos vemos pronto... eso es seguro c:

Jokerobscuro.