add

¿Cómo insertar un Widget contador social en mi blog de Blogger?


Un truco muy fácil de realizarlo, lo que vamos hacer es ingresar un código en un widget HTML/Javascript y realizar algunos cambios, luego nos dirigiremos al Editor HTML de nuestra plantilla para ingresar unos estilos, eso es todo, guardaremos la plantilla y visitaremos nuestro blog.

Lo que va a mostrar nuestro widget contador social son las principales redes sociales que disponemos en estos tiempos como: Facebook, Google+, Twitter, Youtube, Dribbble, RSS, LinkedIn e Instagram, podemos poner el número de seguidores que necesitemos mostrar.

¿Cómo insertar un Widget contador social en mi blog de Blogger?

Pueden ver su demostración en el siguiente blog de demos

DEMO

Video tutorial


Empezamos

Tutorial Blogger

1 Ir a Blogger.com

2 Un clic en Diseño

¿Cómo insertar un Widget contador social en mi blog de Blogger?

3 Un clic en Añadir un gadget

¿Cómo insertar un Widget contador social en mi blog de Blogger?

4 Busca el widget HTML/Javascript, ábrelo

¿Cómo insertar un Widget contador social en mi blog de Blogger?

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

<style>
/* Widget social contador
--------------------------------------*/
.socialcounter {
    overflow: hidden;
}
li.social_item-wrapper {
float: left;
width: 48%;
text-align: center;
margin-right: 4% !important;
margin-bottom: 10px !important;
color: #fff;
}
#sidebar .widget {
margin-bottom: 35px;
}
a.social_item {
position: relative;
display: block;
height: 60px;
line-height: 60px;
overflow: hidden;
}
.social_item-wrapper:nth-child(2n+2) {
margin-right: 0 !important;
}
.social_icon {
float: left;
line-height: 60px;
width: 41px;
font-size: 1.3rem;
}
a.social_item.social_facebook {
background: #3F5B9B;
}
.fa-facebook.social_icon {
background: #2E4372;
}
li.social_item-wrapper:hover .fa-facebook.social_icon {
background: #3F5B9B;
}
li.social_item-wrapper:hover .social_facebook {
background: #2E4372;
}
a.social_item.social_twitter {
background: #1C97DE;
}
.fa-twitter.social_icon {
background: #1571A5;
}
li.social_item-wrapper:hover .fa-twitter.social_icon {
background: #1C97DE;
}
li.social_item-wrapper:hover .social_twitter {
background: #1571A5;
}
a.social_item.social_youtube {
background: #E22020;
}
.fa-youtube.social_icon {
background: #B31919;
}
li.social_item-wrapper:hover .fa-youtube.social_icon {
background: #E22020;
}
li.social_item-wrapper:hover .social_youtube {
background: #B31919;
}
a.social_item.social_dribbble {
background: #E82159;
}
.fa-dribbble.social_icon {
background: #B51A45;
}
li.social_item-wrapper:hover .fa-dribbble.social_icon {
background: #E82159;
}
li.social_item-wrapper:hover .social_dribbble {
background: #B51A45;
}
a.social_item.social_rss {
background: #E86321;
}
.fa-rss.social_icon {
background: #C2521B;
}
li.social_item-wrapper:hover .fa-rss.social_icon {
background: #E86321;
}
li.social_item-wrapper:hover .social_rss {
background: #C2521B;
}
a.social_item.social_google-plus {
background: #E82C2C;
}
.fa-google-plus.social_icon {
background: #BF2424;
}
li.social_item-wrapper:hover .fa-google-plus.social_icon {
background: #E82C2C;
}
li.social_item-wrapper:hover .social_google-plus {
background: #BF2424;
}
a.social_item.social_linkedin {
background: #0275B6;
}
.fa-linkedin.social_icon {
background: #02669E;
}
li.social_item-wrapper:hover .fa-linkedin.social_icon {
background: #0275B6;
}
li.social_item-wrapper:hover .social_linkedin {
background: #02669E;
}
a.social_item.social_instagram {
background: #8E714D;
}
.fa-instagram.social_icon {
background: #6F583C;
}
li.social_item-wrapper:hover .fa-instagram.social_icon {
background: #8E714D;
}
li.social_item-wrapper:hover .social_instagram {
background: #6F583C;
}
a.social_item.social_pinterest {
background: #CA2027;
}
.fa-pinterest.social_icon {
background: #AB1B21;
}
li.social_item-wrapper:hover .fa-pinterest.social_icon {
background: #CA2027;
}
li.social_item-wrapper:hover social_pinterest {
background: #AB1B21;
}
ul.social-counter a {
color: #fff;
}
</style>
<div class="socialcounter"><ul class="social-counter"><li class="social_item-wrapper"><a href="http://www.facebook.com/ayudadeblogger" class="social_item social_facebook"><i class="fa fa-facebook social_icon"></i><span class="social_num">30,000</span></a></li><li class="social_item-wrapper"><a href="http://www.twitter.com/ayudadeblogger" class="social_item social_twitter"><i class="fa fa-twitter social_icon"></i><span class="social_num">20,000</span></a></li><li class="social_item-wrapper"><a href="https://www.youtube.com/c/ayudadeblogger" class="social_item social_youtube"><i class="fa fa-youtube social_icon"></i><span class="social_num">30,000</span></a></li><li class="social_item-wrapper"><a href="http://www.ayudadeblogger.com/" class="social_item social_dribbble"><i class="fa fa-dribbble social_icon"></i><span class="social_num">250,000</span></a></li><li class="social_item-wrapper"><a href="http://feeds.feedburner.com/ForoAyudaDeBlogger" class="social_item social_rss"><i class="fa fa-rss social_icon"></i><span class="social_num">130,000</span></a></li><li class="social_item-wrapper"><a href="https://plus.google.com/b/109642587966892719343/+Ayudadeblogger" class="social_item social_google-plus"><i class="fa fa-google-plus social_icon"></i><span class="social_num">230,000</span></a></li><li class="social_item-wrapper"><a href="https://www.linkedin.com/in/luis-chavez-a9154953" class="social_item social_linkedin"><i class="fa fa-linkedin social_icon"></i><span class="social_num">30,000</span></a></li><li class="social_item-wrapper"><a href="https://www.instagram.com/ayudadeblogger/" class="social_item social_instagram"><i class="fa fa-instagram social_icon"></i><span class="social_num">150,000</span></a></li></ul></div>

