Esto es mas profesional

domingo, 2 de agosto de 2015

Review lámpara LED USB flexible marca Xioami en español

¿Ya viste el review en vídeo?  mira la lámpara funcionando


Qué tal colegas, el día de hoy les presento un sencillo gadget de la buena marca Xiaomi, se trata de la Lámpara USB con luz LED la cuál tendremos disponible próximamente en nuestra tienda.

Hablemos sobre este Gadget...

Si bien esta bonita lamparita USB es muy fácil de usar, simplemente la conectamos a nuestro equipo si es que queremos dar iluminación a nuestro teclado o si queremos conectarla a cualquier otro puerto USB para tener luz la mejor utilidad radica en que es compatible con las power bank dándole así portabilidad como se ve en la imagen:

Algunas características de este gadget son:

- El voltaje de trabajo es 5v
- La potencia de trabajo es 1.2W
- La lámpara tiene un peso de 0.017 Kg 

Cómo vemos no es mucho lo que hay que decir sobre ella, así que es todo en este breve post no olviden ver el review del mismo en nuestro canal.

¿Tienes una?, dinos que tal te ha salido ¿le diste mucha utilidad?.

Hasta la próxima,

domingo, 19 de julio de 2015

Basura tecnológica reflexiona sobre tu consumo electrónico

En el mundo de las basuras un gran porcentaje está constituido por tecnología y derivados de lo mismo, es por ello que hoy queremos dedicar un momento de reflexión y pensar de que forma consumimos tecnología y que tanto esto afec al mundo.


Para ello pueden informarse con una breve infografía mostrando datos importantes:

Nuestro Planeta, ¿Más tecnología más daños? 

Ahora que vivimos en la era digital, el desarrollo económico de los países depende principalmente de la producción y comercialización de aparatos electrónicos, Linio y Bloggin Red te invitan a descubrir qué desventajas generan para la sociedad y el medio ambiente nuestros avances tecnológicos, que contradictoriamente no se explotan en favor de un mundo sustentable.

La basura tecnológica o electrónica hace referencia al conjunto de residuos peligrosos provenientes de computadoras, teléfonos celulares, televisores, reproductores de música y en general de cualquier dispositivo electrónico. Estos residuos contienen metales pesados y sustancias químicas tóxicas que no es posible eliminar fácilmente del ambiente, además, no existe un modo de reciclaje “seguro” para estos materiales. 

La disminución en el costo de los artículos tecnológicos ha hecho que adquirir uno nuevo resulte más práctico que repararlo, además, los nuevos requerimientos, versiones, sistemas operativos y software en general obligan a actualizar con mayor frecuencia nuestros gadgets sin pensar en las repercusiones que esto conlleva.

En mayo de 2014 el portal Encuentro perteneciente al Ministerio de Educación Argentina publicó un documental sobre los desechos tecnológicos, donde  identifica a los teléfonos celulares, los sistemas de computación y los dispositivos de audio y video, en ese orden, como los tres rubros más vendidos. Hace aproximadamente 30 años, la ventaja que brindaban los productos electrónicos era la durabilidad, se compraba “un televisor para toda la vida”, actualmente los aparatos son considerados “desechables”.
 
¿A dónde van estos desechos tecnológicos cuando se apagan para siempre?

Cuando compramos un aparato electrónico difícilmente pensamos en las piezas que lo hacen funcionar, incluso, desconocemos la forma más apropiada para desecharlos y terminan mezclados con la basura convencional en depósitos, rellenos sanitarios, barrancos o tiraderos clandestinos; el  mal manejo de estos desechos generan un gran peligro para la salud y el medio ambiente.

La basura electrónica a menudo termina en países en vías de desarrollo como China, India, Ghana entre otros del continente Africano, donde personas de bajos recursos se dedican a la recolección de dichos dispositivos para desmantelarlos con sus propias manos, separar los componentes útiles y venderlos, el resto es quemado generando una gran cantidad de gases tóxicos que afectan la salud de la gente que vive alrededor.

