Home Trucos Blogger Caja de suscripciones caja de seguidores de Facebook y redes sociales para blogger

Caja de suscripciones caja de seguidores de Facebook y redes sociales para blogger

En este post van aprender a instalar una caja de seguidores, caja de suscriptores, y una caja de recomendaciones de las redes sociales. Este widget de suscripción social, se lo realiza con el objetivo de promover y aumentar el tráfico de tu blog de blogger de varias maneras. Lo mas principal, aumenta los suscriptores de tu blog, al igual que los fans de Facebook, twitter, pinterest, google +, e incluso podrán compartirlo en diferentes redes sociales. Sus lectores también tendrán la oportunidad de conectarse con ustedes, en sus otras redes sociales y todo esto se deberá a la implementación de un solo widget compacto y presentable, el cual aparecerá al final de cada post articulo.  Este widget tiene todo lo que necesitas para promocionar tu blog de blogger y así aumentar las visitas en tu blog.

Caja de suscripciones caja de seguidores de Facebook y redes sociales para blogger

Bueno luego de esta explicación mire su demostración en mi blog de demos


Ahora nos dirigimos a trabajar

1 Ir a Blogger

2 Un clic en “Plantilla”

Blogger

3 Un clic en “Editar HTML”

Blogger

Ahora se le abrirá el Editor HTML de su plantilla

Blogger

En este punto deberás presionar la tecla “Control” de su teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de su editor, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor, a continuación mire la imagen la cual le muestra como debe aparecerle el buscador en el editor HTML de su plantilla y así pueda colocar el código en el buscador al momento que yo diga busca este código.

Blogger

Busca este código

<data:post.body/>

Vas a encontrar tres códigos de los mismos, escoge la primera línea de código, y justo debajo de el inserta las siguientes líneas de código:

 Nota: Si no se le muestra este truco, por favor intente insertar el código en la segunda posición <data:post.body/>, y si tampoco se le muestra intente con la tercera posición <data:post.body/>

