miércoles, 16 de octubre de 2013

La semana temática 1: Darle estilo a nuestro blog- entrada anterior-reciente

¡¡¡Hola soletes!!!
¿Ya habéis cambiado el diseño de vuestros enlaces!
¿Ha ido todo bien!

Hoy toca la segunda entrada de esta primera semana temática.¿Queréis saber qué os voy a enseñar a hacer hoy! Pues veámoslo.Sustituir por imágenes "entrada reciente" "entrada anterior" "pagina principal"

¿Y qué quiero decir con esto! Pues que vamos a cambiar la parte de abajo de nuestro blog, exactamente los"entrada más reciente" "página principal" "entrada antigua" y los vamos a convertir en imágenes que hagan la misma función.

Empezamos igual que el otro día, entrando en plantilla y editar HTML.

Una vez estamos dentro, vemos todo nuestro código HTML. Respiramos un par de veces hasta tranquilizarnos, y a ello.

Abrimos nuestro blog en una pestaña nueva, y vamos a cotillear cómo funciona, porque en función de la plantilla que tengamos, tendremos que sustituir una cosa u otra. Vais hasta abajo del todo, donde se encuentran los enlaces que queremos modificar. Pinchamos en uno de ellos, indiferente en cual, con el botón derecho, y nos sale un desplegable. En el despegable elegimos la última opción, inspeccionar elemento. Y nos saldrá un recuadro con código.

buscar en el codigo html

Dependiendo del diseño que tengamos, el texto a buscar será distinto, por ejemplo en este es "blog-pager" mientras que en el del rincón de Algodón es "blog pager" sin guión, son parecidos pero no iguales. Algo así será lo que tenéis que buscar. En la búsqueda os saldrán varios antes "blog-pager" antes, pero los que os interesan son los que son iguales a los que habéis "inspeccionado" en el blog.

Este es el código que nos interesa, ya modificado:

Y ahora os explico qué he modificado:
Tenemos que borrar el texto que hay entre el  ">" y"</a>"  y añadir el código de la imagen (en esta captura ya está el código de mis tres imágenes).

Os explico cómo coger el código, por si acaso. Subimos las imágenes  que queremos que sustituyan al texto en una entrada cualquiera. Lo más importante que tenéis que tener en cuenta, es que lo mejor es que las subáis ya con el tamaño que queréis que tengan en el blog (las mías son de 100px x 100px). Son estas:


 

Una vez subidas...¿Qué parte del código de las imágenes hay que pegar!

Este por ejemplo es el código de mi imagen del botón derecho.

Lo que tendríais que pegar en el código HTML sería lo que empieza  en "<img..." hasta "/>". Es decir:
Ponéis el código de las tres imágenes en sus sitios correspondientes, previsualizáis la plantilla para ver que no habéis estropeado nada (os saldrán solo el icono de home, y el de entradas anteriores, porque la plantilla se sitúa en la última entrada que habéis publicado, y por lo tanto no hay entradas más recientes). Y si todo está bien, guardáis y ya lo tenéis, y si algo falla...¡Aquí estoy!

Espero que os sea útil el tutorial y os recuerdo que podéis enlazar vuestra semana temática si os animáis a participar aquí.

Por cierto, si queréis ver un toque aún mas guay al cambiar los enlaces  (un poco más complejo de realizar, pero en esencia lo mismo) pasaos a ver cómo quedaron en el rincón de Algodón, a mi me parece que quedaron monísimos.

Un besito personitas, y que tengáis un buen día (¡ya solo quedan dos para el viernes!)

9 comentarios:

  1. Hola Eva!
    No sabía que dominabas el intrincado mundo del HTML!! Es admirable jajaja. Me encantaría apuntarme a esta iniciativa pero voy de culo nena, a ver la semana que viene, de dentro de dos meses? buen... jajaja.
    A mí me encantan los enlaces del rincón de Algodón, los hiciste tú? xD! son muy cuquis!
    Un besito guapi!
    Un lienzo en blanco para todos

    ResponderEliminar
    Respuestas
    1. Un poquillo, tampoco mucho! Tengo intención de dominarlo más, aún se me resiste!!!! No te preocupes!!! La próxima será^^ Siiiii, los hice yo, me costó un buen rato que funcionasen, pero lo conseguí! Besitos preciosa!!!^^

      Eliminar
  2. ¡Cuántas cosas tenemos que aprender para nuestros blogs! Me encanta que nos ayudes un poquito, por eso tienes un premio Liebster Award aguardándote en www.bellezaerestu.com. Espero que te guste.

    ResponderEliminar
    Respuestas
    1. Me alegro de que pueda servirte de algo un poquito de lo que sé guapísima! mil gracias por el premio!!! Un beso enorme!!!

      Eliminar
  3. Ay cuantas cosas sabes, yo me monto lios yo solita cuando intento cambiar cosas :((

    Pasate por mi blog bonita tienes un regalito :P

    Besote!!!!

    ResponderEliminar
    Respuestas
    1. Lo mejor es que antes de ponerte a tocar el código guardes una copia de seguridad, y luego ya así lo haces con total tranquilidad :) voy ahora mismo! besitos!!!

      Eliminar
  4. Vaya, intenté seguir tus pasos pero... ¿puedes creer que no encuentro en el HTML lo de blog-pager? He comprobado que era eso lo que tenía que buscar pero nada... :(
    Muchas gracias de todos modos ^^

    ResponderEliminar
    Respuestas
    1. Uhm... estoy tonta XD
      ¡¡Ya me ha salido!!

      Eliminar
    2. ¡Me alegro de que te haya salido guapísima! Ya he pasado a ver cómo te quedaron, muy chulos los pergaminos, qué buena idea! :) un beso grandote!!!!

      Eliminar

¿Quieres dejar un comentario! ¡Gracias! Me hará mucha ilusión leerlo :)