Hacker of the Web
Tus ideas en código!...y mas

Mensaje de suscripción en página de cada etiqueta II

Hace un poco publiqué una manera de agregar un mensaje de suscripción en la página de cada etiqueta, junto con las entradas de la misma etiqueta, que se conseguía con un gadget, que yo mismo desarrollé. Pero a ese gadget se le pueden aplicar varias mejoras, como agregarle un fondo al mensaje, distinto con la etiqueta especificada, para conseguir el siguiente efecto:

Etiqueta 'Azul'
Etiqueta 'Rojo'

El código Blogger, es el siguiente:
<b:widget id='Label101' locked='false' title='Feed de etiquetas' type='Label'>
<b:includable id='main'>
<b:loop values='data:labels' var='label'>
<b:if cond='data:blog.url == data:label.url'>
<b:if cond='data:label.name == "rojo"'>
<style type='text/css'>
.feedEtiqueta {background:red;}
</style>
</b:if>
<b:if cond='data:label.name == "azul"'>
<style type='text/css'>
.feedEtiqueta {background:blue;}
</style>
</b:if>
<span class='feedEtiqueta'>Tal vez te interese suscribirte a "<a expr:alt='"Suscribirse a " + data:label.name' expr:href='data:blog.homepageUrl + "feeds/posts/default/-/" + data:label.name' expr:title='"Suscribirse a " + data:label.name'><data:label.name/> <img src='http://lh4.ggpht.com/_6CFlQEBRtLc/Sd5VV0eiB2I/AAAAAAAAB9Q/kxC1Ee_35EI/SynIco.png' style='border:0px'/></a>", para recibir entradas de "<data:label.name/>" actualizadas<br/> <b>URL:</b> <data:blog.homepageUrl/>feeds/posts/default/-/<data:label.name/></span>
</b:if>
</b:loop>
</b:includable>
</b:widget>

El texto en color:

rojo.- es el nombre de la etiqueta en la que quieres aplicar el efecto.
verde.- es donde debes colocar el estilo CSS, que se aplicará.

Lo que realiza este otro gadget, es que al entrar en la página de la etiqueta, revisa si es la que esta definida(en el ejemplo anterior: color rojo) y si es esa aplica el etilo definido(en el ejemplo anterior: color verde) en el mensaje, se puede cambiar el color de fondo, cambiar el color de letra, poner una imagen de fondo o lo que necesites.
[1] Para agregar el gadget necesitas entrar en Edicion HTML en la pestaña diseño de tu blog.
[2] Y agregar el código despues de cualquier etiqueta </b:widget> que veas. Luego podrás moverlo en Diseño
[3] Luego para modificar el estilo del gadget(lo que no cambiara) en CSS será algo asi como esto:
.feedEtiqueta {
border:1px dashed black;
display:block;
margin:0 auto 0 auto;
padding:5px;
width:500px;
}

Suerte!!

/!\ En esta entrada se asume que tienes conocimientos de como editar la plantilla. Si no sabes como o donde se modifica, revisa esta entrada: Donde editar el código HTML de nuestra plantilla.

|✔| También puedes optar por aprender CSS y en Hacker of the Web tenemos un manual muy bueno, aunque es básico: Manual básico de CSS.

#

Deja tu huella y comenta!

Hola!, por favor deja tus comentarios, te aseguro serán contestados, dudas, sugerencias, lo que sea!!!!!!!!!!.

Si el formulario no funciona, o quieres irte a la segura: agrega tu comentario de forma tradicional

Si necesitas ayuda mas personalizada deja un <a href='URL'>ENLACE</a> hacia tu blog.

Emoticons
Comenta con tu:
Comenta:

Sé el primero y comenta !


Página Principal
Arriba