Código, Web y Blogs


Acelerar la carga de mi blog en blogger con Lazy Load (Precarga imágenes con Jquery)

Que nuestro blog tenga una buena carga por cada visitante que nos lea es importante, pues bien sabemos que a nadie le gusta un sitio lento y quedado en su carga desde el texto hasta las imágenes, por este motivo quiero enseñar hoy cómo optimizar un poco nuestros blogs con un script en JQUERY.

Lazy load images - Lazy Load poner en blog de blogger

El efecto lo pueden ver aquí en bloggin Red al notarse que las imágenes se precargan después de estar el sitio ya cargado, así que para poner esto en nuestros blogs haremos lo siguiente:

1. Nos dirigimos a Plantilla | Editar HTML y buscamos la etiqueta </head>  arriba de esta etiqueta pegamos lo siguiente:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
/*
* Lazy Load - jQuery plugin for lazy loading images
* Copyright (c) 2007-2012 Mika Tuupola
* Licensed under the MIT license:
* http://www.opensource.org/licenses/mit-license.php
* Project home:
* http://www.appelsiini.net/projects/lazyload
*/
(function($){$.fn.lazyload=function(options){var settings={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(options){$.extend(settings,options);}
var elements=this;if("scroll"==settings.event){$(settings.container).bind("scroll",function(event){var counter=0;elements.each(function(){if($.abovethetop(this,settings)||$.leftofbegin(this,settings)){}else if(!$.belowthefold(this,settings)&&!$.rightoffold(this,settings)){$(this).trigger("appear");}else{if(counter++>settings.failurelimit){return false;}}});var temp=$.grep(elements,function(element){return!element.loaded;});elements=$(temp);});}
this.each(function(){var self=this;if(undefined==$(self).attr("original")){$(self).attr("original",$(self).attr("src"));}
if("scroll"!=settings.event||undefined==$(self).attr("src")||settings.placeholder==$(self).attr("src")||($.abovethetop(self,settings)||$.leftofbegin(self,settings)||$.belowthefold(self,settings)||$.rightoffold(self,settings))){if(settings.placeholder){$(self).attr("src",settings.placeholder);}else{$(self).removeAttr("src");}
self.loaded=false;}else{self.loaded=true;}
$(self).one("appear",function(){if(!this.loaded){$("<img />").bind("load",function(){$(self).hide().attr("src",$(self).attr("original"))
[settings.effect](settings.effectspeed);self.loaded=true;}).attr("src",$(self).attr("original"));};});if("scroll"!=settings.event){$(self).bind(settings.event,function(event){if(!self.loaded){$(self).trigger("appear");}});}});$(settings.container).trigger(settings.event);return this;};$.belowthefold=function(element,settings){if(settings.container===undefined||settings.container===window){var fold=$(window).height()+$(window).scrollTop();}else{var fold=$(settings.container).offset().top+$(settings.container).height();}
return fold<=$(element).offset().top-settings.threshold;};$.rightoffold=function(element,settings){if(settings.container===undefined||settings.container===window){var fold=$(window).width()+$(window).scrollLeft();}else{var fold=$(settings.container).offset().left+$(settings.container).width();}
return fold<=$(element).offset().left-settings.threshold;};$.abovethetop=function(element,settings){if(settings.container===undefined||settings.container===window){var fold=$(window).scrollTop();}else{var fold=$(settings.container).offset().top;}
return fold>=$(element).offset().top+settings.threshold+$(element).height();};$.leftofbegin=function(element,settings){if(settings.container===undefined||settings.container===window){var fold=$(window).scrollLeft();}else{var fold=$(settings.container).offset().left;}
return fold>=$(element).offset().left+settings.threshold+$(element).width();};$.extend($.expr[':'],{"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container: window})"});})(jQuery);

$(document).ready(function($){
$('img').lazyload({ effect:'fadeIn',
placeholder:'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW6jXKoQXhxvmhZozZCJDsBxj4l6X9tZqnQLs1d-WCzR3zcQQ-aSpTQLAgj669BPkwwexUtrLSr0-xJGxLAaCznVGMZ6dYSdLOslIDB2jlbWLeU9bZ7TVcKMXeGrbykoa2wK_NupHCdoY/s1/bg_placeholder.png'
});
});
//]]>
</script>

Sólo queda guardar y estuvo.

Es importante saber que  se deja la versión más actual de JQUERY pues es la más estable, si en algún momento tiiene problemas con imágenes en los gadgets y quiere que se aplique a las imágenes sólo de las entradas entonces cambien lo que está en color rojo por lo siguiente: 

$('.post img').lazyload({

Espero les sea de utilidad nos veremos en un próximo post.-

Hasta la próxima...


¿Cúanto ganan los mejores YouTubers de internet con Adsense? - SocialBlade una web que te lo dirá

Una duda que quizá no tengan muchas personas, pero, para quién la tenga hoy les enseñaré una herramienta o sitio web que nos dirá aproximaciones de cuánto gana el YouTuber que deseemos buscar.


¿Qué es y qué hace SocialBlade?

Una herramienta o sitio web el cuál nos ofrece la posibilidad de ver datos estadísticos de cualquier YouTuber entre estos datos están:

- El ranking de suscriptores contra otros canales.
- Cantidad de reproducciones en el último mes.
- Suscriptores en los últimos 30 días.
- Vídeos subidos.
- Ganancias hechas con adsense o con alguna NetWork

Entre otros, pero, bueno a lo que vamos (click aquí para ir al sitio), el sitio se verá así:


Genial!... ahora en la parte derecha superior hay un buscador en el cuál pondremos el Usuario del canal que queramos investigar ¿Cómo lo sacamos? fácil, vamos al canal de quién deseemos en este caso usaré el canal de EnchufeTV, su usuario se saca del link:

Usuario: enchufetv

Ahora sí vamos al buscador y lo pegamos luego presionamos enter, y nos saldrá algo como:



  Como vemos el grado de calificación para este canal es "A" (El más alto), cantidad de reproducciones en el último mes, y lo más importante saber cuanto dinero generan (son aproximaciones), en este caso podemos ver que:

Allí nos dice las estimaciones cada mes y el total al año, así con esta herramienta es muy fácil, pero, ahora veamos cuanto ganan los canales más famosos de YouTube (recuerden son aproximaciones):

¿Cuánto gana HolaSoyGerman en YouTube?

Según las estadísticas esto es: 



¿Cuánto dinero gana DrossRotZank en YouTube?

Según la web las estadísticas de este YouTuber son:


¿Cuánto dinero gana AuronPlay?

Datos aproximados de ganancias, visualizaciones y otros son:


Así y muchos más YouTubers podremos ver con esta herramienta, es todo por este post espero les agrade.

Hasta la próxima,


Efecto de página o esquina doblada en blog de Blogger (Page peel)

El efecto de página doblada o page peel en Blogger es algo netamente fácil de aplicar, y en momentos por ejemplo para inaugurar algo en nuestros blogs, ofrecer algún tipo de publicidad de otros sitios entre otras cuestiones.



 Ahora bien hoy les enseñaré como lograr este efecto en nuestros blogs pero antes veamos como funciona en una demostración:


http://bloggin-prueba.blogspot.com/

Listo esto, iniciamos con lo siguiente:

1. Lo primero será añadir la librería Jquery para ellos vamos a Plantilla > editor HTML > y buscamos lo siguiente línea </head> arriba de ella pegamos esto:


   <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>

<script>
//<![CDATA[
$(document).ready(function(){
$("#pageflip").hover(function() {
$("#pageflip img , .msg_block").stop()
.animate({
width: '307px',
height: '319px'
}, 500);
} , function() {
$("#pageflip img").stop()
.animate({
width: '50px',
height: '52px'
}, 220);
$(".msg_block").stop()
.animate({
width: '50px',
height: '50px'
}, 200);
});
});
//]]>
</script>

NOTA: Recuerden que si ya tienen esta librería en su plantilla pueden saltar este paso. 

2. Ahora dentro del código de la plantilla buscaremos <body> ó
 <body expr:class='&quot;loading&quot; + data:blog.mobileClass'> (para plantillas hechas con el diseñador), debajo de esta etiqueta pegaremos lo siguiente:

<style>
/* Página doblada -br
----------------------------------------------- */
#pageflip {
position: relative;
right: 0;
top: 0px; /* Modificar por 30px si se tiene la navbar (barra de navegación) */
float: right;
z-index:9;
}
#pageflip img {
width: 50px;
height: 52px;
z-index: 99;
position: absolute;
right: 0;
top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px;
height: 50px;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
background: url(URL IMAGEN DE FONDO) no-repeat right top;
}
#pageflipMirror {
position: static;
right: 0;
top: 0;
float: right;
}