<!--Suscripciones by Ayudadeblogger.com-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
.tbibox {
    background: #fff;
    border: 1px solid #ddd;
    height: 360px;
    margin: 10px auto;
    padding: 10px;
    width: 572px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
.tbisubscribe {
    border: 1px solid #D3D3D3;
    padding: 8px;
    width: 300px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.tbisubscribe:hover {
    -moz-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
    -webkit-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
    box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
}
.tbimailbox {
    border: 1px solid #D3D3D3;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -moz-box-shadow: 1px 1px 1px 1px rgba(255, 172, 84, 0.4) inset;
    -webkit-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
    box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
    color: #666;
    font: 14px &quot;trebuchet ms&quot;, sans-serif;
    padding: 7px 15px;
    width: 160px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.tbimailbox:hover {
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.tbisubmit {
    font: bold 12px Tahoma, Geneva, sans-serif;
    font-style: normal;
    color: #ffffff;
    background: #ff5714;
    border: 0px solid #ffffff;
    text-shadow: 0px -1px 1px #222222;
    box-shadow: 2px 2px 5px #000000;
    -moz-box-shadow: 2px 2px 5px #000000;
    -webkit-box-shadow: 2px 2px 5px #000000;
    border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    padding: 8px 15px;
    cursor: pointer;
    margin: 0 auto;
}
.tbisubmit:active {
    cursor: pointer;
    position: relative;
    top: 2px;
}
.tbisubmit::-moz-focus-inner {
    border: 0;
    padding: 0;
    margin: 0;
}
.tbisharebox {
    border: 1px solid #D3D3D3;
    margin: -157px 0 0 330px;
    padding: 8px;
    width: 225px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.tbisharebox:hover {
    -moz-box-shadow: 1px 1px 2px #CCC inset;
    -webkit-box-shadow: inset 1px 1px 55px 1px rgba(249, 215, 126, 1);
    box-shadow: inset 1px 1px 55px 1px rgba(249, 215, 126, 1);
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
</style>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<div class='tbibox'>
    <div class='tbisubscribe'>
        <div style='color: #666666; font-weight: bold; font: 22px Oswald, cursive; margin: 0px 0px 10px 15px;'>Suscríbete Ya!</div>
        <div style='margin: 10px 0 0 6px;'>
            <form action='http://feedburner.google.com/fb/a/mailverify' class='emailform' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=ForoAyudaDeBlogger&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='margin: 0pt;' target='popupwindow'>
                <input name='uri' type='hidden' value='ForoAyudaDeBlogger'/>
                <input name='loc' type='hidden' value='es_ES'/>
                <input class='tbimailbox' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Ingresa tu email...&quot;;}' onfocus='if (this.value == &quot;Ingresa tu email...&quot;) {this.value = &quot;&quot;}' type='text' value='Ingresa tu email...'/>
                <input alt='' class='tbisubmit' title='' type='submit' value='Suscríbete'/>
            </form>
        </div>
        <div style='border: none; color: #666666; font: 22px Oswald, cursive; margin: 25px 0 0 5px;'>Siguenos en:</div>
        <div style='margin: -32px 0 0 120px;'>
            <a href='http://www.facebook.com/Ayudadeblogger' target='_blank' title='Siguenos en Facebook'><img alt='facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-emOLppWNhz3Ptezv13mRLfSty7VOGIqsWkQXGr6PbHIGZI2ajd4VpvJkzrby-XofE4xB3BmGCU7BpzrrK1O5kOQp7U_zJGAW3YNHxXFf310nthk0FWZYlLkD_3mLP38SqNz3FTSUaqA/s32/facebook500.png'/></a>
            <a href='https://www.twitter.com/ayudadeblogger' rel='nofollow' target='_blank' title='Sigueme en Twitter'><img alt='twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRfNDVf5w0Eg0j-TYtEjbhjpRz8HphCUJT7ZTab83aag3rYEPs-liu6APUsW4mcsfy53CTfHMbmXO-3F_CYBH9i8ez2AdNWocylKTCfGHFJART84X6Wy3SROG3EerGy-3RhS7GCjM7PD4/s32/twitter.png'/></a>
            <a href='https://plus.google.com/114283163993086871162' rel='nofollow' target='_blank' title='Sigueme en Google+'><img alt='gplus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrR_xT5cLqPORrxwWgk6NIYG2V4aJvMtlmb1MjDcIbHPTcvCeg6wtXjusasM_gBa-du-ywIQE_yXbIq2iPd0_OrYADFyP5WR04ohU-pK8dHpw3bcF01FDpqPo_dwXsGRHs_KAa4AIhJRM/s32/googleplus-revised.png'/></a>
            <a href='#' rel='nofollow' target='_blank' title='Sigueme en Pinterest'><img alt='pinterest' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVIyT_BUKAbAjX_I2o_iB5IjZ2nGeLuY7Mji8ggsH_2zy5CNeF3YXHK54H0fWRMB_DDyhNfSWxGaJmibJHofk9qb5kukoXujhs57iRIk37DRwhiMkIpr1zj2MJ0qAg-oglFvvHCrv0rWA/s32/pinterest.png'/></a>
            <a href='http://feeds.feedburner.com/ForoAyudaDeBlogger' rel='nofollow' target='_blank' title='Suscríbete a RSS'><img alt='rss' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBk93121uKhpPQYdWBxzFGYr0OVZMgYUyhes6GFsJJs0DAYlg05oHPYc_I41m9C0nSjOvArDygdfLCRJmQb-e1oV2MxQDD8hsXrDWjP0b3jG1h5ArUN-VR4UAUclIPFL2nyXESf1fwdFg/s32/rss.png'/></a>
        </div>
    </div>
    <div class='tbisharebox'>
        <script type='text/javascript'>
            var switchTo5x = true;
        </script>
        <script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
        <script type='text/javascript'>
            stLight.options({
                onhover: false
            });
        </script>
        <div style='margin: 5px 5px;'>
            <span class='st_fblike_hcount' displaytext=''/>
        </div>
        <div style='margin: -30px -20px 0 0; float: right;'>
            <a class='twitter-share-button' data-count='horizontal' data-lang='en' data-related='Ayudadeblogger: Actualizaciones de blogger, trucos blogger, SEO, Plantillas gratis, Herramientas blogger, Redes sociales, optimizacion de blogs, slideshow, widgets y plugins para blogger.' data-via='ayudadeblogger' expr:data-text='data:post.title' expr:data-url='data:post.canonicalUrl' href='http://twitter.com/share' rel='nofollow'/>
            <b:if cond='data:post.isFirstPost'>
                <script src='http://platform.twitter.com/widgets.js' type='text/javascript'>
                  
                </script>
            </b:if>
        </div>
        <div class='addthis_toolbox addthis_default_style' style='margin: 10px 0 12px 85px;'>
            <a class='addthis_counter'/>
            <script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
        </div>
        <div style='margin: 5px 5px;'>
            <su:badge layout='1'/>
            <script type='text/javascript'>
                (function () {
                    var li = document.createElement(&#39;script&#39;);
                    li.type = &#39;text/javascript&#39;;
                    li.async = true;
                    li.src = (&#39;https:&#39; == document.location.protocol ? &#39;https:&#39; : &#39;http:&#39;) + &#39;//platform.stumbleupon.com/1/widgets.js&#39;;
                    var s = document.getElementsByTagName(&#39;script&#39;)[0];
                    s.parentNode.insertBefore(li, s);
                })();
            </script>
        </div>
    </div>
    <div style='float: right; margin: -40px -5px 0 0;'>
        <div class='g-plusone' data-size='medium' expr:data-href='data:post.url'/>
        <script type='text/javascript'>
            (function () {
                var po = document.createElement(&#39;script&#39;);
                po.type = &#39;text/javascript&#39;;
                po.async = true;
                po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
                var s = document.getElementsByTagName(&#39;script&#39;)[0];
                s.parentNode.insertBefore(po, s);
            })();
        </script>
    </div>
    <div style='margin-top: 20px;'>
<iframe allowTransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.comAyudadeblogger&amp;width=570&amp;colorscheme=light&amp; show_faces=true&amp;stream=false&amp;header=false&amp;height=180' style='border:none; overflow:hidden; width:570px; height:180px;'/>
    </div>
</div>
</b:if>
<!--Social Suscripciones Caja by Ayudadeblogger.com-->

Realiza estos cambios:

Cambia los dos textos que están marcados de color rojo ForoAyudaDeBlogger por el nombre de tu feedburner de suscripciones.  

También deberás cambiar los 5 links que están marcados de color azul por los links correspondientes de tus redes sociales

Y por ultimo cambia el link que esta marcado de color verde por el link de tu Fanpage de Facebook.

http://www.facebook.com/Ayudadeblogger

Eso es todo ahora dale un clic en “Guardar plantilla” y abre cualquier entrada de tu blog para que mires tus nuevos cambios.

¿Necesitas ayuda?

Cualquier pregunta no duden en hacérmelo saber y de inmediato les responderé.

Saludos.

Recuerda suscribirte:

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

TAGS:


Share:

Related post

Comentarios

8 comentarios: