0
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/AVvXsEhiozzXBpSc0y0G8Tq1XJlB2gJyizBuxSsbtufs-vChxHGOUMULM0No9-mvwikt4uVUITcRqQeyV8WfWDoh_62u69gO9aqklNN7RREzPltoyXXsQbsDXC6x-S4SRkO617_1AAjdVNCaBjo/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.
♦ 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 == "item"'>
<div id='notas'>
<div class='suscripcion'> ¿Tu primera vez en <a expr:href='data:blog.homepageUrl'><data:blog.title/></a>?
</div>
Quizás quieras <a href='http://feeds.feedburner.com/Mundo Blogger'>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 Mundo Blogger 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.
0Comentarios!