</style> 

<div id='pageflip'>
<a href='URL A LA QUE LLEVA AL DAR CLICK'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFjAvTnkhhj5_iz38xLtsMwCDONO_p_wm_RGl8lMRheca0XCr09by9QaCsUCbfX3HM9kdO6b9wZCBm3KzSdOpL6gkbPeJ-TShpp_OQbgtwKRmE5ug4WLB1371BCLVHNj4kqmCKLxeE1Xk/s0/pagina-doblada.png' style='width: 50px; height: 52px; overflow-x: hidden; overflow-y: hidden;'/></a>
<div class='msg_block' style='width: 50px; height: 50px; overflow-x: hidden; overflow-y: hidden; '/>
</div>

Para modificar los elementos la parte en Naranja contiene la imagen que lleva al fondo al dar el efecto de la página doblada ejemplo (La primera imagen de este post), en la parte de color rosado se pondrá la URL o link el cual al dar click nos lleve allí, muy fácil y sencillo además de elegante.

Es todo espero les guste este sencillo tutorial....


Poner efecto de Zoom en las imágenes usando Jquery - Blogger

imagen tomada gentilmente de ciudadblogger.com
 Un post más en Bloggin Red, el día de hoy les mostraré como aplicar el efecto de Zoom a nuestras imágenes en el blog consta de algunos cortos pasos y estuvo haciendo uso claro de Jquery.
