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; ---> borde del menú
padding: 3px;
}
#chromemenu:after{ /*Add margin between menu and rest of content in Firefox*/
content: ".";
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 "right" for example to align menu to the left of page*/
}
#chromemenu ul li{
display: inline;
}
#chromemenu ul li a{
color: #4e2f1e; ----> color de los enlaces
padding: 5px;
margin: 10;
text-decoration: none;
}
#chromemenu ul li a:hover{
color: #92624a; ---> 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 :)
