Widget Card Follow de Twitter Material design


Diferentes estilos gracias al espectacular CSS de Material design de Google, podemos modificar miles de widgets en Blogger, en esta nueva presentación se les enseñara como insertar un widget card incluido el botón seguir de Twitter, un diseño único basado en los poderosos estilos de Material de design de Google.

Este nuevo widget card Follow de Twitter, se lo puede insertar en Blogger, Wordpress, Joomla, y en cualquier plataforma web que estén utilizando.

El diseño es básico con un diseño profesional, basado en Material design de Google.

¿El widget card Follow de Twitter 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 Follow de Twitter Material design

A continuación pueden ver su demostración en el siguiente blog

Video tutorial


Empezamos

1 Abrir Blogger.com

2 Un clic en Diseño


3 Un clic en Añadir un gadget


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


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

<div class="col-md-12">
<div class="card card-stats">
<div class="card-header" data-background-color="blue">
<i class="fa fa-twitter"></i>
                                                                                                              </div>
<div class="card-content">
<p class="category">Followers</p>
<h3 class="title"> <a class="twitter-follow-button" href="https://twitter.com/ayudadeblogger" data-show-count="true" data-lang="es">Seguir @ayudadeblogger</a><br />
<script type="text/javascript">// <![CDATA[
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
// ]]&gt;</script></h3>
                                                                                                                             </div>
<div class="card-footer">
<div class="stats">
Just by Ayudadeblogger.com
                                               </div>
                               </div>
                </div>
</div>

<style>
.card {
    display: inline-block;
    position: relative;
    width: 100%;
    margin: 25px 0;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
    border-radius: 3px;
    color: rgba(0,0,0, 0.87);
    background: #fff;
}
.card-stats .card-header {
    float: left;
    text-align: center;
}
.card [data-background-color] {
    color: #FFFFFF;
}
.card [data-background-color="blue"] {
    background: linear-gradient(60deg, #26c6da, #00acc1);
    box-shadow: 0 12px 20px -10px rgba(0, 188, 212, 0.28), 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px rgba(0, 188, 212, 0.2);
}
.card .card-header {
    box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.42), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
    margin: -20px 15px 0;
    border-radius: 50px;
    padding: 8px;
    background-color: #999999;
}
.card-stats .card-header i {
    font-size: 36px;
    line-height: 56px;
    width: 56px;
    height: 56px;
}
.card-stats .card-content {
    text-align: right;
    padding-top: 10px;
}
.card .card-content {
    padding: 15px 20px;
}
.card .card-footer {
    margin: 0 20px 10px;
    padding-top: 10px;
    border-top: 1px solid #eeeeee;
}
.card .card-content .category {
    margin-bottom: 0;
}
.card .category:not([class*="text-"]) {
    color: #999999;
}
p {
    margin: 0 0 10px;
}
.card-stats .title {
    margin: 0;
}
.card .card-footer .stats {
    line-height: 22px;
    color: #999999;
    font-size: 12px;
}
.card .card-footer div {
    display: inline-block;
}
.card .card-footer .stats .material-icons {
    position: relative;
    top: 4px;
    font-size: 16px;
}
.col-md-12 {
    width: 100%;
padding: 4px 0px 0px 0px;

}
 h3 {
    font-size: 24px;
}
.card-header:hover {
    box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14),0 3px 14px 2px rgba(0,0,0,0.12),0 5px 5px -3px rgba(0,0,0,0.3);
}
</style>
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css' rel='stylesheet'/>

Realiza estos cambios:

- Elimina las dos palabras que dicen ayudadeblogger que están marcados de color amarillo y remplázalo por el nombre de tu cuenta de Twitter

- Y por último elimina las palabras Just by Ayudadeblogger.com, cámbialo por las palabras que necesites mostrar

Eso es todo, un clic en Guardar

Ubica tu nuevo Widget Card Seguidores de Twitter donde mejor te parezca

¡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 (2) 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 (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 (11) Material Design Blogger (7) 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 (73) Widgets Suscripciones (9) Widgets y Plugins (6)

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

Seguidores

Copyright © - Ayudadeblogger.com