Cómo personalizar el gadget "Enlaces de suscripción" en blogger ~ Mejora Tu Blogger

Artículo publicado en el blog Ciudad Blogger, uno de los sitios con más información sobre tecnología Blogger Ve la entrada en su blog original.

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:

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 != ""'>
< h2 class='title'><data:title/></h2>
< /b:if>
< div class='widget-content'>
< b:loop values='data:feeds' var='feed'>
< div expr:class='"subscribe-wrapper subscribe-type-" + data:feed.type'>
< div expr:class='"subscribe expanded subscribe-type-" + data:feed.type' expr:id='"SW_READER_LIST_" + data:widgetId + data:feed.type' style='display:none;'>
< div class='top'>
< span class='inner' expr:onclick='"return(_SW_toggleReaderList(event, \"" + data:widgetId +data:feed.type + "\"));"'>
< 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='"http://www.google.com/ig/add?source=bstp&feedurl=" + 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='"http://www.netvibes.com/subscribe.php?url=" + 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='"http://www.newsgator.com/ngs/subscriber/subext.aspx?url=" + 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='"http://add.my.yahoo.com/content?url=" + 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='"SW_READER_LIST_CLOSED_" + data:widgetId +data:feed.type' expr:onclick='"return(_SW_toggleReaderList(event, \"" + data:widgetId +data:feed.type + "\"));"'>
< div class='top'>
< span class='inner'>
< div class='subscribe-arrow-expand'/>
< span expr:onclick='"return(_SW_toggleReaderList(event, \"" + data:widgetId +data:feed.type + "\"));"'>
< 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='"window.open(\"http://feedburner.google.com/fb/a/mailverify?uri=Nombre-de-mi-feed\", \"popupwindow\", \"scrollbars=yes,width=550,height=520\"); return true"' 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.

Mejora Tu Blogger

Cómo personalizar el gadget "Enlaces de suscripción" en blogger

0 comentarios:

Publicar un comentario

Sígue las publicaciones en Twitter

Mejores Maestros Blogger

Etiquetas

Archivo del blog

MejoraTuBlogger

Categories

Blogroll Inglés

Seguidores de Mejora Tu Blogger

Pages

Links