Personalizar el gadget "Enlaces de Suscripción" de Blogger

Este es el gadget original:

Y después de modificarlo quedará así:

Y al desplegarse se verá de esta forma:


Si aún no usas el gadget entra en Diseño | Elementos de la página | Añadir un gadget | Enlaces de suscripción, o si usas la nueva interfaz entra en Diseño | Añadir un gadget | Enlaces de suscripción.


Ya teniéndolo en tu blog, o si ya lo tenías puesto, entra en la Edición HTML de la plantilla, y SIN expandir los artilugios busca esta línea:

<b:widget id='Subscribe1' locked='false' title='Suscribirse a' type='Subscribe'/>

Elimínala y en su lugar pon este código:

<b:widget id='Subscribe1' locked='false' title='Suscribirse a' type='Subscribe'>
<b:includable id='main'>
<b:if cond='data:isPublic'>
<div style='white-space:nowrap'>
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<b:loop values='data:feeds' var='feed'>
<div expr:class='&quot;subscribe-wrapper subscribe-type-&quot; + data:feed.type'>
<div expr:class='&quot;subscribe expanded subscribe-type-&quot; + data:feed.type' expr:id='&quot;SW_READER_LIST_&quot; + data:widgetId + data:feed.type' style='display:none;'>
<div class='top'>
<span class='inner' expr:onclick='&quot;return(_SW_toggleReaderList(event, \&quot;&quot; + data:widgetId +data:feed.type + &quot;\&quot;));&quot;'>
<div class='subscribe-arrow-collapse'/>
<data:feed.title/>
</span>
<div class='feed-reader-links'>
<div class='subscribe-add-platform'>
<div class='subscribe-add-bubble-wrapper'>
<div class='subscribe-add-bubble'>+</div>
<div class='subscribe-add-bubble-arrow'/>
</div>
<a class='feed-reader-link' expr:href='&quot;http://www.google.com/ig/add?source=bstp&amp;feedurl=&quot; + data:feed.encodedUrl' target='_blank'>Agregar a Google</a>
</div>
<div class='subscribe-add-platform'>
<div class='subscribe-add-bubble-wrapper'>
<div class='subscribe-add-bubble'>+</div>
<div class='subscribe-add-bubble-arrow'/>
</div>
<a class='feed-reader-link' expr:href='&quot;http://www.netvibes.com/subscribe.php?url=&quot; + data:feed.encodedUrl' target='_blank'>Agregar a Netvibes</a>
</div>
<div class='subscribe-add-platform'>
<div class='subscribe-add-bubble-wrapper'>
<div class='subscribe-add-bubble'>+</div>
<div class='subscribe-add-bubble-arrow'/>
</div>
<a class='feed-reader-link' expr:href='&quot;http://www.newsgator.com/ngs/subscriber/subext.aspx?url=&quot; + data:feed.encodedUrl' target='_blank'>Agregar a NewsGator</a>
</div>
<div class='subscribe-add-platform'>
<div class='subscribe-add-bubble-wrapper'>
<div class='subscribe-add-bubble'>+</div>
<div class='subscribe-add-bubble-arrow'/>
</div>
<a class='feed-reader-link' expr:href='&quot;http://add.my.yahoo.com/content?url=&quot; + data:feed.encodedUrl' target='_blank'>Agregar a MyYahoo!</a>
</div>
<div class='subscribe-add-platform'>
<div class='subscribe-add-bubble-wrapper'>
<div class='subscribe-add-bubble'>+</div>
<div class='subscribe-add-bubble-arrow'/>
</div>
<a class='feed-reader-link' expr:href='data:feed.url' target='_blank'>Suscribirse vía Atom</a>
</div>
</div>
</div>
<div class='bottom'/>
</div>

<div class='subscribe' expr:id='&quot;SW_READER_LIST_CLOSED_&quot; + data:widgetId +data:feed.type' expr:onclick='&quot;return(_SW_toggleReaderList(event, \&quot;&quot; + data:widgetId +data:feed.type + &quot;\&quot;));&quot;'>
<div class='top'>
<span class='inner'>
<div class='subscribe-arrow-expand'/>
<span expr:onclick='&quot;return(_SW_toggleReaderList(event, \&quot;&quot; + data:widgetId +data:feed.type + &quot;\&quot;));&quot;'>
<data:feed.title/>
</span>
</span>
</div>
<div class='bottom'/>
</div>

