No, no tenemos juegos aquí..!

lunes, 21 de julio de 2014

Agregar iconos CSS a tu blog [PacMan - Arbol- Vaso] hechos en puro CSS

El día de hoy quiero compartiles tres iconos hechos en CSS puro CSS se trata de tres figuritas muy sencillas las cuales son:

- Un vaso con agua
- Un arbol estilo navideño 
- Un Pacman 

Presentaré de forma simple los debidos códigos de cada figúra para quien la quiera.

Vaso con agua




El código respectivo de esta figura es: 

<style>
.mug_animate {
  box-shadow: 0 -3em 0 0 #0AF inset;
  height: 2.5em;
  position: relative;
  -moz-transition: all 1000ms linear 0s;
  -webkit-transition: all 1000ms linear 0s;
  -o-transition: all 1000ms linear 0s;
  -ms-transition: all 1000ms linear 0s;
  transition: all 1000ms linear 0s;
  width: 1.5em;
}
.mug_animate:after {
  border-color: #DDD transparent #DDD #DDD;
  border-image: none;
  border-radius: 0.75em 0 0 0.75em;
  border-style: solid none solid solid;
  border-width: 0.25em medium 0.25em 0.25em;
  content: "";
  height: 1.5em;
  left: -1em;
  position: absolute;
  top: 0.25em;
  width: 0.75em;
}
.mug_animate:before {
  border: 0.25em solid #DDD;
  border-radius: 0 0 0.2em 0.2em;
  content: "";
  height: 2.5em;
  left: -0.20em;
  position: absolute;
  top: -0.5em;
  width: 1.5em;
}
.mug_animate:hover {
  box-shadow: 0 0 0 0 #00F inset;
}
</style>
<div class="mug_animate"></div>

Arbol de navidad




EL código respectivo de esta figura en CSS es: 

<style>
.fir {
  box-shadow: 0em 0.9em 0 -0.8em #4D4,0em 1em 0 -0.8em #4D4,0em 1.1em 0 -0.8em #4D4,0em 1.2em 0 -0.8em #4D4;
  border-bottom: 1.7em solid #4D4;
  border-left: 1em solid transparent;
  border-right: 1em solid transparent;
  font-size: 20px;
  height: 0em;
  position: relative;
  width: 0em;
}
.fir:before {
  border-bottom: 1em solid #4D4;
  border-left: 0.7em solid transparent;
  border-right: 0.7em solid transparent;
  content: '';
  display: block;
  height: 0em;
  left: -0.7em;
  position: absolute;
  top: -0.2em;
  width: 0em;
}
.fir::after {
  border-bottom: 0.7em solid #4D4;
  border-left: 0.5em solid transparent;
  border-right: 0.5em solid transparent;
  content: '';
  display: block;
  height: 0em;
  left: -0.5em;
  position: absolute;
  top: -0.5em;
  width: 0em;
}
</style>
<div class="fir"></div>

PacMan

 

El respectivo código para este Pacman en CSS es: 

 <style>
