Tutoblogger

Descripcion en imagenes con efecto deslizante usando css

2013-05-05T16:36:00.004-07:00

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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhL5rTO06Kvxpo-iv96HtOXG-htxIWM5uYJZ6WMywkUzlFrep5sTC7aqeoyT77jIkys2rKx-xgVIOh8pYg7YxTHlDmMGvT0yhK8PJF9W7QTVHpm1lx98keFEUoz1CPi47w2sqZhiBRR9KU/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

Larry el pájaro de twitter volando por el blogs

2013-04-28T13:13:00.002-07:00

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

widgets de cuantas personas visitan tu blogs, sin registrarte

2013-04-21T14:28:00.002-07:00

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

Menu Vertical con Buscador usando CSS con Transiciones y Zoom

2013-04-09T10:54:00.002-07:00

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 == "") this.value = "Buscar...";' onfocus='if (this.value == "Buscar...") this.value = "";' 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

2013-04-09T09:52:00.001-07:00

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.

Guarda los Cambios y listo.

Caja Suscribirte por Email y RSS flotante para blogger

2013-04-02T12:23:00.002-07:00

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('http://feedburner.google.com/fb/a/mailverify?uri=mtutoriales', 'popupwindow', 'scrollbars=yes,width=550,height=520');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

2013-04-02T11:43:00.004-07:00

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+

2013-04-02T10:13:00.000-07:00

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&send=false&layout=standard&width=260&show_faces=false&font&colorscheme=light&action=like&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>
 <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

2013-04-02T09:53:00.001-07:00

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

Zoom en imagenes usando jQuery para Blogger

2013-03-30T12:41:00.001-07:00

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

2013-03-30T12:09:00.003-07:00

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.

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

y activamos la opción asiendo click en Save,

Imagen de ejemplo:

Galeria de imagenes en miniatura con efecto zoom usando css

2013-03-30T11:44:00.000-07:00

Usando CSS y con un poco de creatividad podemos hacer una pequeña Galeria de Imagenes en miniatura, que con solo pasar en cursor sobre la imagen aumenta su tamaño (efecto zoom) sobreponiedoce sebre las demas. esto lo hacemos usardo en comado hover, ademas podemos agregarle estilos de bordes con diferentes propiedades (yo le he colocado una por defecto).
puedes ver un pequeño en jemplo en este:

blogs pruevas

Por lo regular las Galerias se agregar ya sea en una paguina o en una entrada por lo que podemos agregar es siguiente codigo es la seccion de HTML de las estradas o paguinas.

<style>
/* Galeria de imagenes*/
.galeri{
background:#0000;
margin-top:5px;
margin-left:5px;
}
.galeri img {
-o-border-radius: 5px;/* radio de borde*/
-ms-border-radius: 55px;/* radio de borde*/
-webkit-border-radius: 5px;/* radio de borde*/
-moz-border-radius: 5px;/* radio de borde*/
border-radius: 5px;
-webkit-box-shadow: 0px 0px 4px #696969;
-moz-box-shadow: 0px 0px 4px #696969;
box-shadow: 0px 0px 4px #696969;
padding: 5px;
position:static;
}
.galeri img:hover {
-o-border-radius: 5px;/* radio de borde*/
-ms-border-radius: 5px;/* radio de borde*/
-webkit-border-radius: 5px;/* radio de borde*/
-moz-border-radius: 5px;/* radio de borde*/
border-radius: 5px;
-webkit-box-shadow: 0px 0px 4px #696969;
-moz-box-shadow: 0px 0px 4px #696969;
box-shadow: 0px 0px 4px #696969;
-webkit-transition:all .8s ease;
-o-transition:all .8s ease;
-moz-transition:all .8s ease;
-ms-transition:all .8s ease;
transition:all .8s ease;
width: 50%;/*tamaño de imagen al pasar en cursor*/
height:50%;/*tamaño de imagen al pasar en cursor*/
float:center;
position:absolute;
padding: 5px;
margin-top:-15%;/*posicion de arriba a abajo al pasar el cursor*/
margin-left:-25%;/*posicion de izquierda a derecha al pasar el cursor */
}

</style>

<div class="galeri">
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9ZSh9vKfJ-glb_iAC3oxMTDDxeCSJN05xkNbcK-iJi6W22J9IdhCa5XKZTtZ_4cqAOMnpuXTyhs77klMdARB1zu4Dmg8jZ3tfiqn0ipWi_2zI9iktxMDxTzOPVy6Ptph_zyhh2htKv_0/s1600/Paisajes-de-Mar.jpg" height="125px" width="125px" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9ZSh9vKfJ-glb_iAC3oxMTDDxeCSJN05xkNbcK-iJi6W22J9IdhCa5XKZTtZ_4cqAOMnpuXTyhs77klMdARB1zu4Dmg8jZ3tfiqn0ipWi_2zI9iktxMDxTzOPVy6Ptph_zyhh2htKv_0/s1600/Paisajes-de-Mar.jpg" height="125px" width="125px" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9ZSh9vKfJ-glb_iAC3oxMTDDxeCSJN05xkNbcK-iJi6W22J9IdhCa5XKZTtZ_4cqAOMnpuXTyhs77klMdARB1zu4Dmg8jZ3tfiqn0ipWi_2zI9iktxMDxTzOPVy6Ptph_zyhh2htKv_0/s1600/Paisajes-de-Mar.jpg" height="125px" width="125px" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9ZSh9vKfJ-glb_iAC3oxMTDDxeCSJN05xkNbcK-iJi6W22J9IdhCa5XKZTtZ_4cqAOMnpuXTyhs77klMdARB1zu4Dmg8jZ3tfiqn0ipWi_2zI9iktxMDxTzOPVy6Ptph_zyhh2htKv_0/s1600/Paisajes-de-Mar.jpg" height="125px" width="125px" /></a>

</div>
<div class="galeri">
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9ZSh9vKfJ-glb_iAC3oxMTDDxeCSJN05xkNbcK-iJi6W22J9IdhCa5XKZTtZ_4cqAOMnpuXTyhs77klMdARB1zu4Dmg8jZ3tfiqn0ipWi_2zI9iktxMDxTzOPVy6Ptph_zyhh2htKv_0/s1600/Paisajes-de-Mar.jpg" height="125px" width="125px" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9ZSh9vKfJ-glb_iAC3oxMTDDxeCSJN05xkNbcK-iJi6W22J9IdhCa5XKZTtZ_4cqAOMnpuXTyhs77klMdARB1zu4Dmg8jZ3tfiqn0ipWi_2zI9iktxMDxTzOPVy6Ptph_zyhh2htKv_0/s1600/Paisajes-de-Mar.jpg" height="125px" width="125px" /></a>
<a href="h#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9ZSh9vKfJ-glb_iAC3oxMTDDxeCSJN05xkNbcK-iJi6W22J9IdhCa5XKZTtZ_4cqAOMnpuXTyhs77klMdARB1zu4Dmg8jZ3tfiqn0ipWi_2zI9iktxMDxTzOPVy6Ptph_zyhh2htKv_0/s1600/Paisajes-de-Mar.jpg" height="125px" width="125px" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9ZSh9vKfJ-glb_iAC3oxMTDDxeCSJN05xkNbcK-iJi6W22J9IdhCa5XKZTtZ_4cqAOMnpuXTyhs77klMdARB1zu4Dmg8jZ3tfiqn0ipWi_2zI9iktxMDxTzOPVy6Ptph_zyhh2htKv_0/s1600/Paisajes-de-Mar.jpg" height="125px" width="125px" /></a>

