Tutoriales Sobre Blogger: Contador de Suscriptores para tu Redes Sociales

En este tutorial veremos como agregar un gadget con contadores de Suscriptores para tus Redes Sociales. Los botones de Redes Sociales son realmente muy importantes ya que es la mejor
manera para obtener trafico a tu blog y mas aum cuando nuestro gadget se ve limpio y atractivo.

Antes de comenzar veremos una demostración: 

Demostración

Comencemos:

• Paso 1: Vamos a Blogger>>Plantilla>> Edición HTML.
• Paso 2: Buscamos la siguiente linea (Ctrol + F).

]]></b:skin>

• Paso 3: Justo por encima de ]]></b:skin> pegamos el código CSS 

<///***Power By: Tutoriales-Blogger.info ***///>
#TBC-social-layout{
    min-width:200px;
    border:5px solid #E2E2E2;
}
#TBC-social-layout h3 {
    font-family:Georgia, "Times New Roman", Times, serif !important;
    background: none repeat scroll 0 0 #DBDBDB;
    border: 1px solid #CCCCCC;
    color: #666666;
    font-weight: normal;
    line-height: 1.8em !important;
    margin: 0 auto;
    text-align:center;
}
a.subscribeSidebarBox {
    border: medium none;
    cursor: pointer;
    display: block;
    height: 55px;
    position: relative;
    min-width: 200px;
}
#sidebarSubscribe .sds_snc_icon {
    background-image: url(http://3.bp.blogspot.com/-4rlLPMFze5I/UBYM4WuhmrI/AAAAAAAACT0/Aasm68clEu4/s1600/social_icon_column_user.png);
    background-repeat:no-repeat scroll 0 0 transparent;
    height: 50px;
    width: 50px;
}
#sidebarSubscribe span {
    color: #6E6E6E;
    display: block;
    padding: 1px;
    position: absolute;
    text-shadow: 1px 1px 0 white;
}
#sidebarSubscribe .title {
    font-family:Helvetica, sans-serif;
    font-size: 10px; font-weight:bold;
    left: 65px;
    top: 8px;
}
#sidebarSubscribe .sds_snc_count {
    font-size: 20px;
    font-weight: bold;
    left: 65px;
    top: 23px;
}
#subscriberRSS .sds_snc_icon { background-position: -300px 0px; }
#sidebarFaceBook .sds_snc_icon { background-position: 0px 0px; }
#followTwitter .sds_snc_icon { background-position: -250px 0; }
#flickerPhoto .sds_snc_icon { background-position: -50px 0; }
#youtubeSubscribers .sds_snc_icon { background-position: -100px 0; }
#vimoVideos .sds_snc_icon { background-position: -150px 0; }
#subscribeEmail .sds_snc_icon { background-position: -200px 0; }
#githubSubscribe .sds_snc_icon { background-position: -600px 0; }
.tbc_snc_compact {
    font-family:Georgia, "Times New Roman", Times, serif !important;
    min-width:200px;
    border:1px solid #CCCCCC;
    text-align:center;
}
.tbc_snc_compact h3 {
    background: none repeat scroll 0 0 #DBDBDB;
    border: 1px solid #CCCCCC;
    color: #444444; font-weight: normal; line-height: 1.8em !important;
    margin: 0; padding: 0 0 0 7px;
    text-align:center;
}
.tbc_snc_compact ul.sds_snc_compact_ul {
    list-style: none outside none !important;
    margin:0; padding:0;
    min-width:inherit;
    text-align:center;
    line-height:15px !important;
}
.tbc_snc_compact ul.sds_snc_compact_ul li {
    float:left;
    list-style: none outside none !important;
    margin:0 0 5px 0px !important;
    padding:0 0 5px 3px !important;
    text-align: center;
    font-size:10px;
    width:90px !important;
    border:0px solid #CCC;
    height:80px !important;
}
.tbc_snc_compact ul.sds_snc_compact_ul li a.compact_a:hover
{
    background: none repeat scroll 0 0 !important;  text-decoration:none !important;
}
.tbc_snc_compact ul.sds_snc_compact_ul li .sds_snc_icon {
    display:block;
    background-image: url(http://3.bp.blogspot.com/-4rlLPMFze5I/UBYM4WuhmrI/AAAAAAAACT0/Aasm68clEu4/s1600/social_icon_column_user.png);
    background-repeat:no-repeat scroll 0 0 transparent;
    height: 50px;
    width: 48px;
    cursor:pointer;
    margin-left:20px;
}
.tbc_snc_compact a.compact_a .sds_snc_count {
    font-family:Arial, Helvetica, sans-serif; color:#666666;
    display:block;
}
.tbc_snc_compact a.compact_a .sds_snc_count:hover
{
    color:#FF0000; cursor:pointer; font-size:11px;
}

• Paso 4: Guardamos los cambios efectuados en la plantilla.

Ahora agregaremos un gadget donde mostraremos Nuestro contador de Suscriptores para Blogger 

• Paso 5: Vamos a Blogger>>Diseño>>Añadir un Gadget>>HTML/Javascript.
• Paso 6: Dentro del Gadget pegamos el siguiente código HTML.

<div id="TBC-social-layout"><div class="sidebarContainer" id="sidebarSubscribe"><a href="http://www.facebook.com/pages/USERNAME" target="_blank" class="subscribeSidebarBox" id="sidebarFaceBook">
                        <span class="sds_snc_icon"></span>
                        <span class="title">Fan en Facebook</span>
                        <span class="sds_snc_count">15</span>
                    </a><a href="http://twitter.com/USERNAME" target="_blank" class="subscribeSidebarBox" id="followTwitter">
                        <span class="sds_snc_icon"></span>
                        <span class="title">Seguidores en Twitter</span>
                        <span class="sds_snc_count">25</span>
                    </a><a href="http://feeds.feedburner.com/USERNAME" target="_blank" class="subscribeSidebarBox" id="subscriberRSS">
                        <span class="sds_snc_icon"></span>
                        <span class="title">Rss Suscriptores</span>
                        <span class="sds_snc_count">50</span>
                    </a><a href="http://www.youtube.com/USERNAME" target="_blank" class="subscribeSidebarBox" id="youtubeSubscribers">

                        <span class="sds_snc_icon"></span>
                        <span class="title">Canal de Youtube</span>
                        <span class="sds_snc_count">2</span>
                    </a><a target="_blank" href="http://feedburner.google.com/fb/a/mailverify?uri=USERNAME&amp;loc=en_US" class="subscribeSidebarBox" id="subscribeEmail">
                        <span class="sds_snc_icon"></span>
                        <span class="title">Suscribirse Gratis</span>
                        <span class="sds_snc_count">Email</span>
                    </a> <div class="clear"></div>
                </div>
            </div>

• Paso 7: Guardamos nuestro gadget y a disfrutar de Nuestro contador de Suscriptores para tus Redes Sociales 

Nota:- Solo tendrás que cambiar la URL OJO por la de tus Redes Sociales y los numero