Tutorial:Personalizar cada gadget ♥



Hola a todas uff terminaron los examenes,me falta el examen de topografia en el campo sobre el teodolito ,estuve practicando y mañana también practicare en armarlo, estacionarlo. Un poco pesa el teodolito  nose por que me pesa ,a mis compañeras no les pesa,, y mas me demoro en eso.Bueno unas cuantas practicas aprenderé  a armarlo en 2 minutos siquiera, solo tengo ese Examen y bueno es el aniversario de Ilo, nose si saldre, pero tengo varios pedidos de tutoriales y bueno este es uno, que me pidieron hace tiempo,pero para que no se me olvide lo estoy haciendo:

 Paso 1: Primero Buscamos el codigo: <b:section-contents id='sidebar-left-1'> o <b:section-contents id='sidebar-right-1'> o <b:widget id='HTML1'
les saldra algo asi:
Ahora les explico estos codigos: 3
Ejemplo
<b:section-contents id='sidebar-right-1'>
<b:widget id='BlogArchive1' locked='false' title='Título del gadget' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='Título del gadget' type='Profile'/>
<b:widget id='Image1' locked='false' title='Título del gadget' type='Image'/>
<b:widget id='Text1' locked='false' title='Título del gadget' type='Text'/>
<b:widget id='HTML1' locked='false' title='Título del gadget' type='HTML'/>
<b:widget id='NewsBar1' locked='false' title='Título del gadget' type='NewsBar'/>
</b:section-contents>

-En este codigo hay 6 tipos de gadgets. el tipo seria despues de type='
y estos serian los que estan de colores morado , como  BlogArchive, Perfil, HTML, etc ..
-Los que estan de color de rojo  despues del codigo id='
Es la identificación de cada uno de los aparatos y es la que debemos tener en cuenta para personalizarlos . Que en el ejemplo tenemos  BlogArchive1, Profile1, HTML1, etc
- Título del gadget: Es el titulo que colocamos a los gadget en diseño , si no colocamos titulo les aparecerá asi   title=''
Notita: El primer gadget añadido, de cada tipo, tiene en su ID (identificación) el número uno, Ejemplo: HTML1; los demás que agreguemos, dentro de su tipo, sigue el consecutivo, Ejemplo: HTML2, HTML3, HTML4, etc.
Informacion sacada de aqui
Bueno sabiendo que significa estos codigos,seguimos con el tutorial
GADGET TRANSPARENTE
Quieres que el gadget este sin fondo ,ningun efecto, que quede transparente?
como la siguiente imagen:
Es el unico gadget sin fondo

Sigue el tutorial
 Después de seguir el paso 1, y encontrar el codigo,elijimos el gadget que queremos que este transparente, Por favor poner un nombre al gadget para buscarlo mas rapido, yo le puse "Probando" o una palabra que creas que solo te aparesca una vez buscando en el codigo de la plantilla.
Puedes buscar presionando Ctrl + f  .Escribes el nombre del gadget (en mi caso Probando) en la cajita que te salio.
O puedes tambien buscarlo ,despues de seguir el primer paso.
Bueno lo encontramos
<b:widget id='HTML11' locked='false' title='Probando' type='HTML'> 
El id es lo que necesitamos, su id de mi gadget  "probando" es  HTML11
Teniendo eso, seguimos el ultimo paso:
 Ahora buscamos el siguiente codigo presionando Ctrl + f, el codigo ]]></b:skin>
Antes de ]]></b:skin> pegamos este codigo:
#HTML11 {
background: none;
border: none;
}
-En  HTML11 llo cambias por el id de tu gadget
-Si pones cualquier otro efecto como outline, box-shadow, etc
le Ponen none
none: esta palabra hace que no salga tal efecto
Y listo  y bueno eso si, saldra el nombre ,el titulo del gadget su efecto ,para que no salga borras el titulo que puse en mi caso  "Probando".
Personalizar cada Gadget:
Personalizar cada gadgets me refiero al color de letra,color de fondo efectos en los gadget, Como en esta imagen:
Pueden ver que cada gadget esta de diferente color de fondo , podemos personalizar cada gadget que queramos.
Sigue los siguientes pasos
  Después de Seguir el paso 1, y encontrar el codigo, elijimos el gadget que queramos para personalizarlo Por favor poner un nombre al gadget para tener la facilidad de buscarlo , en mi caso puse "Bienvenidos", "Afiliame", "Seguidores".
Personalizare Primero Bienvenidos
Puedes buscar presionando Ctrl + F y escribes el nombre del gadget (en mi caso "Bienvenidos")
O tambien puedes buscar en los codigos después de Seguir el paso 1.
Bueno lo encontramos
 <b:widget id='HTML1' locked='false' title='Bienvenidos ♥' type='HTML'>
El Id es lo que necesitamos, Su id de mi gadget en mi caso " Bienvenidos ♥ "es  HTML1
Teniendo eso, seguimos el ultimo paso:
 Ahora Buscamos Presionando Ctrl + f, el codigo ]]></b:skin>
Antes de ]]></b:skin> pegamos este codigo:
# HTML1  {
background: #EAF0D5 !important;/*color de Fondo */
color: # FFECEC  !important;/* color de Texto */
font-family: Imprima !important;/* Font del Texto */
font-size: 12 px  !important;/*Tamano del Texto */
border: 3px solid #F8B2B2  !important;/* Borde tamaño,tipo, color */
}
-En  HTML1  lo remplazas por el id de tu gadget