El desarrollo de esta actividad es la única forma de sustento para estas familias que ponen en riesgo su vida al entrar en contacto directo con sustancias tóxicas que al mismo tiempo, contaminan la tierra y el agua subterránea. Las personas dedicadas a este “reciclaje” tienen una alarmante esperanza de vida de 25 años.

La ONU dio a conocer  cifras de 2014 donde el continente americano generó un total de 11.7 millones de toneladas de productos R.A.E.E. (Residuos de Aparatos Eléctricos y Electrónicos) como también se les conoce. Los tres países con la mayor generación de estos residuos fueron EUA con 7.1 millones de Toneladas, Brasil con 1.4 millones de toneladas y México con un millón de toneladas.

Los desafíos

De la misma forma exhortan a crear políticas y programas de reciclaje para estos productos ya que representarían un gran negocio pues “los desechos de ordenadores y móviles contienen metales preciosos” (oro, plata, paladio, iridio, germanio y cobre). 


UN ARTÍCULO ESCRITO EN ALIANZA CON: www.linio.com.co

martes, 14 de julio de 2015

Poner mapa del sitio en tabla de contenido con pestañas para blogger

Un "mapa de sitio" o "Site map" permiten al visitante de nuestra blog ver de forma fácil y general todo el contenido que se tiene en el sitio.

Imagen de: ciudad blogger
Así que el día de hoy explicaré como poner uno de estos en nuestro blog  el demo lo podrán observar aquí abajo:

Cargando entradas...



Bien se ve interesante no ? , ahora para ponerlo en nuestro blog haremos el siguiente paso a paso:

1. En el HTML de una página o de una entrada (como se desee) pegaremos el siguiente código:
<style>
#SiteMapBlogger {
width:99%;
margin:0 auto;
background-color:#444; /* Color de la barra lateral */
overflow:hidden;
position:relative;
color:#333
}
#SiteMapBlogger .loadingPosts {
display:block;
padding:5px 10px;
font:normal bold 10px Arial, Sans-Serif;
color:#FFF
}
#SiteMapBlogger ul, #SiteMapBlogger ol, #SiteMapBlogger li {margin:0;padding:0;list-style:none;background:none;}
#SiteMapBlogger .sitemapTabs {width:20%;float:left}
#SiteMapBlogger .sitemapTabs li a {
display:block;
font:normal bold 10px/28px Arial,Sans-Serif;
height:28px;
overflow:hidden;
text-overflow:ellipsis;
color:#ccc; /* Color de las etiquetas */
text-transform:uppercase;
text-decoration:none;
padding:0 12px;
cursor:pointer
}
#SiteMapBlogger .sitemapTabs li a:hover {
background-color:#556270; /* Color de fondo de las etiquetas al pasar el cursor */
color:#FFF
}
#SiteMapBlogger .sitemapTabs li a.active-tab {
background-color:#69D2E7; /* Color de la pestaña activa */
color:#FFF; /* Color del texto de la pestaña activa */
position:relative;
z-index:5;
margin:0 -1px 0 0
}
#SiteMapBlogger .sitemapContent, #SiteMapBlogger .divider-layer {
width:80%;
float:right;
background-color:#FFF;
border-left:5px solid #69D2E7; /* Color del borde que separa las entradas de las etiquetas */
box-sizing:border-box
}
#SiteMapBlogger .divider-layer {float:none;display:block;position:absolute;top:0;right:0;bottom:0;}
#SiteMapBlogger .panel {position:relative;z-index:5;font:normal normal 10px Arial,Sans-Serif}
#SiteMapBlogger .panel li a {
display:block;
position:relative;
font-weight:700;
font-size:11px; /* Tamaño del título de las entradas */
color:#333; /* Color del título de las entradas */
line-height:30px;
height:30px;
padding:0 12px;
text-decoration:none;
outline:none;
overflow:hidden
}
#SiteMapBlogger .panel li time {
display:block;
font-style:italic;
font-weight:400;
font-size:10px; /* Tamaño de la fecha */
color:#DCDCDC; /* Color de la fecha */
float:right
}
#SiteMapBlogger .panel li .sitemapSummary {
display:block;
padding:10px 12px;
font-style:italic;
overflow:hidden
}
#SiteMapBlogger .panel li .sitemapSummary img.sitemapThumbnail {
float:left;
display:block;
margin:0 8px 0 0;
padding:4px;
width:72px; /* Ancho del contenedor de las miniaturas */
height:72px; /* Alto del contenedor de las miniaturas */
border:1px solid #dcdcdc; /* Borde de las miniaturas */
}
#SiteMapBlogger .panel li:nth-child(even) {
background-color:#CBDFDE; /* Color de fondo secundario de las entradas */
font-size:10px;
color:#414141 /* Color de texto secundario de las entradas */
}
#SiteMapBlogger .panel li a:hover,#SiteMapBlogger .panel li a:focus, #SiteMapBlogger .panel li a:hover time, #SiteMapBlogger .panel li.bold a {
background-color:#556270; /* Color de fondo del título de las entradas (modo sumario) y color de fondo del título de las entradas al pasar el cursor (modo normal) */
color:#FFF;
outline:none
}
#SiteMapBlogger .panel li.bold a:hover, #SiteMapBlogger .panel li.bold a:hover time {
background-color:#444
}

