Introduciendo plantilla Vintage Vieparoles.

Muchos de los que siguen este blog desde hace un par de meses ya habrán visto esta plantilla. Cuando cambio mis diseños siempre suelo guardar mis plantillas, en caso de que algún día quiera volver a usarlas.... Pero vamos a ser sinceros. Nunca volveré a usarlas, porque es mi manera de ser; me gusta renovar y cuando lo hago quiero que sea bien distinto a lo anterior.

Luego de meditarlo, decidí que aparte de recibir pedidos personalizados, subiré mis plantillas que si bien me siguen gustando, las he dejado atrás, más las plantillas que suelo hacer (completamente nuevas) cuando peco de ociosa y tengo ideas.  Sé que hay muchos que por a o b motivo prefieren descargar plantillas personalizadas, yo misma lo hacía hace un tiempo (Dios te bendiga Lasantha Bandara) Así que aquí estaré yo aportando mi granito de arena :)

Así es como se veía la plantilla cuando la instalé yo:




Y ahora se ve algo así, listo para ser personalizada por quién lo acoja;




Nota 22/06/13: debido a la masiva caída de imágenes que experimente hace poco, tuve que rehacer la imagen del fondo del título, lo que no me quedó exactamente igual (ya no tenía todas las imágenes) pero si muy parecida. Captura pendiente de subir. 

Ahora, vamos a las explicaciones;

Para empezar, para lo que no saben como se instala una plantilla.

Paso 1. 
Paso 2. 
Paso 3.

Esta plantilla tiene la cabecera dividida en dos de modo que los botones y cualquier otra cosa que deseen agregar (en mi caso fueron las secciones) estén alineados con la cabecera. Supongamos que desean que la cabecera no este dividida porque quieren poner un banner completo.

Vayan a edición HTML, presionen CTRL+F y busquen esto


/* Header
----------------------------------------------- */

Debajo encontrarán esto:
.header {width:55%; float: left; margin:0 auto 1%;}
.header2 {width:45%; float: right; margin:0 auto 1%;}

Eso es lo que van a borrar.

Luego buscaran esto:

<div class='region-inner header-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Título del blog (cabecera)' type='Header'/>
</b:section>
<b:section class='header2' id='header2' showaddelement='yes'/>
<div style='clear: both;'/>

</div>

Borran lo que esta en negrita. Obviamente en Título del blog estará escrito el nombre de sus blogs :) Y eso es todo; ya tienen una cabecera normal.

Lo botones de las redes sociales tienen efecto gradualfader (es ese efecto en donde una imagen es opaca o muy clara y cuando le pasas el mouse encima "se prende" o vuelve a su color y opacidad normal) Si desean usar los botones solo inserten este código en un gadget html.

<div align="center">
<a href="TU_LINK_AQUÍ"><img src="http://i47.tinypic.com/16l195.png"  class="pushbutton gradualfader" alt="titulo sección" title="twitter" height="60" width="60" />
</a>
<a href="TU_LINK_AQUÍ"><img src="http://i50.tinypic.com/j7dzs9.png"  class="pushbutton gradualfader" alt="TITULO SECCIÓN" title="goodreads" height="60" width="60" />
</a>
<a href="TU_LINK_AQUÍ"><img src="http://i47.tinypic.com/33yt36v.png"  class="pushbutton gradualfader" alt="TITULO SECCIÓN" title="facebook" height="60" width="60" />
</a>
<a href="mailto:contacto@TU_MAIL_AQUÍ"><img src="http://i48.tinypic.com/2di0uo1.png"  class="pushbutton gradualfader" alt="TITULO SECCIÓN" title="contacto" height="60" width="60" />
</a></div>


El menú.

El código para personalizar sus links se ubica debajo de </header> y es este:

<div id='chromemenu'> 
<ul>
<li><a href='#'>Home</a></li>
<img alt='description' height='20' src='http://i50.tinypic.com/288z9xh.png' width='24'/>
<li><a href='#'>Título 1</a></li>
<img alt='description' height='20' src='http://i50.tinypic.com/288z9xh.png' width='24'/>
<li><a href='#'>Título 2</a></li>
<img alt='description' height='20' src='http://i50.tinypic.com/288z9xh.png' width='24'/>
<li><a href='#'>Título 3</a></li>
<img alt='description' height='20' src='http://i50.tinypic.com/288z9xh.png' width='24'/>
<li><a href='#'>Título 4</a></li>
<img alt='description' height='20' src='http://i50.tinypic.com/288z9xh.png' width='24'/>
 <li><a href='#'>Título 5</a></li> 
</ul>
 </div>

Las van donde deberían ir los links, así que eso es lo que tienen que reemplazar. Lo que está en rojo es el código de los separadores, en este caso esa imagen de bicicletas que pueden reemplazarlo según el gusto de cada uno o dejarlos si es que les gusta. Donde dice Titulo... va el título del link, claro. 