</div>
</b:loop>
<div class="subscribe-via-email-wrapper">

<form action='http://feedburner.google.com/fb/a/mailverify' expr:onsubmit='&quot;window.open(\&quot;http://feedburner.google.com/fb/a/mailverify?uri=Nombre-de-mi-feed\&quot;, \&quot;popupwindow\&quot;, \&quot;scrollbars=yes,width=550,height=520\&quot;); return true&quot;' method='post' target='popupwindow'>
<input class='follow-by-email-address' name='email' placeholder='dirección de correo....' size='14' type='text'/>
<input class='follow-by-email-submit' type='submit' value='Submit'/>
<input name='uri' type='hidden' value='Nombre-de-mi-feed'/>
<input name='loc' type='hidden' value='es_ES'/>
</form>

</div>
<div style='clear:both'/>
</div>
</div>
</b:if>
</b:includable>
</b:widget>

En donde dice Nombre-de-mi-feed pon el nombre que le has dado a tu feed en Feedburner, por ejemplo, en mi caso, esta es la URL de mi feed de Feedburner:

http://feeds.feedburner.com/CiudadBlogger

Por lo tanto, el nombre de mi feed, en mi caso es CiudadBlogger
Para que esa opción de correo funcione deberás tener activado en Feedburner la suscripción por correo electrónico.

Ahora antes de ]]></b:skin> agrega los estilos:

div.subscribe div.top, div.subscribe div.bottom {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='');}
div.subscribe div.top, div.subscribe div.bottom {
background: none !important;
padding:3px;
}

.feed-reader-links {
background-color: #222 !important; /* Color de fondo del contenedor desplegable */
padding: 1px 0 !important;
border-radius: 3px !important;
color: #000 !important;
-khtml-border-radius: 3px !important;
-webkit-border-radius: 3px !important;
-moz-border-radius: 3px !important;
-moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
-webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
-khtml-box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
width:170px;
}
.subscribe-arrow-expand {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #333; /* Color de la flecha */
float: right;
margin-top: 6px;
}
.subscribe-arrow-collapse {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #333; /* Color de la flecha */
float: right;
margin-top: 6px;
}
.subscribe-add-bubble-wrapper {
float: left;
margin-right: 10px;
padding-top: 2px;
}
.subscribe-add-bubble {
background: #444; /* Color del ícono dentro de los enlaces */
font-size: 8px;
padding: 3px;
border-radius: 2px;
-khtml-border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.5);
-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.5);
-khtml-box-shadow: 1px 1px 1px rgba(0,0,0,0.5);
box-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}
.subscribe-add-bubble-arrow {
width: 0;
height: 0;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
border-top: 3px solid #444; /* Color del ícono dentro de los enlaces */
margin-left: 2px;
}
.subscribe-add-platform {
border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
line-height: 0.4;
background: #111; /* Color de fondo de los enlaces */
font-size: 12px;
margin: 4px 5px;
padding: 2px 3px;
}
.subscribe-add-platform:hover {
background: #333; /* Color de fondo de los enlaces al pasar el cursor */
}
.subscribe-add-platform a {
text-shadow: 1px 1px #000;
color:#F9F0D7; /* Color de los enlaces */
font-size:11px;
font-family:Verdana;
}
.subscribe-add-platform a:hover {
text-shadow: 1px 1px #000;
color:#FF8400; /* Color de los enlaces al pasar el cursor */
}
.subscribe-add-platform a:hover {
text-decoration: none;
}
.subscribe-via-email-wrapper {
margin: 8px 0 0 7px;
font-size: 1em;
}
.follow-by-email-address {
font-size: 11px;
background-color: #444; /* Color de fondo de la suscripción por correo */
padding:3px;
border: none;
color: #222; /* Color del texto "dirección de correo" */
width:120px;
}
.follow-by-email-submit {
font-size: 12px;
background-color: #000; /* Color del botón "Suscribir" */
border: 1px solid #000;
margin-left: -4px;
color: #999; /* Color del texto "Suscribir" */
padding:3px;
}
.follow-by-email-submit:hover {
background-color: #333; /* Color del botón "Suscribir" al pasar el cursor */
position: relative;
top: 1px;
left: 1px;
color: #FFF; /* Color del texto "Suscribir" al pasar el cursor */
}