.pacman {
  background-image: -webkit-radial-gradient(1.75em .75em, circle, transparent 10%, #EE0 10%);
  background-image: -moz-radial-gradient(1.75em .75em, circle, transparent 10%, #EE0 10%);
  background-image: -o-radial-gradient(1.75em .75em, circle, transparent 10%, #EE0 10%);
  background-image: -ms-radial-gradient(1.75em .75em, circle, transparent 10%, #EE0 10%);
  background-image: radial-gradient(1.75em .75em, circle, transparent 10%, #EE0 10%);
  border-radius: 3em 3em 0 0;
  height: 1.5em;
  position: relative;
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  width: 3em;
}

.pacman:after {
  background-color: #EE0;
  border-radius: 0 0 3em 0;
  content: '';
  height: 1.5em;
  left: 0em;
  position: absolute;
  top: 1.45em;
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  width: 1.5em;
}
</style>

<div class="pacman"></div>

¿Cómo agrego esto a mi blog?

Para agregarlo es tan fácil como ir, si se trata de un Gadget vamos a Diseño | Añadir un gadget | HTML/JavaScript, allí pegamos el respectivo CSS.

Si lo que se quiere es poner en una entrada al visualizarlo este se verá no centrado sino ubicado al borde izquierdo así que en la primera parte del CSS de las llaves {} agregamos la propiedad:

margin-left:300px;

Tomando en cuenta que le decimos al código que nos corra el elemento 300 pixeles desde la izquierda para modificar la distancia editan la cifra en rojo.

Espero les guste este sencillo truco.

Hasta la próxima Bloggers,

viernes, 18 de julio de 2014

Cómo descargar - instalar WhatsApp a teléfono Firefox OS

Para quienes tienen un teléfono con Firefox OS como sistema operativo el caso de los alcatel y de los ZTE sabrán que la aplicación WhatsApp no está lanzado en este sistema de forma oficial sin embargo, existen dos aplicaciones que nos dejará instalar librerías similares a WhatsApp esto claro conectándonos con nuestros contactos de WhatsApp y así poder hablar.


Pero, la pregunta central es ¿Cómo instalar WhatsApp en un teléfono con Firefox OS? para lograrlo enseñaré una primera aplicación esta se llama "OpenWapp" para ir a la App directamente: CLICK AQUÍ

WHATSAPP PARA FIREFOX OS COMO INSTALAR 2014 TUTORIAL

Ahora la instalamos y la ejecutamos lo primero que nos saldrá será el registro del número de teléfono se verá así:

Instalar WhatsApp en Firefox OS

Reconfirmaremos el número de teléfono y nos llegará un código tal cuál como WhatsApp lo ingresamos:


Hecho lo anterior nos saldrá el apartadode PERFIL donde pondremos nombre y estado y damos en hecho:


Y bien ya estará listo WhatsApp al final sólo queda escribirle a nuestro contacto para ello dejo la prueba:

Como ven funciona perfectamente las características de este WhatsApp son básicamente las mismas:
 
- Los mismo emoticones.
- Se puede poner estados.
- Fotos de perfil.
- Enviar vídeos fotos ó música.
- Crear grupos.

SEGUNDA ALTERNATIVA 

 

Otra aplicación es LOQUI IM también es buena pero no se enfoca sólo en WhatsApp es multicuenta ya que en una sola aplicación administras tu cuenta de facebook, plus, nimbuzz entre otras.

Para habilitar WhatsApp sólo instalas la App luego en añadir cuentas vas a WhatsApp:

Luego país y número y más tarde el código por mensaje:

Al introducir el código se hace sin guión medio
Y tendremos lista la aplicación:

Ha sido todo en este post lo he detallado muy bien, de mi parte recomiendo la primera App para WhatsApp, pero, bueno libre elección espero les guste y tan pronto cuando WhatsApp se lance oficialmente será anunciado...

Hasta la próxima,

jueves, 17 de julio de 2014

Cómo hacer capturas de pantalla en BlackBerry 8520-9300-9320 etc.

Aunque este post suene muy simple y quizá muy ido por nombrar teléfonos como BlackBerry, no es nada del otro lado decir que aún hay muchas personas que por una u otra razón tienen un teléfono de esta marca y que muchos han intentado hacer caputras de pantalla con ellos, puede que para algunos sea fácil hacerlo, pero, para otros no tanto así que hoy detallaré una aplicaciónque nos ayudará con esta tarea de "Hacer captura de pantalla en BlackBerry":


Muy bien para lograrlo seguiremos una serie breve de pasos:

1. Desde nuestro teléfono vamos a App World y buscaremos la siguiente aplicación llamada "Screen Grabber" aunque les saldrá otras esta es laque recomiendo pues no deja marca de agua ni te pide que compres la versión completa para que te quite las marcas de agua:

captura hecha con Screen Grabber


2. Hecho este paso instalaremos la App y seguramente pedirá reiniciar el equipo :( , más tarde, sólo queda ver que tomar las capturas a lo que queramos ¿cómo? estando sobre el objetivo a capturar damos click en la tecla de BlackBerry y escogemos la opción que dice "Screen Grabber" y estuvo esta se almacena en nuestras imágenes:

Captura hecha con Screen Grabber
Es un tutorial muy corto pero se que a algún lector con BlackBerry le ha de servir...

Hasta la próxima,

lunes, 14 de julio de 2014

Anuncio o caja flotante que baja con el scroll del blog

ALGUNOS FRAGMENTOS TOMADOS GENTILMENTE DE CIUDAD BLOGGER

tomado de ciudad blogger
Agregar mensajes de alerta al blog a veces puede ser necesario para informar a nuestros lectores de algo importante, para ello hoy les enseñaré como agregar un anuncio tipo caja a nuestro blog que baja a medida que hacemos Scroll en nuestro sitio; en nuestro blog de juegos pueden ver un demo del truco: 

http://juegos.blogginred.com/

Muy bien para agregarlo iniciaremos con ir a Plantilla | Editar HTML y allí buscamos la etiqueta </head> arriba de ella pegaremos lo siguiente:

 <style type='text/css'>
#anuncio {
position: absolute;
border: 0px;
padding: 2px;
width: 300px;
height: 80px;
visibility: hidden;
z-index: 200;
top: 27px;
left: 13px;
}
</style>


<script type='text/javascript'>
//<![CDATA[
var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 30 //set x offset of bar in pixels
var startY = 5 //set y offset of bar in pixels
var verticalpos="fromtop" //enter "fromtop" or "frombottom"

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("anuncio").style.visibility="hidden"
}

function staticbar(){
barheight=document.getElementById("anuncio").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("anuncio");
stayTopLeft();
}
if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
//]]>
</script>

Ahora buscamos </body> y arriba de ella pegamos este otro código:

<div id='anuncio'>
<a href='Javascript:void' onClick='closebar(); return false'><img align='right' border='0' src='http://4.bp.blogspot.com/_dsEG33PDaHw/S66y-66sXXI/AAAAAAAAAOk/0GDe7kdQj4A/s200/icono-cerrar.png'/></a><br />
<a href='URL del enlace'><img src='URL de la imagen'/></a>
</div>

Para el mensaje en tipo imagen se reemplaza donde está en rojo "URL de la imagen y para el enlace que quiera llevar el link por lo que está en color azul sólo queda guardar y estuvo.

Si en vez de imagen se quiere colocar texto entonces en vez del código anterior usaremos este:

<div id='anuncio'>
<a href='Javascript:void' onClick='closebar(); return false'><img align='right' border='0' src='http://4.bp.blogspot.com/_dsEG33PDaHw/S66y-66sXXI/AAAAAAAAAOk/0GDe7kdQj4A/s200/icono-cerrar.png'/></a><br />
<a href='URL del enlace'><div style='background:#ccc;color:#FFF;border:3px solid #000;padding:5px;text-align:center;font-size:14px;'>Aquí va el mensaje del anuncio</div></a>
</div>

En donde está el texto en verde irá el debido mensaje y en color naranja la URL si se desea que este lleve a algún lugar.

Básicamente esto seria todo sin embargo si dominas el CSS puedes hacer de este truco algo mejorado va a uso de cada uno, espero les sirva de algo.

Hasta la próxima,

sábado, 12 de julio de 2014

Poner entradas relacionadas con miniatura en blogger (I)

Bueno ya he estado unos días fuera sin escribir en mi blog, pero, ya he vuelto en el día de hoy les traigo un truco funcional aunque su instalación es fácil alguna veces puede dar lío pues todo varía según el código de la plantilla y se trata de poner las entradas relacionadas en nuestro blog un ejemplo de como se veria sería el siguiente:


Así que para agregar esto en nuestro blog primero vamos a Plantilla | Editar HTML y buscamos la etiqueta </head> antes de ella pegaremos lo siguiente:

<!-- Entradas relacionadas con miniatura Script y Estilo -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.6em; /*Tamaño de la letra*/
color: white; /*Color de la letra*/
font-family: Arial, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:white; /*Color letra sin pasar el mouse*/
transition: all 0.7s ease 0s;
}
#related-posts a:hover{
color:black; /*Color letra al pasar el mouse*/
}
#related-posts a:hover {
background-color:#d4eaf2; /*Color de fondo al pasar el mouse*/
border-radius:10px;
}
</style>
<script type='text/javascript'>
//<![CDATA[
//Script by Aneesh of www.bloggerplugins.org
//Released on August 19th August 2009
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
var thumburl = new Array();
function related_results_labels_thumbs(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
try
{thumburl[relatedTitlesNum]=entry.media$thumbnail.url;}
catch (error){
s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){
thumburl[relatedTitlesNum]=d;} else thumburl[relatedTitlesNum]='http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png';
}
if(relatedTitles[relatedTitlesNum].length>35) relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0, 35)+"...";
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
}}}}
function removeRelatedDuplicates_thumbs() {
var tmp = new Array(0);
var tmp2 = new Array(0);
var tmp3 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains_thumbs(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp3.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
tmp3[tmp3.length - 1] = thumburl[i];
}}
relatedTitles = tmp2;
relatedUrls = tmp;
thumburl=tmp3;
}
function contains_thumbs(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels_thumbs() {
for(var i = 0; i < relatedUrls.length; i++)
{
if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))) {
relatedUrls.splice(i,1);
relatedTitles.splice(i,1);
thumburl.splice(i,1);
}}
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
if(relatedTitles.length>0) document.write('<h2>'+relatedpoststitle+'</h2>');
document.write('<div style="clear: both;"/>');
while (i < relatedTitles.length && i < 20 && i<maxresults) {
document.write('<a style="text-decoration:none;padding:5px;float:left;');
if(i!=0) document.write('border-left:solid 0.5px #d4eaf2;"');
else document.write('"');
document.write(' href="' + relatedUrls[r] + '"><img style="width:72px;height:72px;border:0px;" src="'+thumburl[r]+'"/><br/><div style="width:72px;padding-left:3px;height:65px;border: 0pt none ; margin: 3px 0pt 0pt; padding: 0pt; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; line-height: normal; font-size-adjust: none; font-stretch: normal;">'+relatedTitles[r]+'</div></a>');
if (r < relatedTitles.length - 1) {r++;} else {r = 0;}
i++;
}
document.write('</div>');
}
//]]>
</script>
</b:if>
<!-- Entradas relacionadas con miniatura. Script y Estilo -->

