Gadget Perfil integrado con botón de Google+ estilo Material design Blogger


Cambiar el aspecto del gadget Perfil Google+ de Blogger a un diseño web profesional como lo es Material design, es lo que realizaremos en este tutorial.

Si utilizas el gadget perfil de Google+ en tu blog de Blogger podrás cambiarlo de estilo, una nueva forma de optimizar el gadget perfil de Google+ en Blogger.

En este tutorial de Blogger insertaremos un CSS para cambiar el diseño del Gadget perfil de Google+ en Blogger

El CSS se basa en Material design de Google, un código que ha revolucionado la nueva forma de ver un sitio web.

Gadget Perfil integrado con botón de Google+ estilo Material design Blogger
Gadget Perfil integrado con botón de Google+ estilo Material design Blogger

Pueden ver su demostración en el siguiente blog

Empezamos

Video Tutorial


Tutorial


1 Ir a Blogger

2 Un clic en Diseño

Gadget Perfil integrado con botón de Google+ estilo Material design Blogger

3 Un clic en Añadir un gadget

Gadget Perfil integrado con botón de Google+ estilo Material design Blogger

4 Busca el gadget que dice Perfil, ábrelo

Gadget Perfil integrado con botón de Google+ estilo Material design Blogger

5 Un clic en Guardar

Gadget Perfil integrado con botón de Google+ estilo Material design Blogger

6 Ubica tu Gadget perfil donde gustes

7 Ahora debe comprobar que este utilizando su perfil de Google+ en Blogger, realice lo siguiente

7.1 Un clic en Configuración

Gadget Perfil integrado con botón de Google+ estilo Material design Blogger

7.2 Un clic en Configuración de usuario

Gadget Perfil integrado con botón de Google+ estilo Material design Blogger

Habilite señalando el botón en Google+,  a continuación la siguiente captura de pantalla

Gadget Perfil integrado con botón de Google+ estilo Material design Blogger

Insertar los estilos

1 Un clic en Plantilla

Gadget Perfil integrado con botón de Google+ estilo Material design Blogger

2 Un clic en “Editar HTML

Gadget Perfil integrado con botón de Google+ estilo Material design Blogger

Ahora se le abrirá el Editor HTML de su plantilla

Gadget Perfil integrado con botón de Google+ estilo Material design Blogger

En este punto deberás presionar la tecla “Control” de su teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de su editor, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor, a continuación mire la imagen la cual le muestra como debe aparecerle el buscador en el editor HTML de su plantilla y así pueda colocar el código en el buscador al momento que yo diga busca este código.

Gadget Perfil integrado con botón de Google+ estilo Material design Blogger


3 Busca este código

</head>

4 Ingrese las siguientes líneas de código justo arriba del código que encontró

<!-- Perfil Material Design by ayudadeblogger.com -->
<style>
.profile-img {
 
    float: left;
    margin-top: -2px;
    margin-endside: 10px;
    margin: none;
    margin-bottom: 5px;
    margin-startside: 0;
    border: 1px solid #dcd9d9;
    -moz-box-shadow: 1px 1px 5px rgba(0,0,0,.5);
    -webkit-box-shadow: 1px 1px 5px rgba(0,0,0,.5);
    -goog-ms-box-shadow: 1px 1px 5px rgba(0,0,0,.5);
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
    padding: 4px;
    border-radius: 100%;
    margin-left: 95px !important;
    margin-right: 2px;

}
.profile-datablock {
    margin: 0 0 .5em;
    padding-top: 98px;
  }
.profile-data {
    margin: 1px;
    margin-left: 70px !important;
    margin-right: 2px !important;
}

.profile-img:hover, #Profile1:hover, .profile-link:hover{

 box-shadow: 0 3px 10px rgba(0,0,0,.23), 0 3px 10px rgba(0,0,0,.16);
}
  #Profile1 {
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
}
#Profile1 {
background:#EEEEEE;
padding: 5px 10px 5px 10px !important;
  }
.profile-link{
    margin-left: 85px !important;
    margin-right: 73px !important;
border-radius:30px;
background:#dc033d;
display:block;
margin:0 3px 3px 0;
color:#ffffff !important;
font-size:15px;
text-transform:initial;
line-height:1.2;
padding: 5px 0px 5px 5px !important;

}
</style>



5 Un clic en Guardar plantilla


Es momento de revisar su blog de Blogger y de mirar el nuevo estilo del gadget perfil Google+ de Blogger

¿Cómo cambiar de color al Gadget perfil Google+ de Blogger?