Realiza estos simples cambios:

Cambie todas las direcciones URLs que están marcadas de color azul y remplácelos por sus redes sociales

Además, puede cambiar el número del contador.

6 Un clic en Guardar, ubique su widget contador social donde usted guste

¿Cómo insertar un Widget contador social en mi blog de Blogger?

Aún no hemos terminado, falta ingresar los estilos, siga las siguientes instrucciones

1 Un clic en Plantilla

¿Cómo insertar un Widget contador social en mi blog de Blogger?

2 Un clic en Editar HTML

¿Cómo insertar un Widget contador social en mi blog de Blogger?

3 Justo abajo del <head> ingrese el siguiente estilo

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css' rel='stylesheet'/>

¿Cómo insertar un Widget contador social en mi blog de Blogger?

4 Eso es todo, un clic en Guardar plantilla

¿Cómo insertar un Widget contador social en mi blog de Blogger?

Visite su blog de Blogger y mire cómo funciona este widget contador social para Blogger

¡Fácil verdad!

¿Necesitas ayuda?

Cualquier pregunta no dudes en escribir

0 comentarios:

Publicar un comentario en la entrada

Discusión

person_pin 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) Aplicaciones moviles (15) Backlinks (1) Breaking News para Blogger (3) Como (32) 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 (10) Material Design Blogger (2) 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 (69) Widgets Suscripciones (9) Widgets y Plugins (6)

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

Seguidores

Comentarios