Esta es una página que te ayudará a colocar accesorios al blog. Aprenderás como mejorar tu blog. Pasa y encontrarás de todo un poco.
Cargando

Cambiar la cabecera por una imagen (Plantillas Rounders) -48-

Cabecera de página.-Visualiza el título y la descripción de tu blog.

Para insertar una imagen en la cabecera necesitaremos agregar algunos códigos y a su vez hacer algunas modificaciones en el blog. Esto prácticamente resulta para la plantillas Rounders (2, 3, 4).
Te recomiendo que no te arriesgues hacer esto con las otras plantillas porque las modificaciones no van hacer iguales para las demás. Quizás esto te puede servir simplemente para guiarte.

En la cabecera de las plantillas Rounders tienen unas curvas, así que lo eliminaremos y luego agregamos la imagen:
1. Ir a Plantilla, después a Edición de HTML y clic en Expandir plantillas de artilugios. Entonces, ahora buscamos el siguiente código:

/* Blog Header
----------------------------------------------- */
#header-wrapper {
background:$titleBgColor url("http://www.blogblog.com/rounders/corners_cap_top.gif") no-repeat left top;
margin:22px 0 0 0;
padding:8px 0 0 0;
color:$titleTextColor;
}
#header {
background:url("http://www.blogblog.com/rounders/corners_cap_bot.gif") no-repeat left bottom;
padding:0 15px 8px;
}

2. Tendrás que eliminar el background de header-wrapper y la url en header. Después cambiar el valor de padding de header. Entonces el resultado seria así:

#header-wrapper {
margin:22px 0 0 0;
padding:8px 0 0 0;
color:$titleTextColor;
}
#header {
background:url("") no-repeat left bottom;
padding:0 0 8px;
}

3. Luego buscas el div con el id header-wrapper.
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='PruebaBlog (cabecera)' type='Header'>
<b:includable id='main'>
<div class='titlewrapper'>
<h1 class='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</h1>
</div>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
</b:widget>
</b:section>
</div>

4. Una vez ubicado <div id='header-wrapper'>, tienes que reemplazar todo el código anterior por lo siguiente (lo que esta en azul agregas):

<div id='header-wrapper'>
<div id='header'>
<a href="http://aquí-la-dirección-de-tu-blog">
<img src="http://aquí-la-dirección-de-tu-imagen" /></a>
</div>

</div>

* Al reemplazar todo esto, te saldrá un mensaje diciendo:
Están a punto de suprimirse los artilugios
Por favor, confirma que los siguientes artilugios deben borrarse. Se borrará toda la información de configuración de los artilugios.
  • Header1
Le das un clic en: Confirmar y Guardar

- La imagen que vas a colocar en la cabecera tiene que tener un ancho de 740px y un alto de 120px. Estos valores son simplemente un aproximado.
- Si deseas agregarle un ancho y un alto a tu imagen tendrás que hacer lo siguiente:
<img src="http://aquí-tu-imagen" width="500" height="100" />

**Por ejemplo he subido una imagen en Photobucket y he pegado lo siguiente:
<img src="http://i151.photobucket.com/albums/s137/andrewmusic1/Ayudaparaelblog.jpg" border="0" alt="Photo Sharing and Video Hosting at Photobucket" />
Y he añadido al último esto: /

Cambiar el título por una imagen
Cambiar la descripción por una imagen

9 Comentarios:

Zeioth dijo...

Fantastico me ha sido muy util, muchas gracias.

mato dijo...

FA, necesito tu ayuda urgenteeeeee. Tengo la Rounders 2, pero me da problemas al querer modificar la parte del div.

mandame un mail a matorj2@gmail.com y te paso mi msn.
sería de mucha ayuda. :)

bumpingblog dijo...

Muchas Gracias.Muy útil, mi consejo probadlo.

David Baldazo dijo...

hola. Quería prerguntarte sobre las curvas del rounders y ya que solo hablas de ellas aqui te lo comento. No tiene nada que ver con cambiar la cabecera por una imagen. ¿se puede cambiar el color de estas esquinas con curva para que sean como el fondo?
Gracias por adelantado.

K eitaro dijo...

como hago para centrar la imagen ya que me ha quedado muy chueca

Salvador Cancino dijo...

muchas gracias man..
tu blog me ha ayudado harto para reinvntar el mio qu lo tenia abandonado y que ahora lo volvere a tomar en cuenta.

excelente lo que haces.

cgaleatory dijo...

si quieren un buen tutto para esto:

En pczeros hay un excelente tutorial para que puedas cambiar el cambiar el fondo del blog, además hay algunos fondos para que puedas elegir y otros cientos de accesorios para el blog. Yo ya cambié el mio y quedo de 10. Muy bueno el post y un saludo para todoooossss!!

Juan Carlos Vendrell dijo...

Hola:

He diseñado una cabecera en formato JPG.

Quiero insertarla en mi Blog. Los pasos que estoy haciendo son: "personalizar", "diseño", "editar en configurar cabecera", "imagen desde tu equipo", "examinar (busco la imagen", y "guardar"

Despues de todo esto... nada de nada, como si no hubiera hecho nada. Se queda como antes.

Mi Blog es www.jcvendrell.blogspot.com

Y la parte (que creo que puede estar el problema es:

/* Blog Header
----------------------------------------------- */
#header-wrapper {
background: #044DA2;
margin:8px 0 0 0;
padding:0px 0 0 0;
color:$titleTextColor;
}
#header {
text-align: center;
background: url("http://img59.imageshack.us/img59/2245/headerjg6.jpg") no-repeat left bottom;
height:150px;
padding:0 15px 8px;
}
#adsense-top {
padding:42px 0 10px 5px;
}
#adsense-main {
padding:5px 0 10px 10px;
}
#header h1 {
margin:0;
padding:20px 20px 5px 5px;
line-height:1.2em;
font: $pageTitleFont;
}
#header a,
#header a:visited {
text-decoration:none;
color: $titleTextColor;
}
#header .description {
margin:0;
padding:5px 20px 20px 5px;
line-height:1.5em;
font: $descriptionFont;
}
-------------------

Espero que me puedas ayudar. Muchas gracias.

Saludos:

jonh dijo...

si mi blog tiene exito, sera gracias a ustedes.!!

Related Posts with Thumbnails
Últimos Post