Pages - Menu

▼

16 de diciembre de 2011

Colocar un Banner superior en las Vistas Dinamicas de Blogger

Con las vistas dinámicas hemos ganado una forma de presentar nuestras entradas de manera mucho mas elegante e interactiva, pero hemos hemos perdido casi todos los aspectos de personalización.

En esta ocasión les enseñare como colocar un Banner superior para su Blog con Vistas Dinámicas de una manera bastante sencilla, empecemos...

El Banner debe tener una altura de 65 PX y el largo puede ser personalizado, ya que podemos hacer que se repita o acabarlo en un degradado solido y combinarlo con el fondo.

Una vez tengamos listo nuestro Banner entramos a Escritorio/Plantillas/Personalizar  y luego en Avanzado/Añadir CSS



Una vez ahi, pegamos el siguiente código:


.header-bar {
background-color:#FFFFFF !important; /* Color de fondo */
background-image:url(URL de tu imagen) !important; /* Imagen de fondo */
background-repeat:no-repeat; /* Si quieres que la imagen se repita cámbialo por repeat */
height:65px !important; /* Altura de la cabecera */
border-bottom:0px solid #3b464b; /* Borde inferior */
}
#header .header-bar .title h1, #header .header-bar .title h3 {display:none;}
#header a:hover {text-decoration:none !important;}
#main {margin-top:25px !important;} /* Distancia entre la cabecera y el contenido */


Pudes cambiar algunas distancias para acomodarlo mejor a tu blog, si deseas saber los el código de los colores entra a esta web.

Espero les sea de ayuda...

8 comentarios:

  1. ana12/8/12 1:04 p. m.

    Hola, como se cual es la url de la imagen?

    ResponderEliminar
    Respuestas
    1. Marvinrax12/8/12 10:21 p. m.

      Hola Ana, la manera de obtener la URL de tu imagen es muy sencilla pero también depende del hosting que estés usando para almacenar dichas imágenes.

      Por ejemplo, si las tienes subidas en Photobucket este hosting te da la opción de copiar el "Direct Link" solo debes ubicar esta opción.

      Pero de manera general puedes obtener la URL de cualquier imagen que este en Internet de la siguiente manera: Click derecho sobre la imagen, luego en el menú contextual seleccionas "Copiar URL de la imagen".

      Si Utilizas Internet Explorer, creo que la forma de proceder seria esta: Click derecho cobre la imagen, luego en el menú contextual seleccionas "Propiedades" y ahí encontraras la URL de tu imagen.

      Espero haber aclarado tu duda, sino pues aqui me encuentras, saludos...

      Eliminar
  2. Emilio García Jr.17/11/12 10:56 a. m.

    Hola, Marvin, saludos. Quisiera saber cómo corregir ese botón antiestético de Me gusta, de Facebook, pues sale recortado, y uno no alcanza a mirar los números. Otra cosa, he tratado de poner una imagen en la cabecera. Me aparece, pero se pierde el menú horizontal.

    Mil gracias por tu ayuda, y éxitos.

    ResponderEliminar
  3. Unknown5/2/13 10:13 a. m.

    excelente, me sirvio y me quedo perfecto el cabezote en mi blog, gracias!

    ResponderEliminar
  4. Piipiro28/2/13 4:21 p. m.

    Hola! Como hago para poner lo de las distancias y las alturas? Qué medidas se utilizan? No tengo idea de nada!!!

    ResponderEliminar
  5. Unknown20/4/13 9:02 p. m.

    No me sirve. No sé como funciona. Pongo todo, borro los entre-asteriscos, nada sucede, no aparece.

    ResponderEliminar
  6. Miri19/7/13 1:18 p. m.

    hola, muchas gracias por el tip, solo que note que al entrar en tu blog desde internet explorer no aparece, tus anuncios de google, pero entrando desde chrome si aparecen, sabes si hay alguna manera de que aparezcan también en explorer?
    gracias

    ResponderEliminar
  7. Benjul065/2/14 5:21 p. m.

    Brother, cuando pongo un fondo de imagen, el banner se me repite en 3!! ahi forma de que pueda poner una imagen de fondo sin que se repita el banner??

    ResponderEliminar