@media (max-width:700px) {
#SiteMapBlogger {
background-color:#fff;
border:0 solid #888
}
#SiteMapBlogger .sitemapTabs, #SiteMapBlogger .sitemapContent {
overflow:hidden;
width:auto;
float:none;
display:block
}
#SiteMapBlogger .sitemapTabs li {
display:inline;
float:left
}
#SiteMapBlogger .sitemapTabs li a, #SiteMapBlogger .sitemapTabs li a.active-tab {
background-color:#556270;
color:#ccc;
}
#SiteMapBlogger .sitemapTabs li a.active-tab {
background-color:#CBDFDE;
color:#fff
}
#SiteMapBlogger .sitemapContent {
border:none
}
#SiteMapBlogger .divider-layer, #SiteMapBlogger .panel li time {
display:none
}
}
</style>
<div id="SiteMapBlogger">
<span class="loadingPosts">Cargando entradas...</span></div>
<br />
<script>
var tabbedTOC = {
blogUrl: "http://nombre-de-mi-blog.blogspot.com/",
containerId: "SiteMapBlogger",
activeTab: 1,
showDates: true,
showSummaries: false,
numChars: 200,
showThumbnails: false,
thumbSize: 40,
noThumb: "//lh4.googleusercontent.com/-ELPJlqQBEWg/VGOtHaYDk9I/AAAAAAAAGJM/f2jRyUgZet0/s128/imagen.png",
monthNames: ["Enero","Febrero","Marzo","April","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"],
newTabLink: true,
maxResults: 99999,
preload: 0,
sortAlphabetically: true,
showNew: 7,
newText: " - <i style='color:red;'>¡Nuevo!</i>"
};
</script>

<script>
/*
* Blogger Tabbed Style Table of Content Widget by Taufik Nurrohman
* Free for change but keep the original attribution.
* URL: https://plus.google.com/108949996304093815163 */

function clickTab(e){var t=document.getElementById(tabbedTOC_defaults.containerId),n=t.getElementsByTagName("ol"),r=t.getElementsByTagName("ul")[0],i=r.getElementsByTagName("a");for(var s=0;s<n.length;s++){n[s].style.display="none";n[parseInt(e,10)].style.display="block"}for(var o=0;o<i.length;o++){i[o].className="";i[parseInt(e,10)].className="active-tab"}}function showTabs(e){var t=parseInt(e.feed.openSearch$totalResults.$t,10),n=tabbedTOC_defaults,r=e.feed.entry,i=e.feed.category,s="",o=[];for(var u=0;u<(n.showNew===true?5:n.showNew);u++){if(u==r.length)break;r[u].title.$t=r[u].title.$t+(n.showNew!==false?n.newText:"")}r=n.sortAlphabetically?r.sort(function(e,t){return e.title.$t.localeCompare(t.title.$t)}):r;i=n.sortAlphabetically?i.sort(function(e,t){return e.term.localeCompare(t.term)}):i;s='<span class="divider-layer"></span><ul class="sitemapTabs">';for(var a=0,f=i.length;a<f;a++){s+='<li class="sitemapItem-'+a+'"><a href="javascript:clickTab('+a+');">'+i[a].term+"</a></li>"}s+="</ul>";s+='<div class="sitemapContent">';for(var l=0,c=i.length;l<c;l++){s+='<ol class="panel" data-category="'+i[l].term+'"';s+=l!=n.activeTab-1?' style="display:none;"':"";s+=">";for(var h=0;h<t;h++){if(h==r.length)break;var p,d=r[h],v=d.published.$t,m=n.monthNames,g=d.title.$t,y="summary"in d&&n.showSummaries===true?d.summary.$t.replace(/<br ?\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,n.numChars)+"…":"",b="media$thumbnail"in d&&n.showThumbnails===true?'<img class="sitemapThumbnail" style="width:'+n.thumbSize+"px;height:"+n.thumbSize+'px;" alt="" src="'+d.media$thumbnail.url.replace(/\/s72(\-c)?\//,"/s"+n.thumbSize+"-c/")+'"/>':'<img class="sitemapThumbnail" style="width:'+n.thumbSize+"px;height:"+n.thumbSize+'px;" alt="" src="'+n.noThumb.replace(/\/s72(\-c)?\//,"/s"+n.thumbSize+"-c/")+'"/>',w=d.category?d.category:[],E=n.showDates?'<time datetime="'+v+'" title="'+v+'">'+v.substring(8,10)+" "+m[parseInt(v.substring(5,7),10)-1]+" "+v.substring(0,4)+"</time>":"";for(var S=0;S<d.link.length;S++){if(d.link[S].rel=="alternate"){p=d.link[S].href;break}}for(var x=0,T=w.length;x<T;x++){var N=n.newTabLink?' target="_blank"':"";if(w[x].term==i[l].term){s+='<li title="'+w[x].term+'"';s+=n.showSummaries?' class="bold"':"";s+='><a href="'+p+'"'+N+">"+g+E+"</a>";s+=n.showSummaries?'<span class="sitemapSummary">'+b+y+'<span style="display:block;clear:both;"></span></span>':"";s+="</li>"}}}s+="</ol>"}s+="</div>";s+='<div style="clear:both;"></div>';document.getElementById(n.containerId).innerHTML=s;clickTab(n.activeTab-1)}var tabbedTOC_defaults={blogUrl:"http://www.ciudadblogger",containerId:"SiteMapBlogger",activeTab:1,showDates:false,showSummaries:false,numChars:200,showThumbnails:false,thumbSize:40,noThumb:"//lh4.googleusercontent.com/-ELPJlqQBEWg/VGOtHaYDk9I/AAAAAAAAGJM/f2jRyUgZet0/s128/imagen.png",monthNames:["Enero","Febrero","Marzo","April","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"],newTabLink:true,maxResults:99999,preload:0,sortAlphabetically:true,showNew:false,newText:" - <em style='color:red;'>¡Nuevo!</em>"};for(var i in tabbedTOC_defaults){tabbedTOC_defaults[i]=typeof tabbedTOC[i]!==undefined&&typeof tabbedTOC[i]!=="undefined"?tabbedTOC[i]:tabbedTOC_defaults[i]}(function(){var e=document.getElementsByTagName("head")[0],t=document.createElement("script");t.type="text/javascript";t.src=tabbedTOC_defaults.blogUrl+"/feeds/posts/summary?alt=json-in-script&max-results="+tabbedTOC_defaults.maxResults+"&orderby=published&callback=showTabs";if(tabbedTOC_defaults.preload!=="onload"){setTimeout(function(){e.appendChild(t)},tabbedTOC_defaults.preload)}else{window.onload=function(){e.appendChild(t)}}})()
</script>
Ahora lo que está en color rojo como "nombre-de-mi-blog" lo cambiaremos por la dirección del blog de cada uno con esto tendremos listo el "Site map" sin lío alguno.

Con esto se terminará el proceso para poner este gadget fácil y simple si tienes alguna duda no olvides comentar ;) 

Hasta la próxima, 

viernes, 26 de junio de 2015

Agregar chat de atención al cliente en sitio web o blog (ideal para sitios de ventas)

Un post más en Bloggin Red, para hoy enseñaré como incorporar un chat profesional para nuestro sitio web o blog pero antes veamos para que sería bueno este chat:
- Si tenemos un sitio de ventas on line, atención al cliente.
- Si ofrecemos un servicio pago, atención al cliente.
- Ideal para tiendas On line.
- Resolver dudas de lectores respecto a alguna temática 
 

La plataforma que nos dará el chat es bastante profesional y tiene un plan gratuito (Al cuál le sacaremos el máximo recurso) y otros pago que podrán ver más adelante, el nombre de ella es Zopim, así que vamos con el paso a paso para lograr lo que se desea.

EL TUTORIAL 

1. Lo primero será ingresar al formulario de registro en Zopim al cual pueden ir dando click aquí. Y se verá algo así:


2. Luego vamos al email que ingresamos y confirmamos el email (demora un poco más de lo normal), confirmado el link nos saldrá un formulario donde pondremos la contraseña, nombre empresa, teléfono etc muy sencillo.

3. Lleno el formulario nos redireccionan a el dashboard del sitio, nos desplagará una ventana tipo Pop-up donde nos confirman nuestra nombre damos en next y en el paso dos nos proporcionarán el código para agregarlo:


4. Copiamos el código y en nuestro sitio o blog vamos a buscar la etiqueta </head> justo antes de dicha etiqueta pegaremos el código de zopim chat. (Si tienes blogger y quieres implementarlo allí ve a plantilla > editar HTML > Buscas la etiqueta anterior).

5. Luego, guardamos la plantilla y vamos a visualizar el blog o sitio el chat se verá así para los lectores o personas que ingresen al sitio:
Para activarlo debemos estar conectados directamente a la plataforma Zopim web, en "visitor list" podremos ver quiénes están en uso del chat de nuestra web como la plataforma en tiempo real nos notifica el evento será más fácil atender dudas.



Cómo ven es muy fácil incorporar un chat profesional en nuestro sitio web, y ya dicho más arriba existen planes pagos que peuden ser buena opción cuando el tráfico de clientes o visitantes a nuestro sitio, tienda es elevado.

Hasta la proxima Bloggers,

sábado, 20 de junio de 2015

Samsung vs Apple una lucha tecnológica ¿Quién ganará?

Batallas las hay en todas partes y de todo tipo, pero, esta en especial ya lleva sus años y no es una cualquiera cuando se menciona a empresas como Apple y Samsung, dos gigantes tecnológicos.


Primero miremos una breve infografía sobre lo que el título de este artículo nos dice:

 

Ahora sí al texto, es bueno informarnos un poco sobre todo esto que ha pasado con estas dos grandes corporaciones y es que de alguna u otra forma han tenido entre sí un nivel de competencia muy alto, pero, ¿Desde cuando inició esta batalla? bueno Apple y Samsung años atrás eran 'Aliados' de fabricación si así se le puede denominar pues los equipos Iphone de la serie 3G y 3GS tuvieron procesadores samsung, hasta aquí todo bien. Sin embargo, en el año 2011 Apple demandó a Samsung, la razón era que la compañía había copiado sus diseños y por ello la serie Galaxy S había sido tan exitosa.

Y de esta forma Samsung tuvo que indemnizar a Apple con mil millones de dólares, pero, a partir de allí Samsung empezaría a liderar el mercado móvil, alpunto que entre el segundo trimestre (Q2) del 2010 y el primer trimestre (Q1) del 2012 se vendieron más de 87 millones de dispositivos móviles de Samsung, solo en Estados Unidos.

2013 un año de crecimiento

En este año la compañía Samsung sigue aumentando sus ventas y proporcionalmente sus clientes logró posicionarse en el mercado mundial en el último trimestre con una participación del 29% mientras que Apple obtenía el 17% a la misma fecha.

2014 terminales en crecimiento

Apple inicia una etapa buena con su tienda "App Store" pues aumentó un 85% sus ingresos respecto a las aplicaciones ofrecidas en Google Play, sin embargo Samsung siguió siendo líder mundial en el transcurso de este año.

2015 presente en disputa

El cierre de 2014 fue un éxito rotundo para Apple el equipo Iphone 6 logró vender más de 10 mil unidades en su primer fin de semana en el mercado, pero, parte del éxito de esta empresa se presentó gracias a la ausencia de el lanzamiento de los nuevos equipos Samsung, quiénes tiempo después dieron inicio a ventas de la serie Galaxy S6 y S6 EDGE.

Al final de toda esta corta historia queda ver si estos dos gigantes harán las pases algún día o la rivalidad continuará.

¿Qué opinas de todo esto?



UN ARTÍCULO ESCRITO EN ALIANZA CON: www.linio.com.co

miércoles, 17 de junio de 2015

¿Cómo eliminar un canal de YouTube? sin eliminar nuestra cuenta de Google

Un post más para Bloggin Red, hoy enseñaré como eliminar un canal de nuestra cuenta de YouTube sin tener que eliminar nuestra cuenta de Google por completo así que vamos a ello:


1. Los pasos son muy fáciles ingresa al siguiente enlace (ya logueado en tu cuenta de Google):
2. Ahora, darás click donde dice avanzado, aquí:

 3. Allí te saldrá al final la parte de "Eliminar canal" y darás click:

4. Luego pondrás tu contraseña y saldrá una página más donde debes marcar que sabes lo que haces y eliminas:

5. Confirmas la eliminación del canal y listo estuvo:


Muy bien, tarea cumplida aquel canal ha sido eliminado, es todo en este fácil tutorial espero te guste y sirva.

Hasta la próxima,

NOTA: De nuevo aclaro que eliminar el canal no pondrá de forma alguna en riesgo tu cuenta de google o correo vinculado.
 

jueves, 11 de junio de 2015

Ver una web dentro de mi blog u otra web

Para insertar una web o documento HTML dentro de otro es como decir una web dentro de otra web usamos un IFRAME que es un recuadro dentro de una página web en el cual se puede mostrar el contenido de cualquier dirección web con cualquier contenido. 



El código del Iframe es el siguiente:
<div align="center"><iframe src="http://sinentradas.blogspot.com" width=450 height=250 frameborder=1 scrolling=auto></iframe></div>



Ahora solo queda reemplazar lo que está en color naranja por el link a incrustar y listo es todo.

Hasta la próxima,

jueves, 4 de junio de 2015

Comprobando que shorten paga (acortar URL) - pagos por PayPal


Un post más en BR, y hoy quiero platicar un poco sobre los acortadores de URL y la posibilidad de adquirir dienro con ellos, para la ocasión hablaré sobre "shorte.st" un sitio web que personalmente me parece fácil de manejar, entendible ya que tiene soporte en español, en verdad pagan las ganancias que uno genere y posteriormente ofrece los pagos por PayPal.


Así que la misión de este post es sacarte de dudas sobre esta plataforma de acortar URL's y sobretodo saber si en verdad pagan.

Hablemos sobre shorte.st

Shorte.st es una plataforma para acortar URL y a raíz de acortarlas obtener distintas ganancias económicas esto cada que vez que alguien abra los enlaces acortados. 
VENTAJAS: - Tiene soporte en español - Fácil manejo para acortar los enlaces -Diferentes métodos de pago -El eCPM es a veces muy bueno -Con cinco dólares que hagas ya te giran el dinero

DESVENTAJAS: - No dejan retirar cualquier día, solo el día 10 de cada mes 
Su panel de estadísticas es muy bueno y muestra estadísticas reales un ejemplo de ello iniciando mes:
 

Prueba de ganancias con una de mis cuentas

A continuación quiero mostrarles los respectivos pagos y ganancias que he obtenido con esta plataforma para animarlos a monetizar sus blogs o webs:


Con esa cuenta hasta el momento he generado 61 dolares algunos pagos enviados al correo (no puedo mostrar todos los correos ya que serían demasiados):

Aquí la muestra de una transacción por PayPal de un pequeño pago en mi cuenta:


Como ven hasta ahora con shorte.st las cosas salen bien y es un sitio el cual recomiendo bastante además de ser confiable.

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.

SÍGUENOS EN: