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

Demo Clic aquí

¿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

TAGS: Widgets para BloggerWigdet social

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.