Se puede cambiar de color el fondo del gadget perfil de Blogger, siguiente algunos pasos

También, puedes realizar algunos cambios si no se muestra correctamente centrado el gadget perfil de Blogger, puede seguir las siguientes instrucciones:

- Para cambiar el fondo del gadget perfil Google+ de Blogger

Gadget Perfil integrado con botón de Google+ estilo Material design Blogger

1 Busca la siguiente línea de código:

#Profile1 {
background:#EEEEEE;

Realiza el siguiente cambio:

Cambia el código de color que dice EEEEEE por FFFFFF si quieres mostrarlo de color blanco

Además, si quieres ver otros colores, puedes dirigirte al siguiente enlace, en el cual podrá escoger el color que más le convenga


- Cambiar el color del botón Ver todo mi perfil

Gadget Perfil integrado con botón de Google+ estilo Material design Blogger

1 Busca la siguiente línea de código

background:#dc033d;

Elimina el código de color dc033d he ingresa un nuevo código de color, de la siguiente lista de códigos de colores


- Ajustar la imagen de perfil

Gadget Perfil integrado con botón de Google+ estilo Material design Blogger

- Si notas que no está centrado la imagen de tu perfil, puedes seguir las siguientes instrucciones

Busca la siguiente línea de código:

.profile-img {
  
    float: left;
    margin-top: -2px;
    margin-endside: 10px;
    margin: none;
    margin-bottom: 5px;
    margin-startside: 0;
    border: 1px solid #dcd9d9;
    -moz-box-shadow: 1px 1px 5px rgba(0,0,0,.5);
    -webkit-box-shadow: 1px 1px 5px rgba(0,0,0,.5);
    -goog-ms-box-shadow: 1px 1px 5px rgba(0,0,0,.5);
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2); 
    padding: 4px;
    border-radius: 100%;
    margin-left: 95px !important;


- Aumenta o disminuye en el número que está marcado de color amarillo

95px

Cambia 95px por 90px hasta llegar a centrar la imagen

Eso es todo

¡Fácil verdad!

¿Necesitas ayuda?

Cualquier pregunta no duden en escribir

Enviar por correo

0 comentarios:

Publicar un comentario en la entrada

Discusión:

Luis Chávez

group_work Fundador

contact_phone +593 994589032

email ayudadeblogger@gmail.com

Entradas populares

Youtube.com/ayudadeblogger

Suscríbete

Etiquetas

Adsense dispositivos moviles (2) Alojamiento web (12) Amp en Blogger (6) Aplicaciones moviles (15) Backlinks (1) Breaking News para Blogger (3) Como (33) Como crear una pagina web gratis (8) Comprar Dominios (2) Comprar un Dominio en Godaddy (2) Configurar dominio de Godaddy en Blogger (1) Consejos de Blogs (33) Consejos de Trafico (12) Correo Dominio (3) Crear un Sitemap (6) Crear una Aplicacion gratis (2) Diseno Responsive (5) Diseño Web (7) En vivo (1) Entradas Populares (19) Enviar Sitemap a Bing y Yahoo (1) Error al analizar XML (5) Facebook trucos (10) Firefox (9) Formulario de contactos (3) Ganar Dinero (22) Google (11) Google Adsense (10) Google Plus (5) Guia de SEO (2) Herramientas Blogger (4) Herramientas para Webmasters (6) Iconos Font Awesome (1) Info Tech (1) La ética de los blogs (2) Laptops (2) Manual Blogger (11) Material Design Blogger (8) Medios de Comunicacion Social (39) Menu desplegable (20) Menu Responsive para Blogger (6) Mobile-friendly (9) Movil (12) Noticias (3) Optimizado para moviles (4) Plantillas Blogger (42) Plantillas Landing page para Blogger (3) Popout (6) Posicionamiento SEO (22) Publicidad (2) SEO Mobile (12) SEO para Moviles (14) Sitemap (1) Sitios web optimizados para moviles (3) Slider Carrusel (7) Slideshow (35) Smartphone (12) Social Media Marketing (1) Tácticas de Marketing (4) Tecnologia (12) Temas de invitados (2) Top Hosting (3) Trucos Blogger (40) Trucos CSS y HTML (11) Web Hosting (14) Widget Acordeón (3) Widget Tab Multiple (1) Widgets para Blogger (74) Widgets Suscripciones (9) Widgets y Plugins (6)

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

Seguidores

Copyright © - Ayudadeblogger.com

 

Inspiración

Tecnología

Contactos

0994589032