Ahora si quieren cambiar el estilo del menú se ubican sobre <head> y buscan este código.

  <style type='text/css'>
      #chromemenu{
 text-align: center;
  font-size: 17px;
color: #6c432e;
font-family: rochester;
  background: #fff; width: 100%;} 
border: px solid #FAFAFA; ---&gt; borde del menú   
padding: 3px;
       }
      #chromemenu:after{ /*Add margin between menu and rest of content in Firefox*/
      content: &quot;.&quot;;
      display: block;
      height: 1px;
      clear: both;
      visibility: hidden;
       } 
      #chromemenu ul{
      width: 100%;
       background: transparent; 
      padding: 10px1 0;
      margin: 0;
      text-align: center; /*set value to &quot;right&quot; for example to align menu to the left of page*/
       } 
      #chromemenu ul li{
      display: inline;
       } 
      #chromemenu ul li a{
      color: #4e2f1e; ----&gt; color de los enlaces
      padding: 5px;
      margin: 10;
      text-decoration: none;
       } 
      #chromemenu ul li a:hover{
      color: #92624a; ---&gt; color de los enlaces al pasar el cursor      } 
</style>

Y creo que el resto se explica por sí solo. Espero haberles sido de ayuda.


Un saludo.

*Agregado 26/03/13:

Esto es un error de mi parte, pero olvide explicar que deben hacer si la fecha no sale como debería. Si ingresan al blog de Gem@ tendrán una explicación más que detallada para ayudarse :) 

18 comentarios:

Nyra dijo...

Esta genial!!!! Yo tengo pensado crear una para el 4° cumpleaños del Blog :)

Just me dijo...

Siempre quedo fascinada con todos tus diseños, algún día voy a pedirte que me hagas uno. Enserio, los amo!
Un beso :)

Inna Chérie dijo...

¡Qué bien! Yo por ahora estoy conenta con mi plantilla (que busqué en internet :/ ) pero quizá me pase algún día y me descargue esta u otra... ¡Me encanta tu estilo!

Me encantaría saber hacer plantillas... ¿Cómo las haces?

Hannah; dijo...

Qué idea tan genial *____________* Yo no entiendo ni mu de estas cosas, pero seguro que alguien sabrá darle un buen uso :3

Belén Vieparoles dijo...

Jugando con el html de la plantilla y mirando trucos en blogs dedicados a tutoriales :)

narcotic_doll dijo...

me parece una idea estupenda, y estoy segura que mucha gente se las va a descargar *____*
a esto le llamo yo regalo de Navidad.

karen dijo...

Me encantó ese diseño :)
justo que quería cambiar el aspecto de mi blog ^^
veo si me animo y lo utilizo, gracias!

Claudia S. dijo...

Ok, si hubieras publicado esto antes me hubiera ahorrado muchos dolores de cabeza con mi plantilla! Esta me gusta mucho! Asi que la tendré presente para un futuro *3* Gracias!

Mary Ann♥ dijo...

Hermosa, como todas tus plantillas :)

lainmortalidaddellibro dijo...

Por fin. Llevo todo el día buscando alguna plantilla de este estilo y no encontraba ninguna! La tuya es preciosa así que la voy a utilizar! :) Muchísimas gracias!

Besos!

Isabella Marie Mars dijo...

¡Que hermosa plantilla! La voy a utilizar para mi blog literario. ¡Muchas gracias! :D

Unknown dijo...

este es mi blog http://emancipacionproclamacion.blogspot.com.es/

No puedo ver bien la imagenes del blog, antes se veia ¿se puede arreglar?

Belén Vz dijo...

Sí se puede. Cómo verás hay una pequeña nota de explicación, pero básicamente, si te vuelves a descargar la plantilla, te descargas una versión ya arreglada del problema :)

Saludos.

Unknown dijo...

Todavia no el fondo me sale mal me sale esta imagen http://1.bp.blogspot.com/-zTSiHfXeLzo/UJg_qPy2mSI/AAAAAAAABlE/47uDFpheAkA/s0/grunge_wall.png

Los demas iconos se han arreglado

Belén Vz dijo...

Revisé lo que me dijiste y lo corregí :) ahora sí puedes descargarla completamente arreglada.

Kath S. dijo...

Me gustó mucho tu plantilla y la estoy usando ahora!
Gracias ;)

Mics Ivashkov dijo...

me encanta la plantilla, soy nueva en este así que no entiendo mucho, ya pude borrar esto:


Pero no encuentro donde esta esto: header {width:55%; float: left; margin:0 auto 1%;}.header2 {width:45%; float: right; margin:0 auto 1%;}

Esto es lo que me aparece debajo de Header:













No se que hacer :S

Carla Venegas dijo...

Me gusto mucho el diseño y lo usare :)

Publicar un comentario

 
Vieparoles Avenue© ▲ Diseñado por Belén Vieparoles ▲ 2014-2015