Puedes ver un demo de el siguiente truco funcionando en una imagen aquí:

http://innerfade.blogspot.com/2010/10/zoom-and-clip.html
FUNCIONAMIENTO: Click derecho para acercar cada vez más, y un click fuera de la imagen para que vuelva a su estado normal.
Muy bien ahora vamos a lo más importante como agregarlo a nuestro blog para ello descargamos el siguiente archivo, lo subimos a un servidor o hosting podemos usar dropbox (click aquí para más info).

Luego de tener listo el anterior paso, vamos a plantilla | Edición HTML y antes de </head> pegamos lo siguiente:
<script language='javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script language='javascript' src='URL del archivo .js' type='text/javascript'/>
Sólo cambiamos lo que está en rojo por lo que se subió al hosting del archivo js.

Ahora buscamos esto ]]></b:skin> y antes de ello pondremos lo siguiente:
#view {
border: 1px solid #333333; /* Borde de la imagen */
overflow: hidden;
position: relative;
width: 400px; /* Tamaño de la imagen */
}

#image {
display: block;
left: 0;
top: 0;
}

#zoom {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAXtTl2aZwPHMrofQWsdE3JPuKLLopXSODun2cc7RvQea243lN7vOWqw-eIRV-i6bGdxCu-llqP2JfDhIIYxNrvGFd_z9vsRswRpYFybhvAyr2WRqb6UTUF6Wqkl1w_YCAeBOK7WZVi5RS/s1600/fade.PNG);
border: 1px solid #000000;
cursor: pointer;
display: none;
height: 200px;
position: absolute;
width: 200px;
z-index: 100;
}
Y para terminar para poder darle el efecto zoom a una de tus imágenes simplemente usarás el siguiente código en las entradas o ya sea en la plantilla depende de ti:
<div id="view">
<img id="image" src="URL de la imagen" width="400" />
</div>
Y es todo amigos en este post, hasta la próxima.


