Necesito ayuda para modificar el header de mi blog en Blogger

  • Autor Autor luisocp288
  • Fecha de inicio Fecha de inicio
L

luisocp288

Beta
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Buenas comunidad beta, hice este post aqui porque creo que es la seccion adecuada.
Alguien que sea tan amable de ayudarme a modificar mi banner de blogger:
Paint Plantilla.webp

Como se daran cuenta el banner no cubre todo el espacio, aparte nada mas se pone en esa parte marcada en el cuadro rojo, en el otro cuadro puedo poner texto pero se ve mal, quisiera que todo el cuadro ese sea para banner tipo Leaderboar.
Le entiendo al hmtl pero no tanto, si alguien me podria pasar el codigo para cambiarlo y como borrar ese sin que se me desalinee la pagina, porque tambien me pasa que al cambiarlo se me desalinea, gracias
 
[MENTION=201475]luisocp288[/MENTION] envia el tramo de codigo para ver como lo estas haciendo
 
Código amigo, para revisarlo probablemente también tenga que ver con el css. Saludos.
 
guzmantm dijo:
[MENTION=201475]luisocp288[/MENTION] envia el tramo de codigo para ver como lo estas haciendo
Hacer clic para expandir...


les dejo el link de la pagina por si en inspeccionar tambien les sirve

El Armario de Libros

- - - Actualizado - - -

HTML dijo:
Código amigo, para revisarlo probablemente también tenga que ver con el css. Saludos.
Hacer clic para expandir...

ai lo deje junto la pagina, perdon por contestar tarde :$

- - - Actualizado - - -

Creo que mejor se los mando asi xD no supe borrar la imagen adjunta e hice un cochinero de publicacion u.u

PHP: 
     <div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
        <b:widget id='Header1' locked='true' title='El Armario de Libros (Cabecera)' type='Header' version='1'>
          <b:widget-settings>
            <b:widget-setting name='displayUrl'>http://1.bp.blogspot.com/-gblxPjiDpps/XEDOh0JTAdI/AAAAAAAABOU/qDZY5dqNqFYBj0qTbTmcmwPvpDg3piJGACK4BGAYYCw/s1600/El%2BArmario%2Bde%2BLibros%2B%25286%2529.png</b:widget-setting>
            <b:widget-setting name='displayHeight'>95</b:widget-setting>
            <b:widget-setting name='sectionWidth'>476</b:widget-setting>
            <b:widget-setting name='useImage'>true</b:widget-setting>
            <b:widget-setting name='shrinkToFit'>false</b:widget-setting>
            <b:widget-setting name='imagePlacement'>REPLACE</b:widget-setting>
            <b:widget-setting name='displayWidth'>730</b:widget-setting>
          </b:widget-settings>
          <b:includable id='main'>

  <b:if cond='data:useImage'>
    <b:if cond='data:imagePlacement == &quot;REPLACE&quot;'>
      <!--Show just the image, no text-->
      <div id='header-inner'>
        <a expr:href='data:blog.homepageUrl' style='display: block'>
          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block;padding-left:15px;padding-top:0px;'/>
        </a>
      </div>
    <b:else/>
      <!--
      Show image as background to text. You can't really calculate the width
      reliably in JS because margins are not taken into account by any of
      clientWidth, offsetWidth or scrollWidth, so we don't force a minimum
      width if the user is using shrink to fit.
      This results in a margin-width's worth of pixels being cropped. If the
      user is not using shrink to fit then we expand the header.
      -->
      <div expr:style='&quot;background-image: url(\&quot;&quot; + data:sourceUrl + &quot;\&quot;); &quot;                      + &quot;background-position: &quot;                      + data:backgroundPositionStyleStr + &quot;; &quot;                      + data:widthStyleStr                      + &quot;min-height: &quot; + data:height + &quot;px;&quot;                      + &quot;_height: &quot; + data:height + &quot;px;&quot;                      + &quot;background-repeat: no-repeat; &quot;' id='header-inner'>
        <div class='titlewrapper' style='background: transparent'>
          <h1 class='title' style='background: transparent; border-width: 0px'>
            <b:include name='title'/>
          </h1>
        </div>
        <b:include name='description'/>
      </div>
    </b:if>
  <b:else/>
    <!--No header image -->
    <div id='header-inner'>
      <div class='titlewrapper'>
        <h1 class='title'>
          <b:include name='title'/>
        </h1>
      </div>
      <b:include name='description'/>
    </div>
  </b:if>
</b:includable>
          <b:includable id='description'>
  <div class='descriptionwrapper'>
    <p class='description'><span><data:description/></span></p>
  </div>
</b:includable>
          <b:includable id='title'>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:includable>
        </b:widget>
      </b:section>
 

Adjuntos

  • html1.webp
    html1.webp
    72,4 KB · Visitas: 113
