√ 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.

Ver Demo

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXddgThLip1EcJm-Mxh2c4IliYGV_EwcZZJaMX18mMXS6amwGJsyiBt3K2x5BWdyKx7o8X01uPtL9MJ7PKUohQenuX14kBPGKA0YyK-N3NcbiZjkGWGvvTm3IjWpwrrsisowUwmkQPtSpM/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='#FBFBFB',endColorstr='#F4F4F4',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 == "item"'>
<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='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=button_count&show_faces=true&width=120&action=like&font=arial&colorscheme=light"' 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('http://feedburner.google.com/fb/a/mailverify?uri=amorsevillista', 'popupwindow', 'scrollbars=yes,width=550,height=520');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 == "") {this.value = "Enter your email...";}' onfocus='if (this.value == "Enter your email...") {this.value = ""}' 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.