domingo, 5 de mayo de 2013

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 descripción de la imagen, Aunque en esta ocasión lo hacemos mas interesante.

¿como?

Simple haremos que la descripción aparezca cuando los usuarios coloque el cursor sobre la imagen, ademas le agregaremos un botón para que los usuarios puedan leer el articulo completo, puedes ver este blogs de pruevas


Para agregar imágenes de esta forma simplemente, ve a Diseño, a Añadir Gadget, HTML/Javascript y pega lo siguiente:


<style>

.image-box {

  width:220px;height:220px;overflow:hidden;background-color:white;

  border:1px solid #ccc;float:left;margin:1px 1px;

  font:normal normal 12px/1.4 Segoe,"Segoe UI",Arial,Sans-Serif;

  color:#333;

}

.image-container,

.image-details {height:280px;border:5px solid white;background-color:#ffc;

  transition:margin-top .4s ease-out .4s;

}

.image-container img {

  width:280px;height:280px;padding:0 0;margin:0 0;border:none;outline:none;max-width:none;

  max-height:none;

  background-color:black;

}

.image-details h4,

.image-details p {

  margin:0 0 .2em;padding:0 0;height:70px;

}

.image-details h4 {

  font-size:120%;height:auto;

}

.image-details .details {

  padding:10px 12px;overflow:hidden;

}

.image-details .more {

  color:white;text-decoration:none;display:block;

  text-align:center;font-weight:bold;background-color:#f9a;height:26px;line-height:26px;margin:10px 0 0;

}

.image-box:hover {border-color:#bbb; width:220px;

  height:220px;}

.image-box:hover .image-container {margin-top:-210px}

.image-details .more:hover {background-color:black}

</style>

<br />

<div class="image-box-wrapper" id="image-box-wrapper">

<div class="image-box">

<div class="image-container">

<img alt="Food" height="280" src="http://2.bp.blogspot.com/-XtTVaIhT6dE/UX9-IAg95uI/AAAAAAAAAhg/FQzPqv9htEY/s1600/3.jpg" width="280" /></div>

<div class="image-details">

<div class="details">

<h4>

Descripccion deslizante </h4>

Una pequeña demostracion de una descripccion deslizante en una imagen en blogger

<a class="more" href="http://www.blogger.com/Post%20Link">Continuar Leyendo</a></div>

</div>

</div>

</div>


En color verde he dejado las opciones a editar.

En color rojo, el url de la imagen

domingo, 28 de abril de 2013

Larry el pájaro de twitter volando por el blogs



Anterior mente  he publicado varios tutoriales sobre lo que podemos hacer con CSS, puedes verlos es esta Etiqueta,
en esta ocasion volveremos a jugar con CSS3, en esta ocasión para hacer animaciones usando la declaracion @keyframes,
con la cual jugaremos para poder hacer que Larry el pájaro de twitter volando por el blogs

El tutorial es muy simple y no es cosa del otro mundo, ademas nos da la ventaja de no sobrecagar el blogs y es muy facil de agregarlo al blogs,
para quienes son nuevos blogger, les recuedo que esto solo se vera en navegadores modernos y claro no funciona con IE.

Como Ejemplo pueden ver como larry flota por tutoblogger


Para agregar a larry flotando en tu blogs, ve a Diseño, a Añadir Gadget, HTML/Javascript y pega lo siguiente:


