Tutorial:Personalizar cada titulo de los gadgets 1♥

Hola vengo con una noticia muy importante para el blog bueno es sobre un  Casting de bloggers que me inscribí de aqui link y me escogieron ,como dije mas antes me estuvo llamando mucho el estilo ulzzang , y me encontré con esa pagina ,una tienda online llamada Play Sweet Shop, y quiero hacerle pedidos en algunas cremitas pero aun no tengo plata suficiente ,estoy ahorrando , bueno eso no les quiero hablar jaja , es sobre el Casting de bloggers , pues la tienda me enviara un producto  y tengo que hacer una reseña en blog , de aquellos productos que me envie are reseñas,también de lo que compre en la tienda are reseñas de estos productos  con imágenes hay verán fotos en la que aparezco  me conocerán jeje solo publique una foto mia cuando empecé con el blog y se me perdió con el tiempo.

Así que agregare una categoría de reseña de estos productos  ,por aquí también hay chicas que les interesa verdad?

Bueno cambiando de tema, aqui les dejo el tutorial Personalizar cada titulo de los gadgets

 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:

(clic en la imagen para ver mejor)

Ahora les explico estos codigos: 

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

Personalizar cada titulo de los gadgets con una imagen

Me refiero a colocar en cada titulo de los gadget una cajita con el nombre que queramos de gadget que es una imagen y colocarlo como la imagen:

Para colocarlo hacemos lo siguiente :

Después de seguir el paso 1, y encontrar el codigo,elijimos el gadget que queremos cambiar el titulo del gadget, Por favor poner un nombre al gadget para buscarlo mas rapido, yo le puse "Bienvenidos" o una palabra que creas que solo te aparezca una vez buscando en el codigo de la plantilla.

 Vamos a plantilla /Editar HTML /Presionamos Ctrl+F ,colocamos la palabra Bienvenidos en la cajita que nos salio

(clic en la imagen para ver mejor)

Y encontramos por alli Bienvenidos :

<b:widget id='HTML1' locked='false' title='Bienvenidos ♥' type='HTML'>

El id es lo que necesitamos, su id de mi gadget  "Bienvenidos ♥" 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:

#HTML1 h2 {
font-family: Imprima; /*Font de la letra*/
font-size: 20px; /*Tamaño de la letra*/
color: #fff; /*Color de la letra del titulo*/
background: url(Url de la cajita) no-repeat center;
height: 38px;/*Altura de la cajita*/
width: 330px;/*Ancho de la cajita*/
text-align: center;/*Texto centrado*/
margin-top: 10px;
margin-left:-38px ;
text-shadow:0 2px #050505;/*Color de sombra del titulo*/
margin-bottom:-5px ;
padding:21px;
padding-top: 8px;/*Si lo quiere mas ariba la cajita ponga un numero menor y en caso contrario uno mayor*/
width:112%;
}

-En  HTML1 lo cambias por el id de tu gadget

Url de la cajita ,puedes hacerlo tu una cajita o aqui te dejo el link donde ay cajitas:

Pack de Cajitas 1

Pack de cajitas 2

En caso de que tu pongas un estilo al nombre del titulo de la cajita asi como lo tengo yo :

que es una imagen sola 

Tienes que ir a Diseño /escojes el gadget que personalizaste el titulo del gadget ,borras el titulo en mi caso "Bienvenidos" y lo remplazamos por

 &nbsp;

&nbsp; : Esta palabra hace un espacio ,ya que no te permite dejar el titulo de un gadget vacio ,colocamos esta palabra que lo conoce el blog como un espacio :3

Y listo, ay segunda parte pero bueno no quiero alargar tanto la entrada  ,les traigo luego la segunda parte 

así estoy jaja estoy loquita como el conejito ,feliz por que ya termino mis exámenes,estoy avanzando con las plantillas.Después de terminar unas cuantas plantillas ,cambiare de diseño solo un poco♥