Hip-Hop Plantilla para Blogger

Nombre:	Hip-Hop
Diseñador:	Alejandro Minor
Compatibilidad:	Google Chrome, Mozilla Firefox, Safari, Opera, Internet Explorer
Características:	Plantilla para Blogger, 2 columnas, 900px de ancho, Menu con submenus, Tipografia personalizada,  Cabecera slideshow, Transparente.
Incluye:	Plantilla XML, Instrucciones de instalación, Licencia

Hip-Hop la primera plantilla para blogger libre para su descarga de Css Soldier. Es una plantilla con la tipografia "Krashnormal" integrada en el titulo del blog, en el menú, en el titulo de las entradas, y títulos de los widgets, el menu transparente con submenus,  la cabecera es un slideshow de 4 elementos, con el contenido del blog transparente.

Personalización:

Menu:  

Para editar los elementos del menu accede a Diseño y edita el gadget llamado "Top Menu".

En URL del sitio nuevo agregaremos la dirección de enlace de nuestro Item.
En Nuevo nombre del sitio agregamos el titulo del Item.
En la parte inferior izquierda van apareciendo nuestros Items según los agregamos, estos se ordenan con las flechas que están a un lado de la opción "Eliminar"
Nota: Si usted necesita un menú multi-nivel, por favor introduzca "-" (guión) antes del nombre del subtema, por ejemplo: "-Submenu Item" y este aparecerá como SubItem del que este arriba de el.

Agregar boton "Mas información" (tipo ver mas):

 Para agregar este botón y nos muestre el resto del contenido de la entrada al dar clic en el solo tenemos que aplicar un salto de linea desde el "Panel de edición de entradas", nos saldrá una linea esta linea indica que de donde esta esta hacia arriba sera el contenido mostrado en la pagina de inicio (el resumen) y de esta para abajo el resto del contenido, el cual es mostrado al pulsar el botón "Mas Información"

Solucion de errores: 

Si nos marca error al guardar la configuración del Gadget "Top Menu" accede a "Blogger in draft" y haz el procedimiento nuevamente.
Error URLs identicas en el menu, hay un problema cuando ponemos un mismo URL en distintos Items del menu ya que al entrar en uno de ellos este aparece de un color diferente y si tienes el mismo URL en otro Item este tambien se mirara con el mismo color, para solucionar este error agrega un "#" (gato/almohadilla/numeral) al final del enlace y otro mas según se requiera. Ejemplo:

http://csssoldier.blogspot.mx/#
http://csssoldier.blogspot.mx/##



De esta forma agregamos un # (gato/almohadilla/numeral) mas por cada vez que necesitemos agregar un enlace igual.

Slideshow:

Para cambiar las imágenes del Slide accede a Plantilla | Edicion HTML buscamos la siguiente linea:

.Soldier-slideheader0 {

Cambia la parte  que esta en roja por el URL de tu nueva cabecera

.Soldier-slideheader0 {
    background-image: url('https://lh4.googleusercontent.com/-L3ENC-tCb6w/UWHpNwJ_MoI/AAAAAAAACec/gqKCTJJ2SfE/s2048/slideheader0-object996529909.png'),  url('https://lh3.googleusercontent.com/-TlYxx-XaJeU/UWHpNcFgHsI/AAAAAAAACeU/UzD6fj7owck/s2048/slideheader0.jpg');
        background-size: 102.89% 23.43%,  100%;
        background-position: -4px -1px,  0 0;
    background-repeat: no-repeat;
}

Asi mismo hazlo con :

.Soldier-slideheader1 {
.Soldier-slideheader2 {
.Soldier-slideheader3 {

Cambia lo que esta en rojo por los URLs de tus imagenes para el Slideshow.

.Soldier-slideheader1 {
    background-image: url('https://lh5.googleusercontent.com/-2EB3SAfCR64/UWHpPdii-2I/AAAAAAAACes/t8FqTwGNmq8/s2048/slideheader1-object498823592.png'),  url('https://lh5.googleusercontent.com/-sbpGXPKi72Q/UWHpOxe8PiI/AAAAAAAACek/QhPuZlSRcBU/s2048/slideheader1.jpg');
        background-size: 102.89% 23.43%,  100%;
        background-position: -4px -1px,  0 0;
    background-repeat: no-repeat;
}
.Soldier-slideheader2 {
    background-image: url('https://lh5.googleusercontent.com/-Tv1BfN9_Wwg/UWHpQsiNb5I/AAAAAAAACe8/rMwlgi1JPxk/s2048/slideheader2-object189747144.png'),  url('https://lh3.googleusercontent.com/-ANDnzjc9mEg/UWHpQSdQNTI/AAAAAAAACe0/evzjZIWVk88/s2048/slideheader2.jpg');
        background-size: 102.89% 23.43%,  100%;
        background-position: -4px -1px,  0 0;
    background-repeat: no-repeat;
}
.Soldier-slideheader3 {
    background-image: url('https://lh5.googleusercontent.com/-WjArtSgXYCs/UWHpSpnVM8I/AAAAAAAACfM/NGbuzK9E0zA/s2048/slideheader3-object1196801057.png'),url('https://lh6.googleusercontent.com/-jfjaH8VXj5k/UWHpTZ7bOBI/AAAAAAAACfU/aDDocJC4NgY/s2048/slideheader3-object215196545.png'),  url('https://lh5.googleusercontent.com/-xcch5lwDyTY/UWHpSZviufI/AAAAAAAACfE/uuiDd3_wg3M/s2048/slideheader3.jpg');
        background-size: 102.89% 23.43%,20.78% 99.71%,  100%;
        background-position: -4px -1px,357px 22px,  0 0;
    background-repeat: no-repeat;
}

Lo que esta en azul es una imagen PNG del hombre bailando Breakdance en el slide 3, para eliminarlo basta con quitar los que esta en azul y en su lugar poner un # (gato/almohadilla/numeral) quedando así:

.Soldier-slideheader3 {
    background-image: url('https://lh5.googleusercontent.com/-WjArtSgXYCs/UWHpSpnVM8I/AAAAAAAACfM/NGbuzK9E0zA/s2048/slideheader3-object1196801057.png'),url('#'),  url('https://lh5.googleusercontent.com/-xcch5lwDyTY/UWHpSZviufI/AAAAAAAACfE/uuiDd3_wg3M/s2048/slideheader3.jpg');
        background-size: 102.89% 23.43%,20.78% 99.71%,  100%;
        background-position: -4px -1px,357px 22px,  0 0;
    background-repeat: no-repeat;
}