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.
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
3 Un clic en Añadir un gadget
4 Busca el widget HTML/Javascript, ábrelo
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
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
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
Elimine las palabras que están marcadas de color rojo, por las que usted necesite mostrar
- Cambiar la dirección URL
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
Nota: En algunas plantillas les mostrara perfectamente, pero si el icono no se encuentra centrado, usted puede modificarlo desde el siguiente códigotop: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
Comentarios