<style type="text/css">
#twitter {
width: 125px;
height: 125px;
position: fixed;
background: url(https://lh6.googleusercontent.com/-lsTVVhpR3ME/UXmKPhM-_eI/AAAAAAAAAmA/OFGDPUi28yk/h120/sigueme.png);
animation: twitter 25s infinite;
-o-animation: twitter 25s infinite;
-moz-animation: twitter 25s infinite;
-webkit-animation: twitter 25s infinite;
}
@-webkit-keyframes twitter
{
0% {left:-5%;bottom:0px;}
10% {bottom:15%}
20% {bottom:2%}
30% {bottom:15%}
40% {bottom:2%}
50% {bottom:15%}
60% {bottom:2%}
70% {bottom:15%}
80% {bottom:2%}
100% {left:105%;bottom:15%}
}
@keyframes twitter
{
0% {left:-5%;bottom:0px;}
10% {bottom:15%}
20% {bottom:2%}
30% {bottom:15%}
40% {bottom:2%}
50% {bottom:15%}
60% {bottom:2%}
70% {bottom:15%}
80% {bottom:2%}
100% {left:105%;bottom:15%}
}
@-moz-keyframes twitter
{
0% {left:-5%;bottom:0px;}
10% {bottom:15%}
20% {bottom:2%}
30% {bottom:15%}
40% {bottom:2%}
50% {bottom:15%}
60% {bottom:2%}
70% {bottom:15%}
80% {bottom:2%}
100% {left:105%;bottom:15%}
}
@-o-keyframes twitter
{
0% {left:-5%;bottom:0px;}
10% {bottom:15%}
20% {bottom:2%}
30% {bottom:15%}
40% {bottom:2%}
50% {bottom:15%}
60% {bottom:2%}
70% {bottom:15%}
80% {bottom:2%}
100% {left:105%;bottom:15%}
}
</style>
<a href="http://twitter.com/NombUsuario" target="_blank" id="twitter"></a>

En la parte de color rojo lo cambias por tu nombre de usuario.  Facil verdad....





domingo, 21 de abril de 2013

widgets de cuantas personas visitan tu blogs, sin registrarte

estadisticas de tu blogs



Para quienes quieran saber cuantos y de donde visitan tu blogs whos.amung.us es una excelente opción y es muy fácil de agregar ademas tiene varios widgets en los que podemos escoger

Instalación de estadísticas en su sitio web es muy fácil. No hay ningún registro y que son completamente gratis! Basta con copiar el código html que aparece a continuación y pegarlo en cada página que usted desea realizar un seguimiento.  


Si te intereso Visita  el sitio




martes, 9 de abril de 2013

Menu Vertical con Buscador usando CSS con Transiciones y Zoom



Anterior mente había publicado como crear un menu basado solamente en Css, es esta ocasión he creado un menu Vertical al cual le he agregado un Buscador usando únicamente CSS.

Además usando la declaración hover le he agregado otros efectos de transición, Zoom y movimiento esperando que les guste.

Este menu es uno de muchos ejemplos de como agregando le un poco de estilo css a un objeto,
podemos darle un estilo distinto y agradable.


Para agregar Este Menu Vertical tu blogs, ve a Diseño, a Añadir Gadget, HTML/Javascript y pega lo siguiente:

<style>
#menuWrapper {
width:200px;/*ancho de menu*/
height:230px;/*alto de menu*/
padding-left:15px;
background:#F9F8F6;/*color de fondo de menu*/
box-shadow: 0 1px 5px #808080;
border-radius:3px;/*radio de menu*/
}

.menu {
margin-top: 5px;
width:100%;
float:left;
font-size:13px;/*tamaño de txto*/
font-weight:bold;
}

.menu li a{
display:block;
font-weight:bold;
line-height:35px;
margin:0px;
padding:0px 25px ;
text-align:left;
text-decoration:none;
border-radius: 0px 5px 0px 5px;
color:#000;/*color de texto*/
-moz-transition: all 2s;
-webkit-transition: all 2s;
-o-transition: all 2s;
}

.menu li a:hover{
font-size:14px;
padding:4px 0px 4px 50px;
background:#E51431;/*color de fondo de texto al pasar en cursor*/
color:#ffffff;
text-decoration:none;
-moz-transition: all 0.6s;
-webkit-transition: all 0.6s;
-o-transition: all 0.6s;
}

.menu ul {
height:0px;
list-style:none;
margin:0;
margin-left: -15px;
padding:0;
border-radius: 5px 5px 5px 5px;
box-shadow: 0px 1px 5px #808080;
}
#search {
width: 215px;
height:22px;
float: right;
text-align: center;
margin-top: 6px;
}