Cómo eliminar Aplicaciones de páginas web dedicadas al SPAM en Facebook "Compartir para ver"

Si estás en contra de sitios web dedicados de lleno al SPAM en redes sociales, este post es para ti, conoce como operan y se lucran con este método..
Un post más en Bloggin Red hoy será un poco más de análisis y ayuda para quiénes aún caen en las garras de inescrupulosos sitios Web dedicados al SPAM en redes sociales como Facebook.



Retomando las cosas como son...

A continuación explicaré con una pequeña historia el por qué ? del post, la razón por la cuál decidí hacer este post involucra a mi padre con su cuenta de Facebook; es de saberse que muchas personas en internet comparten contenido en sus redes sociales desde distintos sitios web, sin embargo, como no todos los que navegan se conocen las trampas que hay pues aquellos que si las saben quieren usar esas personas para obtener beneficios económicos.

LA HISTORIA...

Todo comenzó hace unas pocas noches atrás estaba mirando que había de nuevo en el inicio de mi Facebook, hasta aquí todo bien, de pronto me percato que de la nada me sale un chat grupal con un link enviado por mi padre quien se llama 'José', dicho enlace llevaba a una web de nombre "pasoviral.com" así:

Como se ve en la imagen anterior en el chulo verde está el chat que se creó, pensando yo que mi padre lo hizo, hasta aquí todo bien entré al sitio web y a simple vista se ve que la información que ponen es volátil (nada interesante o valioso):



Hasta aquí de nuevo normal, así que le dije a mi padre que por favor evitará enviar ese tipo de links a las personas y más en chats grupales ya que a casi nadie le importa y podría ser molesto y le di una charla sobre ello etc, a lo cuál el me dice, que no había enviado nada y que no sabía de que hablaba.

Me preocupó bastante este abuso permitido o no por Facebook en sus chats sin el consentimiento del usuario, así que decidí decirle a mi papá que me diera acceso a su cuenta, pasado un corto tiempo, pude acceder y darme cuenta de una cosa:

- El chat grupal a mi sí me aparecía y a él no en los respectivos mensajes de cada uno.
Según la anterior imagen la ventana izquierda es la mía y la de la derecha es la de mi padre como se ve en la mía tengo el chat marcado con chulo verde oscuro, y en la otra quedan signos de interrogación pues no está el dichoso chat, como prueba de que las dos cuentas estaban abiertas a la par está la hora de los mensajes marcados con azul y el mensaje.

Cabe decir que no fue el único chat grupal que se generó allí, más o menos fueron 3 en los que me involucré con links hacia el mismo sitio web basura.
OFICIALMENTE ERA UN ABUSO Y ERA SPAM
Entonces,

¿Cómo eliminar el SPAM de mi cuenta de Facebook?

Para este tipo de casos con estas webs así lo mejor es eliminar aplicaciones que aceptamos tiempo atrás (posiblemente no recordemos) para ello iremos a configuración > aplicaciones -click aquí para ir-: 


Allí como se puede apreciar hay varias aplicaciones con nombres como "vídeos impactantes", "Fanluxe: Lo más viral de la red" etc., lo que se procede a hacer es a eliminar dichas aplicaciones que no sirven para nada, de tal forma que sólo se selecciona la App y se suprime:

Es importante seleccionar donde dice "Eliminar toda la actividad de XXXX en facebook...." para que todo sea más efectivo, con esto ya estará todo hecho para que no se genere más SPAM en nuestra cuenta de Facebook.


RECOMENDACIONES PARA NO CAER:

A continuación desde mi experiencia espero poder brindar una serie de consejos para que sean más astutos contra este tipo de sitios:

- Dejar de visitar este tipo de sitios web, ¿cómo identificarlos? Algo fácil su contenido tiene títutos algo pasados o muy exagerados.

