Widget card negocios Material design Blogger


En la plataforma de Blogger se puede implementar todo tipo de diseños, sobre todo uno en particular como lo es Material design de Google. En esta nueva presentación de Ayudadeblogger, aprenderán a insertar en un solo widget un código, con el cual le mostrara una tarjeta de negocios “Card” estilo Material design gracias a Materializecss.

Una nueva forma de llevar los blogs de Blogger a un diseño web profesional.

¿El widget card es responsive?

El código que implementaran en su blog de Blogger es totalmente responsive, se lo podrá ver correctamente desde un computador de escritorio, como también desde cualquier teléfono inteligente.

Widget card negocios Material design Blogger

¿Dónde insertare el código?

Todo el código se ingresara en un widget de Blogger, no necesitara ingresar el código en el editor HTML de su plantilla.

Para ello se ha simplificado el código, y se lo ha llevado a priorizar.

Widget card negocios Material design Blogger

Pueden ver su demostración en el siguiente blog


Empezamos

Tutorial

1 Abrir Blogger.com

2 Un clic en Diseño

Widget card negocios Material design Blogger

3 Un clic en Añadir un gadget

Widget card negocios Material design Blogger

4 Busca el widget que dice HTML/javascript, ábrelo

Widget card negocios Material design Blogger

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

<div class="col s12 m6 z-depth-4">

<div class="card">

<div class="card-image">

<img class='adb-material' src="https://1.bp.blogspot.com/-jz0LaYkCpLI/WE3tZAyTAKI/AAAAAAAANhQ/IjbaLm8f8rMFuHGWSgldmHAFoy1xsUsIgCLcB/s1600/img-adb.jpg" />

<!--Avatar-->

<div class="avatar">
<img class="circle" src="https://1.bp.blogspot.com/-X_MQHvWUWcw/WERt1nSVEzI/AAAAAAAANbA/WSP9YaTVyjEvuoaa-cVIeu0bPt24BCDvQCLcB/s1600/luis-chavez.png" />
</div>

<span class="card-title">Luis Chávez</span> </div>

<div class="card-content center">

<div class="divider"></div>

<h6><i class="material-icons red-text">email</i>ayudadeblogger@gmail.com </h6>

<div class="divider"></div>

<h6><i class="material-icons red-text">call</i>(+593) 994589032</h6>

<div class="divider"></div>

<h6><i class="material-icons red-text">language</i>www.ayudadeblogger.com</h6>

<div class="divider"></div>

<h6><i class="material-icons red-text">subscriptions</i>Youtube.com/ayudadeblogger</h6>

<div class="divider"></div>

<h6><i class="material-icons red-text">place</i>Office No, ciudad Tena, Ecuador</h6>
<div class="divider"></div>
        </div>     
          
<div class="container-fluid" style="background-color:#F44336;color:#fff;height:26px;"></div>   
          </div>
         </div>

<style>

.avatar {
    width: 60px;
   border: 0px solid #fff;
    background: #FFF;
    border-radius: 100%;
position: absolute;
top: 20px;
left: 20px;
}
.avatar {
    height: 60px;
    overflow: hidden;
}

.material-icons {
float: left;
margin-top: -2px;
margin-right: -21px;
}

.adb-material {
    box-shadow: 0 6px 10px 0 rgba(0,0,0,0.14),0 1px 18px 0 rgba(0,0,0,0.12),0 3px 5px -1px rgba(0,0,0,0.3);
}

.z-depth-4:hover, .adb-material:hover{
box-shadow: 0 16px 24px 2px rgba(0,0,0,0.14),0 6px 30px 5px rgba(0,0,0,0.12),0 8px 10px -5px rgba(0,0,0,0.3);
}

</style>

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />

<link href='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css' rel='stylesheet'/>

Realice los siguientes cambios

- La URL que está marcado de color amarillo es la imagen grande que se está mostrando en el widget card, cambie la dirección URL por la que usted guste.

- La URL que está marcado de color naranja es la imagen de perfil que se está mostrando en el widget card, cambie la dirección URL por la que usted guste

- Cambie todas las palabras que están marcadas de color rojo

6 Eso es todo, un clic en Guardar

Ubique su widget card donde usted quiera

Widget card negocios Material design Blogger

¡Fácil verdad!

¿Necesitas ayuda?

Cualquier pregunta no duden en escribir

Enviar por correo

Publicar un comentario

Discusión:

Ayudadeblogger.com
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 (9) 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 (4) 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 (43) Plantillas Landing page para Blogger (4) 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

+593 994589032