</div>
<div class="galeri">
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9ZSh9vKfJ-glb_iAC3oxMTDDxeCSJN05xkNbcK-iJi6W22J9IdhCa5XKZTtZ_4cqAOMnpuXTyhs77klMdARB1zu4Dmg8jZ3tfiqn0ipWi_2zI9iktxMDxTzOPVy6Ptph_zyhh2htKv_0/s1600/Paisajes-de-Mar.jpg" height="125px" width="125px" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9ZSh9vKfJ-glb_iAC3oxMTDDxeCSJN05xkNbcK-iJi6W22J9IdhCa5XKZTtZ_4cqAOMnpuXTyhs77klMdARB1zu4Dmg8jZ3tfiqn0ipWi_2zI9iktxMDxTzOPVy6Ptph_zyhh2htKv_0/s1600/Paisajes-de-Mar.jpg" height="125px" width="125px" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9ZSh9vKfJ-glb_iAC3oxMTDDxeCSJN05xkNbcK-iJi6W22J9IdhCa5XKZTtZ_4cqAOMnpuXTyhs77klMdARB1zu4Dmg8jZ3tfiqn0ipWi_2zI9iktxMDxTzOPVy6Ptph_zyhh2htKv_0/s1600/Paisajes-de-Mar.jpg" height="125px" width="125px" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9ZSh9vKfJ-glb_iAC3oxMTDDxeCSJN05xkNbcK-iJi6W22J9IdhCa5XKZTtZ_4cqAOMnpuXTyhs77klMdARB1zu4Dmg8jZ3tfiqn0ipWi_2zI9iktxMDxTzOPVy6Ptph_zyhh2htKv_0/s1600/Paisajes-de-Mar.jpg" height="125px" width="125px" /></a>
</div>

Si quieres agregar otra imagen en cualquier columna simplemente agregar:

<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9ZSh9vKfJ-glb_iAC3oxMTDDxeCSJN05xkNbcK-iJi6W22J9IdhCa5XKZTtZ_4cqAOMnpuXTyhs77klMdARB1zu4Dmg8jZ3tfiqn0ipWi_2zI9iktxMDxTzOPVy6Ptph_zyhh2htKv_0/s1600/Paisajes-de-Mar.jpg" height="125px" width="125px" /></a>

En cualquier parte dentro de: ( no tienes que agregar lo de negro de nuevo, simplemente agrega dentro de el codigo de la imagen nueva)

<div class="galeri"> Aqui codigo de arriba con el url de la nueva imagen </div>

y si quieres agregar otra fila, simplemente pega todo el codigo:( incluyendo lo de azul)

<div class="galeri"> Aqui codigo de todas la imagenes de la nueva fila </div>

Como lo vez es Facil agregar esta Galeria, una de las desventajas es que no tendra en efecto Zoom en navegadores modernos y nucho menos en IE.

Menú horizontal flotante que se expande al pasar en cursor

2013-03-30T10:18:00.001-07:00

En estos días he estado jugando un poco con CSS3, y bueno se me ocurrió hacer un menú horizontal usando únicamente CSS3, esto para no hace que nuestro blogs se cargue mucho de script, a diferencia de muchos menús que ya has visto, (espero no allás visto ya uno igual) este menú estará flotando y oculto momentaneamente en nuestro blogs de tal manera que con solo pasar en cursor sobre la en botón "menú"se expande mostrando todas las opciones de nuestro menú, como si fuera una armónica (al menos yo así lo veo), y por si fuera poco le he agregado un ángulo de rotación de -30 grados para darle mas elegancia, claro que todo esto lo puedes editar puedes ver el ejemplo: que flota en tutoblogger o en la imagen de arriba.

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

ul.menuflotante {
position: relative;
width: 100%;
margin: 20px auto;
text-align: center;
list-style-type: none;
font-family: "Arial";
font-size: 13pt;/* tamaño de letras*/
color: white;
}
ul.menuflotante li {
display: inline;
margin: 0;
padding: 0;
}
ul.menuflotante li a {
-o-border-radius: 5px;/* radio de borde*/
-ms-border-radius: 5px;/* radio de borde*/
-webkit-border-radius: 5px;/* radio de borde*/
-moz-border-radius: 5px;/* radio de borde*/
border-radius: 5px;
-webkit-box-shadow: 0px 0px 4px #696969;
-moz-box-shadow: 0px 0px 4px #696969;
box-shadow: 0px 0px 4px #696969;
padding: 5px;
position: absolute;
opacity: 0;
display: inline-block;
left: 50%;
margin-left: -50px;
text-decoration: none;
color: white;
background:#e51431;/* Color de botones*/
width:100px;/*ancho de botones */
height:70px;/* alto de botones*/
transition: all .8s ease;
}
ul.menuflotante li:last-of-type a {
opacity: 1;
}
ul.menuflotante a span {
position: relative;
top:40%;
padding: 5px;
text-align: center;
}
ul.menuflotante:hover li a {
color: white;
background:#e51431 ;
opacity: 1;
-webkit-transition:all .8s ease;
-o-transition:all .8s ease;
-moz-transition:all .8s ease;
-ms-transition:all .8s ease;
transition:all .8s ease;
}

ul.menuflotante:hover li:nth-of-type(1) a {
margin-left: -50px;/*posicion del boton 1*/
}
ul.menuflotante:hover li:nth-of-type(2) a {
margin-left: 50px;/*posicion del boton 2*/
}
ul.menuflotante:hover li:nth-of-type(3) a {
margin-left: 150px;/*posicion del boton 3*/
}
ul.menuflotante:hover li:nth-of-type(4) a {
margin-left: 250px;/* posicion del boton 4*/
}
ul.menuflotante:hover li:nth-of-type(5) a {
margin-left: 350px;/* posicion del boton 5*/
}
ul.menuflotante:hover li:last-of-type a {
opacity: 0;
top: -1000px;/* posicion del boton menu*/
}
ul.menuflotante a:hover {
transform: rotate(-30deg);/* angulo de rotacion*/
}
#flotador {
position:fixed;
bottom:100px;
left:60px;
}
/* menu flotante creado por tutoblogger*/

Ahora en Diseño,ve a Añadir Gadget,HTML/Javascript y pega lo siguiente:

<div id="flotador">
<ul class="menuflotante">
<li><a href="Url de Enlace">Inicio</a></li>
<li><a href="Url de Enlace">Mapa del blogs</a></li>
<li><a href="Url de Enlace">Contacto</a></li>
<li><a href="Url de Enlace">Enlazanos</a></li>
<li><a href="Url de Enlace">sobre nosotros</a></li>
<li><a href="#">Menu</a></li>
</ul>
</div>

guardas los cambios y listo. toma en cuanta que este menú se vera bien usando navegadores resientes, y claro no funciona con IE. Lo que se encuentra en rojo y azul pueden editar.

widget de redes sociales en 3D con efecto Rotatorio

2013-03-23T21:21:00.001-07:00