Muy bien, hecho esto seguirá la parte más incómoda pues es la que varia según el código de su blog para que se visualice correctamente lo normal será ponerlo en el pie del post (post-footer) si ya hay algo allí recomiendo que se coloque debajo de esto para que se vea a lo último generalmente está línea va expresada así búsquenla:

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

Si no les da entonces esta pero el proceso es igual:

<div class='post-footer'> 

Debajo de esta línea irá el siguiente código:


<!-- Entradas relacionadas con miniatura -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger tutorials</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle=&quot;Posts relacionados&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Entradas relacionadas con miniatura -->

Y listo podría decir que ya estuvo todo es importante guardar lo cambios y visualizar directamente desde un post ya que desde una vista previa el script no se ejecuta en lo absoluto, si tienen duda alguna no olviden comentar. 

Hasta la próxima,

lunes, 7 de julio de 2014

Agrega menú deslizante arriba del blog

Hoy les traigo un interesante Menú muy elegante y ahorrador de espacio es deslizante e  incluye muchas ventajas pueden verlo en el demo:

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

Aquí una imagen en breve resumen del menú:

Para agregar este menú en tu blog debes seguir los siguientes pasos:

Ve a diseño o plantilla y edición html y busca este código <head> y después de este código pega el siguiente:
<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
$(&quot;#open&quot;).click(function(){
$(&quot;div#panel&quot;).slideDown(&quot;slow&quot;);
});
// Collapse Panel
$(&quot;#close&quot;).click(function(){
$(&quot;div#panel&quot;).slideUp(&quot;slow&quot;);
});

// Switch buttons from &quot;Abrir menú&quot; to &quot;Cerrar menú&quot; on click
$(&quot;#toggle a&quot;).click(function () {
$(&quot;#toggle a&quot;).toggle();
});
});</script>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
body#layout #toppanel {display:none !important;}
</style>
</b:if>


Ahora agregarás los estilos CSS justo antes de ]]></b:skin>:


/* Top Sliding Menu----------------------------------------------- */

.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}

.clearfix {display: inline-block;}

* html .clearfix {height: 1%;}

.clearfix {display: block;}

.clearfix {height: 1%;}

.clearfix {display: block;}

