Añadiendole un fondo al nuevo gadget de seguidores de google+

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'>
#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>
Donde dice:

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


Votar esta anotación en Bitácoras.com
Compartir esta entrada :



data:newerPageTitle data:olderPageTitle data:homeMsg
:) :( ;) :D ;;-) :-/ :-O X( B-) #:-S :(( :)) =)) ~X( :-t 8- =P~ #-o =D7 :-SS :-q :-bd

0 comentarios:

Publicar un comentario