Hace unos días les mencione acerca del nuevo gadget de seguidores de google+ el cual como quien dice con el tiempo va a remplazar el de Google Friend Connect que usamos en la mayoría de los blog,esto debido a que todo de blogger se esta unificando con google+ ,bueno también les mencione acerca de que con los días ya íbamos a poder personalizarlo .
Hoy les voy a mostrar como poderle añadir un fondo a este gadget, lo mismo le podemos poner un color de fondo que un fondo con gradiente usando dos colores o un fondo con imagen ,Para añadir este código lo mismo lo pueden añadir en un gadget o en la plantilla antes del cierre de la etiqueta </head> .
El siguiente código es para añadirle un fondo con un solo color :
<style type='text/css'>Donde dice:
#PlusFollowers1{
background:#dadada;
display:block;
padding:15px; 15px;
border: 2px solid #dcdcdc;
border-radius:3px 3px 3px 3px;
display:inline-block;overflow:hidden;
-webkit-box-shadow: 0px 1px 1px #fff;
box-shadow: 0px 1px 1px #fff;
}
</style>
background:#dadada; Este es el color de fondo
border: 2px solid #dcdcdc; Este es el ancho del borde y el color
border-radius:3px Este es el borde de las esquinas
El siguiente código es para añadirle un fondo con gradiente usando dos colores :
<style type='text/css'>
#PlusFollowers1{
display:block;
padding:15px; 15px;
border: 2px solid #dcdcdc;
border-radius:3px 3px 3px 3px;
display:inline-block;overflow:hidden;
-webkit-box-shadow: 0px 1px 1px #fff;
box-shadow: 0px 1px 1px #fff;
background-image: -moz-linear-gradient(#dcdcdc, #000);background-image: -webkit-linear-gradient(#dcdcdc, #000);background-image: -o-linear-gradient(#dcdcdc, #000);background-image: linear-gradient(#dcdcdc, #000);
}
</style>
Donde dice:
border: 2px solid #dcdcdc; Este es el ancho del borde y el color
border-radius:3px Este es el borde de las esquinas
background-image: -moz-linear-gradient(#dcdcdc, #000); Este es lo que muestra la imagen en gradiente #dcdcdc es el color gris y se va a mostrar arriba #000 es el color negro y se va a mostrar abajo.
El siguiente código es para añadirle un fondo con una imagen :
<style type='text/css'>
#PlusFollowers1{
background: url(Aquí va la url de la imagen que quieren poner de fondo) repeat;
display:block;
padding:15px; 15px;
border: 2px solid #dcdcdc;
border-radius:3px 3px 3px 3px;
display:inline-block;overflow:hidden;
-webkit-box-shadow: 0px 1px 1px #fff;
box-shadow: 0px 1px 1px #fff;
}
</style>
Donde dice:
border: 2px solid #dcdcdc; Este es el ancho del borde y el color
border-radius:3px Este es el borde de las esquinas
0 comentarios:
Publicar un comentario