Seguiendo con los Widget de redes sociales, a diferecia de los otros que e pueblicado este me a gustado mucho ya son imagens 3D y tiene un efecto Rotatorio que le da un toque unico.

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

<style> #social a:hover {background-color: transparent;opacity:0.7;} #social img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } </style> <center><div id="social">  <a title="Grab Our Rss Feed" href="URL DE FEED RSS" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijt6duuBzMRq6EYikgLtDAsfFbKQ-TZOH2BsZ5POUAwJjMkPjOstYcoQFO5tRKQEMYWVe1Rw-R81ThZtrwXoSXUDodq02QySLy8sPmwGkTJgiuNw4WISwI12-0OkFfZhU4eOEEdh7geWJW/s1600/RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a>   <a rel="nofollow" title="Get Free Updates Via Email" href="URL DE FEED DE EMAIL" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpR37h-9rFJRXGCPcJL478S_2CUm6LAWHr9RYoR_jNJdebMe8UTuVNmYuXbqAzUp_6poLfqZ5DFNNdAisGXYWln05VeQCz-LfQS7R3HjH0zXYCMJJk7MhiCPd5DQkbz7AG1BBVhm3YQJco/s1600/RSS-EMAIL-48x48.png" style="margin-right:1px;" alt="Icon"/></a>   <a rel="nofollow" title="Like Our Facebook Page" href="URL DE TU PAGUINA DEFACEBOOK" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9zvNpXAL5tRsYhkhM4dS7DLXUmOhKVojhn6-PZvX-W2PM3uUZoQAwOTqVnfjji0DTl_qF5EuyZRn5grD4ESCp3rR90z8Zb8eb7yC30z54NP4albxw6FgtCVg48h6V3ze80_jRVIM5pWfx/s1600/FACEBOOK-48x48.png" style="margin-right:1px;" alt="Icon"/></a>   <a rel="nofollow" title="Follow Our Updates On Twitter" href="URL DEVTWITTER" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdzeH5Af-osEEZa8pDCr2-yRzUJ82Mr-2mi1Y_LpxDYkaCuj0lmvNcTjWtjex9rPyL1DCRvF_VEuMj5rXgYFqX6xwum7s56H7uWSw0FdzU8VKbGTyzdax1Na4nA-nRK7SznPkYYgUSDDOi/s1600/TWITTER-48x48.png" style="margin-right:1px;" alt="Icon"/></a>   <a title="Follow Us On Google+" rel="nofollow" href="URL GOOGLE-PLUS" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXbH2jwn6IU5A8wmjoGeKYSf9oYIBaH5D2vDG35bhYgCO5EhgK8zN11YdA1xPo90H2tI0_31DDka089HJIE3P24r0fcFXB6l9wfrJS3MZuCsDHqW9OJQhpljw-RlejA6UxDI-ani8FF9W0/s1600/GOOGLE-PLUS-48x48.png"/></a>   <a title="Follow Our Pins" rel="nofollow" href="URL PINTEREST" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjupIYuUV96EQjv_hvfx8vOk6M39tM_r_oa7Wtik3B_qL1EBP_IsjprdiTO_4dd9UnBYtAUR8VhG1Kan3KdnN7iI5cdNXFIGpxbFYldkC80i-ekk9sDrMKvAf5XusI9A6WguV8zlwAkM3dl/s1600/PINTEREST-48x48.png" alt="Follow Me on Pinterest" /></a>  </div><br/>  <a href="FEEDBURNER-URL" target="_blank"><img alt="spice up your blog" src="http://feeds.feedburner.com/~fc/spiceupyourblog?bg=ff9933&fg=000000&anim=1" style="border:0" /></a> </center>

Ahora simplemete cambia todo lo que esta en rojo y listo.

La Vista Previa.

Elegante Widget de redes sociales y suscribete para blogger

2013-03-23T20:26:00.001-07:00

Esta ves les traigo un bonito widget de las redes sociales mas comunes, dentro de ellas Facebook, Google+, Pinterest, Twitter, Rss y tambien suscripcion por Email.

Para agregar este gadget a tu blogs, Para agregar este widget ve Diseño, a Añadir Gadget, HTML/Javascript y pega lo siguiente:

