09 abril 2013

Caja de suscripción más redes sociales en blogger

En el día de ayer os mostre una Caja de Suscripción con Redes Sociales y hoy os muestro otra completamente diferente. El objetivo principal de estas cajas consiste en aumentar, si es posible, el tráfico de nuestros blog de varias formas, mediante suscripciones al blog y conseguir más fans en las diferentes Redes Sociales (Facebook, Twitter, Google+). También lleva incorporados los botones para compartir la entrada en dichas redes.

Comencemos.

Paso 1: Vamos a Blogger Plantilla- Edicion HTML- Expandir Plantilla de Artilugios
Paso 2: Buscamos la Siguiente linea (Ctrol + F)

]]></b:skin>

Y justamente antes colocamos el siguiente código CSS

form.emailform{margin:20px 0 0;display:block;clear:both;}
.amortext{
background:url(http://3.bp.blogspot.com/-SoB4RN7Bchk/TZ1ouay9q0I/AAAAAAAAAlE/dkyZEzF2HIw/s28/w2b-mail.png) no-repeat scroll 4px center transparent;padding:7px 15px 7px 35px;color:#666;font-weight:bold;text-decoration:none;
border:1px solid #D3D3D3;-moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;-moz-box-shadow: 1px 1px 2px #CCC inset;-webkit-box-shadow: 1px 1px 2px #CCC inset;box-shadow: 1px 1px 2px #CCC inset;}
.amorboton{color:#666;font-weight:bold;text-decoration:none;padding:6px 15px;border:1px solid #D3D3D3;cursor: pointer;
-moz-border-radius: 4px;-webkit-border-radius: 4px;-goog-ms-border-radius: 4px;border-radius: 4px;background: #fbfbfb;
background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#FBFBFB&#39;,endColorstr=&#39;#F4F4F4&#39;,GradientType=0 );background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);}
#caja {
-moz-border-radius: 10px 10px 10px 10px;-webkit-border-radius: 10px 10px 10px 10px;-goog-ms-border-radius: 10px 10px 10px 10px;border-radius: 10px;background: none repeat scroll 0 0 transparent;border: 1px solid #D3D3D3;padding: 8px;-moz-transition: all 0.3s ease-out;-o-transition: all 0.3s ease-out;-webkit-transition: all 0.3s ease-out;-ms-transition: all 0.3s ease-out;transition: all 0.3s ease-out;width:95%;}
#caja:hover{background: none repeat scroll 0 0 #F3F2F2;-moz-box-shadow: 1px 1px 2px #CCC inset;-webkit-box-shadow: 1px 1px 2px #CCC inset;box-shadow: 1px 1px 2px #CCC inset;}
.redes { margin:5px auto 10px; text-align:left;}
.redes .fac, .redes .twi, .redes .goo { width: 100px; overflow:hidden; zoom: 1; *display: inline; display: inline-block; vertical-align: top;}.redes .goo { width:60px;}
.social-rss,.social-email, .social-twitter, .social-facebook, .social-google{ background: url(http://i17.servimg.com/u/f17/13/20/23/83/sin_ta10.png) no-repeat top left; }
.social-facebook{ background-position: 0 0; width: 44px; height: 44px; float:left;}.social-facebook:active{ background-position: -48px 0; width: 44px; height: 44px;}.social-facebook:hover{ background-position: -48px 0; width: 44px; height: 44px;}.social-twitter{ background-position: -96px 0; width: 44px; height: 44px; float:left;}.social-twitter:active{ background-position: -150px 0; width: 44px; height: 44px;}.social-twitter:hover{ background-position: -150px 0; width: 44px; height: 44px;}.social-google{ background-position: -202px 0; width: 44px; height: 44px;float:left;}.social-google:active{ background-position: -251px 0; width: 44px; height: 44px;}.social-google:hover{ background-position: -251px 0; width: 44px; height: 44px;}.social-rss{ background-position: -302px 0; width: 44px; height: 44px; float:left;}.social-rss:active{ background-position: -355px 0; width: 44px; height: 44px;}.social-rss:hover{ background-position: -355px 0; width: 44px; height: 44px;}.social-email{ background-position: -405px 0; width: 44px; height: 44px; float:left;}.social-email:active{ background-position: -456px 0; width: 44px; height: 44px;}.social-email:hover{ background-position: -456px 0; width: 44px; height: 44px;}

Paso 3: Justo por debajo de <div class='post-footer-line post-footer-line-1'/> o <div class='post-footer-line post-footer-line-2'/> pegamos el siguiente codigo:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='caja'>
<table width='100%'><tbody>
<span style='font-style: italic; font-size: 30px; font-family: arial,sans-serif, verdana; color:#000;'>Te ha gustado este artículo..?</span><tr><td>
<div class='redes'>
<div class='fac'><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=true&amp;width=120&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:120px; height:25px'/>
</div>
<div class='twi'> <a class='twitter-share-button' data-count='horizontal' data-lang='es' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/> </div>
<div class='goo'> <g:plusone size='medium'/> </div></div></td></tr><tr>
<td align='left'> <p style='color:#000; font-style:italic; margin:0px 0px 5px 0px; '>Recibe nuestros artículos por Email!</p>
<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=amorsevillista&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='amorsevillista'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='amortext' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}' onfocus='if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}' type='text' value='Ingresa tu email...'/>
<input alt='' class='amorboton' title='' type='submit' value='Enviar'/></form></td>
<td><p style='color:#000; font-style:italic; font-size:18px; margin:0px 0px 5px 20px; '>Síguenos!</p>
<div class='iconos'><a href='http://nombre-de-tu-blog.blogspot.com/feeds/posts/default?alt=rss' rel='nofollow' target='_blank' title='Suscribete y no te pierdas nuestros articulos!!!'><span class='social-rss'/></a> <a href='https://www.facebook.com/nombre-de-facebook' rel='nofollow' target='_blank' title='Síguenos en Facebook'><span class='social-facebook'/></a> <a href='https://plus.google.com/u/0/numeros-del-perfil-de-google/posts' rel='nofollow' target='_blank' title='síguenos en google+'><span class='social-google'/></a><a href='https://twitter.com/nombre-de-twitter' rel='nofollow' target='_blank' title='Síguenos en Twitter, interactuar es facil'><span class='social-twitter'/></a>
<a href='mailto:tu-email' rel='nofollow' target='_blank' title='Email'><span class='social-email'/></a>
</div></td></tr></tbody></table></div></b:if>

Realiza estos cambios:
Cambia los dos textos que están marcados de color rojo amorsevillista por el nombre de tu feedburner de suscripciones.
Cambia los 5 links que están marcados de color azul por los links correspondientes de tus redes sociales

Ahora dale un clic en “Guardar plantilla” y abre cualquier entrada de tu blog para que veas tus cambios.

Nota: Al realizar este truco los cambios no son visibles en vista previa porque solo son visibles en páginas individuales.

Si te ha gustado este artículo clic aquí para suscribirse gratis a través de nuestro correo electrónico, de esta forma recibirás un envío por cada nuevo artículo publicado o compártelo en las diferentes redes sociales.


Escrito por:

Mi nombre es Antonio, soy sobre todo Sevillista y apasionado con los blog desde el 2007.

Sígueme en: | Facebook | Twitter | Google+

7 comentarios

Hola, he intentado poner esta caja en mi blog, pero no encuentro ninguna de las lineas mencionadas.
Tengo una plantilla prediseñada y me encantaría poder tener este widget en mi blog me puedes ayudar???

Gracias.
[email protected]

Nana, déjame dirección URL de tu blog para ver la solución.

Hola, este es la URL http://ahorraygana-es.blogspot.com.es/
Gracias!!

Nana, con los cambios del nuevo editor de Blogger, el primer código lo encuentras en la primera flechita negra a la izquierda en tu plantilla.
En esta imágen puedes ver demo

El segundo código, buscalo por: line-2 y te apareceran 2 códigos semejantes a esto: <div class='post-footer-line post-footer-line-2'/>

Pega el paso 3 de la entrada, justo debajo.

Espero que te de buen resultado, si no es así, comenta e intentaremos solucionar de otra forma.

Hola Antonio, no consigo encontrar el segundo código... no te molestes no lo pondré...

Muchas gracias por tu ayuda e interés!!!

Hola, no consigo ponerla, ya he colocado los códigos pero simplemente no aparece, te dejo el url http://comandoterminal.blogspot.mx/
espero me puedas ayudar, buen blog.

Isanter, la he probado en varias plantillas y en todas los resultados han sido óptimos.
Te aclaro que solo se visualiza en las páginas individuales, no en portada.

Saludos.


Por favor, comente de acuerdo al tema del artículo.
Serán removidos todos los Comentarios con enlaces.
Si quieres recibir los nuevos comentarios marca "Avisarme"