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.
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”
3 Un clic en “Editar HTML”
Ahora se le abrirá el Editor HTML de su plantilla
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.
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/>
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 == "item"'>
<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 "trebuchet
ms", 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('http://feedburner.google.com/fb/a/mailverify?uri=ForoAyudaDeBlogger',
'popupwindow', 'scrollbars=yes,width=550,height=520');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 == "") {this.value =
"Ingresa tu email...";}' onfocus='if (this.value ==
"Ingresa tu email...") {this.value = ""}'
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('script');
li.type =
'text/javascript';
li.async = true;
li.src =
('https:' == document.location.protocol ?
'https:' : 'http:') +
'//platform.stumbleupon.com/1/widgets.js';
var s = document.getElementsByTagName('script')[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('script');
po.type =
'text/javascript';
po.async = true;
po.src =
'https://apis.google.com/js/plusone.js';
var s =
document.getElementsByTagName('script')[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&width=570&colorscheme=light&
show_faces=true&stream=false&header=false&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
Buena esta caja pero quisiera tener la que esta arriba de este comentario para compartir me podrias ayudar
ResponderEliminarHola, en estos dias hare una publicacion sobre la caja que me indicas y podras activarlo copiando el codigo. Recuerda suscribirte para que recibas las nuevas actualizaciones de mi pagina.
EliminarSaludos.
Hola excelente este blog de los mejores y mas completos que he visto. Mi problema es que a la hora de poner Ctrl f en edicion html y escribir lo que necesito por ejemolo (igualmente me pasa con varios) no aparecen. No se porque. Gracias!
ResponderEliminarHola, he actualizado este post ahora sigue las instrucciones tal y cual se encuenta explicado en la parte que dice:
EliminarAhora se te abrirá el editor HTML de tu plantilla, se mostrara igual como la imagen que esta a continuación
Saludos.
Buenas noches Luis, me gustaria colocar esta caja y la verdad le he dado muchas vueltas a la explicación y lo he hecho tal cual y nada, no me queda en el blog, he probado haciendo nuevos blog y igual, gracias por tu aporte a los blogueros.
ResponderEliminarHola, enviame la direccion URL de tu blog.
EliminarSaludos.
Saludos y Gracias por la Ayuda, Coloque el Código pero No Me Sale.
ResponderEliminarAlgo estas haciendo mal, como puedes ver en mi blog de demos, funciona perfectamente. Saludos.
Eliminar