<style>
.social{background:none repeat scroll 0 0#fff;border-bottom:1px solid#F0F0F0;height:90px;padding:8px}.social li{float:left;margin-right:4px;text-align:center;width:52px;list-style:none}.social li.last{margin-right:0}.social li a{color:#666666;font-size:11px;line-height:34px;opacity:0.6;padding-top:42px}.social li a:hover{color:#666666;opacity:1;text-decoration:none}.social.social-feed{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjRmZ7cDffRk8uruBKo_oPMG-DIVisaZT-tc1VIrv_eTEk7ps03TdxIwQ9eNRSjlU6ZM5CWqid8M0B1VXERh1lBeaQgkSBrA4jQBj39kbD1NFpS1KWp7VX6UUcmqu-7U0TuXf5gZt6p8nE/")no-repeat scroll 0 0 transparent;display:block}.social.social-email{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbNqcP67Jo1IgI77Y0rDu5hTSiFg2YbLcWX2ySzL92XyJBehzYl1z6enbCihzqeOvKOeAf9VEJdBUl2K-Ht2-XEoMwi07fq3ZAvLOD_iA9HRhWh_Ee0_dcA30F1HQNoOZdbdr1gHkekPHC/s1600/email-feed.png")no-repeat scroll 0 0 transparent;display:block}.social.social-twitter{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9tzXRaIwXpJOatmW2OnPts1Ep25SeJdumrK_WXiP7yegFhyphenhyphencyM-Sdg_fRfcsIcXx1LprIjeCWqK94jD0xGugMDZ4d0CLa3ghv6VXYUmoKzz4UTEeFSmd_kpPPoFH96tLtzPDTvwkyBThX/")no-repeat scroll 0 0 transparent;display:block}.social.social-facebook{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR2izl-3DYFzIRAc89xMDlCEvnyK0ae9aARs98mBjLVBh9c6JjSx_qHA0vNotDD4YBjlnBCvXwFjjlrtdY92J_lFOskdGqx8lP2hXo6JSwd13t4JcZixjH4ZoefIEsT6mGWa0xikEOC0Hy/")no-repeat scroll 0 0 transparent;display:block}.social.social-googleplus{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXLJy-gddtJBtHcJrWov7CWA3N4tPNcUMOhOm6G4BGBPTctMReleQsajWB5CiQ3N3a7ErexD-5kBtT_DBLvoqKuG4C3GdvebhAGxaghvjqYSTCq75UMKpBshyphenhyphen5SZeERgJPzRy0jyQ8lzNx/")no-repeat scroll 0 0 transparent;display:block;margin-right:0}.social.social-pinterest{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYg8DiUcBjzX0LgkYqBg8taf08Md24SGN2p7ZfVnVQjg-tQqP3LOG4U_IYGM9y2nhJU8HwVZVEgyCDp13tgVIFc9GOxp2HyfTPDNSc8D6ErN9viS0LQbU3kZlryUZzbhOXTXkeUFcE_L2A/s1600/pinterest-icon.png")no-repeat scroll 0 0 transparent;display:block}
/* from http://www.mdtutoriales.blogspot.com */
</style>
<ul class='social'>
<li><a class='social-feed' href='http://feeds.feedburner.com/Tublogs' rel='nofollow' target='_blank'>RSS</a></li>

<li><a class='social-email' href='http://feedburner.google.com/fb/a/mailverify?uri=tublogs&loc=en_US'
rel='nofollow' target='_blank'>Email</a></li>
<li><a class='social-twitter' href='http://twitter.com/tublogs' rel='nofollow' target='_blank'>Twitter</a></li>
<li><a class='social-facebook' href='http://facebook.com/tublogs' rel='nofollow' target='_blank'>Facebook</a></li>

<li><a class='social-pinterest' href='http://pinterest.com/tublogs/' rel='nofollow' target='_blank'>Pinterest</a></li>
<li class='last'><a class='social-googleplus' href='https://plus.google.com/Id de tu perfil/posts'>Google+</a></li>
</ul>
<small><a href="http://www.mdtutoriales.blogspot.com">Tutoblogger</a></small>

Todo lo que esta en rojo es lo que tienes que editar, bueno en el caso de google+ lo e puesto en azul en esa parte va el ID de tu perfil, el ID son todos los numero que aparese en el url de tu perfil por ejemplo:

el url de mi perfil de google+ https://plus.google.com/u/0/107424685125055103818/posts

en este caso mi ID es : 107424685125055103818

Cuanto tiempo tarda en cargar nuestro blogs

2013-03-23T13:07:00.000-07:00

Anteriormente les avía publicado unos útiles consejos para hacer que nuestro blogs cargue de forma mas rápida, ya que actualmente la mayoría de usuarios de Internet no les gusta esperar mucho para que una pagina cargue, (me incluyo en esos usuarios) esto en ocasiones es aburrido y tedioso, viéndolo desde el punto de vista de cada usuario.

Normalmente de maneja que un pagina web o blogs carga dependido de la velocidad de Internet que los usuarios tengan, ya que un usuario que tenga una velocidad de 4mb carga el blogs mas rápido que uno que tenga Internet de 2mb.

Lastimosamente no podemos hacer que nuestras lectores tengan una mejor velocidad de Internet.

¿que podemos hacer?

Bueno una forma de ayudar a aquellos lectores que no puedan tener acceso a un Internet mas rápido es haciendo que nuestro blogs cargue de forma mas rápida, para eso de vemos saber cuanto tarda nuestro blogs en cargar para esto usaremos una herramienta muy útil llamada pingdom tools.

Con esta herramienta podemos saber que tan pesado es nuestro blogs, como ejemplo tutoblogger

Sólo hay que entrar, escribir nuestra dirección y pinchar en "Test now". La aplicación os mostrará un gráfico en el que se aprecia, en qué momento se ha empezado a cargar cada elemento y el tiempo que ha tardado. Tras el gráfico, también ofrece un resumen del tiempo total de carga y un detalle con los ficheros de cada tipo que se ha encontrado.

Simplemente fijándonos en los elementos que tardan más tiempo, podemos optimizar nuestra web, sustituyéndolos, si es posible, por otros más livianos.

Efectos en todas las imagenes del blogs con CSS3

2013-03-23T13:02:00.000-07:00

Para quienes se preguntaban como hacer que las imagenes de todas las entradas tengas bordes redondos,
bueno vamos a aprender a agregarles en efecto de bordes redondeados a las imagenes de nuestro blogs,

Para darle este toque somplemente usaremos CSS3, la cual nos permite hacer esto mediante la declaracion de border-radius
con agregaremos los bordes.

Esto sera sivible siempre y cuando quien vea la página use un navegador moderno

Los estilos los agregaremos a la declaracion

.post-body img {-----------
---------Aqui los estilos-------
----------------------------
}

.post-body img:hover {-----
------Aqui los estilos al pasar en cursor-------
-------------------------------
}

Nota: es por si quieres hacer tus propios estilos o simplemente modifica cualquiera de los ejemplos

Veamos los siguientes ajemplos:

Para agregarlo a sus imagenes simplemente copia copia el código, luego entra a la Edición HTML de la plantilla y pega dicho código antes de ]]></b:skin>

.post-body img {
border-radius: 10px 10px 10px 10px; /* Borde redondeado */
box-shadow: 0px 0px 15px #000; /* Sombra */
padding:15px; /* Espacio entre la imagen y el borde */
background:#FFF; /* Color de fondo que se ve entre el espacio */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}

o tambien podemos aplicar algunos efectos al pasar el cursor usando la declaracion "hover"
como por ejemplo

.post-body img {
border-radius: 10px 10px 10px 10px; /* Borde redondeado */
box-shadow: 0px 0px 10px #000; /* Sombra */
padding:15px; /* Espacio entre la imagen y el borde */
background:#FFF; /* Color de fondo que se ve entre el espacio */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img : hover {
border-radius:100px 300px 100px 300px; /* Con esto quitamos el borde redondeado */
box-shadow: 0px 0px 15px #000; /* Sombra */
padding:15px; /* Espacio entre la imagen y el borde */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;

}

.post-body img {
border-radius: 100px 10px 10px 100px; /* Borde redondeado */
box-shadow: 0px 0px 10px #000; /* Sombra */
padding:15px; /* Espacio entre la imagen y el borde */
background:#FFF; /* Color de fondo que se ve entre el espacio */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img: hover {
border-radius:10px 100px 100px 0px; /* Con esto quitamos el borde redondeado */
box-shadow: 0px 0px 15px #000; /* Sombra */
padding:15px; /* Espacio entre la imagen y el borde */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;

}

.post-body img {
border-radius: 10px 10px 10px 10px; /* Borde redondeado */
box-shadow: 0px 0px 10px #000; /* Sombra */
padding:15px; /* Espacio entre la imagen y el borde */
background:#FFF; /* Color de fondo que se ve entre el espacio */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {
border-radius:300px 300px 300px 300px; /* Con esto quitamos el borde redondeado */
box-shadow: 0px 0px 15px #000; /* Sombra */
padding:15px; /* Espacio entre la imagen y el borde */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;

}

.post-body img {
border-radius: 300px 300px 300px 300px; /* Borde redondeado */
box-shadow: 0px 0px 10px #000; /* Sombra */
padding:15px; /* Espacio entre la imagen y el borde */
background:#FFF; /* Color de fondo que se ve entre el espacio */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}.post-body img:hover {
border-radius:10px 10px 10px 10px; /* Con esto quitamos el borde redondeado */
box-shadow: 0px 0px 15px #000; /* Sombra */
padding:15px; /* Espacio entre la imagen y el borde */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;

}

Es cuestion de jugar con en radio de los bordes para tener un estilo perzonalizado por ejemplo

border-radius: 10px 50px 15px 80px;

Cada valor corresponde a una esquina de la image, en este ejemplo seria:

10px es el borde de la esquina superior izquierda.
50px el borde de la esquina superior derecha.
15px el borde de la esquina inferior derecha.
80px el borde de la esquina inferior izquierda.

En conclusion podemos conseguir que las imágenes de las entradas se vean más atractivas, que interactúen con el lector, y tan sólo ha sido añadiendo un poco de CSS.

Expandir imagenes con efecto deslizante (zoom)

2013-03-23T12:04:00.000-07:00

Les traigo un tutorial que espero le sirva de mucho a aquellos que tiene un blogs de imagenes, o que simplemente quieren agregarle un toque distinto a su blogs agregando un efecto distinto a sus imagenes, se trata de un script que nos permite expandir imagenes a tu tamaño normal con un efecto de Zoom deslizante, que le da un toque de elegansia.

VER EJEMPLO:

Para lograr este efecto simplemente ingresa a la Edición HTML y agrega antes de </head> el script:

<script type='text/javascript'>
//<![CDATA[

/* Expando Image Script 2008 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use
*/

if (document.images){
(function(){
var cos, a = /Apple/.test(navigator.vendor), times = a? 20 : 40, speed = a? 40 : 20;
var expConIm = function(im){
im = im || window.event;
if (!expConIm.r.test (im.className))
im = im.target || im.srcElement || null;
if (!im || !expConIm.r.test (im.className))
return;
var e = expConIm,
widthHeight = function(dim){
return dim[0] * cos + dim[1] + 'px';
},
resize = function(){
cos = (1 - Math.cos((e.ims[i].jump / times) * Math.PI)) / 2;
im.style.width = widthHeight (e.ims[i].w);
im.style.height = widthHeight (e.ims[i].h);
if (e.ims[i].d && times > e.ims[i].jump){
++e.ims[i].jump;
e.ims[i].timer = setTimeout(resize, speed);
} else if (!e.ims[i].d && e.ims[i].jump > 0){
--e.ims[i].jump;
e.ims[i].timer = setTimeout(resize, speed);
}
}, d = document.images, i = d.length - 1;
for (i; i > -1; --i)
if(d[i] == im) break;
i = i + im.src;
if (!e.ims[i]){
im.title = '';
e.ims[i] = {im : new Image(), jump : 0};
e.ims[i].im.onload = function(){
e.ims[i].w = [e.ims[i].im.width - im.width, im.width];
e.ims[i].h = [e.ims[i].im.height - im.height, im.height];
e (im);
};
e.ims[i].im.src = im.src;
return;
}
if (e.ims[i].timer) clearTimeout(e.ims[i].timer);
e.ims[i].d = !e.ims[i].d;
resize ();
};
expConIm.ims = {};
expConIm.r = new RegExp('\\bexpando\\b');
if (document.addEventListener){
document.addEventListener('mouseover', expConIm, false);
document.addEventListener('mouseout', expConIm, false);
}
else if (document.attachEvent){
document.attachEvent('onmouseover', expConIm);
document.attachEvent('onmouseout', expConIm);
}
})();
}
//]]>
</script>

<style>
img.expando{
margin:4px;
vertical-align: top;
}
img.expando {
float:right;
margin-left:20px;
padding:10px;
}
</style>

Y liego despues ya sea un una entrada o gadget agregas los siguiente

La imagen que pongas deberá ser la que tiene el tamaño normal, y en donde se indica en color rojo deberás poner el tamaño que tendrá la miniatura.

<img border="0" src="URL de la imagen" class="expando" width="100" />

Usar Scriptaculos y jQuery al mismo tiempo en blogger

2013-03-23T11:28:00.001-07:00

Unos de los problema mas comunes de blogger; que le puede pasar a cualquiera, cuando
ya usamos Scriptaculous por x o y razon y de pronto vemos un tutorial donde agregaremos un efecto y tenemos que usar jquery
y bueno al darmos cuenta que no funciona nos desilucionamos.. ami me a pasado.

y te preguntas ¿porque no funciona? si ise todo bien!

La Respuesta...

El problema es de incompatibilidad entre Scriptaculous y jQuery lo que sucede es que ambos usan la misma sintaxis para llamar a las funciones del script, esto hace que ambas
librerías no sepan a quién hacerle caso pues las dos usan la misma forma de leer esas instrucciones.

Sin enbargo hay una solucion para este problema, Grasias a El Protro de Cuidad Blogger podemos solucionar esto, simplemente usando una variable en la sintaxis, esto es para que no entren en conflito ambas librerías y se pueda usar jQuery aun cuando se tenga Scriptaculous, Prototype o Mootools en el blog.

Para aplicar esta variable necesitamos hacer uso del comando jQuery.noConflict();
Por ejemplo, un código que use jQuery se vería similar a este:

    <script src="URL del archivo jQuery" type="text/javascript" />
    <script src="URL de algún script que necesita jQuery" type="text/javascript" />

    <script type="text/javascript">
    $(document).ready(function(){
    $("div").hide();
    });
    </script>

Lo que hacemos ahora es agregar antes de las instrucciones del script el comando jQuery.noConflict(); y además cambiaremos todos los $ que encontremos por la palabra jQuery
Por ejemplo:

    <script src="URL del archivo jQuery" type="text/javascript" />
    <script src="URL de algún script que necesita jQuery" type="text/javascript" />
    <script src="" type="text/javascript" />

    <script type="text/javascript">
    jQuery.noConflict();
    jQuery(document).ready(function(){
    jQuery("div").hide();
    });
    </script>

Y habiendo hecho eso jQuery podrá usarse sin problemas aun cuando tengamos otra librería de scripts en el blog.

Un ejemplo. Veamos cómo sería el código normal del menú deslizante arriba del blog.

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
    <script type='text/javascript'>
    $(document).ready(function() {

    // Expand Panel
    $("#open").click(function(){
    $("div#panel").slideDown("slow");
    });

    // Collapse Panel
    $("#close").click(function(){
    $("div#panel").slideUp("slow");
    });

    // Switch buttons from "Abrir menú" to "Cerrar menú" on click
    $("#toggle a").click(function () {
    $("#toggle a").toggle();
    });

    });</script>

Y así sería si aplicamos el truco para que funcione también con Scriptaculous.

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
    <script type='text/javascript'>
    jQuery.noConflict();
    jQuery(document).ready(function() {

    // Expand Panel
    jQuery("#open").click(function(){
    jQuery("div#panel").slideDown("slow");
    });

    // Collapse Panel
    jQuery("#close").click(function(){
    jQuery("div#panel").slideUp("slow");
    });

    // Switch buttons from "Abrir menú" to "Cerrar menú" on click
    jQuery("#toggle a").click(function () {
    jQuery("#toggle a").toggle();
    });

    });</script>

En resumen, agregamos la función jQuery.noConflict(); y cambiamos todos los $ por jQuery
De esta forma en la gran mayoría de los casos podrás usar jQuery y Scriptaculous al mismo tiempo sin resignarte a elegir uno u otro.

Contador Flash de Visita para Blogger por paises

2013-03-20T11:52:00.000-07:00

Para todos los que quiere saber cuantas personas visitan su blogs y mostrar dicha información también a los lectores, en esta ocasión les presento un contador de vistitas que nos permite esto. se trata de 99counters que nos permite visualizar cuantas personas visitan nuestro blogs, de que país lo están visitando con pequeñas banderas de cada país y en total diario de visitas.

Con Tu cuenta gratis de 99counters ahora puede crear contador de red personalizadas para su sitio de red, blog y perfiles sociales en red.

El uso de 99counters es una manera efectiva y poderosa para obtener instantáneamente estadísticas de red

Para quienes quiera agregar este contador visiten 99counters y registrate.

Entradas Relacionadas para blogger con CSS

2013-03-20T07:56:00.000-07:00

Hace ya mucho tiempo salio el script que nos permite ver las entradas relacionadas en nuestro blogs, es mas ya en varias planillas ya viene instalada.

En esta ocasión les explicare como colocar esta opción en nuestro blogs, por si te interesa y aun no lo tienes, a diferencia de los demás tutoriales que e visto, yo le agregare un toque personal con CSS, espero que te guste.

Primero entra a Diseño > Edición de HTML y haz un respaldo de tu plantilla por si no obtuvieras los resultados esperados.

Después pega antes de ]]></b:skin> los estilos:

/*Entradas Relacionadas por Tutoblogger*/
#related-posts {
float : left;
width :auto;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;

}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
color : #069;
padding: 7px 30px 0 0;
text-align:center;
width: 475px;
font-size : 18px;
font-weight : normal;
margin : 5px -20px 0 0;
padding : 0 0 5px;
border-bottom: 3px solid #069;
}
#related-posts a {
color : #054474;
font-size : 11px;
text-decoration : none;
}
#related-posts a:hover {
color : #054474;
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : -25px 0 0 0;
padding : 30px 0 0 0;
border-left: 3px solid #069;
}
#related-posts li:hover {
margin-left: 40px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
#related-posts ul li {
display : block;
background : #f0eeee;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 16px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}

Luego con los artilugios expandidos busca la etiqueta ]]></b:skin> y justo debajo de ella pega lo siguiente:

<script type='text/javascript'>
//<![CDATA[

var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();

function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}

function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}

function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}

function printRelatedLabels() {
var cuantosPosts = 0;
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
var dirURL = document.URL;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
if (relatedUrls[r] != dirURL) {
document.write('<li><a href="' + relatedUrls[r] + '" title="Post relacionado: '
+ relatedTitles[r] + '">' + relatedTitles[r] + '</a></li>');
}
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
cuantosPosts++;
if (cuantosPosts == 5) {
break;
}
}
document.write('</ul>');
}

//]]>
</script>

Ahora busca esta línea:

<b:loop values='data:post.labels' var='label'>

Y justo antes del siguiente </b:loop> pega esto:

<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name +
"?alt=json-in-script&callback=related_results_labels&max-results=10"'
type='text/javascript'/>
</b:if>

Ya sólo busca esta línea:

<div class='post-footer-line post-footer-line-3'

Y pega debajo de ella lo siguiente:

<b:if cond='data:blog.pageType == "item"'><div id='related-posts'>
<div class='post-footer-line post-footer-line-4' id='relpost'>
<h2>Entradas relacionadas:</h2>
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</b:if></div>
</div></b:if>

Guarda los cambios y listo. los cambios los podras ver unicamente en las entradas.

Muy Importante:

Cada entrada debe tener minimo una etiqueta y que las etiquetas se muestren en el post para que las entradas relacionadas funcionen.

Info: sacado de una planilla de johnytemplate

botones de Ir Arriba e Ir Abajo con un efecto de deslizamiento para Blogger

2013-03-18T09:03:00.001-07:00

En esta ocasión le traigo un tutorial que espero que les guste,
aprenderemos como colocar dos botones; una para poder ir arriba y otro para poder ir abajo,
que seran de gran utilidad para nuetros que nuestros lectores, que les facilitar mucho ver el contenido de nuestras
entradas cuando aveces son demaciado lagas.

Para esto usaremos jquery, por lo tanto,
Si usas Scriptaculous podrías tener complicasiones, al final les dejare a solucion.

Veamos entonces cómo poner los botones de Ir Arriba e Ir Abajo con un efecto de deslizamiento usando jQuery.
Lo primero es entrar en la Edición HTML y pegar antes de ]]></b:skin> los estilos:

/* Botones de Ir arriba e Ir abajo con jQuery
----------------------------------------------- */
.nav_up{
padding:7px; /* Distancia entre el borde y el ícono */
background-color:white;
border:1px solid #CCC; /* Color del borde */
position:fixed;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNZPtukToWS5EVyk1vxmRD_Zef5pGOspmAZz5Wd2e5MveYViGopAFzQLeEh5lAK1qYSXiLHe6WhB6A32VOEt8oViXJFJpo93XnEzHuQnuaXohxOoC8cuSCte1se3Mkx-wT09uW6LZyX8U/s16/arrow_up.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Ancho del botón */
height:20px; /* Alto del botón */
bottom:10px; /* Distancia desde abajo */
right:30px; /* Cambiar right porleft si se quiere a la Izquierda */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
.nav_down{
padding:7px; /* Distancia entre el borde y el ícono */
background-color:white;
border:1px solid #CCC; /* Color del borde */
position:fixed;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijQom_hkvZ3EtNeWv4atahkOWobKTonjqZThavO6_Eacd9nCSrsSeRBR_-NSwefh1rkO_8OuzmO29vzZDDITICcfiq94Vrtgx2sT3OU0e7MliTiWJW3ZnkFt_Vq3wyGilygihcEYx5cek/s16/arrow_down.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Ancho del botón */
height:20px; /* Alto del botón */
bottom:10px;
right:70px; /* Cambiar right porleft si se quiere a la Izquierda */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}

Luego antes de </body> pega este código:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<div class='nav_up' id='nav_up' style='display:none;'/>
<div class='nav_down' id='nav_down' style='display:none;'/>
<script>
//<![CDATA[
(function(){var special=jQuery.event.special,uid1='D'+(+new Date()),uid2='D'+(+new Date()+1);special.scrollstart={setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}else{evt.type='scrollstart';jQuery.event.handle.apply(_self,_args)}timer=setTimeout(function(){timer=null},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid1,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid1))}};special.scrollstop={latency:300,setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}timer=setTimeout(function(){timer=null;evt.type='scrollstop';jQuery.event.handle.apply(_self,_args)},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid2,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid2))}}})();
$(function() {
var $elem = $('body');
$('#nav_up').fadeIn('slow');
$('#nav_down').fadeIn('slow');
$(window).bind('scrollstart', function(){
$('#nav_up,#nav_down').stop().animate({'opacity':'0.2'});
});
$(window).bind('scrollstop', function(){
$('#nav_up,#nav_down').stop().animate({'opacity':'1'});
});
$('#nav_down').click(
function (e) {
$('html, body').animate({scrollTop: $elem.height()}, 800);
} );
$('#nav_up').click(
function (e) {
$('html, body').animate({scrollTop: '0px'}, 800);
} );});
//]]>
</script>

Y listo. Todo lo que esta de color puedes modificar al estilo que quieras,
desde las posiciones de los botones, bordes y otros.

De antemano les conete que su usaban escriptaculos tendian complicaciones, para eso
ver la siquiente entrada.

Via: Ciudad blogger

Personalizar bloques entrecomillados, bombilla intermitente para Blogger

2013-03-14T09:19:00.000-07:00

Este tutorial realmente le permitirá crear bloques entrecomillados impresionante y atractivo para sus puestos de blogger o sitios web. Estos bloques entrecomillados cambiará de color cuando el cursor del ratón se asoma sobre ella. Pero este efecto bloques entrecomillados es excepcional! Sólo echar un vistazo de un blockquote siguiente ejemplo.

Interesante, ¿no? Ahora vamos a aprender cómo añadir efectos similares como el efecto bombilla parpadea arriba.

Añadir El Blockquote bombilla intermitente para Blogger

Esta blockquote se puede añadir en la forma similar a como se explica en mis mensajes earliar. Si usted es nuevo a continuación, lea esta parte de mi post anterior -> Agregar y personalizar Blockquote En Blogger
El código CSS que se inserta justo por encima de ]]></b:skin> es esto,

blockquote {
background: #000 url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5enN3yNAiJ9rlZvGnqovwPEMix3B_3xgzFcXV5VhdNwmMtg7UBZpgGsW3C_9teA3QkoJpP8U3MLM3Rkezw73QnYY01bekJjA1dBRZkWBRo0FSrvr03JjnFti1mdacVEa7zTwd8I2mses/s1600/bulb-off.gif ) no-repeat right bottom ;
margin: 0 20px;
padding: 20px 70px 20px 20px;
color:#595959;
font: bold 0.9em "comic sans ms", "Times New Roman", Times, serif;
border:1px solid #DDD;
}

blockquote:hover {
background: #000 url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5chfEYPltUuXk0B81T118SXrou4jfa5O5nDpSQQ74Qu0hNMVs7K1ZDWhSlaPMeZe4HUUDrqbJahxQpIvehQkr3Up155f0ze02wJyNOJ5zGJvprxMlOByXpdmMNcGqozagCfuU-i0KWPs/s1600/bulb-on.gif ) no-repeat right bottom ;
color:#E0E089;
}

blockquote p {
margin: 0;
padding-top:10px;
}

La segunda imagen en el enlace rojo aparece al pasar el ratón estacionario y la segunda imagen de enlace verde aparece cuando el ratón se mueve fuera de los bloques entrecomillados

Reducir el tiempo de carga Blog, 12 Consejos útiles

2013-03-14T08:34:00.002-07:00

Casi todos los blogger novato falla cuando se trata de reducir el tiempo de carga de blog. La mayoría de los tutoriales que están disponibles en la reducción del tiempo necesario para que un sitio web para cargar son a menudo poco clara o incompleta. Decidimos compartir nuestra forma de resolver este problema. A continuación se presentan 12 consejos muy interesantes e importantes para disminuir el tiempo de carga de sus blogs en casi un 90%.

Enlace a todas las imágenes dentro de su plantilla de Blogger

Yo compartimos un dato importante sobre la creación de una mañana de copia de seguridad de imagen en Blogger y luego enlazar a todas las imágenes desde allí. La mayoría de ustedes utilizan plantillas que no están oficial mente cedidas por Blogger. Estas plantillas contienen con frecuencia imágenes que se guardan en servicios como tinypic o photobucket . Cuando tu blog carga el navegador tiene que conectar a todos los servidores que conectan a las imágenes, como resultado conduce a un retraso enorme en el tiempo de carga de tu blog. Lo que debes hacer es reemplazar todas las imágenes de ese tipo con los que ha guardado en el interior de blogger como se explica en el post anterior . La ventaja de hacerlo así será esto que el navegador tendrá que conectar sólo a blogger al cargar las imágenes. Así ahorra tiempo.
Guardar todas las imágenes en formato GIF o PNG

GIF es sinónimo de "Graphics Interchange Format" y significa "PNG Portable Network Graphics" Ambos formatos están bien comprimidos, de menor tamaño y ampliamente respaldada por todos los navegadores. Pero si el tamaño se refiere PNG comprime mucho mejor que GIF. En los casos típicos de hasta un 5-25%. Hay algunos problemas con la transparencia PNG en IE6 IE7 pero ya se utiliza ampliamente en estos días, la transparencia es ni más un problema. El uso de cualquiera de estos formatos de imagen se reducirá enormemente el tiempo de carga de sus blogs en un 60%, es decir 70-90KB El tamaño es aproximado por mi blog y verdadero tamaño depende del número de imágenes que se utilizan.
Dar dimensiones propias imágenes

Dar a cada imagen una anchura y una altura hará que sea fácil para el navegador para cargar la imagen rápidamente. Siempre disminuir el tamaño de una imagen si el tamaño original es mayor. El código HTML generales para una imagen se ve como la siguiente,

<img width="" height="" src="URL De Image" />

La anchura y la altura se requiere un valor en píxeles. Un píxel es igual a un punto en la pantalla. Una imagen a tamaño completo en mi blog tendrá una width = "590px" y la altura puede ser tan largo como quiera. 590px casi igual a la anchura de mis posts. Espero que esto te da una idea sobre la forma de elegir los valores de anchura y altura para sus imágenes. Navegadores resulta fácil cargar imágenes cuyas dimensiones se especifican. Asegúrese de hacer su hábito para especificar un tamaño adecuado para sus imágenes. Si utiliza Windows Live Writer tu vida será mucho fácil.
No utilice una imagen como fondo
Si está utilizando cualquier imagen como fondo y luego amablemente quitarlo. Una imagen de fondo se repite horizontal y vertical mente y es responsable de un 50% el tiempo de carga lento. Sólo tienes que quitar y ver la diferencia. Para eliminar una imagen de fondo simplemente encontrar este código CSS dentro de su plantilla, (Consejo: - Está ubicado justo en la parte superior de tu blog Simplemente busque cuerpo.)

body {background: # 7AA1C3 url (http://xyz.com/blabla.jpg);

ancho: 980px;

color: # 333;

font-size: 14px;

font-family: Georgia;

margin: 0 auto 0;

padding: 0;}

