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.

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

Demo Clic aquí

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

Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE

¿Te ha resultado útil este artículo, recomiendanos?

Si

TAGS: Material Design BloggerWidgets para Blogger

Share: