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

En XarDesigns he visto una forma de personalizar el gadget de "Enlaces de Suscripci?n" que me ha gustado mucho. Y es que ese gadget no es tan usado, quiz? por lo poco atractivo que puede parecer para algunos. Sin embargo, ofrecerles a los lectores un medio para suscribirse al feed del blog debe ser primordial.

Con esta forma de personalizarlo el gadget luce m?s "sexi" seg?n el autor, pero lo mejor es que est? hecho a base de CSS3 as? que podemos cambiarle los colores sin problemas. Adem?s, se le ha agregado la suscripci?n por correo electr?nico con lo cual el gadget se vuelve m?s completo.

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 */
}

Guarda los cambios y listo.
En color verde est?n las anotaciones a lo que corresponde cada ?rea que se puede cambiar.

Recuerda que est? hecho con CSS3, as? que algunas caracter?sticas como el sombreado y los bordes redondeados no se ver?n en navegadores antiguos.

De esta forma el tradicional gadget de suscripci?n al feed puede verse m?s atractivo, funcional, y vers?til.