Widget card perfil para Blogger

El nuevo código proporcionado por Google como lo es Material Design está creando una serie de nuevas innovaciones en los blogs de Blogger y sobre todo en muchas plataformas web. Todo ello gracias al diseño e implementación del grupo de trabajo de Material Design de Google que fue creado para revolucionar los teléfonos inteligentes, ahora es llevado al diseño web profesional de una forma sorprendente.

MaterializeCSS simplifica la vida de los desarrolladores y de los usuarios en la manera de ver sus blogs o sitios web.

En esta nueva presentación de Ayudadeblogger.com, se les enseñara como insertar de una forma fácil y segura un widget card perfil Material Design.

El widget card perfil es una tarjeta de presentación de su perfil de usuario o del perfil de su página de Google+, como también lo podrá utilizar como mejor le parezca.

El widget card para Blogger es completamente Material Design de Google

¿El widget card perfil es Responsive?

Es completamente sensible “Responsive”, se muestra correctamente tanto para computadoras de escritorio, Smartphones y tabletas.

Widget card perfil para Blogger

Puede ver su demostración en el siguiente blog de ejemplos


Les gusto verdad!

Vamos a trabajar

Video Tutorial


Instrucciones

1 Ir a Blogger

2 Un clic en Diseño

Widget card perfil para Blogger

3 Un clic en Añadir un gadget

Widget card perfil para Blogger

4 Busca el widget HTML/Javascript, ábrelo

Widget card perfil para Blogger

5 Ingrese las siguientes líneas de código en su interior


 <style>
 #perfil-wrapper{font-family:'Roboto',Arial;padding:0 0 20px;background:#fff;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);max-width:400px}
 #perfil-wrapper .perfilimg{width:100%;height:130px;float:left;overflow:hidden}
 img.profilex{width:60px;border-radius:100%;float:left;margin:-35px 20px 0;box-shadow:rgba(0, 0, 0, 0.2) 0px 8px 17px 0px, rgba(0, 0, 0, 0.188235) 0px 6px 20px 0px}#perfil-wrapper p{padding:0 20px}
 a.linkcircle{color:#fff;background-color:#2DCC70;position:absolute;top:132px;right:30px;border-radius:100%;height:20px}
 a.linkcircle:hover{background-color:#22A65A;color:#fff}
 #perfil-wrapper h4{line-height:3;font-weight:400;font-size:15px}
 .mibutton{color:#fff!important;padding:10px 15px;border-radius:4px;border:none;outline:none;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);cursor:pointer;transition:all .4s ease-in-out}
 .mibutton:hover, #perfil-wrapper:hover{box-shadow:0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
 .mibutton.red{background:#2DCC70}
 </style>
 <div id="perfil-wrapper">
 <div class="perfilimg">
 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnACwSLO_It5VNf2uxmPxvElYhDbSkhXRHCag3jBV2IG3CxeMdrT3mBbJAx6j_UqlWsjAPe84oLDqCm66eljgcwhwSj_2TSnrwyukuEuAgr1-YQk9oxvjqNL9zoyR_OhgqGouu7FlSSMI/s1600/ayudadeblogger.png" alt="Ayudadeblogger" title="Luis Chávez"/></div>
 <img class="profilex" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSoi9rewo44nAE99QxIkME-3nca6riWb01JPOiei2HQLMq2Nz_75y7KJzp6ag9eR8aFpMy3OXc7dusgKl8DFXODEzfHzoWfFvbkvmAwlvfLeCBeGOegtYL8O2T7ZYYXRk_3eBpZV_iwyY/s400/luis.png" title="Luis Chávez"/>
 <h4>Luis Chávez</h4>
 <p>Consultor SEO y desarrollador web, ejecuta una serie de sitios web desde su oficina Tena - Ecuador</p>
 <a class="mibutton linkcircle" href="https://plus.google.com/u/0/+LuisCh%C3%A1vez"><i class="fa fa-user"></i></a>
 </div>
 <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' rel='stylesheet'/>
 <style>
 body{margin:0;padding:0 0 1px}.content-outer,.header-outer,.tabs-outer,.main-outer,.main-inner,.footer-outer,.post,.comments,.widget,.date-header,.inline-ad{position:relative;min-height:0;_position:static;_height:1%}.footer-outer{margin-bottom:-1px}.content-inner{padding:10px}.tabs-inner{padding:0 15px}.main-inner{padding:30px 0}.main-inner .column-center-inner,.main-inner .column-left-inner,.main-inner .column-right-inner{padding:0 15px}
 </style> 


Realice los siguientes cambios:

- Para cambiar el fondo de la imagen

Widget card perfil para Blogger

Elimine la dirección URL de la imagen que está marcado de color amarillo y remplácelo por una dirección URL de imagen

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnACwSLO_It5VNf2uxmPxvElYhDbSkhXRHCag3jBV2IG3CxeMdrT3mBbJAx6j_UqlWsjAPe84oLDqCm66eljgcwhwSj_2TSnrwyukuEuAgr1-YQk9oxvjqNL9zoyR_OhgqGouu7FlSSMI/s1600/ayudadeblogger.png

- Para cambiar el circulo con la imagen de perfil

Widget card perfil para Blogger

Elimine la dirección URL de la imagen que está marcado de color amarillo y remplácelo por una dirección URL de su imagen de perfil

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSoi9rewo44nAE99QxIkME-3nca6riWb01JPOiei2HQLMq2Nz_75y7KJzp6ag9eR8aFpMy3OXc7dusgKl8DFXODEzfHzoWfFvbkvmAwlvfLeCBeGOegtYL8O2T7ZYYXRk_3eBpZV_iwyY/s400/luis.png

- Cambiar el nombre y la descripción

Widget card perfil para Blogger

Elimine las palabras que están marcadas de color rojo, por las que usted necesite mostrar

- Cambiar la dirección URL

Widget card perfil para Blogger

Elimine la dirección URL que está marcada de color azul, por la dirección URL de su perfil social o puede ser otra dirección.

https://plus.google.com/u/0/+LuisCh%C3%A1vez

6 Eso es todo, es momento de dar un clic en Guardar

Ubique su nuevo widget card perfil en el sidebar de su blog

Widget card perfil para BloggerNota: En algunas plantillas les mostrara perfectamente, pero si el icono no se encuentra centrado, usted puede modificarlo desde el siguiente código

               top:132px

Aumente o disminuya el numero 132, hasta que lo vea centrado, luego le da un clic en Guardar

¡Fácil verdad!

¿Necesitas ayuda?

Cualquier pregunta no duden en escribir

Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
¿Te ha resultado útil este artículo, recomiendanos?
Si



Share:

Luis Chávez

Soy el fundador del sitio web Ayudadeblogger.com - Considerado un Pro Blogger profesional, Consultor SEO y desarrollador Web adicto, ejecuto una serie de sitios web desde mi Oficina Quito-Ecuador.

Related post

Comentarios