.tab {

background: url(http://2.bp.blogspot.com/_dsEG33PDaHw/TUYjUtg1alI/AAAAAAAAAr4/irK6KNxvCHg/s1600/tab_b.png) repeat-x 0 0;

height: 42px;

position: relative;

top: 0;

z-index: 999;

}

.tab ul.login {

display: block;

position: relative;

float: right;

clear: right;

height: 42px;

width: auto;

font-weight: bold;

line-height: 42px;

margin: 0;

right: 150px;

color: white;

font-size: 80%;

text-align: center;

}

.tab ul.login li.left {

background: url(http://1.bp.blogspot.com/_dsEG33PDaHw/TUYjU8z7FWI/AAAAAAAAAr8/di0CWuFKxfo/s1600/tab_l.png) no-repeat left 0;

height: 42px;

width: 30px;

padding: 0;

margin: 0;

display: block;

float: left;

}

.tab ul.login li.right {

background: url(http://2.bp.blogspot.com/_dsEG33PDaHw/TUYjVrN4yNI/AAAAAAAAAsE/4YOHQURWUHM/s1600/tab_r.png) no-repeat left 0;

height: 42px;

width: 30px;

padding: 0;

margin: 0;

display: block;

float: left;

}

.tab ul.login li {

text-align: left;

padding: 0 6px;

display: block;

float: left;

height: 42px;

background: url(http://4.bp.blogspot.com/_dsEG33PDaHw/TUYjVVpFpYI/AAAAAAAAAsA/EKlKa2rlic0/s1600/tab_m.png) repeat-x 0 0;

}

.tab ul.login li a {color: #15ADFF;}

.tab ul.login li a:hover {color: #FFFFFF;}

.tab .sep {color:#414141}

.tab a.open, .tab a.close {

height: 20px;

line-height: 20px !important;

padding-left: 30px !important;

cursor: pointer;

display: block;

width: 100px;

position: relative;

top: 11px;

}

.tab a.open {background: url(http://2.bp.blogspot.com/_dsEG33PDaHw/TUYjS1nMjqI/AAAAAAAAAro/5oD_cgvHwM4/s1600/bt_open.png) no-repeat left 0;}

.tab a.close {background: url(http://3.bp.blogspot.com/_dsEG33PDaHw/TUYjSS2QXBI/AAAAAAAAArk/5KFg95ZWLts/s1600/bt_close.png) no-repeat left 0;}

.tab a:hover.open {background: url(http://2.bp.blogspot.com/_dsEG33PDaHw/TUYjS1nMjqI/AAAAAAAAAro/5oD_cgvHwM4/s1600/bt_open.png) no-repeat left -19px;}

.tab a:hover.close {background: url(http://3.bp.blogspot.com/_dsEG33PDaHw/TUYjSS2QXBI/AAAAAAAAArk/5KFg95ZWLts/s1600/bt_close.png) no-repeat left -19px;}

#toppanel {

position: absolute;

top: 0;

width: 100%;

z-index: 999;

text-align: center;

margin-left: auto;

margin-right: auto;

}

#panel {

width: 100%;

height: 270px; /* Alto del slide */

color: #999999;

background: #272727;

overflow: hidden;

position: relative;

z-index: 3;

display: none;

}

#panel h4 {

font-size: 1.6em;

padding: 5px 0 10px;

margin: 0;

color: #FFFFFF;

text-align: center;

}

#panel p {

margin: 5px 0;

padding: 0;

}
#panel a {

text-decoration: none;

color: #15ADFF;

}

#panel a:hover {

color: white;

}

#panel .content {

width: 960px;

margin: 0 auto;

padding-top: 15px;

text-align: left;

font-size: 0.85em;

}

#panel .content .left {

width: 280px;

float: left;

padding: 0 15px;

border-left: 1px solid #333;

}

#panel .content .right {

border-right: 1px solid #333;

}

#panel .content form {

margin: 0 0 10px 0;

}

#panel .content label {

float: left;

padding-top: 8px;

clear: both;

width: 280px;

display: block;

}

#panel .content input.field {

border: 1px #1A1A1A solid;

background: #414141;

margin-right: 5px;

margin-top: 4px;

width: 200px;

color: white;

height: 16px;

}

#panel .content input:focus.field {

background: #545454;

}

#panel .content input.bt_register {

display: block;

float: left;

clear: left;

height: 24px;

text-align: center;

cursor: pointer;

border: none;

font-weight: bold;

margin: 10px 0;

}

#panel .content input.bt_register {

width: 94px;

color: white;

background: transparent url(http://2.bp.blogspot.com/_dsEG33PDaHw/TUYjTGOeO8I/AAAAAAAAArs/XQSFRPBtS3s/s1600/bt_register.png) no-repeat 0 0;

}

#slide-menu {

width: 160px;

float: left;

}

#slide-menu2 {

width: 160px;

float: right;

}

#slide-menu ul, #slide-menu2 ul{

font-family: Arial, Helvetica, sans-serif;

list-style-type:none;

margin:0;

padding:0;

}

#slide-menu ul li a, #slide-menu2 ul li a {

background:url(http://3.bp.blogspot.com/_dsEG33PDaHw/TUYjTjBCpAI/AAAAAAAAArw/rJgbMGEyjMU/s1600/bullet_blue.png) center left no-repeat;

margin:0;

padding:3px 3px 3px 18px;

}

#slide-menu li, #slide-menu2 li {display: inline;}

#slide-menu a, #slide-menu2 a{

color: #FFFFFF;

text-decoration: none;

font-size: 13px;

display: block;

padding: 3px;

width: 160px;

}

#slide-menu a:link, #slide-menu a:visited, #slide-menu2 a:link, #slide-menu2 a:visited {

color: #999;

text-decoration: none;

}

#slide-menu a:hover, #slide-menu2 a:hover {

color: #FFFFFF;

}
Y por último vas a colocar la estructura, justo después de <body> agrega lo siguiente:
<!-- Inicio top sliding menu -->

<div id='toppanel'>

<div id='panel'>

<div class='content clearfix'>

<!-- Primera sección -->

<div class='left' style='width:240px !important'>

<h4>Hola, Bienvenido a mi blog!</h4>

<p>Puedes seguirnos en las redes sociales o suscribirte al feed.</p>

<div align='center'>

<a href='http://nombre-de-mi-blog.blogspot.com/atom.xml'><img src='http://4.bp.blogspot.com/_dsEG33PDaHw/TUYmsIuunqI/AAAAAAAAAsc/KUuPv94Lwso/s1600/Feed_.png' style='padding:25px 5px;' width='60'/></a> <a href='http://www.facebook.com/usuario'><img src='http://3.bp.blogspot.com/_dsEG33PDaHw/TUYmrpIzmHI/AAAAAAAAAsY/sG1ZCEfxvNY/s1600/FaceBook_.png' style='padding:25px 5px;' width='60'/></a> <a href='http://twitter.com/usuario'><img src='http://2.bp.blogspot.com/_dsEG33PDaHw/TUYmseCsXMI/AAAAAAAAAsg/RN_5cSwxE8M/s1600/Twitter_.png' style='padding:25px 5px;' width='60'/></a>

