-->

Articulo

Barra Google Black


Saludos amigo, pues bienvenidos a esta nueva entrada de CirculoBlogger. nos complace tenerlos aqui de nuevo. y esta vez presentrales la Barra Google Black, o tambien conocida como la barra negra de Google o la vieja barra de Google.

Este diseño es basado en la vieja barra que uso el navegador, pero con un codigo más simple.

Bueno, empecemos integrando esto a nuestros blogs.

 Atención, Antes de continuar advierto que si no funciona o no les dejan un espacio en el encabezamiento pues se vera muy unido a su blog, por lo que si esto pasa les pido dejen un comentario en esta entrada y la dirección de su blog para recibir mi asistencia personalizada.

Entonces, sin más preambulos continuemos adaptando la barra a nuestro blog.

1) Bueno, primero vamo Plantilla / HTML


Vamos a buscar dentro de nuestra plantilla.


Vamos a buscar la etiqueta <body>

y justo debajo de la etiqueta vamos a pegar el siguiente codigo.
<googlemenu>
         <ol class="Gtab">
            <li>   <a href="http://plus.google.com">+You</a>      </li>
            <li>   <a href="#">Busqueda</a>      </li>
            <li>   <a href="#">Imagenes</a>      </li>
            <li>   <a href="#">Maps</a>         </li>
            <li>   <a href="#">Play</a>         </li>
            <li>   <a href="#">YouTube</a>         </li>
            <li>   <a href="#">Noticias</a>      </li>
            <li>   <a href="#">Gmail</a>         </li>
            <li>   <a href="#">Drive</a>         </li>
            <li>   <a href="#">Calendar</a>      </li>
            <li>   <a href="#">Mas</a>          </li>
         </ol>
</googlemenu>
2) Ahora vamos a buscar la etiqueta </b:skin> y arriba de la etiqueta pegamos el siguiente codigo.
googlemenu
{
   position:    absolute;
   margin-bottom: 40px;
   left:       0pt;
   top:        0pt;
   width:      100%;
   min-width:   980px;
 
   border-color:       rgb(0,    0,    0);
   background-color:    rgb(45,  45,   45);   /* Color de la barra */
   color:             rgb(187, 187, 187);
 
   font: 13px/27px Arial,sans-serif;
   font-weight: bold;
}

/*
   =======================================
   ============== TOP TAB ================
   =======================================
*/
   ol.Gtab      
   {
      list-style:   none outside none;
      display:    block;
      width:      720px;
      height:    30px;
      margin:      0pt;
      padding:    0pt;
      margin-left:19pt;
      overflow:    hidden;
   }
   ol.Gtab li
   {
      position:       relative;
      display:       inline-block;
      line-height:    27px;
      padding-left:     6pt;
      padding-right:    6pt;
      padding-top:   2pt;
      vertical-align:   top;
   }
   .Gtab a
   {
      text-decoration:none;
      color:    rgb(187, 187, 187);
   }
   .Gtab a:hover
   {
      color:    rgb(255, 255, 255);
   }
Ahora Guardaremos nuestro Blog.

Les quedara algo como esto:


Ahora vamos a corregir uno de los errores que se les puede dar.

Normalmente tendremos el típico error que la barra esta en segundo planco con la plantilla. y se vera distorsionado en el blog. por lo que recomiendo que bajen el blog unos 30px.

Analizaremos el encabezamiento de nuestra plantilla y buscaremos el codigo CSS de nuestro encabezamiento o header. y ubicamos la siguiente linea.
margin-top: 30px;
Ahora si les quedara la barra bien superpuesta en el blog.

Si realmente no saben que hacer, porfavor comenta esta entrada y te ayudare.

0 Comentarios