-Pueden agregar cualquier otro efecto outline, box-shadow, etc, Pero agergale  !important antes de  ";"
-Tambien puedes borrar lo que no te guste ,ya sea borde,etc ,personalizalo a  tu gusto el gadget
 border: 3px solid #F8B2B2  !important;;/*Tamano del Texto */

-!important: Cualquier código que vaya acompañada de un !important tendrá mayor importancia que cualquier otro código que tengas.

Y listo, asi seguimos buscando el id de los gadgets y vamos agregando el codigo  antes de ]]></b:skin>, cambiamos los colores de fondo ,lo que deseen ♥
Esta entrada se me traducio solito >w< ay odio cuando se me traduce solo y le doy guardar sin darme cuneta  y tengo que volver a escribirlo a español por que se me traduce a ingles ewe,capas salga alguna palabra mal escrita ,pero los codigos si o si los puse bien ,para que no salga error.
image





16 comentarios :

  1. Muchísimas gracias Luna, quería poner un gadget transparente en mi nueva plantilla y no sabía como D:
    Besitos!

    ResponderEliminar
  2. *m* Hace muuuuucho tiempo que quería saber como se hacía eso <3
    Me laegro mucho de que lo hayas puesto Luna, muchas gracias, lo ocuparé para la próxima remodelación que haga
    Saludos~

    ResponderEliminar
  3. wauu muchas gracias por el tutorial
    pero soy algo lerda devere leerlo de nuevo XD
    saludos y besos

    ResponderEliminar
  4. Hola Luna! Siento molestar,qué tal vas con los pedidos?
    No es por meter prisa (se que estás muy ocupada),es solo por saber porque voy a hacer un nuevo diseño,y si te queda poquito pues ya nada...
    Un besito! ^o^

    ResponderEliminar
  5. se ve algo complicado pero lo intentaré ^-^

    ResponderEliminar
  6. Hola! Soy Aikii Fubuki, la autora del blog "A Snowy World". Simplemente adoré tu blog Luna!!! Awww >^<
    En fin, era para decirte que tus tutoriales son ideales, me ayudan muchísimo de verdad ^^
    Aunque bueno... estoy en 2° de secundaria jejejeje y el tuto que pusiste para lo de el efecto nieve/lluvia no lo termino de entender T^T
    Me gustaría un montón tener el blog como tú, pero si te pasas por alli ya verás que aun está en proceso UwU
    Esque me pongo a dibujar y... el blog se queda ahí jejeje .__.
    (Aunque ya tengo la barra de reproducir mp3 wiiiii ^°^)
    Sí... jajajaja me entusiasmo muy facilmente.

    Pues eso, me haría mucha ilusión que contestases pues yo recién creé mi blog hace cosa de un año °^° y necesito ayudaaaa :(

    Muchas gracias!! De Aikii Fubuki (ya sé que en el perfil pone Aiko)

    ResponderEliminar
    Respuestas
    1. Hola :3 gracias jeje n.n puedes preguntarme en el fb por mensaje en la pagina de fb cualquier duda , alli te ayudo las cosas que no entiendas :3 , ya que por alli te puedo escribir los codigos ,por aqui en comentarios no me deja colocar codigos , y mas paro en fb n.n
      la pagina de fb esta :
      https://www.facebook.com/pages/Lunany-kawaii/514077101992556

      Eliminar
  7. Muchas gracias es muy util :333
    saludos~

    ResponderEliminar
  8. Hola linda estas nominada para un premio en mi blog~ You Space Original

    Besos~

    ResponderEliminar
  9. Hola luna espero que no te molestes pero ... envie peticion de plantilla para club kawaii cuando entregaras nena ¿? jejeje y como le hago para poner cosillas bonitas qeu merecomiendas para mi blog por fa .. Gracias ♥AtteCKDina

    ResponderEliminar
    Respuestas
    1. hola uwu losiento , estoy muy ocupada que no puedo lograr terminar con los pedidos de plantillas y solo se los aria a los 5 primeros comentarios y luego iba a ver si se los hacia a los demas , pero bueno si quieres algunas plantilla ahorita,tengo estas plantillas ,
      http://www.lunany-kawaii.com/search/label/Plantillas
      y la personalizas como gustes ,si quieres agregar alguna cosita, o un tutorial que no entiendas me puedes mandar un mensaje aqui ,alli respondo mas rapido :)
      https://www.facebook.com/pages/Lunany-kawaii/514077101992556

      Eliminar
  10. ¡Me encanta este tutorial! La verdad es que he estado tratando de personalizar un poquito el mio, para que no se vea tan simple...y aunque he tratado de entenderle a los códigos de html esta ha sido la única pagina en la que puedo distinguir cada uno sin perderme :S

    ¡Te felicito por tu blog! Es muy muy útil y esta bellisimo owo

    ResponderEliminar
  11. Estoy tratando de hacerlo y la verdad no me funciona x.x he probado con distintas plantillas y nada D:

    ResponderEliminar

Hola :3 Bienvenidos a Lunany-kawaii
Debera seguir las siguientes reglas:
-No insultos
-No spam
-Ni peleas
gracias ♥