</div>

</div>

<!-- Segunda sección -->

<div class='left' style='width:320px !important'>

<h4>Categorías</h4>

<div id='slide-menu'>

<ul>

<li><a href='URL del enlace'>Menu item uno</a></li>

<li><a href='URL del enlace'>Menu item dos</a></li>

<li><a href='URL del enlace'>Menu item tres</a></li>

<li><a href='URL del enlace'>Menu item cuatro</a></li>

<li><a href='URL del enlace'>Menu item cinco</a></li>

<li><a href='URL del enlace'>Menu item seis</a></li>

<li><a href='URL del enlace'>Menu item siete</a></li>

<li><a href='URL del enlace'>Menu item ocho</a></li>

<li><a href='URL del enlace'>Menu item nueve</a></li>

<li><a href='URL del enlace'>Menu item diez</a></li>

</ul>

</div>

<div id='slide-menu2'>

<ul>

<li><a href='URL del enlace'>Menu item uno</a></li>

<li><a href='URL del enlace'>Menu item dos</a></li>

<li><a href='URL del enlace'>Menu item tres</a></li>

<li><a href='URL del enlace'>Menu item cuatro</a></li>

<li><a href='URL del enlace'>Menu item cinco</a></li>

<li><a href='URL del enlace'>Menu item seis</a></li>

<li><a href='URL del enlace'>Menu item siete</a></li>

<li><a href='URL del enlace'>Menu item ocho</a></li>

<li><a href='URL del enlace'>Menu item nueve</a></li>

<li><a href='URL del enlace'>Menu item diez</a></li>

</ul>

</div>

</div>

<!-- Tercera sección -->

<div class='left right'>

<h4>&#161;Suscríbete a nuestro blog!</h4>

<p>Recibe en tu correo las últimas noticias del blog. Sólo ingresa tu correo para suscribirte.</p>

<form action='http://feedburner.google.com/fb/a/mailverify?uri=Nombre-del-Feed' method='post' target='_blank'>

<input class='field' name='email' type='text/' value=''/>

<input name='uri' type='hidden' value='Nombre-del-Feed'/>

<input name='loc' type='hidden' value='es_ES'/>

<input class='bt_register' type='submit' value='Suscribir'/></form>

</div>

</div>

</div>

<div class='tab'>

<ul class='login'>

<li class='left'/>

<li>Hola invitado!</li>

<li class='sep'>|</li>

<li id='toggle'>

<a class='open' href='#' id='open'>Abrir menú</a>

<a class='close' href='#' id='close' style='display: none;'>Cerrar menú</a>

</li>

<li class='right'/>

</ul>

</div>

</div>

<!-- Fin top menú deslizante-->

Si usas una plantilla hecha a través del diseñador de plantillas entonces el código deberás pegarlo después de:
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

Ahora reemplazan para el texto las partes que dicen "MENU ITEM" y para los link lo que dice "URL DEL ENLACE"

sábado, 5 de julio de 2014

Subir - alojar scripts Blogger o estilos CSS en DrobBox

Aunque para este post siendo sincero en el tema no recomiendo de ha mucho que se alojen scripts en un servidor o hosting aparte pues esto demora un poco la carga del blog claro está el volumen y función del script, sin embargo esto aplica si se trata de Blogger ya que este brinda la posibilidad de alojarlos en la plantilla directamente, pero, todo va a comodidad y pensar de cada quien.


Así que hoy les enseñaré como subir, alojar o cargar archivos en DropBox paso a paso:

1. Lo primero y más lógico es tener una cuenta en DROPBOX.COM, de allí ingresaremos a nuestra cuenta de DropBox por el sitio web y no por la aplicación para Windows (esto para facilitar el proceso).

2. Hecho esto vamos al escritorio de DropBox en el navegador en mi caso se verá como está en la imagen, luego vamos a la carpeta "public":
Subir scripts a DropBox tutorial paso a paso

3. Allí en la carpeta será donde cargaremos el script o estilo CSS para cualquiera es el mismo proceso en mi caso lo explicaré con un Script el cuál nombré "PRUEBA.js", para subirlo damos click en la hojita con un más:


4. Seleccionamos el archivo común y corriente como cualquier otro después de que este suba daremos en "Hecho" y el archivo ya estará en DropBox, en la siguiente imagen resalté mi archivo y como ven tengo otros ya en uso:

5. Ahora damos clic sobre el archivo y nos saldrá una ventana con el código escrito, sin embargo necesitamos el enlace para ello en la parte superior está la opción compartir damos clic ahí:

6. Nos abrirá otra ventana que nos mostrará un cuadro en ese cuadro daremos clic en "Obtener enlace" luego de este tendremos un enlace de este tipo:


https://www.dropbox.com/s/8akd3vwjbxe15be/PRUEBA.js

MUCHA ATENCIÓN!.... Ahora ese enlace es el enlace público y que no ejecuta el script se vería así:

Para ponerlo como un Script en función y apto para usar en nuestro sitio cambiaremos las "www" por las letras "dl" quedando al final así:


https://dl.dropboxusercontent.com/s/8akd3vwjbxe15be/PRUEBA.js

Y este se visualizará de forma más simple el código en función listo para usar:

7. Para finalizar y que nuestro SCRIPT corra ya en nuestro plantilla queda citarlo con el siguiente código:


<script src='URL SCRIPT' type='text/javascript'/>


Si es para un .css utilizamos este método de relación:

<LINK href="URL CSS" rel="stylesheet" type="text/css">

Reemplazamos por la URL de función en el fragmento de código color azul y listo tenemos nuestro script o CSS citado.

Como dije antes esto funciona con varios tipos de archivos (Según su lenguaje) y el proceso es tal cual sin problema alguno, espero les sirva.

Hasta la próxima Bloggers,


viernes, 4 de julio de 2014

