Código, Web y SEO

sábado, 30 de mayo de 2015

Agregar simple tooltip a los enlaces con CSS en blogger

Un post más en BR hoy enseñaré un breve truco sobre como incorporar un tooltip a nuestros enlaces en blogger, pero, primero debemos saber que un tooltip es un sencillo globo flotante que sale cuando ponemos la flecha del mouse sobre un enlace tal y como se ve en la siguiente imagen:
 Así que para agregar este buen truco haremos lo siguiente:

1. Vamos a blogger > plantilla , allí buscamos la etiqueta </head> y arriba de esta pegamos lo siguiente:
<style type="text/css">
.tooltip {
border-bottom: 1px dotted #000000; color: #000000; outline: none;
cursor: help; text-decoration: none;
position: relative;
}
.tooltip span {
margin-left: -999em;
position: absolute;
}
.tooltip:hover span {
border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
font-family: Calibri, Tahoma, Geneva, sans-serif;
position: absolute; left: 1em; top: 2em; z-index: 99;
margin-left: 0; width: 250px;
}
.tooltip:hover img {
border: 0; margin: -10px 0 0 -55px;
float: left; position: absolute;
}
.tooltip:hover em {
font-family: Candara, Tahoma, Geneva, sans-serif; font-size: 1.2em; font-weight: bold;
display: block; padding: 0.2em 0 0.6em 0;
}
.classic { padding: 0.8em 1em; }
* html a:hover { background: transparent; }
.black {padding:4px; background: #000; border: 1px solid #FFAD33; color: #fff; }
.navy {padding:4px; background: #000080; border: 1px solid #dadada; color: #fff;}
.blue {padding:4px; background: #0000FF; border: 1px solid #dadada; color: #fff;}
.teal {padding:4px; background: #008080; border: 1px solid #FFAD33; color: #fff; }
.aqua {padding:4px; background: #00FFFF; border: 1px solid #FFAD33; color: #000; }
.silver {padding:4px; background: #C0C0C0; border: 1px solid #FFAD33; color: #000; }
.gray {padding:4px; background: #808080; border: 1px solid #FFAD33; color: #000; }
.yellow {padding:4px; background: #FFFF00; border: 1px solid #FFAD33; color: #000; }
.green {padding:4px; background: #008000; border: 1px solid #FFAD33; color: #000; }
.olive {padding:4px; background: #808000; border: 1px solid #FFAD33; color: #000; }
.lime {padding:4px; background: #00FF00; border: 1px solid #FFAD33; color: #000; }
.red {padding:4px; background: #FF0000; border: 1px solid #FFAD33; color: #fff; }
.maroon {padding:4px; background: #990000 ; border: 1px solid #FFAD33; color: #fff; }
.white {padding:4px; background: #FFF; border: 1px solid #FFAD33; color: #000; }
.fuchsia {padding:4px; background: #FF00FF; border: 1px solid #FFAD33; color: #000; }
.purple {padding:4px; background: #800080; border: 1px solid #FFAD33; color: #fff; }
</style>
 2. Luego damos en guardar plantilla.

3. El paso siguiente será añadir el tooltip puede ser en una entrada de nuestro blog o en un gadget el código que necesitaremos para implementarlo será el siguiente: 
<a class="tooltip" href="#">TEXTO<span class="color">CONTENIDO DEL TOOLTIP
</span></a> 
 
 Allí en en el atributo href pondremos el link del enlace donde está el "#", en "color" pondremos el color que queremos que tenga el tooltip de fondo entre los colores se pueden seleccionar: 

- black, navy, blue, teal, aqua, silver, gray, yellow, green, olive, lime, red, maroon, white, fuchsia, purple.

Y bueno sólo queda un ejemplo de como funciona, veamos:

Bloggin Red vídeosSíguenos en You Tube aprovecha el mejor contenido en vídeo para aprender...


Y listo es todo en este tutorial como ven es muy fácil, hasta la próxima.

domingo, 24 de mayo de 2015

Como grabar la pantalla en Android sin ser root ni conectar a pc

¿Qué tal lectores?, el día de hoy vengo a enseñarles como grabar nuestra pantalla de Android sin ser root en otras palabras sin rootear nuestro teléfono, así que vamos al tutorial.



Mobizen permite grabar tu android sin ser root

Como el anterior subtítulo lo dice la aplicación que nos da esta posibilidad se llama Mobizen, así que lo primero es descargarla.

CLICK AQUÍ PARA DESCARGAR EN TU MÓVIL

Una vez instalada en tu teléfono ahora debemos bajar el programa a nuestro PC con el cual simplemente validaremos el código para poder grabar sin estar siempre conectado a nuestro equipo, así como suele pasar con algunas apps que nos permiten grabar sin ser root, pero, conectado por cable al pc.

Click aquí para descargar mobizen para PC

Muy bien, lo siguiente es abrir Mobizen en nuestro SmartPhone allí aceptamos los terminos y condiciones:



Luego escogemos la cuenta de correo con la cuál queremos iniciar la Aplicación y luego ponemos nuestra respectiva contraseña:




Una vez registrados con nuestra cuenta, procedemos a instalar mobizen en nuestro pc y lo abrimos y nos logueamos:


Una vez logueados tendremos que conectar por cable una sola vez nuestro dispositivo móvil al programa en el pc, pero, antes debemos activar el modo "depuración USB" esto lo hacemos en nuestro android por "Configuración>programador>Depuración por USB" y listo ahora si vamos a la app en el telefono y al programa en el PC:



En este proceso al dar en grabar pantalla es importante tener el teléfono conectado por cable sólo una vez si es la primera vez que hacemos esta configuración allí el programa nos proporciona un código de varios digitos allí en nuestro teléfono simplemente validamos dicho código para que después podamos hacer las respectivas grabaciones de pantalla sin estar al cable USB.



Como ven en la imagen anterior ya activé la grabación de pantalla al lado se ve el icono de la cámara sin problemas para iniciar y posteriormente para comprobar que no estoy conectado a cable USB, en la barra de notificaciones se puede apreciar qu no hay nada familiar con conexiones por cable.

Así que es todo en este artículo espero les guste usar la aplicación no tiene complique alguno.

Hasta la próxima,

viernes, 22 de mayo de 2015

Concurso 3° aniversario Bloggin Red - Sorteo productos de tecnología

Muy cerca de cumplir el 3° aniversario de este sitio(Bloggin Red) y agradeciendo a todos aquellos que hacen de BR uno de los mejores sitios en distinto contenido, a raíz de esto queremos celebrarlo beneficiando a nuestros visitantes, pero, ¿cómo?, pues haciendo un sorteo así de fácil.


¿Qué se sorteará? 

Una que otra cosa tecnológica, así que tenemos dos premios para dos ganadores distintos, dichos premios son:

Speaker LED bluetooth Hifi Super Bass

Un excelente speaker que podrá reproducir toda nuestra música con una batería que dura alrededor de las 4 horas, multifuncional incluye entrada de audio, reproductor TF/SD, salida audífonos, mini USB, entrada micrófono, compatible con la gran mayoría de dispositivos teléfonos, tablets, PC que trabajen vía bluetooth, rango de 10 metros. Contiene su respectivo cargador.




Mouse Gamer 2000DPI 2,4Ghz Wireless

Parece sencillo pero no lo es, este Mouse con un excelente diseño y distintas funciones para ser gamer, con DPI regulable este de 1600/2000DPI, No tiene sonido al hacer click, botón con funciones adelante-atrás contenida a un lado, diseño ergonómico, conectividad inteligente sin configurar sólo "plug and play", conexión inalámbrica vía WIFI,Botones: 6 botones con rueda de desplazamiento (dos botones laterales, un botón DPI), rango de control hasta 10 metros contiene su respectivo receptor de señal wifi.



Requisitos para participar en el sorteo: 
Aclaramos que no pedimos dinero para participar, el concurso es gratis y los requisitos son fáciles de cumplir
Muy bien antes de decir los requisitos deben saber que pueden participar cualquier persona no importa el país donde se encuentre allá haremos llegar el premio.

PASO 1:

Ahora sí vamos con los requisitos, los principales son seguirnos en nuestras redes sociales esto incluye:

- Suscribirse a nuestro canal en YouTube, click aquí(Verificamos este paso)
- Dar me gusta en nuestra FanPage. click aquí  (Verificamos este paso)
- Seguirnos en Instagram. Click aquí  (Verificamos este paso)
- Seguirnos en Google+. Click aquí.

PASO 2:

Después de realizar lo anterior ahora debemos realizar un comentario en este artículo (para comentar al final del post) dicho comentario deberá llevar la siguiente información:
Tu Nombre
Correo electrónico
País, ciudad
Cuenta FB con la que sigues nuestra Fanpage
Cuenta instagram con la que nos sigues allí
Nombre con el cual estás suscrito a nuestro canal
 Y listo lo demás lo hacemos nosotros, nos encargamos de verificar que nos sigas donde se dijo y con la cuenta que diste, luego, guardamos tus datos.

¿Cómo se realizará el sorteo?

Cada sorteo lo realizaremos usando la siguiente página on line "https://www.sortea2.com/sorteos" allí pondremos toda la lista de inscritos al concurso y aleatoriamente la página nos dirá quién es el ganador.


¿Cuando se dirán los dos ganadores?

Aunque BR cumple el 1 de junio la entrega de los premios a los ganadores se hará el día viernes 5 de junio Posiblemente en directo usando Google hangout (Te haremos llegar la invitación a tu correo) lógicamente lo haremos por nuestro canal sino subiremos el vídeo realizado con el debido sorteo esto varia según el tiempo disponible.

¿Cómo se entregarán los premios a los ganadores?

Los premios serán enviados al país donde resida el ganador, el ganador no deberá pagar dinero alguno por recibirlo todo corre por nuestra cuenta ;) , quien gane en su correo recibirá una alerta nuestra notificando que ha ganado y posteriormente concretar la dirección de envío del producto.

¿Si gano cuanto tiempo tarda en llegar mi premio?

Teniendo en cuenta que puede participar gente de varios países el envío se estima que llegue entre 1 semana a 4 semanas tan pronto se le avise al ganador de su logro.

Suerte y participa no pierdes nada,

domingo, 17 de mayo de 2015

Gadget estadísticas del blog en blogger - contador de entradas y comentarios

Un post más en Bloggin Red el día de hoy dedicaré esta corta nota a todo aquel que posee un blog para que pueda tener en un gadget todas las estadísticas de su blog y poder mostrarlas a sus lectores.-
Ejemplo Gadget estadistica blog

Así que el gadger se verá como está en la imagen anterior para ponerlo a nuestro blog debemos hacer los siguientes pasos:

Ir a diseño | Añadir un Gadget | HTML/JavaScript y luego pegar lo siguiente:
<div style="float: left;"><img style="width: 53px; height:48px;" src="http://1.bp.blogspot.com/_dsEG33PDaHw/TJvkySNSsAI/AAAAAAAAAXo/xwOjSE9l92c/s1600/stats.png"/></div>
<div style=" float: left; text-align: left; font-size:12px;">
<script> function DiasOnline(Dia, Mes, Year, Texto) { Meses = new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"); Hoy = new Date(); Inicio = Date.parse(Meses[Mes - 1] + " " + Dia + " " + Year); Resultado = Math.round((Hoy.getTime() - Inicio) / 86400000); document.write(Resultado + " " + Texto); } DiasOnline(22, 1, 2009, "" );</script> días online<br/>
<script style="text/javascript">
function showpostcount(json) {
document.write(parseInt(json.feed.openSearch$totalResults.$t,10));
}</script>
<script src="http://nombre-de-mi-blog.blogspot.com/feeds/posts/default?alt=json-in-script&amp;callback=showpostcount"></script> entradas
<br/>
<script src="http://nombre-de-mi-blog.blogspot.com/feeds/comments/default?alt=json-in-script&amp;callback=showpostcount"></script> comentarios</div><div style="clear: both;"></div>
Para terminar, lo que está en color Naranja deberás poner el link de tu blog, y lo que está en negrita es la fecha en la que creaste tu blog para que así te pueda contabilizar los días de existencia de tu sitio.

Esto es todo espero les guste, como ven es muy sencillo y fácil y hasta la próxima.-

lunes, 11 de mayo de 2015

Cómo usar el sensor DHT11 (Temperatura y humedad) con Arduino Uno

Un post más para BR, en estas palabras explicaré como configurar, programar y controlar el módulo sensor DHT11 el cual se encarga de medir la Temperatura y la Humedad en nuestro ambiente, dicho control lo haremos programando nuestro Arduino para el ejemplo usaré un Arduino Uno, pero, la diferencia con los otros no es mucha así que no hay de que preocuparse.
¿No quieres leer? tenemos lo mismo, pero, en vídeo


Muy bien veamos que es lo que se debe hacer:

Sensor DHT11
Lo primero y más lógico es tener nuestro Arduino y posteriormente el sensor DHT11 de ahí que más necesitemos será una protoboard y algunos Jumpers o cables para conexión. Luego:

Instalar librería de sensor DHT11

Instalaremos la librería del sensor DHT11 esta (el .ZIP) lo pueden descargar aquí.

CLICK AQUÍ PARA DESCARGAR LIBRERÍA

Una vez descargada, en el IDE de Arduino vamos a "Sketch > Importar Librería > Add Library" y agregamos el .ZIP que descargamos:


Hecho esto procedemos a conectar nuestro arduino al PC, para, enviarle el código dicho código será el siguiente:
 
//Sensor de temperatura y humedad DHT11 -Blogginred.com
#include "DHT.h" //cargamos la librería DHT
#define DHTPIN 2 //Seleccionamos el pin en el que se //conectará el sensor
#define DHTTYPE DHT11 //Se selecciona el DHT11 que se va usar
DHT dht(DHTPIN, DHTTYPE); //Se inicia una variable que será usada por Arduino para comunicarse con el sensor
void setup() {
Serial.begin(9600); //Se inicia la comunicación serial 
dht.begin(); //Inicio del sensor
}
void loop() {
float h = dht.readHumidity(); //Se lee la humedad
float t = dht.readTemperature(); //Se lee la temperatura
//Se imprimen las variables
Serial.println("Humedad: "); 
Serial.println(h);
Serial.println("Temperatura: ");
Serial.println(t);
delay(2000); //Se espera 2 segundos para seguir leyendo //datos
}

DESCARGAR EL CÓDIGO CLICK AQUÍ

Enviamos a la placa para compilar y listo.

Diagrama para conectar sensor DHT11 al arduino

Ahora veamos como conectar el sensor al Arduino:



- Cable verde es la señal conectado al PIN 2 del arduino
- Cable negro es la tierra o GND 
- Cable rojo irá conectado a los 5v (5 voltios) 

Al final sólo queda visualizar en el monitor serial y vemos que visualiza la humedad y la temperatura cada 2 segundos.


Espero les guste y entiendan este pequeño tutorial.

Hasta la próxima,

viernes, 8 de mayo de 2015

Review y unboxing Xiaomi Mi Band ¿Qué tan buena es la mi band de xiaomi?

Un post + vídeo, en Bloggin Red, el día de hoy les hablaré un poco sobre la Xiaomi Miband una manilla o gadget como deseen llamarle, el cual tiene una función inteligente encargada de regular algunos parámetros de nuestra vida diaria además de avisarnos en pocas palabras de mensajes llamadas etc.-


Algunas de las características principales de la Mi band son:


Si quieres ver el Unboxing & Review puedes apreciarlo en nuestro vídeo:



Mira un vídeo probando la función cuenta pasos con la Manilla Xiaomi Mi band:




Así que si te ha gustado no esperes más tiempo para tenerla en tus manos y lista para usar.

Hasta la próxima,

miércoles, 6 de mayo de 2015

Cómo hacer efecto borroso o desenfoque a una imagen en Photoshop

Hoy en este post explicaré detalladamente ¿Cómo dar el efecto borroso a toda una imagen o a una parte en específico? con Photoshop sea cual sea la versión que usemos, para ello haremos lo siguiente: 

¿No quieres leer? No importa tenemos lo mismo, pero, en vídeo 


1. Abrimos Photoshop, y procedemos a abrir la imagen que queremos aplicar el efecto borroso en mi caso usaré la siguiente imagen con un cartel al cual le daré el efecto deseado:



 2. Al tenerla lista en el programa procedemos a seleccionar el área a dar el efecto como dije antes, aquí será las palabras dentro del aviso, usaremos la herramienta "marco rectángular" :



3. Lo siguiente será seleccionar el área "Recordando que es rectángular" a la que daremos el efecto simplemente creamos el rectángulo sobre la zona quedando así:



4. Hecho lo anterior en el menú horizontal vamos a Filtro > Desenfocar > Desenfoque gaussiano:





5. Ahora nos saldrá un cuadro de ajustes mostrando el efecto sobre el área que seleccionamos en la parte de radio se ajusta la intensidad del efecto borroso o desenfoque yo lo dejaré en 3,7 de radio: 


El efecto ya se nota aquí..

6. Damos en ok y procedemos a guardar la imagen Archivo > Guardar como >PNG. Como resultado fácil y sencillo:


Muy sencillo de hacer en un próximo post de esta categoría el mismo efecto sobre figuras no geometricas como el rostro de una persona o algo cuya forma es indefinida...

Hasta la próxima,

viernes, 1 de mayo de 2015

Descargar WhatsApp PLUS con llamadas activadas versión 1.8 APK

Un post más en BR el día de hoy ofreceré a quién guste la posibilidad de descargar WhastApp Plus en su versión 1.8 con la posibilidad de realizar llamadas como lo hace la versión oficial de WhatsApp.

Descargar Whatsapp Plus con llamadas activadas

La novedad..!

Básicamente la novedad es realizar llamadas como lo ofrece el WhatsApp oficial por otra parte nos ofrece más themes (temas) para esta aplicación, además, de que podemos ocultar toda nuestra actividad y conexiones en WhatsApp plus.

Nota: Es de aclarar que para instalar esta versión de WhatsApp no tenemos que tener instalada la oficial ya que presentará conflictos; así que simplemente desinstalen la que tienen y luego proceden a pasar esta.
Es todo hasta la próxima amigos.

SÍGUENOS EN: