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 sessionvar startX = 30 //set x offset of bar in pixelsvar startY = 15 //set y offset of bar in pixelsvar 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.lengthend = 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").offsetHeightvar 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('http://feedburner.google.com/fb/a/mailverify?uri=miblog', 'popupwindow', 'scrollbars=yes,width=550,height=520');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:
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.
Te recomendamos:
Inconvenientes de tener tu blog en Bloggerjulio 17, 2010
Que tipo de blog quiero ?junio 29, 2010
¿Cómo excluir mis visitas de las estadísticas del blog o web?julio 20, 2011
Qué son y cómo crear páginas estáticas en un Blogmarzo 20, 2014
Enlaces de calidad hacia tu sitio webjulio 13, 2010
Mejor el tiempo de carga de tu blog con Lazy Loadagosto 3, 2011
Muy interesante, asi podemos aumentar el numero de nuestros suscriptores
Muy interesante, asi podemos aumentar el numero de nuestros suscriptores