add

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.

Widget card perfil para Blogger

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://1.bp.blogspot.com/-ezR5A5dJj4Y/WBEc6pOIPdI/AAAAAAAABP4/T6cZfZHmNKgETKpA1_YMExeBuMbetdWhACLcB/s1600/ayudadeblogger.png" alt="Ayudadeblogger" title="Luis Chávez"/></div>
<img class="profilex" src="https://2.bp.blogspot.com/-sFTiOxFEokQ/V9EOdw4EaGI/AAAAAAAAMhQ/q_z9gNzS-qsWFC5FfnOxRoVk036tnl4QACLcB/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://1.bp.blogspot.com/-ezR5A5dJj4Y/WBEc6pOIPdI/AAAAAAAABP4/T6cZfZHmNKgETKpA1_YMExeBuMbetdWhACLcB/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://2.bp.blogspot.com/-sFTiOxFEokQ/V9EOdw4EaGI/AAAAAAAAMhQ/q_z9gNzS-qsWFC5FfnOxRoVk036tnl4QACLcB/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

0 comentarios:

Publicar un comentario en la entrada

Discusión

person_pin 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) Aplicaciones moviles (15) Backlinks (1) Breaking News para Blogger (3) Como (32) 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 (18) 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 (10) Material Design Blogger (2) 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 (69) Widgets Suscripciones (9) Widgets y Plugins (6)

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

Seguidores

Comentarios