Aviso flotante de suscripcion a nuestro blog

En el articulo de imagen flotante con efecto IR INICIO vimos como poner un aviso flotante para que nuestros visitantes puedan ir al inicio de la pagina.
En el siguiente capitulo vamos a ver como poner un aviso flotante para que nuestros visitantes se puedan suscribir a nuestros blog. Puedes ver un ejemplo de como queda en este blog.

Para ponerlo, antes que nada tenemos que activar las suscripciones por correo electronico en feedburnner. Para hacerlo accedemos nuestra cuenta feedburnner al apartado publicize.
Una vez activada la suscripcion por correo electronico, accedemos a Diseño>Edicion HTML>  y pegamos antes de </head> el siguiente codigo:


<style type='text/css'>
#anuncio {
position:absolute;
padding: 2px;
padding-top: 15px;
width: 280px; /* ancho del anuncio */
visibility: hidden;
z-index: 200;
top: 30px;
left: 30px;
}
#rss-mail {
/* color e imagen de fondo */
background: #FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXGmPMX7Mr-ZBsAmsw5NQvdwnsshh8eI8XqZ52zoCAHkgHJJgNGUeI65mrXwo-tDrWafO56cfoLwnVeUfso74k8taqwlzWvvAvzWMmPFD-CJhwvRATskEq4A7K-FK_jmuOQJOaVaPoAD4/s320/pattern_blk_point.png);
border:2px solid #FF8000; /* borde */
height:70px; /* alto de la caja */
}
#rss-mail span {
color:#FFFFFF; /* color del texto */
font-size:12px;
font-weight:bold;
line-height:30px;
}
#rss-submit {
background:#FF8000; /* color del botón */
border:0px;
}
.rss-box {
height:13px;
margin-top:10px;
color:#6E6E6E;
font-size:12px;
width:135px;
}
</style>
<script type='text/javascript'>
//<![CDATA[
var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 30 //set x offset of bar in pixels
var startY = 15 //set y offset of bar in pixels
var verticalpos="fromtop" //enter "fromtop" or "frombottom"
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("anuncio").style.visibility="hidden"
}
function staticbar(){
barheight=document.getElementById("anuncio").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("anuncio");
stayTopLeft();
}
if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
//]]>
</script>

Luego buscamos la etiqueta </body> y antes pegamos el siguiente codigo.


<div id='anuncio'>
<div id='rss-mail'>
<a href='Javascript:void' onClick='closebar(); return false'><img align='right' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBuwW3ijot7I9-xth0grObqC_Gkg5iylG2RFafQdkS9H67Xc-PvgIx8trGACA-tXLUCybqHtGNcQgaoG_fGphIJYiBekgIibAE8sr-eXFMlmEbJYeRl9U_FB7FhPwJRaCUX2LCU-9Fd_s/s320/cerrar.png'/></a> <!-- -->
<span>Recibe las actualizaciones directo a tu correo</span><br/>
<img src='https://i41.tinypic.com/2r2ndc2.jpg' style='padding:5px; float:left;'/>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=miblog' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=miblog&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input class='rss-box' name='email' type='text/'/>
<input name='uri' type='hidden' value='miblog'/><input name='loc' type='hidden' value='es_ES'/><input id='rss-submit' type='submit' value='Suscribir'/></form></div></div>

Ahora solo queda cambiar lo que esta en rojo por el nombre lo que esta en naranja. Tu direcicon de feedburner tiene que ser asi:

miblog
El nombre de tu feed es lo que está en naranja tal cual, sin espacios; así es como debemos ponerlo en el código donde se indica.
Lo que está en color azul puedes cambiarlo por otro texto, te recomiendo que no sea un texto muy largo.

En el primer código puedes personalizar la apariencia de la caja de suscripción, puedes guiarte por las anotaciones en color verde para saber a qué corresponde cada cosa.

De esta forma tendrás la posibilidad de conseguir más suscripciones a tu feed de una forma muy llamativa, además que la caja de suscripción puede cerrarse haciendo click en el ícono de cerrar.

2 comentarios en “Aviso flotante de suscripcion a nuestro blog”

Los comentarios están cerrados.

Scroll al inicio