Hacker of the Web
Tus ideas en código!...y mas

Modificar solo los gadgets de la barra lateral

Esta vez explicaré como modificar los gadgets de la barra lateral sin afectar los demás, como la cabecera o los post. Esto es relativamente sencillo solo tienes que entrar a Edicion HTML, de tu blog, sin expandir las plantillas de artilugios.

/!\ En esta entrada se asume que tienes conocimientos de como editar la plantilla. Si no sabes como o donde se modifica, revisa esta entrada: Como editar el código HTML de nuestra plantilla.


Ahora, antes de la eqiqueta ]]></b:skin>, debes agregar estas lineas de estilo:

.sidebar .widget {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
background:black;
}

Estas lineas de estilo le darán un fondo negro a tus widgets de la derecha, y les redondeará los bordes.

Estas otras lineas de estilo son para editar el titulo y el contenido los widgets de la sidebar:
/*Modificar los titulos de todos los widgets*/
.sidebar .widget .title {
font-family:georgia;
}

/*modificar los links del titulo de todos los widgets*/
.sidebar .widget h2 a{
color:green;
background:(url_imagen) repeat-y top right #ff0000;
}

/*Modificar el contenido de los widgets de seguidores*/
.sidebar .Followers{
color:green;
background:black;
}

/*Modificar el titulo de los widgets listas de link en la sidebar*/
.sidebar .LinkList .title {
background:black;
text-transform:lowercase;
}

/*Modificar el titulo de los widgets de seguidores en la sidebar*/
.sidebar .Followers .title {
background:black;
text-transform:lowercase;
}

/*modificar los links del titulo los widgets HTML en la sidebar*/
.sidebar .html h2 a{
color:green;
background:(url_imagen) repeat-y top right #ff0000;
}

/*modificar el contenido de los widgets HTML en la sidebar*/
.sidebar .html .widget-content{
color:green;
text-transform:uppercase;
}

/*modificar el contenido de todos los widgets*/
.sidebar .widget .widget-content {
color:green;
text-transform:uppercase;
}

/*modificar los links del contenido de todos los widgets*/
.sidebar .widget .widget-content a{
color:green;
}

Los efectos mas comunes o mas faciles y atractivos en CSS, son los siguientes:
background:(url de la imagen) repetir alineacion alineacion_2 color;

Las propiedades del background:
Si tienes un background con imagen

url de la imagen: Aqui va la url de tu imagen, esto es opcional
alineacion: Aqui esta la alineacion vertical de la imagen de fondo top,bottom,center.
alineacion_2: Aqui esta la alineacion horizontal de la imagen de fondo left,right,center.
repetir: repeat-x(repetir verticalmente),repeat-y(repetir horizontalmente),no-repeat(no repetir).
pero tambien puedes agregar solamente un color, o agregar un color a donde la imagen no alcanza
color:white, black, blue. o un color hexadecimal: #FF0000,#FFFF00.


color:color del texto;
text-transform:uppercase o lowercase;

Propiedades del text-transform:

uppercase: convierte a mayusculas el texto
lowercase: convierte a minusculas el texto


overflow:yes,no o auto;

Propiedades de overflow:

yes: Agrega barras de dezplasamiento al gadget
no: si tiene, quita las barras de dezplasamiento al gadget
auto: Si rebasa el ancho o el largo del widget agrega las barras si no, entonces no hace nada.



/!\ Puedes agregar un toque de originalidad agregandole a tus widgets transparencia.



/!\ Si quieres editar un widget y no esta en la sidebar solo elimina el ".sidebar".

#

Deja tu huella y comenta!

Hola!, por favor deja tus comentarios, te aseguro serán contestados, dudas, sugerencias, lo que sea!!!!!!!!!!.

Si el formulario no funciona, o quieres irte a la segura: agrega tu comentario de forma tradicional

Si necesitas ayuda mas personalizada deja un <a href='URL'>ENLACE</a> hacia tu blog.

Emoticons
Comenta con tu:
Comenta:

13 comentarios !

Anónimo dijo...

