WEWEWEWE - Ya se, la cabecera esta horrible. - Esto no es un mensaje subliminal.

Tarde para hacer una guía?

Wiiiiiiiiiiii Vacaciones al fin!(?
DBASHDBKASJ Algo tarde para publicar esta entrada (? Pero bueno dsnakjdnksja un chico llamado Paolo me pidió por face (y por muchos otros medios (??)que le ayudara con algunas cosas del blog hace unos días, le dije que ya publicaría una entrada con todo, por si a alguien mas le sirve...

La verdad es que soy una completa inútil con la edición de HTML, (Según Wikipedia-San... HTML, siglas de HyperText Markup Language («lenguaje de marcas de hipertexto»), hace referencia al lenguaje de marcado para la elaboración de páginas web. Es un estándar que, en sus diferentes versiones, define una estructura básica y un código (denominado código HTML) para la definición de contenido de una página web, como texto, imágenes, etc.). Lo poco que he logrado hacer en el blog es gracias a guías y tutoriales, y un poco por tocar todos los botones (?

Trataré de contestar las preguntas que me envió por orden D:  La primer fue de dónde saqué esta plantilla.
No se si en algún entrada anterior, seguramente cuando cambié la plantilla por última vez puse la guía que use para empezar mi plantilla "desde cero". Esa guía es la siguiente:

Ese es un blog genial con muchisimas guías, incluso de CSS que pueden ayudar mucho para aprender a mejorar sus bloggis c:

La siguiente pregunta fue cómo puse la cabecera sin los "bordes blancos" típicos de la plantilla.
A ver... dnsjkadnka yo no sirvo pa hacer guías e.é, el código del blog o de cualquier página está estructurado por las etiquetas <head>, <b:skin>(el CSS), y <body>
Lo único que hice fue eliminar el gadget de cabecera, (lean esta guia) poner la imágen dentro y por debajo de la etiqueta <body>, osea, que sea lo primero en aparecer en el cuerpo del blog (fuera de cualquier código del mismo), para que quede arriba y fuera de cualquier sección del blog. Lo mismo hice con las imágenes de navegación "Inicio", "Quién soy", etc.

En definitiva, y así ya contesto la siguiente pregunta que es cómo puse esas imágenes de navegación, el código de la parte de la cabecera es el siguiente:
<img height='564px' src='http://i1195.photobucket.com/albums/aa392/bruniiitaa/cabecera30_zps2f3cd541.png' width='600px'/>
<div id='Botones'>    <a href='http://rarestyle.blogspot.com/'>      <img onmouseout='this.src=&apos;http://i1195.photobucket.com/albums/aa392/bruniiitaa/principal_zps7cad96ab.png&apos;;' onmouseover='this.src=&apos;http://i1195.photobucket.com/albums/aa392/bruniiitaa/principal2_zps4fb6ec44.png&apos;;' src='http://i1195.photobucket.com/albums/aa392/bruniiitaa/principal_zps7cad96ab.png'/>    </a>    <a href='http://rarestyle.blogspot.com/p/afiliame.html'>      <img onmouseout='this.src=&apos;http://i1195.photobucket.com/albums/aa392/bruniiitaa/afiliacion_zps658ffb8a.png&apos;;' onmouseover='this.src=&apos;http://i1195.photobucket.com/albums/aa392/bruniiitaa/afiliacion2_zpsa8d1e65e.png&apos;;' src='http://i1195.photobucket.com/albums/aa392/bruniiitaa/afiliacion_zps658ffb8a.png'/>    </a>    <a href='http://rarestyle.blogspot.com/p/quien-soy.html'>      <img onmouseout='this.src=&apos;http://i1195.photobucket.com/albums/aa392/bruniiitaa/quiensoy_zpsee2f3500.png&apos;;' onmouseover='this.src=&apos;http://i1195.photobucket.com/albums/aa392/bruniiitaa/quiensoy2_zpsf89fd832.png&apos;;' src='http://i1195.photobucket.com/albums/aa392/bruniiitaa/quiensoy_zpsee2f3500.png'/>    </a>   <a href='http://rarestyle.blogspot.com/p/galeria-de-artes.html'>      <img onmouseout='this.src=&apos;http://i1195.photobucket.com/albums/aa392/bruniiitaa/galeria_zps5e3ab480.png&apos;;' onmouseover='this.src=&apos;http://i1195.photobucket.com/albums/aa392/bruniiitaa/galeria2_zpse1c46388.png&apos;;' src='http://i1195.photobucket.com/albums/aa392/bruniiitaa/galeria_zps5e3ab480.png'/>    </a></div>

La parte del código en azul es la imagen de la cabecera, las partes del código en rosa, verde, purpura y amarillo son los botones de navegación que están debajo. Estos botones están dentro de la etiqueta <div id='Botones'> que sirve para marcar una divición en el código y ponerle atributos particulares (se puede hacer dentro de la misma etiqueta, o por ejemplo, en la sección CSS de nuestro blog/página que queda más bonito)

Dentro de la etíqueta <b:skin> (el CSS del blog) tengo las siguiente características determinadas para la sección "Botones":
#Botones {
background:url(http://i1195.photobucket.com/albums/aa392/bruniiitaa/fdasgfgfsdgs_zpsfa54db70.png);
border:1px solid #111111; 
width:920px;
padding:15px;

color:#FFFFFF;
border-top-left-radius: 15px;
border-bottom-right-radius: 15px;

}
Para saber todo lo que pueden hacer con el CSS y como usarlo, deberían ver una guía. Pero explicaré brevemente lo que hacen las características que puse allí.

  • La etiqueta en rojo es la llamada a la división.
  • El atributo en verde es el fondo que le designamos a ésta, en este caso una imagen, pero se puede poner un color con: background-color:#FFFFFF; (está en colores hexadecimales, también se pueden poner en octales o el nombre del color en inglés, como por ejemplo RED, BLACK, etc.)
  • El atributo en azul del código es el grosor y forma del borde de la sección.
  • El atributo "width" marca el ancho de la sección (y "Height" la altura, que en este caso no lo puse por que lo considere innecesario). "padding" es la distancia entre elementos dentro de la sección, (en este caso en pixeles, también se puede usar porcentajes o pulgadas) también está "margin" para agregar separación con los demás elementos de la página (no lo puse porque entonces la imagen de cabecera estaría separada de la división, y no era el efecto que quería lograr(? ).
  • El atributo "color" es para designar el color de la fuente dentro de la sección, que ahora que lo veo no se para que carajo lo puse (?
  • Los atributos "Border-radius" es para redondear los bordes de la sección, pueden usar ésta página para conseguir el código con el efecto que quieran.
DSANjsandskja de verdad, les recomiendo ver alguna guía para CSS, porque aquí no expliqué ni una mierda(?

Y creo que con eso ya contesté todas tus preguntas Paolo C: si tienes más dudas no dudes en escribirmelas, veré si puedo ayudarte, pero como dije, recomiendo que leas una guía más "profesional" D:
DSANjdkak Saludos, y disculpen mi inutilidad al escribir y mis retrasos(?

4 comentarios :

  1. jajaja me encanta tu tutorial en el que solo dices soy una completa inutil XDDDDDD eres genial en serio XDDD

    ResponderEliminar
  2. ahh increíble siempre te quise preguntar donde habías conseguido tus plantilla siempre las haces tan geniales gracias por el tuto ru~

    ResponderEliminar
  3. Muy buen tutorial! jajaja, la verdad es que yo tampoco se mucho de html, por lo que igual aprendo toqueteando y jodiendo plantillas <333 XDDDDD

    Saludos!

    ResponderEliminar

¿Te gustó esto? ¿No te gustó? ¿Tienes alguna sugerencia? ¿Quieres que siga tu blog/página? ¿Te parezco atractiva?
Por favor, deja un comentario :D
Hazlo, ambos sabemos que quieres hacerlo... SINO EL CHUPACABRAS TE COMERÁ :3 ♥