- No compartir en ninguna red social su contenido web en especial cuando se desea ver un vídeo y al dar en el reproductor nos sale que para verlo es obligatorio compartirlo POR FAVOR EVITEN ESO.

- Verifica con frecuencia las aplicaciones que abres con tu cuenta de Facebook ya que como dije antes algunas pueden colarse fácilmente dependiendo del conocimiento del usuario.

Es todo en este post amigos espero les sirva para que analicen mejor qué tipo de webs visitan.

Hasta la próxima,


Fechas de actualizaciones a Android 5.0 Lollipop para los principales Celulares

Para este 2015 que recién inicia, las buenas noticias sobre la última versión de Android en tu SmartPhone también llegan, así que en este artículo explicaré un poco a que principales marcas y modelos de teléfonos llegará "Android 5.0 Lollipop".-


Aunque en algunos modelos como los Nexus que ya están viviendo este cambio han experimentado algunos problemas con esta nueva versión, pero, los encargados de dichos problemas hacen todo lo posible para hacer de Lollipop 5.0 algo mejor y más eficaz.

A continuación mostraré los principales Teléfonos que serán actualizados y sus fechas:

SAMSUNG

Samsung Galaxy S5, Su actualización está disponible en múltiples países se dice que primeró rondó y llegó a usuarios de Polonia, y semanas después en otros países Europeos, los usuarios que conservan equipos libres ya han recibido el paquete y señal de actualización. Lo que nos queda No claro es que ya empiezan a recibir las actualizaciones.

Samsung Galaxy Note 4, No hay información oficial pero según rumores se dice que este móvil recibirá la actualización a Lollipop durante este mismo mes de enero.

Samsung Galaxy S4,La buena nueva es que Samsung confirmó oficialmente que que actualizará este equipo a Lolllipop 5.0, aún no hay una fecha en concreto, se dice que posiblemente en febrero.

Samsung  Galaxy Note 3, Para la empresa de celulares SAmsung es importante actualizar sus equipos más recientes lastimosamente para esta versión no se tiene una fecha exacta, pero, el hecho de que se actualice a la última versión de android será asegurado.

Otros equipos de la misma marca que recibirían la actualización a Lollipop 5.0:

Modelos: Samsung Galaxy Note Edge, Samsung galaxy Note 2, Samsung Galaxy S5 mini, Samsung Galaxy S5 active y Samsung galaxy Alpha.

LG


LG G3, Para este modelo su actualización se lanzó por parte de la compañía desde Noviembre de 2014, pero, debido a que presentó fallos se retiró de momento se espera que reanuden su lanzamiento.

LG G2, Para este modelo también lo tocan las buenas noticias ya que también tendrá su actualización lo que queda en espera es a que llegue primero al modelo G3 y luego si a este equipo.

MOTOROLA

Moto G (segunda generación), Primer Teléfono después de los Nexus en comenzar con la actualización para Lollipop 5.0 (Claro que depende del país donde vivas), en el caso de España este modelo ya debería estar actualizado si aún no estás con él sólo espera porque de que llega, llega.

Moto G (Primera Generación), A este modelo también lo tocará la actualización sólo queda esperar suponiendo que primero llega a los del mismo modelo pero más recientes de segunda generación.

Moto X (Segunda generacion), algunos modelos dependiendo del país en Noviembre recibieron la actualización, y si aún no seria raro ya que está disponible ve a configuraciones y mira lo que debes hacer.

SONY


Sony Xperia Z3, Este modelo y el último lanzado por Sony comenzará a recibir la actualización desde Febrero del presente año oficialmente dicho por Sony.

Sony Xperia Z2, En este modelo llegarán terminando Febrero o iniciando marzo claro después de que su superior el Z3 esté actualizado.

Sony Xperia Z1, Sony lleva un orden y se dice que el Z1 si la recibirá pero deberás esperar ya que primero hay dos equipos por encima de este así que quizá llegue un poco tarde.