Hola me gusta esa especie de post-it en color lila que has puesto, como puedo conseguirlo para mi blog
Sol :D

Unknown dijo...

Hola!!

Anónimo, pues si te refieres a la imagen es la siguiente:
http://lh6.ggpht.com/_6CFlQEBRtLc/SX7rWMRvnzI/AAAAAAAAB0E/WqKpZ8EQp5I/relatedposts.png

per si te refieres a las entradas relacionadas, pronto publicare acerca de ellas xD

HISTORIETAS EN PERGAMINO dijo...

Buenas, tengo un problema cuando agrego una imagen al gadget lateral, con el tema del ancho me las arregle, pero el problema es el largo (o alto) me deja un espacio en blanco muy grande. Como puedo solucionar eso para todo lo que esta debajo no se vaya taaan abajo?. Gracias

Unknown dijo...

Podrías agregar la imagen en forma de fondo:

<div style='width:ancho;height:alto;background:url(Aqui la direccion de la imagen) no-repeat top left;'></div>

El ancho puede ser en 100% o en pixeles, el alto puede ser lo que quieras en pixeles(ej. 100px)

O recortar la imagen con un editor de imagenes, como Paint o Photoshop.

Espero haberte ayudado, al menos un poco xD!!

HISTORIETAS EN PERGAMINO dijo...

No encontre p ningun lado el div style. P donde esta? (ya se q es en la edicion HTML), no estara bajo otro paramentro?

Unknown dijo...

mondo zombie, A disculpa, no te explique bien. Debes agregar el código que anteriormente te di en un gadget HTML xD.

Suerte, de nuevo xD!!

Estudios Biblicos dijo...

ola amigo una consulta, como puedes modificar el gadget donde dice "xxx wrote" en el gadget de comentarios recientes , porque como esta en ingles quiero cambiarlo al español por: xxx dijo..


saludos gracias. xD

Estudios Biblicos dijo...

y otra pregunta com ose cambian los nombres en ingles que aparecen arribba en el principio de las plantillas (home) (edit) (post)


gracias

Unknown dijo...

Estudios Biblicos Betel, el gadget de comentarios que tienes en la barra lateral, no se puede modificar. Pero si te interesa puedes colocar el mio, en español:
comentarios recientes

Y para editar los enlaces, solo debes entrar en Diseño>Edicion HTML>Sin expandir plantillas de artilugios

Despues buscar con Ctrl+F lo siguiente:

id='menu'

Luego verás lo siguiente, es lo que se modifica:

<div id='menu'><ul>
<li><a href='http://estudiosbiblicosbetel.blogspot.com/' title='Home'>
Home</a></li>
<li> | </li>
<li><a href='http://estudiosbiblicosbetel.blogspot.com/feeds/posts/default' title='Posts RSS'>
Posts RSS</a></li>
<li> | </li>
<li><a href='http://estudiosbiblicosbetel.blogspot.com/feeds/comments/default' title='Comments RSS'>
Comments RSS</a></li>
<li> | </li>
<li><a href='#' title='Edit this link'>
Edit</a></li>
</ul></div>

creo que eso es todo!! xD

sigue comentando!!

Jorgelina Gatti dijo...

Hola....porque me saler error de interfaz cuando quiero editar el encabezado del blog y los widget? Cómo lo resuelvo?

Feliz año!!

Anónimo dijo...

hola Santy, sos un genio, gracias XD
Feliz 2010

Anónimo dijo...

hola quiero poner el tiempo de mi ciudad de meteored.com en la barra lateral como un gadget y que se vea la imagen actualizada, porque cuando lo hago me sale un enlace y no la imagen.

Fernando dijo...

Hola Santy.
Estoy dando una mano en el blog de la asociación a la que pertenezco www.apostoladodelaoracion.blogspot.com
y agregué varios gadget en la barra lateral con la opción imagen y con un link.
Puedo editar el código de esa gadget? Quiero sacar el espacio en blanco que genera para que queden los gadget más juntos.
Cómo se hace? Desde ya gracias desde e Uruguay
Fernando


Página Principal
Arriba