Añadir un recuadro de suscripcion al final de cada entrada

19 abril 2010

Añadir un recuadro de suscripcion al final de cada entrada

    6 comentarios
Un enlace de suscripcion en un blog, nunca esta demas, como lo dije ya antes en una anterior entrada, hoy te lo vuelvo a decir aqui. Hace mucho, observe en los grandes blogs, que casi todos tienen un enlace de suscripcion encerrado en un recuadro al final de cada entrada.

Jamas me pregunte como lo hicieron, me puse a trabajar en ellos hasta que logre hacer uno, que me quedo muy bonito, diria que mucho mejor a los que pude observar. Te mostrare como personalizar el codigo para que combine con los estilo de tu blog, este artilugio ira añadido al final de cada entrada es la pagina indivudual de cada una de ellas, si quieren ver una demostracion, pues ve a la pagina individual de esta entrada, y mirala.

[1] Los estilos CSS

#notas{
border: 1px dashed #33CC33;
padding: 15px;
text-align:center;
font-size:12px;
font-family: Comic Sans MS, Verdana;
}

.suscripcion {
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimfQmgHJ-UUKKyTN5irTUyY1JNVMWdHZ-IBrtpdc2-DkGAQxs8gr1sMEnFtFmcc_eTsRiZ6VeXdQsNsu25kbusTCCEmCQ_pH3lf7cPQ87yCcODfQ4YwWLGajO_Luvs2cBhAZRduvtoTzQ/s1600/1271301025_rss.png) no-repeat center left;height:30px;
padding-left: 32px;
font-size:16px;
text-align:left;
}

Para entender el codigo


En Rojo: Es el grosor del borde.
En violeta: Es el color del borde.
En verde: Son las alineaciones de los textos (Center [Centrado], left [a la izquierda], right [a la derecha])
En Naranja: Es la fuente de la letra. Asegurate que si la cambiaras por una letra no determinada por Blogger, que el usuario posea esa letra en la memoria de su computador, de otra manera, no la reconocerá.
En Aquamarine: Es la imagen. Puedes sustituirla por la que tu quieras, como medida 32 x 32.

[2] El codigo HTML.

♦ Ve a la Edicion HTML de tu blog, y expandiendo los artilugios, busca la siguiente linea.

<div class='post-footer-line post-footer-line-3'>

Si no aparece, puedes hacerlo buscando esta.

<div class='post-footer-line post-footer-line-2'>

O simplemente esta.

<div class='post-footer'>

Luego, justo debajo de la que buscastes, pegaras el siguiente codigo.

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='notas'>
<div class='suscripcion'> &#191;Tu primera vez en <a expr:href='data:blog.homepageUrl'><data:blog.title/></a>?
</div>

Quizás quieras <a href='http://feeds.feedburner.com/frikibloggeo'>suscribirte</a> o <a href='http://feedburner.google.com/fb/a/mailverify?uri=TntByStc' target='_blank'>Recibir las nuevas noticias a tu correo.</a>
</div>
</b:if>
Para entender el codigo

En Rojo: Es el texto dentro del recuadro, puedes personalizarlo si quieres.
En Azul: Sustituir frikibloggeo por tu direccion de feedburner, sustituir TntByStc por la tuya propia.

¿Como saber cual es mi codigo de suscripcion por correo electronico (TntByStc)?
[1] Ve a Feedburner
[2] Si no tienes activa la suscripcion por correo electronico en tu blog, haz clic en la pestaña publicize > Email Suscription > Activate.
[3] Si ya la tienes activa, entra a publicize > Email Suscription.
[4] Alli te aparecera un codigo HTML igual o similar a este.

<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=TUCLAVEESTARAAQUI', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Enter your email address:</p><p><input type="text" style="width:140px" name="email"/></p><input type="hidden" value="TUCLAVEESTARAAQUI" name="uri"/><input type="hidden" name="loc" value="en_US"/><input type="submit" value="Subscribe" /><p>Delivered by <a href="http://feedburner.google.com" target="_blank">FeedBurner</a></p></form>

En el codigo, puedes observar un frase marcada en naranja, si mueves el slide hacia la derecha, esa frase indica la localizacion de la clave de tu suscripcion por email, y la cual usaras para sustituir la del codigo del recudro de suscripcion.

[3] Guarda los cambios y mira como quedo.



Enlaces para compartir en tu blog o pagina web.








Widget por Friki Bloggeo






































6 comentarios
                        :
                      








  1. Deathlymayo 03, 2010 4:56 p. m.
    Es mi idea o tu Blog es Spammer, que copia contenido? Me copiaste el blog COMPLETO :S
    ResponderEliminar
  2. Lolas23junio 24, 2010 9:42 p. m.
    "Jamas me pregunte como lo hicieron" jajajaja claro no necesitaste preguntar solo copiarselo a Rosa del escaparate.
    ResponderEliminar
  3. paulettesoljunio 25, 2010 10:58 a. m.
    Que  estùpidos me parecen esos comentarios de las "copias"..El gran geronte de vagabundia copia hasta el amanecer que sale todos los diàs y?.Lo mas destacable en un blog de este tipo es la buena disposiciòn, la celeridad con que se contesta, la no discriminacion que hacen muchos de los aparentes grandes que nombran..
    No sirve solo leer, tratar de aplicar lo que tan amablemente nos explican y decir gracias?
    Tan simple como eso...
    Gracis Friki por ayudar a mantener mi blog..cambiè la plantilla es increible pero la parte visual parecerìa ser en algùn modo determinante.A mismo estilo de expresiones las visitas aumentaron un 400%
    Petons querido maco...Salud desde FRance y gracias siempre por tu excelente e invalorable ayuda

    Paulette Sol
    ResponderEliminar
  4. Pepejunio 25, 2010 9:36 p. m.
    No, si cuando vas en busca de ayuda lo que lees y ves es una copia literal de otro, no veo porque hemos de dar las gracias.
    Y tan estúpido no te parecería si como me ha pasado a mi, te copian entradas originales que me han llevado mucho tiempo de investigación, pues mi blog es de medicina y cada entrada me lleva a veces días de preparación.. 
    Al menos ya que copias, no te jactes de que has "investigado" nada y haz la debida referencia.
    He comprobado en el blog que se menciona y es totalmente cierto lo que dice Lolas... copia descarada.
    ResponderEliminar
  5. Anthonyjulio 08, 2010 12:43 a. m.
    Gracias pauette que linda.. a palabrs necias oidos sordos mi amor! jeje no les pongas atencion... mi contenido es original... puede que rosa tenga un cuadro parecido a ese pero no sol rosa lo tiene lo tienen miles y todos dicen lo mismo.. yo no tengo q copirle a ndaie por que yo se de CSS y HTML y ese cuadro es mio y de nadie mas y pues el que no quiera colocarlo solo no lo coloque y si va a hacer comentarios estupidoa mejor qu no los hagan.. adioss
    ResponderEliminar
  6. Franciscooctubre 05, 2010 1:12 p. m.
    Muy lindo che! Me quedó mejor imposible!! 

    Muchas gracias.

    Francisco
    http://loglobalizo.blogspot.com/
    ResponderEliminar





























                        

                      







Suscribirse a:

Enviar comentarios
                        (
                        Atom
                        )