Este código tendrá un aspecto diferente en su plantilla, pero usted debe preocuparse sólo con el texto negro en negrita. Sólo tiene que eliminar url (http://xyz.com/blabla.jpg) y guardar la plantilla. Da un color simple para su fondo. # 7AA1C3 refiere al color de fondo. Puede cambiarlo usando mi carta de color hexadecimal
Guardar todo JavaScript Dentro de Blogger

¿Por qué debería usted se conecta a sitios externos para almacenar su código JavaScript, mientras que fácilmente se puede guardar en Blogger! Guardar todos los códigos de JavaScript dentro de sus plantillas justo por encima de </ head> utilizando el código de abajo,

<script type='text/javascript'>

/ / <! [CDATA [

Cómo pegar el código JavaScript aquí

/ /]]>

</ Script> El texto en negrita es donde hay que pegar el código JavaScript que se utiliza en la plantilla mediante la vinculación a un sitio externo.

Para encontrar una URL que enlaza con JavaScript sitio externo, la búsqueda de Messenger type='text/javascript'> dentro de su plantilla (Asegúrese de activar la opción "Expandir plantillas de artilugios " caja en la esquina superior derecha). Una vez que encuentre esa vinculación, abra el vínculo en el navegador. Usted verá gran trozo de texto complejo en la ventana y que es su código JavaScript. Simplemente copia y pega el código compartido anteriormente. Vuelva a colocar todos los códigos de JavaScript dentro de su plantilla con el código anterior, asegurándose de que ha extraído el código del enlace y pegar en el código anterior.
Aceptar siempre la calidad y plantillas blogger con secuencias de comandos

La mayoría de los bloggers gran error hacer es cargar cualquier plantilla que les atrae. La mayoría de los no oficiales plantillas de Blogger que están disponibles en la blogosfera menudo son creadas por personas que no son conscientes con el uso adecuado de HTML y JavaScript. Una plantilla inadecuada guión con etiquetas vacías, etiquetas deseadas y JavaScript roto a menudo hacen trabajo duro para los motores de búsqueda para rastrear el contenido de su blog. Otros navegadores también pierda su valioso tiempo en leer guiones rotos. Si un JavaScript no está bien codificadas o optimizado, puede causar un PC lectores para colgar! Imagínese pasando esto a los lectores para acceder a su blog. En las plantillas de uso a corto de las autoridades que tienen el respeto en la blogosfera y de aquellos que son profesionales certificados.
Utilice anuncios Limitadamente

Si son los blogs sólo para recibir el pago por mostrar grandes trozos de anuncios de varias fuentes de lo que son, sin duda haciendo mal uso de esta hermosa experiencia de blogging. No haga un blog de un mercado de pescado. Mostrar sólo unos cuantos anuncios en las principales áreas de tu blog. Si lo hace así, mantendrá su interfaz de blog limpio y fácil de navegar y se arrastró poder. Cada complemento que se muestra utiliza JavaScript que prolonga el tiempo de carga de página. Asegúrese de limitar todos sus anuncios a tres.
No enlaces Directorios a blog

Es una percepción errónea de que la vinculación de varios directorios de blogs te traerá tráfico inmenso. Cuando se vincula a varios directorios de blogs en su sitio web, motores de búsqueda confianza suelto en su blog debido a la excesiva vinculación de los navegadores tienen dificultades para navegar por las imágenes pequeñas que enlace al blog de directorios. Todos los directorios de blogs pido que enlacen con un pequeño enlace de imagen en sus blogs, pero al hacerlo sólo dañará el éxito de su blog. Yo sólo creo en BlogCatalog y MyBlogLog como autoridades competentes para esperar tráfico de. Si realmente quieres una cierta cantidad de tráfico de directorios de blogs y luego confiar sólo en BlogCatalog y MyBlogLog . Por otra parte acepte sólo el pequeño trozo de etiqueta meta de ellos en lugar ligarse a ellos.
No utilizar widgets de directorios de blogs que utilizan imágenes
Me refiero al widget famoso espectadores reciente BlogCatalog y MyBlogLog . Estos widgets uso de JavaScript que enlazan a estos sitios y también mostrar imágenes que se suman al tiempo de carga de tu blog. Puedo utilizar etiquetas meta proporcionadas por ellos en vez usar sus widgets. Esto ayuda a reducir el tiempo necesario para que mis cargar las páginas. Si usted realmente desea utilizar estos widgets a continuación, intenta mostrar algunas imágenes sobre ellos, tan bajo como 10.
Resuma sus mensajes utiliza una conexión en Leer más
Mensajes de cuerpo entero en la página principal es una de las mayores razones por las que un blog tiene tiempo de carga. Resumir todos tus mensajes usando el enlace de lectura o continuar leyendo Para saber cómo agregar, leer este post-> Leer Mas
Mostrar sólo cuatro o cinco post en la Página de inicio
No mostrar más de 4-5 mensajes en la página principal. Si lo hace, mantener a sus lectores mensajes ocupado diferentes de lectura y también le resultará interesante ver qué tan rápido la página de inicio cargas.
Elimine Enlaces externos

No utilice aparatos que son de sitios externos que no sean blogger. Deshágase de los contadores de estadísticas y el uso de Google Analytics . No guarde las imágenes en otros servicios, pero Blogger. Guarde todo el código JavaScript dentro de blogger como se discutió anteriormente . No agregue enlaces de directorios de blogs, no traen tráfico con excepción de BlogCatalog y MyBlogLog.

Principales Condicionales de Blogger

2013-03-14T07:59:00.003-07:00

Todas estas técnicas de mostrar los elementos de cierta forma sólo en determinadas páginas se logra con los códigos condicionales de Blogger.

Las condicionales son códigos que indican dónde debe ejecutarse algo y dónde no. Es decir, condiciona una orden.

De esta forma podemos hacer que un script, un video, una imagen, un gadget, un mensaje, un truco, estilos, etc. se muestre sólo en la portada del blog, o sólo en las entradas, o sólo en las páginas estáticas, o sólo en las listas de archivos, o en una entrada específica.

Usarlos es sencillo, sólo hay poner al inicio del elemento que queremos condicionar el código que específica y condiciona dónde se mostrará, y al final de este el cierre de la etiqueta.

Mostrar /ejecutar un elemento sólo en la portada del blog

<b:if cond='data:blog.url == data:blog.homepageUrl'>
...Aquí va el código del elemento...
</b:if>

Mostrar /ejecutar un elemento sólo en las entradas individuales

<b:if cond='data:blog.pageType == "item"'>
...Aquí va el código del elemento...
</b:if>

Mostrar /ejecutar un elemento sólo en las páginas del archivo del blog

<b:if cond='data:blog.pageType == "archive"'>
...Aquí va el código del elemento...
</b:if>

Mostrar /ejecutar un elemento sólo en las páginas estáticas

<b:if cond='data:blog.pageType == "static_page"'>
...Aquí va el código del elemento...
</b:if>

Mostrar /ejecutar un elemento en una entrada específica o etiqueta específica

<b:if cond='data:blog.url == "URL de la entrada o etiqueta"'>
...Aquí va el código del elemento...
</b:if>

Por lo contrario también podemos especificar que se muestre en todas partes excepto en un lugar específico.

Mostrar /ejecutar un elemento en todas las páginas MENOS en la portada del blog

<b:if cond='data:blog.url != data:blog.homepageUrl'>
...Aquí va el código del elemento...
</b:if>

Mostrar /ejecutar un elemento en todas las páginas MENOS en las entradas individuales

<b:if cond='data:blog.pageType != "item"'>
...Aquí va el código del elemento...
</b:if>

Mostrar /ejecutar un elemento en todas las páginas MENOS en las páginas del archivo del blog

<b:if cond='data:blog.pageType != "archive"'>
...Aquí va el código del elemento...
</b:if>

Mostrar /ejecutar un elemento en todas las páginas MENOS en las páginas estáticas

<b:if cond='data:blog.pageType != "static_page"'>
...Aquí va el código del elemento...
</b:if>

Mostrar /ejecutar un elemento en todas las páginas MENOS en una entrada específica o etiqueta específica

<b:if cond='data:blog.url != "URL de la entrada o etiqueta"'>
...Aquí va el código del elemento...
</b:if>

En donde dice ...Aquí va el código del elemento... se agrega lo que se desea condicionar, por ejemplo el script, el código del truco, o los estilos.
Por ejemplo, para que la sidebar tenga un color de fondo diferente sólo en la portada del blog se usaría este código antes de </head> lo siguiente:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
#sidebar-wrapper {
background: #0080FF;
}
</style>
</b:if>

Eso haría que la barra lateral tenga un color de fondo azul en la portada pero cuando se esté en cualquier otra página cambie al color normal que tiene la plantilla.

De esta forma condicionamos la forma que se verá el blog según la página donde se esté.

Como mencioné antes se puede hacer para un sin fin de cosas, desde un simple estilo hasta condicionar todo un contenedor como la sidebar.

Via: Ciudadblogger