WIDGET CARD FOLLOW DE TWITTER

by Blogs Famag - domingo, agosto 04, 2019

WIDGET CARD FOLLOW DE TWITTER

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.

Video tutorial:

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.

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");
// ]]></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

Fecha de la Publicación; 04-08-2019

Fuente; ayudadeblogger

Publicado por;