Consultoría Blogger - Resolviendo dudas de tutoriales I

Hola a todos!!!
Primero de todo muchas gracias a Celia por brindarme la oportunidad de ayudarla y de esa forma coger experiencia y darme a conocer a su público.
Mi nombre es Aisha, algunos me conoceréis por mi blog de cocina, y también tengo otro proyecto, totalmente diferente, que se llama Elai the Blogger.
Cuando vi en Facebook que Celia se veía desbordada para contestar a las dudas de tutoriales antiguos, no lo dudé y le ofrecí mi ayuda, y aquí estoy, intentando resolver esas dudas que os han surgido sobre los tutoriales.
He intentado no olvidarme ninguna de las preguntas realizadas en cada tutorial, en caso de que me haya dejado a alguien, y si con las aclaraciones que hoy os dejo aquí no le queda claro, sólo tiene que decirlo.
Para este primer post he escogido dos tutoriales. Por supuesto, si después de leerme os siguen quedando dudas, por favor dejadlas en los comentarios y muy gustosamente os contestaré.
Por favor, leeros bien el tutorial del que dejo enlace, y mi respuesta, y si aún así os sigue quedando alguna duda, por favor déjala en los comentarios y te contestaré lo antes posible :)

Instalar separadores entre las entradas de blogger.

Primero de todo tenéis que estar en Plantilla ---> Editar HTML.
Haced click dentro del código y entonces pulsáis Ctrl + F simultáneamente
Es ahí donde tenéis que poner lo siguiente para realizar la búsqueda:
<b:include data='post' name='post'/>
Y si no os lo encuentra, entonces probáis con:
include data='post' name='post'
Le dáis al intro y veréis que os marca en amarillo lo que ha encontrado. Justo debajo es donde tenéis que poner la segunda parte del código que os da Celia:
   <center><img src='URL de la imagen'/></center>
Muy importante!!! :
No quitéis las comillas '    ' cuando pongáis la URL de la imagen.
Tenéis que substituir las palabras: URL de la imagen, por la dirección de la imagen. Yo subo mis imágenes en Photobucket, por lo que mi código quedaría así
<center><img src='http://i295.photobucket.com/albums/mm126/amar231070/corazonesazuloscuro_zpsfbbc7138.png'/></center>
Si copias mi url y la ponéis en el navegador, verás que aparece la imagen que he subido a mi photobucket.
Lo he puesto en un blog de pruebas y aparece todo correctamente.
Pregunta: la barra no sale entre los posts, sino después de ellos:
Mercedes Cordeiro González: He ido a ver tu blog y he visto que no tienes el separador, supongo que la has quitado. Como vi que en tu blog utilizas la opción "Leer más", hice la prueba insertando esta opción en mi blog de pruebas y la barra separadora seguía saliendo bien.
Mi consejo es que te revises los pasos y compruebes que has buscado bien el código inicial y que justo debajo insertas el código que da Celia. Tiene que quedarte justo así
   <b:include data='post' name='post'/>
   <center><img src='http://i295.photobucket.com/albums/mm126/amar231070/corazonesazuloscuro_zpsfbbc7138.png'/></center>
Pregunta: la imagen de la barra separadora no se ve:Si no te aparece la imagen es porque, o bien no has puesto los signos '   ' antes y después de la URL, o porque la URL de tu imagen está equivocada. Comprueba que la URL que coges de tu alojador de imágenes es el enlace directo a la imagen.
Estas eran las dos preguntas pendientes de este tutorial.

Instalar menú horizonal con pestañas en Blogger