Última edición:
Hola acabo de revisarlo, busca este código y selecciona la cabecera y luego modifica los css (float y width):

<div id="header"><div class="header section">
....
</div>

web_libro.webp

- - - Actualizado - - -

Hola [MENTION=201475]luisocp288[/MENTION] te recomendaría que la imagen tenga el tamaño donde va a estar, para que ocupe todo y no modificarlo con css porque se distorsiona. 🙂
 
Última edición:
HTML dijo:
Hola acabo de revisarlo, busca este código y selecciona la cabecera y luego modifica los css (float y width):

<div id="header"><div class="header section">
....
</div>

Ver el archivo adjunto 131410

- - - Actualizado - - -

Hola [MENTION=201475]luisocp288[/MENTION] te recomendaría que la imagen tenga el tamaño donde va a estar, para que ocupe todo y no modificarlo con css porque se distorsiona. 🙂
Hacer clic para expandir...

Muchas gracias por la respuesta! ya me había roto la cabeza y nada!
 
HTML dijo:
Hola acabo de revisarlo, busca este código y selecciona la cabecera y luego modifica los css (float y width):

<div id="header"><div class="header section">
....
</div>

Ver el archivo adjunto 131410

- - - Actualizado - - -

Hola [MENTION=201475]luisocp288[/MENTION] te recomendaría que la imagen tenga el tamaño donde va a estar, para que ocupe todo y no modificarlo con css porque se distorsiona. 🙂
Hacer clic para expandir...

Intento poner la imagen con el todo el margen, pero la hace mas chica al tamano ese inmediatamente, entiendo que esta dividido en 2 header, lo de gloat y wrapper lo encontre aqui, pero en eso que tengo que poner?

@media only screen and (max-width: 768px) {
*, *:before, *:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
#outer-wrapper { width: 100%; padding: 0px; margin: 0px; }
#header-wrapper { width: 100%; padding: 10px; margin: 0px; height: auto;}
#header { width: 100%; padding: 10px 0px; margin: 0px; float: none;text-align:center; }
#header2 { width: 100%; padding: 0px; margin: 0px; float: none;text-align:center; }
#header a img {margin:0px auto;padding:0px !important;}
#header2 .widget { float: none;padding:0px !important; }
#content-wrapper { width: 100%; margin: 0px; padding: 10px;background-image: none;}
#main-wrapper { width: 100%; padding: 0px; margin: 0px; float: none;}
#sidebar-wrapper { width: 100%; padding: 0px; margin: 0px; float: none; }
#
Hacer clic para expandir...
 
Última edición:
Hola acabo de revisar tu web y solo cambia el width al 100% segun la siguiente imagen, nuevamente te recomiendo que la imagen sea del tamaño que vas a poner ahí de esta manera no se distorsiona:

captura_web.webp

Luego para evitar los rellenos de las imágenes busca el siguiente código y modifica lo siguiente, esto quitara el rellano del lado izquierdo:

captura_web_2.webp

Después cambia el padding o relleno de la imagen de arriba y abajo, juega con los números para ver centrada y bien posicionada tu imagen, repito tu imagen tiene que ser del tamaño que vas a utilizar.

captura_web_3.webp

Te recomiendo que pruebes que selecciones una linea de código y modifiques los valores para ir ajustando y aprendiendo para que sirve cada código. También no olvides que estos cambios los modificas luego en el css y lo guardas si no no se verán actualizados. Suerte.

- - - Actualizado - - -

Hola acabo revisar tu tema y los css que te indico están incluidos dentro del tema de tu pagina no se si puedan ser modificados revisa si se pueden, si no podrías mover el tema a Blogger, tenemos una sección para esos casos, Saludos y buena suerte.
 
Me alegra saber que ya fue solucionado. Saludos. 🙂
 
buenisimo que lo pudiste solucionar, de lo contrario puedes contar conmigo para la proxima.
 
ya quedó? aqui estamos si necesitas algo
 
Hay que estar conectado o registrado para responder aquí.

Temas similares

4ngeluxpunk
Necesito ayuda para modificar la posición del flag utilizando CSS
Respuestas
0
Visitas
286
4ngeluxpunk
4ngeluxpunk
JuanOviedo
Necesito ayuda para modificar CSS de mi página
Respuestas
13
Visitas
647
Usuario eliminado 161040
U
Yzaul
Necesito ayuda para modificar un panel css comprado
Respuestas
2
Visitas
567
Yzaul
Yzaul
JoseCuevas
Necesito ayuda para modificar el color de la barra de menú en mi sitio de Wordpress
Respuestas
5
Visitas
825
JoseCuevas
JoseCuevas
Galactico77
Ayuda para migrar blog de Blogger a Wordpress
Respuestas
4
Visitas
373
Okaro
Okaro
Atrás
Arriba