Saber cuantas personas están viendo mi blog en tiempo real - Contador de lectores on line

El saber cuantas personas están leyendo nuestro blog en tiempo real y simultaneamente es algo que nos ayuda a determinar un promedio de lectores a nuestro sitio, pero, para saber esto se necesita implementar un Script y agregarlo al blog, este Script cumpliendo como función:

- Contar en tiempo real cuántas personas están en el blog.
- Desde que países están leyendo el blog.
- Que posts están visitando en el momento y el promedio de tiempo.

Saber cuantas personas están viendo mi blog en tiempo real - Contador de lectores on line
Un ejemplo de este script gráficamente está en el Footer de este blog el cuál contabiliza quiénes están, para agregarlo usaré el sitio "Whos.amung.us" Sin embargo facilitaré el uso de los scripts para que no se confundan:

Para poner cualquiera de los contadores vamos Diseño | añadir un Gadget | HTML/JavaScript y pegan el código que elijan:

Contador Clásico:


CÓDIGO:
<script id="_wauwv3">var _wau = _wau || []; _wau.push(["classic", "fbbqzir033th", "wv3"]);
(function() {var s=document.createElement("script"); s.async=true;
s.src="http://widgets.amung.us/classic.js";
document.getElementsByTagName("head")[0].appendChild(s);
})();</script>

Contador pequeño: 


CÓDIGO:


<script id="_waur42">var _wau = _wau || []; _wau.push(["small", "fbbqzir033th", "r42"]);
(function() {var s=document.createElement("script"); s.async=true;
s.src="http://widgets.amung.us/small.js";
document.getElementsByTagName("head")[0].appendChild(s);
})();</script>
Contador de pestaña: (Ubicado lateralmente izquierda o derecha)

CÓDIGO:

<script id="_wauxkv">var _wau = _wau || [];
_wau.push(["tab", "fbbqzir033th", "xkv", "left-middle"]);
(function() {var s=document.createElement("script"); s.async=true;
s.src="http://widgets.amung.us/tab.js";
document.getElementsByTagName("head")[0].appendChild(s);
})();</script>

<script id="_wau1xt">var _wau = _wau || [];
_wau.push(["tab", "fbbqzir033th", "1xt", "right-middle"]);
(function() {var s=document.createElement("script"); s.async=true;
s.src="http://widgets.amung.us/tab.js";
document.getElementsByTagName("head")[0].appendChild(s);
})();</script>

Contador-Mapa: 
CÓDIGO:

<script id="_wauhil">var _wau = _wau || [];
_wau.push(["map", "fbbqzir033th", "hil", "420", "210", "natural", "star-blue"]);
(function() {var s=document.createElement("script"); s.async=true;
s.src="http://widgets.amung.us/map.js";
document.getElementsByTagName("head")[0].appendChild(s);
})();</script>
 
Como dije anteriormente algunos son más personalizables, como lo es el clásico que se puede cambiar de color y el mapa el cual habilita seleccionar otros mapas y la figurita que da el punto de ubicación esto en la web que di anteriormente.

Es todo por hoy, espero les sirva....

Hasta la próxima,

martes, 1 de julio de 2014

Como descargar e instalar WhatsApp para PC (2014)


En el post de hoy enseñaré como instalar y descargar WhatsApp para PC usando el emulador BluesStacksen unos sencillos pasos además les incluiré el vídeo en caso de que tengan alguna duda.


Lo primero será descargar Bluestacks este lo pueden tener:

CLICK AQUÍ PARA DESCARGAR

Una vez descargado lo ejecutamos en su estado normal como cualquier programa tendremos que esperar que este se actualice e inicie esto varia según las cracterísticas de su equipo:


Después sabremos que ya está listo para usar porque nos saldrá un menú muy parecido a los que hay en los teléfonos Android:


Nos vamos a donde dice "Search" y allí nos saldrá un pequeño buscador escribiremo "WhatsApp" y después daremos click donde dice "Search play for WhatsApp" :


Allí nos llevará a la PlayStore de Google y seleccionaremos la debida aplicación:


Instalamos la aplicación comúnmente como en un nuestro teléfono:


Al tenerla instalada vamos al escritorio de la aplicación y veremos el icono de WhatsApp lo abrimos y daremos en continuar:


El proceso será el miso poner el prefijo de nuestro país y el número de teléfono:


El primer intento se hará para confirmar por SMS pero como es al pc no será posible así que tendremos que esperar que pase dicho tiempo y luego le pediremos que nos de el código llamándonos al número escrito: 


Y listo para terminar sólo queda poner un nombre de usuario y foto ya tendremos WHATSAPP en nuestro equipo instalado y listo para los contactos al lado superior derecho está la barra de contactos recuerden que para que tengas los mismos deben tenerlos sincronizados:



Como ven es un tutorial muy breve espero les guste.
¿Aún no entiendes probemos
mirando el vídeo?

Tutorial WhatsApp para PC

lunes, 30 de junio de 2014

Descargar vídeos de youtube, Facebook en línea (Sin programas) en HD y otras resoluciones

Muchos de nosotros hemos buscado vídeos en You Tube tan a gusto que queremos descargarlos quizá esto para algunos sea fácil, pero, para otros no tanto, así que hoy les enseñaré como descargar vídeos de You Tube y facebook sin descargar programa alguno, esto lo lograremos directo desde nuestro navegador para ello haremos los siguientes pasos:

1. Lo primero será tener nuestro vídeo a descargar ya sea de You Tube o de Facebook  será el mismo proceso, en mi caso usaré este vídeo:

https://www.youtube.com/watch?v=MrLE0gDU3yE

2. Luego iremos a la siguiente página Web CLICK AQUÍ nos saldrá un sitio web similar a este:


3. Ahora pegaremos nuestra URL del vídeo en el espacio que se encuentra encerrado y daremos al lado en DOWNLOAD:



