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:
El Fanbox de Facebook, flotante y con efecto deslizanteagosto 22, 2011
15 sitios para crear tu blog gratis.junio 28, 2010
Boton recomendar Facebook en Bloggermayo 20, 2011
Atractivas plantillas gratis para blogger (parte 2 final)mayo 2, 2011
Menú vertical desplegable tipo acordeón con jQueryagosto 31, 2011
Como crear blog profesional Blogger. Capitulo 2.1 creacion entrada+ explicacion opciones bloggerseptiembre 15, 2010
Te han expulsado de de Google Adsense? aqui mas alternativasmayo 17, 2010
5 formas de ganar dinero con Bloggerjulio 11, 2013
Colocar banners de 125×125 de publicidad Bloggerjulio 28, 2011
Blogger: Nuevas opciones #SEOmayo 11, 2012
Muy interesante, asi podemos aumentar el numero de nuestros suscriptores
Muy interesante, asi podemos aumentar el numero de nuestros suscriptores