Tutoriales Sobre Blogger: Formulario de Suscripción Negro con Marcadores Sociales

Ya hemos visto como agregar Cajas de Suscripción o Formulario de Suscripción en todos los lugares de Blogger , ya sea al final de cada entrada y también como en un gadget hoy veremos como agregar uno mas en la sección Gadget de una manera muy facil.



Antes de Comenzar veremos una demostración:

Demostración

Comencemos.

• Paso 1: Vamos a Blogger>>Diseño>>Agregar un nuevo Gadget>>HTML/Javascript
• Paso 2: Una ves dentro del gadget agregaremos el siguiente código HTML 

<style>
 #MBTsidebars {
    padding: 0 5px 0 5px;
    width: auto;
}
#MBTemail-notice {
    background: none repeat scroll 0 0 #aac7c9;
    color: #000000;
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 20px;
    padding: 15px 20px;
    position: relative;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
}
#MBTemail-notice span {
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-top: 10px solid #aac7c9;
    bottom: -10px;
    height: 0;
    position: absolute;
    right: 40px;
    width: 0;
}
#MBTemail-form {
    background: none repeat scroll 0 0 padding-box #313131;
    border-bottom: 5px solid #202020;
    border-radius: 2px 2px 2px 2px;
    text-shadow: 0 -1px 0 #000000;
}
#MBTemail-form h6 {
    color: #FFFFFF;
    font-family: arial;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 0;
    padding: 15px 20px 0;
    text-transform: none;
}
#MBTemail-form form {
    color: #FFFFFF;
    margin: 0;
    padding: 10px 18px;
}
#MBTemail-form input.input-text {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #222222;
    margin: 0 0 10px;
    padding: 8px;
    width: 94%;
}
#MBTemail-form .MBT-button {
    background: none repeat scroll 0 0 #FFFFFF;
    float: right;
    margin: 0 0 0 10px;
}
#MBTemail-form p {
    color: #CCCCCC;
    font-size: 12px;
    line-height: 18px;
    margin: 0;
}
#MBTsidebar-social {
    float: left;
    font-size: 12px;
    margin: 0 0 15px;
    width: 100%;
}
ul.MBTsidebar_list {
    list-style: none outside none;
}
li.widget ul {
    list-style: none outside none;
}
#MBTsocial-profiles {
    float: left;
}
#MBTsocial-profiles ul {
    float: left;
    list-style: none outside none;
    margin: 0 5px 10px ;
}
#MBTsocial-profiles ul li {
    float: left;
}
#MBTsocial-profiles ul li a {
    display: block;
    float: left;
    height: 32px;
    margin: 0 10px;
    text-indent: -999em;
    width: 32px;
}
#MBTsocial-profiles a.social {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT55EnH_Ywsf4irRxEWyPZQ7eSBsVdNFC7de9eg4ibxfjnZSWZWxy5f6b5JqGJQ-69aZYfFCgRqxhzb_vIzEAA1LJe4UMKVem4W-xR9ioiH4cM6vBoN_Jcs6UQ1L2JDIH64Rtu55Rd9Nw/s1600/social.png") no-repeat scroll 0 0 transparent;
}
#MBTsocial-profiles a.facebook {
    background-position: -79px 0;
    height: 32px;
    margin: 0 15px 0 15px;
    width: 32px;
}
#MBTsocial-profiles a.facebook:hover {
    background-position: -79px -74px;
    height: 32px;
    width: 32px;
}
#MBTsocial-profiles a.twitter {
    background-position: -5px -111px;
    height: 32px;
    width: 32px;
}
#MBTsocial-profiles a.twitter:hover {
    background-position: -42px 0;
    height: 32px;
    width: 32px;
}
#MBTsocial-profiles a.youtube {
    background-position: -42px -37px;
    height: 32px;
    width: 32px;
}
#MBTsocial-profiles a.youtube:hover {
    background-position: -5px -37px;
    height: 32px;
    width: 32px;
}
#MBTsocial-profiles a.rss {
    background-position: -42px -74px;
    height: 32px;
    width: 32px;
}
#MBTsocial-profiles a.rss:hover {
    background-position: -79px -37px;
    height: 32px;
    width: 32px;
}
#MBTsocial-profiles a.googleplus {
    background-position: -5px 0;
    height: 32px;
    width: 32px;
}
#MBTsocial-profiles a.googleplus:hover {
    background-position: -5px -74px;
    height: 32px;
    width: 32px;
}
* {
    margin: 0;
    padding: 0;
}
.custom .sidebar ul.MBTsidebar_list {
    padding: 15px 0;
}
.MBT-button {
   border-top: 1px solid #1a90d9;
   background: #428fc2;
   background: -webkit-gradient(linear, left top, left bottom, from(#a8cbe3), to(#428fc2));
   background: -webkit-linear-gradient(top, #a8cbe3, #428fc2);
   background: -moz-linear-gradient(top, #a8cbe3, #428fc2);
   background: -ms-linear-gradient(top, #a8cbe3, #428fc2);
   background: -o-linear-gradient(top, #a8cbe3, #428fc2);
   padding: 8.5px 10px;
   -webkit-border-radius: 9px;
   -moz-border-radius: 9px;
   border-radius: 9px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: #080208;
   font-size: 14px;
   font-family: Georgia, serif;
   text-decoration: none;
   vertical-align: middle;
   }
.MBT-button:hover {
   border-top-color: #d3e1eb;
   background: #d3e1eb;
   color: #eb173a;
   }
.MBT-button:active {
   border-top-color: #507d9c;
   background: #507d9c;
   }
</style>
<br />
<div id="MBTsidebars">
<ul class="MBTsidebar_list">
<li id="MBTsocial-profiles">
<ul>
<li>
<a class="social facebook" href="https://www.facebook.com/USERNAME" rel="nofollow" target="_blank" title="Síguenos en Facebook">Facebook</a>
</li>
<li>
<a class="social twitter" href="https://twitter.com/USERNAME" rel="nofollow" target="_blank" title="Siguenos en Twitter">Twitter</a>
</li>
<li>
<a class="social googleplus" href="https://plus.google.com/NUMERO DE ID" rel="nofollow" target="_blank" title="GooglePlus">GooglePlus</a>
</li>
<li>
<a class="social rss" href="http://feeds.feedburner.com/USERNAME" rel="nofollow" target="_blank" title="RSS">Rss</a>
</li>
<li>
<a class="social youtube" href="http://www.youtube.com/user/USERNAME" rel="nofollow" target="_blank" title="Canal de Youtube">Youtube</a>
</li>
</ul>
</li>
<li id="MBTsidebar-social">
<div id="MBTemail-notice">
Unete de forma gratuita y recibe contenido fresco y automáticamente
</div>
<div id="MBTemail-form">
<h6>
Recibe las Notificaciones en tu Email </h6>
<form action="http://feedburner.google.com/fb/a/mailverify" class="nice custom" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=USERNAME', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="input-text" name="email" onblur="if (this.value == '') {this.value = 'Enter Your Email Address';}" onfocus="if (this.value == 'Enter Your Email Address') {this.value = '';}" type="text" value="Ingresa tu Correo Electrónico" />
<input name="uri" type="hidden" value="MoreBlogTools" />
<input name="loc" type="hidden" value="en_US" />
<input class="MBT-button" type="submit" value="Enviar" />
<br />
Respetamos tu Privacidad.
<br />
No enviamos Spam.
<br />
Eres libre de Darte de Baja cuando Gustes.
</form>
</div>
</li>
</ul>
</div>

• Paso 3: Guardamos nuestro Gadget y Disfrutamos de nuestro Formulario de Suscripción   

Nota:-  Solo debes de Cambiar USERNAME por los enlaces de tus Redes Sociales y NUMERO DE ID por en de Google+