4. En la parte inferior desplegará los distintos formatos disponibles que tenemos para descargar nuestro vídeo para mi vídeo de you tube tengo las siguientes la que tiene la flecha es la que recomiendo que usen para descargar: 




5.En el paso final damos click sobre el enlace "Download MP4" y guardamos para iniciar descarga ó damos click derecho "Guardar enlace como" y allí se guardará en su formato mp4.

NOTA: Para los vídeos de Facebook como dije es lo mismo pero para saber que link debemos copiar, sólo lo hacemos tomando el que vemos cuando abrimos el vídeo ejemplo:

Es todo espero les sirva este breve tutorial... 

Hasta la próxima,

sábado, 28 de junio de 2014

Agregar o poner Slider de imágenes en blog de Blogger (Orbit Slider)

FRAGMENTOS TOMADOS GENTILMENTE DE CIUDADBLOGGER

El día de hoy les quiero compartir un Slider de imágenes preferiblemente, pero, claro este también lo pueden usar para sus publicaciones aunque ya no será automático como otros sino manual.

PARA VER UN DEMO DEL SLIDER FUNCIONANDO PUEDEN DAR CLICK EN DEMO:

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


Para incorporar este Slider en nuestro blog haremos los siguientes pasos:

1. Poner los Scripts para buscaremos en el código de la plantilla plantilla > Editar HTML la etiqueta </head>  y encima de esta copiamos lo siguiente: 

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

<!--[if IE]>
<style type="text/css">
.timer { display: none !important; }
div.caption { background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);zoom: 1; }
</style>
<![endif]-->

<script type='text/javascript'>
$(window).load(function() {
$(&#39;#featured&#39;).orbit({
advanceSpeed: 5000,
&#39;bullets&#39;: true,
&#39;timer&#39; : true,
&#39;animation&#39; : &#39;horizontal-slide&#39;
});
});
</script>

<script type='text/javascript'>
//<![CDATA[
/*
* jQuery Orbit Plugin 1.1
* www.ZURB.com/playground
* Copyright 2010, ZURB
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/

(function(e){e.fn.orbit=function(a){a=e.extend({animation:"fade",animationSpeed:800,advanceSpeed:4E3,startClockOnMouseOut:true,startClockOnMouseOutAfter:3E3,directionalNav:true,captions:true,captionAnimationSpeed:800,timer:false,bullets:false},a);return this.each(function(){function m(c){function g(){f.eq(h).css({"z-index":1});s=false}var h=b,k=c;if(h==k)return false;if(!s){s=true;if(c=="next"){b++;if(b==n)b=0}else if(c=="prev"){b--;if(b<0)b=n-1}else{b=c;if(h<b)k="next";else if(h>b)k="prev"}a.bullets&&
x();if(a.animation=="fade"){f.eq(h).css({"z-index":2});f.eq(b).css({opacity:0,"z-index":3}).animate({opacity:1},a.animationSpeed,g);a.captions&&o()}if(a.animation=="horizontal-slide"){f.eq(h).css({"z-index":2});k=="next"&&f.eq(b).css({left:t,"z-index":3}).animate({left:0},a.animationSpeed,g);k=="prev"&&f.eq(b).css({left:-t,"z-index":3}).animate({left:0},a.animationSpeed,g);a.captions&&o()}if(a.animation=="vertical-slide"){f.eq(h).css({"z-index":2});k=="prev"&&f.eq(b).css({top:u,"z-index":3}).animate({top:0},
a.animationSpeed,g);k=="next"&&f.eq(b).css({top:-u,"z-index":3}).animate({top:0},a.animationSpeed,g);a.captions&&o()}}}var b=0,n=0,t,u,s,d=e(this).addClass("orbit"),f=d.find("img, a img");f.each(function(){var c=e(this),g=c.width();c=c.height();d.width(g);t=d.width();d.height(c);u=d.height();n++});f.eq(b).css({"z-index":3});if(a.timer){d.append('<div class="timer"><span class="mask"><span class="rotator"></span></span><span class="pause"></span></div>');var j=e("div.timer"),p;if(j.length!=0){var C=
a.advanceSpeed/180,v=e("div.timer span.rotator"),y=e("div.timer span.mask"),z=e("div.timer span.pause"),l=0,A,w=function(){p=true;z.removeClass("active");A=setInterval(function(){var c="rotate("+l+"deg)";l+=2;v.css({"-webkit-transform":c,"-moz-transform":c,"-o-transform":c});if(l>180){v.addClass("move");y.addClass("move")}if(l>360){v.removeClass("move");y.removeClass("move");l=0;m("next")}},C)},q=function(){p=false;clearInterval(A);z.addClass("active")};w();j.click(function(){p?q():w()});if(a.startClockOnMouseOut){var B;
d.mouseleave(function(){B=setTimeout(function(){p||w()},a.startClockOnMouseOutAfter)});d.mouseenter(function(){clearTimeout(B)})}}}if(a.captions){d.append('<div class="caption"><span class="orbit-caption"></span></div>');var r=d.children("div.caption").children("span").addClass("orbit-caption").show(),o=function(){var c=f.eq(b).attr("rel"),g=e("#"+c).html(),h=r.height()+20;r.attr("id","#"+c).html(g);g?r.parent().stop().animate({bottom:0},a.captionAnimationSpeed):r.parent().stop().animate({bottom:-h},
a.captionAnimationSpeed)};o()}if(a.directionalNav){d.append('<div class="slider-nav"><span class="right">Right</span><span class="left">Left</span></div>');j=d.children("div.slider-nav").children("span.left");var D=d.children("div.slider-nav").children("span.right");j.click(function(){a.timer&&q();m("prev")});D.click(function(){a.timer&&q();m("next")})}if(a.bullets){d.append('<ul class="orbit-bullets"></ul>');var E=e("ul.orbit-bullets");for(i=0;i<n;i++){j=e("<li>"+i+"</li>");e("ul.orbit-bullets").append(j);
j.data("index",i);j.click(function(){a.timer&&q();m(e(this).data("index"))})}var x=function(){E.children("li").removeClass("active").eq(b).addClass("active")};x()}})}})(jQuery);
//]]>
</script>
Lo que está en azul representa la velocidad con la que cambiará cada imagen en el slide sólo se mmodifica a gusto de cada unon y estuvo.

2. Luego pegaremos los estilos CSS así que buscaremos este código  ]]></b:skin> arriba de este código pegamos lo siguiente:

/* ORBIT SLIDER
----------------------------------------------- */
#featured {height: 1px; width: 1px; overflow: hidden;}
div.orbit {
width: 1px;
height: 1px;
position: relative;
overflow: hidden;
}

