Crear un widget de perfiles sociales para Blogger en un solo gadget

En Blogger se puede crear un sin numero de gadgets "widgets" y utilizarlos de la mejor manera, en este post enseñare como crear un widget de perfiles sociales con unos simples pasos.

A continuación puede ver su demostración en el siguiente blog de demos


¿Cómo crear un gadget de perfiles sociales?

Empezamos

1.- Diríjase a Blogger.com

2.- Un clic en Diseño

3.- Un clic en Agregar un gadget

4.- Un clic en HTML/Javascript



5.- Ingrese el siguiente código en su interior

<div class="social-widget">
    <span class="social-widget-link social-link-facebook">
        <span class="social-widget-link-count"><span class="fa fa-facebook"></span>6.7K Likes</span>
        <span class="social-widget-link-title">Facebook</span>
        <a href="AGREGAR AQUI LA URL DE SU PAGINA DE FACEBOOK" target="_blank"></a>
    </span>
    <!-- .social-widget-link -->
    <span class="social-widget-link social-link-pinterest">
        <span class="social-widget-link-count"><span class="fa fa-pinterest"></span>5.4K Followers</span>
        <span class="social-widget-link-title">Pinterest</span>
        <a href="AGREGAR AQUI LA URL DE SU PAGINA DE PINTEREST" target="_blank"></a>
    </span>
    <!-- .social-widget-link -->
    <span class="social-widget-link social-link-twitter">
        <span class="social-widget-link-count"><span class="fa fa-twitter"></span>3.8K Followers</span>
        <span class="social-widget-link-title">Twitter</span>
        <a href="AGREGAR AQUI LA URL DE SU PAGINA DE TWITTER" target="_blank"></a>
    </span>
    <!-- .social-widget-link -->
    <span class="social-widget-link social-link-instagram">
        <span class="social-widget-link-count"><span class="fa fa-instagram"></span>8.1K Followers</span>
        <span class="social-widget-link-title">Instagram</span>
        <a href="AGREGAR AQUI LA URL DE SU PAGINA DE INSTAGRAM" target="_blank"></a>
    </span>
    <!-- .social-widget-link -->
</div>

<style>
/*--------------------------------------------------------------
## Widget - Social by Ayudadeblogger.com
--------------------------------------------------------------*/

.social-widget {
}

.social-widget-link {
    position: relative;
    margin-bottom: 15px;
    position: relative;
    display: block;
    font-size: 13px;
    font-weight: bold;
    font-family: "Montserrat";
    background: #d0e9e6;
    color: #8a9a96;
    line-height: 47px;
    padding: 0 14px;
}

.social-widget-link-count {
}

.social-widget-link-count .fa {
    margin-right: 9px;
    font-size: 17px;
    vertical-align: middle;
}

.social-widget-link-title {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100px;
    text-align: center;
    background: rgba(255, 255, 255, 0.08);
    transition: width 0.3s;
}

.social-widget-link:hover .social-widget-link-title {
    width: 116px;
}

.social-widget a {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

body .social-link-twitter {
background-color: #55acee;
color: #fff;
}

body .social-link-facebook {
background-color: #3b5998;
color: #fff;
}

body .social-link-youtube {
background-color: #cd201f;
color: #fff;
}

body .social-link-vimeo {
background-color: #1ab7ea;
color: #fff;
}

body .social-link-tumblr {
background-color: #35465c;
color: #fff;
}

body .social-link-pinterest {
background-color: #bd081c;
color: #fff;
}

body .social-link-linkedin {
background-color: #0077b5;
color: #fff;
}

body .social-link-instagram {
background-color: #833ab4;
color: #fff;
}

body .social-link-github {
background-color: #4183c4;
color: #fff;
}

body .social-link-google-plus {
background-color: #dc4e41;
color: #fff;
}

body .social-link-dribbble {
background-color: #ea4c89;
color: #fff;
}

body .social-link-dropbox {
background-color: #007ee5;
color: #fff;
}

body .social-link-flickr {
background-color: #0063dc;
color: #fff;
}

body .social-link-foursquare {
background-color: #f94877;
color: #fff;
}

body .social-link-behance {
background-color: #1769ff;
color: #fff;
}

body .social-link-vine {
background-color: #00b488;
color: #fff;
}

body .social-link-rss {
background-color: #f26522;
color: #fff;
}

body .social-link-email {
background-color: #ef7583;
color: #fff;
}
</style>

6.- Debe realizar los respectivos cambios donde esta marcado de diferentes colores

Ejemplo:

AGREGAR AQUI LA URL DE SU PAGINA DE FACEBOOK

6.7K

7.- Un clic en Guardar


Eso es todo

Fácil verdad!

Cualquier pregunta no dude en escribir

Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
¿Te ha resultado útil este artículo, recomiendanos?
Si



Share:

Luis Chávez

Soy el fundador del sitio web Ayudadeblogger.com - Considerado un Pro Blogger profesional, Consultor SEO y desarrollador Web adicto, ejecuto una serie de sitios web desde mi Oficina Quito-Ecuador.

Related post

Comentarios

Disqus

Disqus comments:


Facebook

Facebook comments:

No hay comentarios:

Publicar un comentario