FOLLOW ME!

SOCIAL NETWORK

AFILIAME
Not A Single Song
Para más botones, haz clic aquí

Cómo poner una imagen en el título de tus gadgets

20 ago 2012
Hoy veremos cómo hacer y colocar las imágenes en los títulos del sidebar así como tengo yo, esos que dice "Infosite", "Quick Menu", "To do list", etc.


NOTA: Esto sirve para TODAS LAS PLANTILLAS

1. Lo primero es hacerlos en el Photoshop, o Photoscape.

Medidas: Depende del ancho de su sidebar. Como mi sidebar es de 300 px yo los suelo hacer de 250 px (de ancho) y de altura 75 o 100 px {250x75px}.

2. Yo los hago en PNG, es decir sin fondo, es mejor. Escribes el nombre del apartado de tu sidebar y puedes poner algun brush o una foto recortada con el marco circular. Cómo en el que yo hice:



3. Luego le vas cambiando cada vez el nombre y los vas guardando. Cuando los tengas todos, los vas a subir a Tinypic, Photobucket, etc.

Y ahora sí. Pon atención. Esta parte no es difícil pero puede resultar un poco liada.

4. Te vas a la pestaña "Plantilla" de tu blog y entras en la "Edición de HTML".

5. Abres el buscador (CTRL+F) y escribes el nombre de alguno de tus gadgets del sidebar. Por ejemplo "Infosite".

6. Vas a recordar el "widget id" (o te lo anotas) y ahora en el buscador vas a poner: ]]></b:skin>



7. Por encima de esa linea vas a pegar este código:
#HTML8 h2 {background: url(URL de la imagen) no-repeat top;height: 75px;}
- Donde pone "HTML 8" lo cambias por el "widget id" que habías visto antes.
- En URL de la imagen, pegas el link de la imagen que te da Tinypic. Fijate que sea la que corresponde a ese título, claro.
- Y en "height" lo cambias por la altura de la imagen (yo deje 75px como había dicho al principio)

8. Esto debes repetirlo con cada uno de tus gadgets. Buscar el nombre, anotarte el widget ID, copiar el código, pegarlo donde es debido y cambiarle todo lo que anote en el paso 7. Debes ser cuidadoso y prestar atención al widget ID de cada uno para no confundirte y hacerlo mal.

9. Por último, tienes que ir a la pestaña Diseño de tu blog y en el titulo de cada uno de tus gadgets poner &nbsp; para que no salga el titulo en letras por encima de tu imagen.

Y... ¡eso es todo! Si te queda alguna duda o te trabas en alguna parte, no dudes en preguntar :)

XoXo, Cata.

25 comentarios :

  1. Lamentablemente no pude entender :/ medio que me trabe donde dice que hay que buscar un código no entendí :/

    ResponderEliminar
    Respuestas
    1. ¿Qué es lo que no entendes? ¿Qué codigo buscar? ¿Donde buscarlo? ¿O qué?

      Eliminar
    2. No entendí la parte donde dice:

      4. Te vas a la pestaña "Plantilla" de tu blog y entras en la "Edición de HTML".

      5. Abres el buscador (CTRL+F) y escribes el nombre de alguno de tus gadgets del sidebar. Por ejemplo "Infosite".

      Esa parte no pude comprenderla de todo.

      Espero que me ayudes gracias.

      Eliminar
    3. NINGUNO DE ESOS PUNTOS?

      A ver, abres la pestaña "Plantilla" del blog, sabes que es?
      Ahí te sale una opción que dice "Edición HTML", pinchas ahí. Y abres el buscador del explorador, para abrirlo rápido aprietas CTRL+F. Y ahí, en ese buscador pones el nombre de tu gadget... no se cuales tienes en tu blog, pero seguidores, afiliados, etc. son algunos ejemplos. Comprendes? No entiendo donde te trabas la verdad :/

      Eliminar
    4. Hahahahahahahahaa, gracias ya entendí muchas gracias.

      Eliminar
  2. por encima de qe parte vaa? xq ami me sale error de nose qe cosa

    ResponderEliminar
    Respuestas
    1. Qué va por encima de qué? Fijate que en la entrada esta todo bien detallado ;)

      Eliminar
  3. No me aparece la imagen ayuda Katie.

    ResponderEliminar
    Respuestas
    1. Debes haber puesto mal la sentencia o el link de tu imagen.. si no veo el código no puedo decirte especificamente lo que has hecho mal.. asi que prueba volverlo a hacer, y fijate de no copiar mal nada ;)

      Eliminar
    2. Ok gracias, ahora vuelvo a intentar (:

      Eliminar
  4. No me sale Katie. Ayuda! Acá la imagen de como quedo el codigo: http://i1125.photobucket.com/albums/l590/AgusPicky/Sinttulo-1-12.jpg

    ResponderEliminar
    Respuestas
    1. Estás segura que pusiste bien el nombre del gadget, es decir el widget ID? Porque el código esta bien puesto...

      Eliminar
    2. Si Kat, incluso probé con otro widget que ra HTML 2 Pero tampoco agarra, puede ser que sea la plantila?

      Eliminar
    3. Mm no se me parece rarísimo que no funcione... proba si te sale con otra plantilla si queres pero no creo que sea eso :/

      Eliminar
    4. Este comentario ha sido eliminado por el autor.

      Eliminar
  5. ¿Que paso?... xD ESTE COMENTARIO HA SIDO ELIMINADO POR EL AUTOR :(

    ResponderEliminar
  6. PERFECTO! me salió :')
    Lo que si aparece el nombre del sidebar escrito, como estaba antes de poner la imagen. Aparece frente a la imagen:
    http://sweettutorials-st.blogspot.com/
    ¿Que hago en ese caso?

    ResponderEliminar
  7. Ya vi como xDD Solo voy al diseñador de plantillas y pongo el "color del titulo del gadget" en transparente xDD (bueno, a mi manera e.e) xD

    ResponderEliminar
    Respuestas
    1. Si, puede ser... en realidad lo que tenes que hacer es abrir el gadget y poner de título esto: &nbsp ; pero todo junto, eso hace que no salga :)

      Eliminar
  8. ¡Hola! Verás, tengo un problema y es que al intentar ponerlo, pongo el código y aún así no me sale la foto.

    Código:
    #widget id='Text1' h2 {background: url http://i46.tinypic.com/124wpqr.png no-repeat top;height: 75px;}

    ¿He hecho algo mal?

    Gracias de antemano.

    ResponderEliminar
    Respuestas
    1. Claro, es que no tienes que poner {widget id='Text1' } SOLO EL ID o sea {#Text 1} xD

      Eliminar
    2. Gracias, pero lo he intentado de nuevo y sigue sin salirme :/

      Código:

      #'Text1' h2 {background: url http://i49.tinypic.com/2s7b1hs.jpg no-repeat top;height: 75px;}

      Eliminar
    3. Es que el texto no va entre comillas! Fijate como está puesto arriba!

      #HTML8 h2 {background: url(URL de la imagen) no-repeat top;height: 75px;}

      HTML8 sin comillas, obvio vos lo cambias por Text1

      Si leyeran bien no surgirían estas dudas uu

      Eliminar
  9. una pregunta Cataa! De donde sacaste tu plantilla? De que pagina?

    ResponderEliminar