Primero tenéis que miraros bien el tutorial que os pone Celia y no saltaros absolutamente ningún paso. Leedlo bien una vez y luego id haciendo paulatinamente.
Ahora paso a resolver las dudas que os ha surgido:
Pregunta: Poner subpestañas a un menú que ya tenemos:
Los bloques que comprenden cada pestaña comienzan por <li> y acaban con </li>
Luego están las subpestañas, de las cuales su bloque comienza por <ul> y acaba en </ul> y todo lo que haya entre esas dos marcas serán las diferentes subpestañas, de las cuales cada una comienza por <li> y acaban con </li>
Vamos a poner un ejemplo, queremos una pestaña llamada TUTORIALES, y luego dos subpestañas llamadas BLOQUE 1 y BLOQUE 2
<li> (aquí está comenzando el bloque de la pestaña TUTORIALES)<a href="#">TUTORIALES</a><ul> (aquí está comenzando el bloque de las subpestañas)<li><a href="http://serviciosdisenografico.blogspot.com.es/p/predisenados.html">Prediseñados</a></li><li><a href="http://serviciosdisenografico.blogspot.com.es/p/banners.html">Banners</a></li></ul> (aquí está comenzando el bloque de las subpestañas)</li> (aquí acaba el bloque de la pestaña TUTORIALES)
Por consiguiente, si tienes una pestaña ya creada tienes que buscar su nombre que estará marcado por <li> y </li> y entre estos dos códigos deberás poner el bloque de las subpestañas.
En cuanto a lo que comentas de los colores, has de conocer el código del color que quieres poner y cambiar los códigos de color que Celia puso en su tutorial. Estos códigos de color se cambian en el apartado de código CSS que ponemos justo antes de : ]]></b:skin> y que es la última parte del tutorial de Celia.
Nati: Si aún sigues teniendo el mismo problema con el menú, por favor déjame el link a ese blog de pruebas y me lo miro, porque realmente no entiendo a qué te refieres... Gracias!!
Pregunta: ampliar el espacio de las subpestañas para poder escribir más:
El código CSS del menú está diseñado para 200 pix de ancho, en caso de querer hacerlo mucho más largo has de modificar las siguientes partes del código. No te pongo el código de principio a fin porque es muy largo. Busca los apartados que te pongo más abajo. En la parte que te marco en rojo  modifica los pix de ancho por la cantidad que necesites.
En esta parte del código indicáis cuánto mide la subpestaña para que le ponga color a todo el fondo de la misma.

.menu li ul {
background:#A4A4A4; /* Color de fondo del submenú */
display:none;
height:auto;
padding:0px;
margin:0px;
position:absolute;
width:200px; /* Ancho del submenú */
z-index:100;
border-top:1px solid #fff; /* Borde superior del submenú */
}
Y también tienes que modificar esta otra parte, poniendo exactamente la misma cifra en width que has puesto en la parte anterior. Aquí estáis modificando la cantidad de caracteres que os caben en la subpestaña.
.menu li li {
display:block;
float:none;
margin:0px;
padding:0px;
width:200px;
}

Pregunta: No se ven las pestañas del menú, sólo cuando pasamos el ratón por encima:
La cuestión de que se vean sólo cuando pasas el ratón por encima es porque seguramente pusiste el color del fondo de pestaña blanco y el color de la letra también. Pero como el color de fondo al pasar el ratón era otro, por eso se te veían sólo pasando por encima.
Ole Accesorios: Has de seguir todos y cada uno de los pasos cuidadosamente, sin saltarte ninguno. Y teniendo en cuenta de dónde se coloca cada parte de código, la parte que va debajo de "Tabs", la que va antes de "]]></b:skin>" y la que va luego en el gadget html.
Pregunta: centrar el menú en el ancho del blog:
Para centrar el menú tienes que buscar el código CSS que pusimos antes de ]]></b:skin>, y que comenzaba de esta forma:
/* Menu horizontal con buscador----------------------------------------------- */#menuWrapper {width:100%; /* Ancho del menú */height:35px;
.
. etc
Y al final de ese código, añadir lo siguiente:.menu {
margin-left: 150px; /*Juega con el % o los píxeles para centrar el menú entero*/
}
#menu {text-align:center !important;}
#menu li {display:inline !important; float:none !important; text-align:center !important;}
Ana Izquierdo Garijo: El tema de la plantilla móvil es una cosa aparte y que se ha de modificar desde otro sitio. Lo siento pero en este post no puedo responder a esa consulta. Queda pendiente :)
Estas son las respuestas a vuestras consultas de estos dos tutoriales. Si aún así seguís con dudas, no os sale, etc, por favor dejad en este post vuestro mensaje y enlace a vuestro blog y así podremos mirar con más detenimiento.
De nuevo muchas gracias a Celia por darme esta oportunidad y muchas gracias a vosotros por leerme y dedicarme un ratito de vuestro tiempo.
Saludos!!!
Aisha
Elai The Blogger
Puedes encontrarme en:FACEBOOK  //  TWITTER //  BLOGLOVIN

---

Suscríbete a mis entradas por email ¡para no perderte nada!
♥ Las recibirás en tu bandeja de entrada el mismo día que sean publicadas ♥