#search-box {
margin-top:-2px;
text-align:center;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAPCAYAAADtc08vAAAACXBIWXMAAA7BAAAOwQG4kWvtAAAAIGNIUk0AAG2YAABzjgAA+swAAIXsAABsVwAA49UAADE1AAAX2tF76rUAAAEESURBVHjalNJLM0NBEIbhJzkhRxIEJRaoYuH//x8UG5uIRSIljsjFpk+ZipGiNz2X7ne+7umGb+viDH004qzCC0ZYyVgdeIKrWC/wjh2UcTbFHdabgAId3MR+iIfk1VncdwM42QQ0MUiSn7BM7id4TFR2coCjkDaStxmeo9zDHKAZzfr0u30k8T8Aa7TR2gLYDb/KAV7DH29JPo31OAeoaz9PAmsrcR1xi5yCeg4GuIz1POagiO9rJPEVbtN+FeHfImkvXi1Deg1rR1wLB1H20ga93peRsAzwChcx5umv3KMqMk1bhNR5Mrp1o3uJkj7Ghb/bNEruJeVX/wHUSmA/lA6/BgCJ0z3LSqvQSQAAAABJRU5ErkJggg==);
background-repeat:no-repeat;
background-position:98% 50%;
padding: 6px 6px 6px 8px;
width: 202px;
height:32px;
border: solid 1px #bcbbbb;
outline: none;
border-radius: 3px;
box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
}

</style>
<div id='menuWrapper'>
<div class='menu'>
<ul>
<li><a href='http://mdtutoriales.blogspot.com'>Inicio</a></li>
<li><a href='
http://mdtutoriales.blogspot.com/p/mapa-de-sitio.html
'>Mapa del Blogs</a></li>
<li><a href='http://mdtutoriales.blogspot.com/p/contacto.html'>Contacto</a></li>
<li><a href='http://mdtutoriales.blogspot.com/p/mapa-de-sitio.html'>Mapa del Blogs</a></li>
<li><a href='http://mdtutoriales.blogspot.com/p/contacto.html'>Contacto</a></li>
<form action='/search' id='search' method='get' name='searchForm' style='display:inline;'>
<input id='search-box' name='q' onblur='if (this.value == &quot;&quot;) this.value = &quot;Buscar...&quot;;' onfocus='if (this.value == &quot;Buscar...&quot;) this.value = &quot;&quot;;' size='28' type='text' value='Buscar...'/></form>
</ul></div></div>

 Las partes que estan de Color puedes editar Tanto los Url como los nombres. tambien he dejado señalado la parte del codigo a editar para cualquier gusto.

Agregar paginación en blogger


Colocar paginacion en blogger

Esta es una herramienta estupenda para poder navegar en todas las paginas de nuestros blogs. Les permite a nuestros seguidores navegar en el blogs como si fuera un libro. Ya que ordenando las paginas de los post mas nuevos asta los mas antiguos y de esta forma los usuarios naveguen pro fundamente en los post del Blog. quien no a Visitado YouTube, esta pagina utiliza una paginación semejante a esta.


Para agregar la paginación a tu blogs, ve a Diseño, a Añadir Gadget, HTML/Javascript y pega lo siguiente:

<style type='text/css'>
#blog-pager{height: 28px;
    padding: 10px 0 0;
overflow:hidden;
text-align:center;
}
.showpageArea a {text-decoration:underline;
font-size: 16px;
       text-align: center;}