div.orbit img {
position: absolute;
top: 0;
left: 0;
}
div.orbit a img {border: none;}

div.timer {
width: 40px;
height: 40px;
overflow: hidden;
position: absolute;
top: 10px;
right:10px;
opacity: .6;
cursor: pointer;
z-index: 1001;
}

span.rotator {
display: block;
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: -20px;
background: url(http://4.bp.blogspot.com/_dsEG33PDaHw/TMHhPl2pVcI/AAAAAAAAAas/O7A5Aa7ZMhs/s1600/rotator-black.png);
background-repeat: no-repeat;
z-index: 3;
}

span.mask {
display: block;
width: 20px;
height: 40px;
position: absolute;
top: 0;
right: 0;
z-index: 2;
overflow: hidden;
}

span.rotator.move {left: 0;}
span.mask.move {
width: 40px;
left: 0;
background: url(http://2.bp.blogspot.com/_dsEG33PDaHw/TMHhQItQqeI/AAAAAAAAAaw/afLXhP0yQI8/s1600/timer-black.png);
background-repeat: repeat;
background-position: 0px 0px;
}

span.pause {
display: block;
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: 0px;
background-image: url(http://3.bp.blogspot.com/_dsEG33PDaHw/TMHhPCHG1JI/AAAAAAAAAak/EiGTzJCfL1c/s1600/pause-black.png);
background-repeat: no-repeat;
z-index: 4;
opacity: 0;
}

div.timer:hover span.pause,
span.pause.active,
div.timer:hover span.pause.active { opacity: 1; }

div.caption {
background: #000;
background: rgba(0,0,0,.6);
width: 100%;
z-index: 1000;
position: absolute;
bottom:-100px;
color: #fff;
padding: 8px 0;
text-align: center;
}

div.caption span {
padding: 0 10px;
font-size: 14px;
text-shadow: 0px 1px 0px rgba(0,0,0,.8);
margin: 0;
}
.orbit-caption { display: none; }

div.orbit:hover div.slider-nav { display: block; }
div.slider-nav { display: none; }
div.slider-nav span {
width: 33px;
height: 33px;
text-indent: -9999px;
position: absolute;
z-index: 1000;
top: 43%;
cursor: pointer;
}

div.slider-nav span.right {
background-image: url(http://3.bp.blogspot.com/_dsEG33PDaHw/TMHhPefIDjI/AAAAAAAAAao/Gyy0k0F5Hzw/s1600/right-arrow.png);
right: 10px;
}
div.slider-nav span.left {
background-image: url(http://3.bp.blogspot.com/_dsEG33PDaHw/TMHhNd07EPI/AAAAAAAAAaY/_k9SqP88gV8/s1600/left-arrow.png);
left: 10px;
}

.orbit-bullets {
position: absolute;
z-index: 1000;
list-style: none;
top: 10px;
left: 7px;
margin: 0;
padding: 0;
}

.orbit-bullets li {
float: left;
margin-left: 5px;
cursor: pointer;
color: #999;
text-indent: -9999px;
background-image: url(http://4.bp.blogspot.com/_dsEG33PDaHw/TMHhLtWyUXI/AAAAAAAAAaU/8MQ8LP5flS8/s1600/bullets.png);
background-repeat: no-repeat;
background-position: 0 0;
width: 7px;
height: 7px;
overflow: hidden;
}

.orbit-bullets li.active { color: #222; background-position: -7px 0; }

3. Como último paso el HTML del Slide para visualizar las imágenes para esto iremos a Diseño | Añadir un gadget | HTML/JavaScript y pegamos lo siguiente:

 <div id='featured'>
<a href='URL del enlace'><img rel='foto1' src="URL de la imagen" style='width:490px; height:238px;'/></a>
<span class='orbit-caption' id='foto1'>DESCRIPCIÓN</span>

<a href="URL del enlace"><img rel='foto2' src="URL de la imagen" style='width:490px; height:238px;'/></a>
<span class='orbit-caption' id='foto2'>DESCRIPCIÓN<a href='URL del enlace' style='color: #fff';'>DESCRIPCIONN MAS ENLACE</a></span>

<a href="URL del enlace"><img rel='foto3' src="URL de la imagen" style='width:490px; height:238px;'/></a>
<span class='orbit-caption' id='foto3' style='text-align:center;'>DESCRIPCIÓN</span>

<a href='URL del enlace'><img rel='foto4' src="URL de la imagen" style='width:490px; height:238px;'/></a>
<span class='orbit-caption' id='foto4'>Este es un ejemplo de la descripción con enlaces: <a href='URL del enlace' style='color: #fff';'>DESCRIPCIÓN</a></span>
</div>

Bien lo último es lo que lleva las imágenes para saber donde ubicarlas modificaremos lo que dice URL de la imagen por su link es lo que está en color rojo.

Lo que está en color Verde claro hace referencia a las descripciones que llevaría cada imagen sino la desean poner solo dejan el espacio vacío.

Lo que está en color Naranja son los enlaces o URL a los que llevaría al dar click sobre la imagen o la palabra de la descripción tan solo se reemplazan y ya.

Es todo por hoy cualquier duda que tengan con el post no olviden comentar y les ayudaré..

Hasta la próxima...

SÍGUENOS EN: