Espero que este blog ayude a aquellos que están buscando conocimientos, al igual que yo.
Sígueme en:
Blogger Google+ facebook twitter you yube Ver perfil en Linkedin Agregar a Favoritos/Marcadores
pica pica curioso Mi Ping en TotalPing.com Buscar en el blog
Cerrar X Bienvenido amig@!!! Recuerda que puedes recibir las actualizaciones del blog a través de Facebook y/o Twitter, o Suscríbase al Feed vía RSS o vía Email.

Siempre, Siempre, Siempre, antes de modificar tu plantilla guarda una copia.

Descarga la plantilla o copias el código en el bloc de notas.

¿Que es RSS?:

RSS (Really Simple Syndication)

Es un sistema que nos permite enterarnos de las actualizaciones de las paginas que visitamos frecuentemente, sin tener que visitarlas directamente.

¿Cómo funciona?

Así cómo para poder leer correos electrónicos tenemos que tener una cuenta y un lector de correo electrónico, para poder leer nuestras paginas en RSS tenemos que tener un lector de RSS.
Existen muchos lectores de RSS pero uno de los mas sencillos de usar y mas utilizados por todos es el Google Reader, este lector se encarga de agrupar todos los sitios que visitamos frecuentemente mostrándonos la actualización que cada sitio tiene sin necesidad de ir a visitarlos.
Antes yo entraba a los sitios a mirar si habían publicado algo nuevo, ahora mediante los RSS cuando el sitio publica algo nuevo me llega su actualización.

Sencillo, rápido y útil.
votar
Achicar Entrada Agrandar Entrada
Cada ves que agregamos un nuevo gadget se crea un nuevo código en nuestra plantilla.

Según el tipo de gadget es el tipo de ID que se crea.

Si creamos un gadget del tipo HTML/Javascript sera algo así:

De esta forma lo vemos desde Edición HTML.

<b:widget id='HTML1' locked='false' title='EL TITULO DEL GADGET' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>

El ID que se creo en el ejemplo es HTML1, y si creamos otros gadget este cambiará aumentando el número, HTML2, HTML3, etc...

El ID cambiará según el tipo de gadget que agregemos.

Hay varios tipos de gadget, no solo HTML, como por ejemplo: CustomSearch, Label, BlogArchive, Followers, etc...

Hay varias formas de personalizar los gadget, pero lo primero que tenemos que saber es el ID del gadget que queremos personalizar.

Para saber el ID lo podemos hacer desde Edición HTML o desde Elementos de la página.


En la imagen vemos un ejemplo de un gadget HTML, pero como dije antes, este va a variar según el tipo de gadget.

Apuntamos el ID para que no se nos olvide.

Nos vamos a Edición de HTML y expandimos plantillas de artilugios.

Ahora le voy a mostrar varias formas de personalizar los gadget.

Personalizar el título.

Agregar un icono o imagen antes o después del título:



Hay que buscar el ID del gadget, lo podemos hacer con Ctrl+F y colocamos el ID (ejemplo HTML1)

Veremos un código igual o parecido al mostrado al principio.

Donde vemos: <h2 class='title'><data:title/></h2> colocamos la imagen.

Ejemplo con imagen antes del título:

<h2 class='title'><img src="URL de la imagen" style="padding-right:5px;"/><data:title/></h2>

Ejemplo con imagen después del título:

<h2 class='title'><data:title/><img src="URL de la imagen" style="padding-left:5px;"/></h2>

Cambiamos la URL de la imagen.

padding-right:5px y padding-left:5px es la distancia entre la imagen y el título.

También se puede hacer desde el CSS de la plantilla.

A los ejemplos le voy a poner la ID HTML1.

En CSS una ID tiene que tener # por delante.

Cambiamos HTML1 por el nombre de la ID que copiaron anteriormente.

Justo arriba de ]]></b:skin>

Poner el siguiente código:

#HTML1 h2 {
background:url(URL de la imagen) no-repeat left center;
padding:5px;
}

Cambiar URL de la imagen.

Cambiar left por right si se quiere mostrar la imagen al final del título.


Hay muchas formas de personalizar el título de un gadget.

Podemos también agregarle una imagen de fondo, cambiar el color del fondo o personalizar el texto.

La forma es hacerlo desde el CSS de la plantilla.

Asi que los códigos los colocaremos arriba de ]]></b:skin>

Siempre sustituir HTML1 de los ejemplos por el nombre de la ID que ustedes eligieron para personalizar.

Imagen de fondo:

El código varia según el tamaño de la imagen.

#HTML1 h2 {
background:url(URL de la imagen) no-repeat;
}

Color de fondo:

#HTML1 h2 {
background: #ffffff;
}

Cambiar #ffffff por el color que mas les guste.

Color del texto:

#HTML1 h2 {
color: #ffffff;
}

Borde:

#HTML1 h2 {
border: 1px solid #ffffff;
}

También se le puede poner borde solo en una parte del título cambiando border: por border-bottom: para abajo, border-top: para arriba, etc..

La forma que se imaginen para personalizar el título se puede hacer siempre mediante CSS.

Lo que tienen que tener en cuenta es la ID del gadget y agregarle la etiqueta H2 que es la que lleva por defecto el título de los gadget en blogger.

#HTML1 h2 {
propiedad: valor;
propiedad: valor;
propiedad: valor;
}

Personalizar el contenido.

Es igual que se hace para personalizar los títulos.

La forma es hacerlo es desde el CSS de la plantilla.

Asi que los códigos los colocaremos arriba de ]]></b:skin>

Lo que tendremos que cambiar es la etiqueta H2 por la clase .widget-content

#HTML1 .widget-content {
propiedad: valor;
propiedad: valor;
propiedad: valor;
}

Perzonalizar todos los gadget de la sidebar.

La forma anterior es para personalizar individualmente los gadget, pero si queremos personalizar todos los gadget de la sidebar con el mismo estilo lo hacemos con el siguiente código:

Los títulos:

.sidebar h2 {
propiedad: valor;
propiedad: valor;
propiedad: valor;
}

El contenido:

.widget-content {
propiedad: valor;
propiedad: valor;
propiedad: valor;
}

Ver blog con ejemplos:

Les recomiendo leer algún manual de CSS: Acá y Acá

Leer Importante... Comentar esta entrada ▼ Ir al principio de la entrada
Miss Darcy dijo...

1° HOLA!!
He descubierto de casualidad este Blog saltando desde otro... porque a ese me lo recomendó una amiga!
Ahora voy a poder personalizar mucho mejor mi Blog :13)
Así que estaré pasándome por acá a cada rato, ya desde antes que nada
veré hacer esto que ponéis acá editando bien la imagen que quiero!!
De pasó veré cuantas cosas descubro, ya que quiero MUCHAS!
como lo de bajar y subir con las flechitas en el margen inferior derecho como veo que tenéis acá!
Felicitaciones por crear este Blog genial que la verdad ayuda a tantos!!

Vku dijo...

Muchas gracias @ Miss Darcy.
Para lo que tu quieres de subir y bajar hay varias formas, pon en el buscador para encontrarlas.
También tienes varios link de blog muy buenos de ayuda en el menú de la sidebar. Visitalos cuando puedas.

pato dijo...

no logro hacerlo con este codigo

#Votanos{
background:#000000;
}

votanos es el id del gadget y por q pones h2 despues del id :S

http://aprendetecnicasdefutbol.blogspot.com

Vku dijo...

h2 es la etiqueta de los titulos en la sidebar

En tu blog no tenes ninguna id que se llame votanos, si tenes un título con ese nombre la cual esta dentro de un div con id HTML10

Cocofansclub dijo...

Hola Vku estoy viendo que en mi gadget de seguidores no se ve el numero que indica la cantidad de seguidores e intente cambiarle los colores de enlaces, ya que ahora tengo un fondo negro pero no me hace el cambio,sabes si esta funcionando mal este gadget en blogger??o sera un problema mio?
graciass!!

Vku dijo...

Por lo que vi el código es .fc-sectitle {color:#000000}

Proba agregando en el css arriba de ]]></b:skin>

.fc-sectitle {color:#fff}

Vku dijo...

Y no probastes editar el gadget, desmarcando Utilizar estilos predeterminados de plantilla y cambiar desde ahí los colores.

Yo no he estudiado nunca ese gadget, tampoco lo utilizo porque siempre causa algún conflicto.

Cocofansclub dijo...

sí vku, pero no me toma los cambios,selecciono los colores y al guardar los cambios sigue quedando como antes tal vez sea problemas de blogger,es cierto este gadget siempre tiene problemas,gracias igual!
saludos

GiseUsh dijo...

hola! entendi, tengo un problema, yo quiero poner una imagen por ejemplo ya la diseñe yo con el nombre pero quiero eliminar el titulo del gadget(que ya venia en el sitio) y nose puede, porque si saco el titulo se me borra la imagen..me explico? como hago..porque ahi arriba dice "imagen antes del titulo" "imagen despues del titulo" yo quiero pegarlo y sacarle el titulo..
gracias

Vku dijo...

Prueba ageregando el siguiente código css cambiando la id del gadget (#HTML1):

#HTML1 h2 {
display: none;
}

Si tienes alguna opinión respecto a la entrada, tienes un punto de vista distinto, o simplemente quieres saludar, te invito a que dejes un comentario. NO SE ACEPTAN LINKS DE REFERIDOS para que los comentarios no se conviertan simplemente en una forma de publicitarse.



Elegir un botón o imagen, Seleccionar, copiar (Ctrl+C) y pegar en formulario de comentarios.


Nota: solo los miembros de este blog pueden publicar comentarios.

Si no puedes comentar, intenta con el antiguo formularioO leer solución

VituaRadio
Informe Importante

Por un tiempo voy a estar sin internet, así que no voy a actualizar ni poder contestar a los comentarios.
Suscribirse a las entradas Suscribirse a las entradas vía Mail Suscribirse a los comentarios
¿Que es RSS?