martes, 2 de abril de 2013

Caja Suscribirte por Email y RSS flotante para blogger

 Tener suscriptores es tan importante como ganar visitas; un número elevado de usuarios en Internet prefieren estar suscritos a los blogs de su preferencia en lugar de estar visitando ocasional mente el blog para ver si ya hay contenido nuevo.

Muchos se quejan porque no tienen suscriptores pero ni siquiera se han tomado la molestia de poner un enlace para suscribirse al feed, de ese modo nunca tendrán suscriptores. uno de los métodos más efectivos para conseguir lectores, es colocar una caja suscripción que sea bastante visible y fácil de reconocer.


En esta ocasión veremos como colocar una Caja Suscribirte por Email y RSS flotante en el blogs. que se ve de esta manera:

 Para agregar esta caja a nuestro blogs ve a la Edición HTML de tu blog y antes de ]]></b:skin> y pega lo siguiente:

/* Caja suscribete por Email Flotante */
    ul#caja-redes{
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
   -webkit-box-shadow: 0px 0px 4px #696969;
   -moz-box-shadow: 0px 0px 4px #696969;
   box-shadow: 0px 0px 4px #696969;
   position:fixed;
   bottom:5px;/*distancia de abajo hacia arriba*/
   left:30px;/*distancia de izquierda a derecha*/
    width:230px; /*ancho de la caja*/
    padding:0;
    margin:0;
    list-style:none;
    background:#f7f7f7;
    border:1px solid #dcdcdc;
    overflow:hidden;
    }
    ul#caja-redes strong, li.c-rss{
    color:#848484;
    font-size:12px;
    }
    ul#caja-redes li{
    overflow:hidden;
    }
   
    li.c-mail{
    margin:3px;
    padding:2px 4px 0;
    }
    li.c-rss{
    float:left;
    margin:2px;
    padding:0 2px 2px;
    }
    a.c-rss {
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGxHanZfKAWFXuAJlFBRl-mNAnXtaqsy_HP3N0KVges7WUp9ex0xxPutlXxzLsv64kRG1mpcbALvm8Ck8oThUp83b94DB08fCPCqYQXto17yl-NM3n-3pRWXYJNnkxiWZdedcxJFwzTHE/s1600/rss1.png) no-repeat 25% 40%;
    display:inline;
    padding:0 0 1px 26px;
    color:#848484;
    }
    input[type="text"].campo, input[type="submit"].enviar {
    border:1px solid #dcdcdc;float:left;color:#848484;display:block; height:24px;font-size:11px;}
    input[type="text"].campo{text-indent:3px;width:145px; margin-right:-3px;}
    input[type="submit"].enviar {height:24px;cursor:pointer;text-shadow:0 1px 0 #fff;
    background:-webkit-linear-gradient(top,white,#d8d8d8);
    background:-moz-linear-gradient(top,white,#d8d8d8);
    background:-ms-linear-gradient(top,white,#d8d8d8);
    background:-o-linear-gradient(top,white,#d8d8d8);}
    /*  mas info mdtutoriales.blogspot.com */

Ahora en Diseño,ve a Añadir Gadget,HTML/Javascript y pega lo siguiente:
<ul id="caja-redes"><li class="c-mail"> <form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=mtutoriales&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><strong>Tutoblogger directamente a tu e-mail</strong><p><input class='campo' name='email' placeholder='ingresa tu e-mail' type='text'/></p><input name='uri' type='hidden' value='tutoblogger'/><input name='loc' type='hidden' value='es_ES'/><input class='enviar' type='submit' value='Suscríbete'/></form> </li> <li class="c-rss">O suscríbete por otras vías:<a class="c-rss"  href="//feeds.feedburner.com/mtutoriales" title="Vía RSS" target="_blank">RSS</a></li> </ul>


En color Rojo es en nombre de tu feed, y lo de calor azul son los textos a editar. Guarda los cambios y listo.
 

1 comentario:

  1. Hola, ya he instalado esta caja pero, ¿podrías explicarme cómo puedo colocarla en el lado derecho del blog?

    ResponderEliminar

Descripcion en imagenes con efecto deslizante usando css

Una forma de agregarle mas estilo a nuestras imágenes y hacer que nuestro blogs sea mas profesional, es poniendo una pequeña descripc...