Tutoblogger: 03/23/13

sábado, 23 de marzo de 2013

widget de redes sociales en 3D con efecto Rotatorio

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

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

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

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)

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

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.

Tutoblogger