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.
 

Obtener Link de descarga de Google Drive

Uno de los nuevas formas de alojar archivos en las nubes (comúnmente así se dice) es google drive. que nos da esta 5GB gratis en donde podemos subir todo tipo de archivos.

Aunque google Drive no da una dirección exacta donde podemos descargar los archivos de forma publica, como por ejemplo quieres el link para que los lectores descarguen un archivo desde google drive.

Bueno para poder tener un link de descarga para cualquier archivo simplemente necesitamos en id de dicho archivo. para eso tenemos que hacer los siguiente:
El en archivo a descargar: click en compartir
 


Configuramos el acceso del archivo
 
Nos saldra una venta pop up y damos click donde esta marcado:




Una des hecho esto copiamos el link que esta en color azul en la primera imagen:
en este caso es:

https://docs.google.com/file/d/13MQcuNeJqC5ekrp--zjBp-HxU8NfasfjrujqcvVpTrlxsAlnq1FC-hw-vTuI/edit?usp=sharing

Para obtener el lik de descarga usamos en siguiente link, únicamente tienes que cambiar el id de tu archivo por las xxx de color rojo

https://docs.google.com/uc?export=download&id=XXXXXXXXXXXX

al final queraria asi.

 https://docs.google.com/uc?export=download&id=13MQcuNeJqC5ekrp--zjBp-HxU8NfasfjrujqcvVpTrlxsAlnq1FC-hw-vTuI

Se ve un poco complicado pero con el tiempo es facil.
 




Botones Seguir de facebook, twitter y google+



Las redes sociales son muy importantes para cualquier blogger, para compartir he interactuar con los lectores, en esta ocasión agregaremos 3 botones muy fundamentales para compartir nuestros perfiles en las redes sociales.

Dentro de ellos esta en botón seguir de facebook(este botón permite que otros usuarios se suscriban a tus actualizaciones publicas en facebook)  y los botones seguir de twitter y google+.  si quieren ver como queda visita este blogs de pruevas

Para agregar estos botones ve Diseño, a Añadir Gadget, HTML/Javascript y pega lo siguiente:

<style>
/* Botones redes Sociales */
ul#caja-redes{
width:275px;
padding:0;
margin:0;
list-style:none;
background:#f7f7f7;
border:1px solid #dcdcdc;
overflow:hidden;
}
ul#caja-redes strong,{
color:#848484;
font-size:12px;
}
ul#caja-redes li{
overflow:hidden;
}
li.cg-plus{
height:48px;
padding-bottom:4px;
border-right:1px solid #dcdcdc;
border-bottom:1px solid #dcdcdc;
margin:0 -1px 0 -5px;
}
li.c-fb{
border-bottom:1px solid #dcdcdc;
padding:5px 3px 2px;
margin:4px;
}
li.c-tw,{
margin:4px;
padding:5px 3px 2px;
}
/* para mas info mdtutoriales.blogspot.com*/
</style>
<br />
<ul id="caja-redes">
<li class="c-fb"><iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/follow.php?href=https%3A%2F%2Fwww.facebook.com%2Fdnis.villeda&amp;send=false&amp;layout=standard&amp;width=260&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=42" style="border: none; height: 42px; overflow: hidden; width: 260px;"></iframe> </li>
<li class="c-tw"><a class="twitter-follow-button" data-dnt="true" data-lang="es" href="https://twitter.com/dniscriss">Seguir a @dniscriss</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> </li>
<li class="cg-plus"><div class="g-plus" data-href="//plus.google.com/107424685125055103818" data-rel="publisher" data-width="286">
</div>
<!-- Inserta esta etiqueta después de la última etiqueta de insignia. --> <script type="text/javascript"> window.___gcfg = {lang: 'es'}; (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script> </li>
</ul>

Color Rojo: Tu nombre de usuario de facebook,
Color Azul: Primero tu nombre de usuario de twitter y después el texto que apare sera en el botón
Color fuchsia: El id de tu cuenta de google plus, son los números que aparecen en la dirección cuando estas en tu perfil de google+.

Personalizar comentarios de blogger a estilo compacto destacando comentarios de autor



Los comentarios son una de las cosas mas importantes de un blogs, es el medio en que los lectores se expresan de acuerdo al tema de las entradas.
Por eso en esta ocasión les quiero enceñar como agregar este estilo compacto y colorido a nuestros comentarios, destacando los comentarios del autor o autores. quedaran como están en la imagen de arriba, ademas muestra en numero de comentarios en en blogs, estilo nube.


Para agregar el estilo compacto a nuestros comentarios ve a la Edición HTML de tu blog y antes de ]]></b:skin> y pega lo siguiente:


/*destacar comentarios de autor http://www.mdtutoriales.blogspot.com*/
#comments{overflow:hidden}
#comments h4{display:inline;padding:10px;line-height:40px}
#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
#comments h4,.comments .continue a{background:#1e05d8/*clolor 1 a cambiar*/}
#comments h4,.comments .user a,.comments .continue a{font-size:16px}
#comments h4,.comments .continue a{font-weight:normal;color:#fff}
#comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #1e05d8;/*clolor 2 a cambiar*/border-right:20px solid transparent;width:0;height:0;line-height:0}
#comments .avatar-image-container img{border:0}
.comment-thread{color:#111}
.comment-thread a{color:#777}
.comment-thread ol{margin:0 0 20px}
.comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#1e05d8/*clolor 3 a cambiar*/}
.comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px}
.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:60px}
.comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#f9f9f9;padding:10px}
.comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em}
.comments .comments-content .icon.blog-author{position:absolute;top:-12px;right:-12px;margin:0;background-image: url(http://1.bp.blogspot.com/-tpZVPArD4o8/UVpPztmtTdI/AAAAAAAAAh8/Y8xmICUHa44/s1600/picresized_1338990142_comment-author-blue.gif);width:36px;height:36px}
.comments .comments-content .inline-thread{padding:0 0 0 20px}
.comments .comments-content .comment-replies{margin-top:0}
.comments .comment-content{padding:5px 0;line-height:1.4em}
.comments .comment-thread.inline-thread{border-left:1px solid #ddd;background:transparent}
.comments .comment-thread.inline-thread .comment{width:auto}
.comments .comment-thread.inline-thread .comment:after{content:"";position:absolute;top:10px;left:-20px;border-top:1px solid #ddd;width:10px;height:0px}
.comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0}
.comments .comment-thread.inline-thread .comment-block{margin-left:48px}
.comments .comment-thread.inline-thread .user a{font-size:13px}
.comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px}
.comments .continue{border-top:0;width:100%}
.comments .continue a{padding:10px 0;text-align:center}
.comment .continue{display:none}
#comment-editor{width:103%!important}
.comment-form{width:100%;max-width:100%}
/*para mas info vistia http://www.mdtutoriales.blogspot.com*/

 En color Azul he dejado descastado por si lo quieres cambiar a otros colores, lo que por defacto esta en rojo( pues ese es el color de mi blog).

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...