.showpageNum a {font-size:16px;text-decoration:none;border: 1px solid #cccccc;margin:0 5px;padding:5px;}
.showpageNum a:hover {border: 1px solid #cccccc;background-color:#cccccc;}

.showpagePoint {font-size:16px;text-decoration:none;border: 1px solid #cccccc;background: #216FD9;margin:0 5px;padding:5px;color:#ffffff;}

.showpageOf {text-decoration:none;padding:5px;margin: 0 5px;}
.showpage a {text-decoration:none;border: 1px solid #cccccc;padding:5px;}
.showpage a:hover {text-decoration:none;background: #cccccc;}
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#333333;}</style>


<script style='text/javascript'>var pageCount=7;
var displayPageNum=5;var upPageWord="Anterior";var downPageWord="Siguiente";</script>
<script style='text/javascript' src='http://netoopscodes.googlecode.com/svn/netoops-page-nav-v2.js'></script>

Color Rojo: Numero de Entradas a mostrar
Color Azul: Numero de Paginas a Mostrar

Ve las siguiente imagen, donde explico como donde agregar en Gadget.

Colocar Paginacion en blogger


Guarda los Cambios y listo.

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(http://2.bp.blogspot.com/-c0cyucnLJqo/UQpGV9dhS1I/AAAAAAAAL5I/xORlp1k-A4M/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).

sábado, 30 de marzo de 2013

Zoom en imagenes usando jQuery para Blogger

Anterior mente habia publicado como agregar un efecto zoom usando css para una galeria, ante las desventajas de css, les enseñare como agregarle efecto Zoom a las imagenes usando Jquery  de esta manera funcionara en otros navegadores como IE solamente haciendo clic en la iamgen.  Si usas Scriptaculos o otro script no funcionara. por lo que te recomiento ver el siguiente post.

Puedes ver este blogs de pruevas

La verdad esto es muy simple:
solo tienes que agregar antes de </head> el siguiente codigo:


<script type='text/javascript'>
//<![CDATA[
/* jQuery Image Magnify script v1.1
* This notice must stay intact for usage
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code

* Nov 16th, 09 (v1.1): Adds ability to dynamically apply/reapply magnify effect to an image, plus magnify to a specific width in pixels.
* Feb 8th, 11 (v1.11): Fixed bug that caused script to not work in newever versions of jQuery (ie: v1.4.4)
*/

jQuery.noConflict()

jQuery.imageMagnify={
 dsettings: {
  magnifyby: 3, //default increase factor of enlarged image
  duration: 500, //default duration of animation, in millisec
  imgopacity: 0.2 //opacify of original image when enlarged image overlays it
  },
 cursorcss: 'url(magnify.cur), -moz-zoom-in', //Value for CSS's 'cursor' attribute, added to original image
 zIndexcounter: 100,

 refreshoffsets:function($window, $target, warpshell){
  var $offsets=$target.offset()
  var winattrs={x:$window.scrollLeft(), y:$window.scrollTop(), w:$window.width(), h:$window.height()}
  warpshell.attrs.x=$offsets.left //update x position of original image relative to page
  warpshell.attrs.y=$offsets.top
  warpshell.newattrs.x=winattrs.x+winattrs.w/2-warpshell.newattrs.w/2
  warpshell.newattrs.y=winattrs.y+winattrs.h/2-warpshell.newattrs.h/2
  if (warpshell.newattrs.x<winattrs.x+5){ //no space to the left?
   warpshell.newattrs.x=winattrs.x+5
  }
  else if (warpshell.newattrs.x+warpshell.newattrs.w > winattrs.x+winattrs.w){//no space to the right?
   warpshell.newattrs.x=winattrs.x+5
  }
  if (warpshell.newattrs.y<winattrs.y+5){ //no space at the top?
   warpshell.newattrs.y=winattrs.y+5
  }
 },

 magnify:function($, $target, options){
  var setting={} //create blank object to store combined settings
  var setting=jQuery.extend(setting, this.dsettings, options)
  var attrs=(options.thumbdimensions)? {w:options.thumbdimensions[0], h:options.thumbdimensions[1]} : {w:$target.outerWidth(), h:$target.outerHeight()}
  var newattrs={}
  newattrs.w=(setting.magnifyto)? setting.magnifyto : Math.round(attrs.w*setting.magnifyby)
  newattrs.h=(setting.magnifyto)? Math.round(attrs.h*newattrs.w/attrs.w) : Math.round(attrs.h*setting.magnifyby)
  $target.css('cursor', jQuery.imageMagnify.cursorcss)
  if ($target.data('imgshell')){
   $target.data('imgshell').$clone.remove()
   $target.css({opacity:1}).unbind('click.magnify')
  }
  var $clone=$target.clone().css({position:'absolute', left:0, top:0, visibility:'hidden', border:'1px solid gray', cursor:'pointer'}).appendTo(document.body)
  $clone.data('$relatedtarget', $target) //save $target image this enlarged image is associated with
  $target.data('imgshell', {$clone:$clone, attrs:attrs, newattrs:newattrs})
  $target.bind('click.magnify', function(e){ //action when original image is clicked on
   var $this=$(this).css({opacity:setting.imgopacity})
   var imageinfo=$this.data('imgshell')
   jQuery.imageMagnify.refreshoffsets($(window), $this, imageinfo) //refresh offset positions of original and warped images
   var $clone=imageinfo.$clone
   $clone.stop().css({zIndex:++jQuery.imageMagnify.zIndexcounter, left:imageinfo.attrs.x, top:imageinfo.attrs.y, width:imageinfo.attrs.w, height:imageinfo.attrs.h, opacity:0, visibility:'visible', display:'block'})
   .animate({opacity:1, left:imageinfo.newattrs.x, top:imageinfo.newattrs.y, width:imageinfo.newattrs.w, height:imageinfo.newattrs.h}, setting.duration,
   function(){ //callback function after warping is complete
    //none added 
   }) //end animate
  }) //end click
  $clone.click(function(e){ //action when magnified image is clicked on
   var $this=$(this)
   var imageinfo=$this.data('$relatedtarget').data('imgshell')
   jQuery.imageMagnify.refreshoffsets($(window), $this.data('$relatedtarget'), imageinfo) //refresh offset positions of original and warped images
   $this.stop().animate({opacity:0, left:imageinfo.attrs.x, top:imageinfo.attrs.y, width:imageinfo.attrs.w, height:imageinfo.attrs.h},  setting.duration,
   function(){
    $this.hide()
    $this.data('$relatedtarget').css({opacity:1}) //reveal original image
   }) //end animate
  }) //end click
 }
};

jQuery.fn.imageMagnify=function(options){
 var $=jQuery
 return this.each(function(){ //return jQuery obj
  var $imgref=$(this)
  if (this.tagName!="IMG")
   return true //skip to next matched element
  if (parseInt($imgref.css('width'))>0 && parseInt($imgref.css('height'))>0 || options.thumbdimensions){ //if image has explicit width/height attrs defined
   jQuery.imageMagnify.magnify($, $imgref, options)
  }
  else if (this.complete){ //account for IE not firing image.onload
   jQuery.imageMagnify.magnify($, $imgref, options)
  }
  else{
   $(this).bind('load', function(){
    jQuery.imageMagnify.magnify($, $imgref, options)
   })
  }
 })
};

jQuery.fn.applyMagnifier=function(options){ //dynamic version of imageMagnify() to apply magnify effect to an image dynamically
 var $=jQuery
 return this.each(function(){ //return jQuery obj
  var $imgref=$(this)
  if (this.tagName!="IMG")
   return true //skip to next matched element
 
 })

};


//** The following applies the magnify effect to images with class="magnify" and optional "data-magnifyby" and "data-magnifyduration" attrs
//** It also looks for links with attr rel="magnify[targetimageid]" and makes them togglers for that image

jQuery(document).ready(function($){
 var $targets=$('.magnify')
 $targets.each(function(i){
  var $target=$(this)
  var options={}
  if ($target.attr('data-magnifyto'))
   options.magnifyto=parseFloat($target.attr('data-magnifyto'))
  if ($target.attr('data-magnifyby'))
   options.magnifyby=parseFloat($target.attr('data-magnifyby'))
  if ($target.attr('data-magnifyduration'))
   options.duration=parseInt($target.attr('data-magnifyduration'))
  $target.imageMagnify(options)
 })
 var $triggers=$('a[rel^="magnify["]')
 $triggers.each(function(i){
  var $trigger=$(this)
  var targetid=$trigger.attr('rel').match(/\[.+\]/)[0].replace(/[\[\]']/g, '') //parse 'id' from rel='magnify[id]'
  $trigger.data('magnifyimageid', targetid)
  $trigger.click(function(e){
   $('#'+$(this).data('magnifyimageid')).trigger('click.magnify')
   e.preventDefault()
  })
 })
})


/***********************************************
* jQuery Image Magnify- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

//]]>
</script>


 Pro ultimo para agregar las imagenes, ya sea en un gadget o entrada usa:

<img src="URL DE LA IMAGEN" class="magnify" style="width:150px; height:150px" />

En color Azul esta lo que puedes editar, osea el tamaño de la imagen en pequeño.  Asi de facil podemos agregarle efecto Zoom a nuestras imagenes.

Entradas resumidas en Feedburner de google

Cuando escribimos una entrada por defecto Feedburner de google le manda toda la información de la entrada a nuestros suscriptores, esto nos afecta ya que de esa forma los suscriptores ya no tiene que dirigirse al blogs y creo que la mayoría lo que quieren es que visiten su blogs.


Que podemos hacer?

Bueno para que esto no pase tenemos que configurar nuestro Feedburner para que haga un  resumen de la siguiente manera.

  1. primero abrimos nuestra cuenta de Feedburner, nos dirigimos al feed del blogs que midificaremos.
  2. después hacemos click en Optimize
  3. click en Summary bunner.

y activamos la opción asiendo click en Save, 

Imagen de ejemplo:
 



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