Otros modelos que recibirían la actualización: Sony Xperia Z, Sony Xperia ZL, Sony Xperia ZR, Sony Xperia Z Tablet, Sony Xperia Z1S, Sony Xperia Z Ultra, Sony Xperia Z1 Compact, Sony Xperia Tablet Z2, Sony Xperia Z3v, Sony Xperia Compact y Sony Xperia Xperia Tablet Z3 Compact.

HTC


HTC One (M8), Lo que se dijo para esta versión fue el 3 enero estaría listo para su lanzamiento pero al no ser así sólo queda esperar quiza unas semanas más pero de que llega así será.

HTC One (M7), Posiblemente esté lista a inicios de febrero o finales del mismo lo cierto es que llegará después de su superior el (M8) por ende si conservas este modelo queda que esperes para recibir todo lo bueno.


Y con esta información me despido es de esperar que llegue esta versión tan pronto como queremos. Hasta la próxima...


Bloquear click o botón derecho en mi blog con mensaje de ventana completa


Qué tal amigos, el día de hoy quiero compartir un "truco" para nuestros blogs bastante común a la fecha, pero, que conserva algo diferente el truco es simplemente bloquear o desactivar el botón o click derecho en nuestro blog esto por 'x' o 'y' motivo alguien lo implementará, la novedad será en su forma de decirnos que está prohibido o no se puede hacer dicha acción con un mensaje un poco moderno y no una simple ventana de JavaScript.


PUEDES VER UN DEMO CLICKANDO AQUÍ Y HACER CLICK DERECHO EN ESE ARTÍCULO

Para instalar esto en nuestro blog es muy fácil simplemente haremos lo siguiente:

1. Iremos a Plantila | Edición HTML y buscaremos el código </body> antes de él pegaremos lo siguiente:

<script>
// Inhabilitar el botón derecho
var DADrccolor = "#F1F1F1";
var DADrcimage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj07H8zgcqQ_Q51VOEM0-WRjyzHb_Vd6B07ouywxPc3S1R5SJbPSV8i8xm1Mg7gYP22OCT49amrLawMHasQVBAYmsDWs6VqDt_0h8r7ySLZz2nHQYUPv-tVN2iqKKqqOV-ZHXJCvIEOIzo/s300/superheroe.png";
</script>
<script type="text/javascript" src="http://yourjavascript.com/2122535051/antirightclick.js"></script>

2. Sólo queda que guardemos y estuvo para todo el blog, ahora, si queremos que quede en una entrada sólo ponemos el código en el HTML de la entrada.

Por último queda saber que lo que está en color rojo es el color del fondo de la ventana, lo que está en color naranja es el link del muñequito o avatar.

Es todo amigos hasta la próxima,


Descarga el SCRIPT, comprendemos lo importante que es la velocidad de tu sitio, sólo bájalo y crea el debido reemplazo en el código.


¿ Cómo saber si mi teléfono android tiene root (está rooteado) ?

Este post no va dirigido sobre como hacer un root a nuestro Android, sino cómo saber si nuestro teléfono está rooteado.

Por alguna u otra razón llegaste a este post y es aquí donde sabrás si tu teléfono con sistema operativo Android está rooteado o no.-


¿Qué es rootear un Android?.... Rootear simplemente representa adquirir o ser un super usuario o admin para manejar nuestro dispositivo de tal forma que podemos modificar muchos elementos y características de la versión de Android que tengamos actualmente o bien sea cambiarla por otra otra versión.

¿Cómo saber si mi android está rooteado?.... La respuesta a esta pregunta es muy simple con una App que descargaremos desde la PlayStore de Google, su nombre es Root Checker, dicha aplicación se encargará de decirnos si sí o no, veamos como:

1. Lo más lógico es instalar la App a nuestro teléfono luego simplemente abrirla y ejecutarla dando click aquí:
  
 2. Luego, saldrá la información respectiva sobre si nuestro equipo tiene root o no:


Y listo en el caso de mi Moto X no está Rooteado aún.-
Así que es todo en este post algo muy corto y fácil para todo aquel que tenga la duda sobre como saber si su teléfono está root o no. 
Hasta la próxima,

ESTAMOS EN: