Registro

sábado, 23 de junio de 2018

FutureTalker Ronda de pagos que suman 23,91€


FutureTalker Ronda de pagos que suma 23,91€. Hola amigos, aquí os dejo una ronda de pagos que hace un total de 23,91€ en FutureTalkers y fue cobrado por mi procesador de pagos Paypal. Es una pagina de hacer Encuesta que vale para Todo el Mundo. Antes tenia link de referidos, que sigue estando para los que mas tiempo llevan. Para los nuevos, aunque ya no pueden invitar, si pueden ganar dinero gratis por dar su opinión.

Si deseas obtener mas información de FutureTalkers, pincha Aquí >>



FutureTalker Ronda de pagos que suman 23,91€ "Comprobantes de pagos"










FutureTalker Ronda de pagos que suman 23,91€ "Vídeo" Próximamente








Registrate Gratis en FutureTalkers!!!

 Ir a FutureTalkers



★★★ Enhorabuena ★★★

Utiliza la Herramienta Derrota la Crisis Afiliados para comenzar a conseguir referidos de FutureTalkers por medio de Post explicativos, vídeos y comprobantes de pago. 
Mas información >>






¿Que te ha parecido este artículo? Me encantaría saber tu opinión y para eso tienes la sección de comentarios un poco mas abajo para que te expreses siempre en el margen del respeto y asín dejar un comentario positivo como también uno negativo en el cual podamos debatirlo de forma amigable. Saludos amigos y a seguir ganando dinero por Internet !!



Sígueme en mis Redes Sociales!!!







 


Leer más...

domingo, 17 de junio de 2018

Agregar un Slider muy fácil en Blogger


Agregar un Slider muy fácil en Blogger. Hola amigos, hoy seguimos con el paso numero 6 de como crear un Blog gratuito y esta vez les enseñare como poner un Slider con distintas imágenes. Colocar un Slider en nuestro Blog es muy importante, ya que, le da mas profesionalidad y poner en el los negocios mas importante que queramos que la gente conozcan. Así que simplemente copiando el código que les dejo mas abajo y lo ponen como un Gadget normal, tendrá su Slider para colocarle las imágenes.


Los pasos que realizaremos serán los siguientes:

Vamos a Tema >> Editar HTML. Una vez dentro damos clic en cualquier sitio en blanco donde estén los códigos y damos al teclado Ctrl+F. En el buscador que sale ponemos </head>. Una vez encontrado, pegamos antes de </head>, el siguiente código:


<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>
Una vez echo, buscamos ]]></b:skin> y pegamos antes el siguiente código:

/* 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; }

Una vez echo los pasos anteriores, le damos a Guardar Tema.
Ahora vamos a Diseño >> Agregar un Gadget >> HTML/JavaScript. Luego colocaremos el siguiente código:

<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'>texto en el slider 1.</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'> texto en el slider 2.</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;'> texto en el slider 3.</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'> texto en el slider 4.</span> </div>

El número que les dejo arriba AdvanceSpeed: 5000 en azul, es la velocidad con la que pasan las imágenes del Slider. Cuanto mayor sea el numero, mas lentas pasaran.
Donde pone texto en el slider que os dejo en lila, es lo que debemos poner para que salga debajo de cada imagen en el slider.
Donde aparece el texto de color rojo, debemos colocar la url en donde queremos llevar a nuestros visitantes cuando den clic en las imágenes.
Donde aparece el texto de color verde. debemos colocar la url de la imágen.





Importante: Una vez que coloquemos el código y guardemos el gadget, debemos arrastrarlo arriba de las Entradas del blog. De lo contrario no se les verá bien.



Agregar un Slider muy fácil en Blogger "Vídeo"









¿Que te ha parecido este artículo? Me encantaría saber tu opinión y para eso tienes la sección de comentarios un poco mas abajo para que te expreses siempre en el margen del respeto y asín dejar un comentario positivo como también uno negativo en el cual podamos debatirlo de forma amigable. Saludos amigos y a seguir ganando dinero por Internet !!



Sígueme en mis Redes Sociales!!!







 


Leer más...

jueves, 14 de junio de 2018

CoinBulb Dos Nuevos Comprobantes de Pago


CoinBulb Dos Nuevos Comprobantes de Pago. Hola amigos, hoy les traigo dos nuevos pagos de CoinBulb, una pagina que por ver una serie de anuncios nos van a pagar Satoshis. Los pagos fueron de 36175 Satoshis cada uno, que en total hace 72350 Satoshis que fueron cobrados por el procesador Coinbase

Sin mas que decir amigos, os dejo los comprobantes de pago mas abajo para que le echéis un vistazo.



CoinBulb Dos Nuevos Comprobantes de Pago "Comprobantes de Pago"









CoinBulb Dos Nuevos Comprobantes de Pago "Vídeo" Próximamente








Registrate Gratis en CoinBulb!!!

 Ir a CoinBulb


★★★ Enhorabuena ★★★

Utiliza la Herramienta Derrota la Crisis Afiliados para comenzar a conseguir referidos de CoinBulb por medio de Post explicativos, vídeos y comprobantes de pago. 
Mas información >>





¿Que te ha parecido este artículo? Me encantaría saber tu opinión y para eso tienes la sección de comentarios un poco mas abajo para que te expreses siempre en el margen del respeto y asín dejar un comentario positivo como también uno negativo en el cual podamos debatirlo de forma amigable. Saludos amigos y a seguir ganando dinero por Internet !!



Sígueme en mis Redes Sociales!!!







 


Leer más...

miércoles, 13 de junio de 2018

Dividir Cabecera de Blogger y Colocar Menú Superior


Dividir Cabecera de Blogger y Colocar Menú Superior. Hola amigos, hoy estamos en nuestro quinto paso para crear nuestro Blog gratuito y lo que vamos a ver en este paso es como dividir la cabecera de nuestro Blog para poner algún banner de publicidad y como colocar un menú superior para colocar mas categorías.



Dividir Cabecera de Blogger

Vamos a Tema >> HTML. Luego damos Clic en cualquier espacio en blanco donde están los códigos y damos Ctrl+F del teclado para que nos aparezca el buscador. En el buscador pondremos /* Header y daremos Enter.

Ahora lo que haremos sera pegar debajo de esta linea.

/* Header
----------------------------------------------- */


Lo siguiente:

.header {width:48%; float: left; margin:0 auto 1%;}
.header2 {width:47%; float: right; margin:0 auto 1%;}




Luego buscaremos el siguiente código y agregamos lo que esta en color azul.

<div class='region-inner header-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Título del blog (cabecera)' type='Header'/>
</b:section>
<b:section class='header2' id='header2' showaddelement='yes'/>
<div style='clear: both;'/>
</div>



Ahora guardamos y ya deberíamos tener la cabecera dividida para poder colocar nuestro Banner.



Colocar Menú Superior

Para poder colocar nuestro menu superior lo primero que vamos hacer es ir a Tema >> HTML >> Ctrl+F y en el buscador colocaremos la siguiente linea <b:section class='header' id='header' 


Lo que nos interesa es la linea que dice:



<b:section class='header' id='header' maxwidgets='1' name='Header' showaddelement='no'>


Lo que haremos sera dejar:

maxwidgets=2
showaddelement='yes'


Luego guardamos Tema.


Ahora vamos a Diseño >> Agregar un Gadget >> Texto

Ahí colocaremos el nombre que le daremos a las siguiente secciones y para realizar las separaciones les recomiendo realizarlas con ............ y ocultar los puntos con color blanco.





Dividir Cabecera de Blogger y Colocar Menú Superior "Vídeo"








¿Que te ha parecido este artículo? Me encantaría saber tu opinión y para eso tienes la sección de comentarios un poco mas abajo para que te expreses siempre en el margen del respeto y asín dejar un comentario positivo como también uno negativo en el cual podamos debatirlo de forma amigable. Saludos amigos y a seguir ganando dinero por Internet !!



Sígueme en mis Redes Sociales!!!







 


Leer más...

domingo, 10 de junio de 2018

FreeDogecoin Quinto Comprobante de pago por CoinPayment


FreeDogecoin Quinto Comprobante de pago por CoinPayment. Hola amigos, aquí les traigo mi quinto pago de FreeDogecoin, una pagina que vamos a ganar Doges gratis cada 60 minutos rellenando solamente una Captcha. El pago fue solicitado por mi procesador de pago de Criptomonedas CoinPayment y me  llego en poco minutos.

Esta pagina es hermana de FreeBitcoin, pero en vez de ganar Bitcoin, ganamos Dogecoin, es otro tipo de Criptomonedas.



FreeDogecoin Quinto Comprobante de pago por CoinPayment "Comprobante de pago"







FreeDogecoin Quinto Comprobante de pago por CoinPayment "Vídeo" 







Registrate Gratis en FreeDogecoin!!!

Ir a FreeDogecoin



★★★ Enhorabuena ★★★

Utiliza la Herramienta Derrota la Crisis Afiliados para comenzar a conseguir referidos de FreeDogecoin por medio de Post explicativos, vídeos y comprobantes de pago. 
Mas información >>



¿Que te ha parecido este artículo? Me encantaría saber tu opinión y para eso tienes la sección de comentarios un poco mas abajo para que te expreses siempre en el margen del respeto y asín dejar un comentario positivo como también uno negativo en el cual podamos debatirlo de forma amigable. Saludos amigos y a seguir ganando dinero por Internet !!



Sígueme en mis Redes Sociales!!!







 


Leer más...

Personalizar Menú Horizontal en Blogger


Personalizar Menú Horizontal en Blogger. Hola amigos, aquí tenéis el cuarto paso para crear un Blog gratis y en este post os enseño como personalizar nuestro menú horizontal, el cual dejamos instalado en el paso anterior. Realizaremos varias cositas para que sepan como editarlo al 100%.



Para poner los colores es importante hacerlo en formato HTML. Si van a esta pagina, pueden encontrar distintos colores.

Lo que vamos a realizar sera lo siguiente:

Editar los colores de fondo del menú horizontal, las pestañas normales, subpestañas, fuentes, etc. Todo esto lo explicare en el vídeo que os dejo mas abajo.

Lo siguiente que les enseñare sera agregar pestañas a nuestro menú.


Para agregar una pestaña simple:

<li class='top'><a class='top_link' href='URL'><span>Pestaña 1</span></a></li>



Para agregar una pestaña con subpestaña:

<li class='top'><a class='top_link' href='URL'><span class='down'>Pestaña 1</span></a>
<ul class='sub'>
<li><a href='URL'>Pestaña 1.1</a></li>
</ul>
</li>




Para agregar una pestaña que tenga otra subpestaña:

<li class='top'><a class='top_link' href='URL'><span class='down'>Pestaña 1</span></a>
<ul class='sub'>
<li><a href="URL" class="fly">Pestaña 1.1</a>
<ul>
<li><a href="URL">Pestaña 1.1.1</a></li>
</ul>
</li>
</ul>
</li>





Personalizar Menú Horizontal en Blogger "Vídeo" 






¿Que te ha parecido este artículo? Me encantaría saber tu opinión y para eso tienes la sección de comentarios un poco mas abajo para que te expreses siempre en el margen del respeto y asín dejar un comentario positivo como también uno negativo en el cual podamos debatirlo de forma amigable. Saludos amigos y a seguir ganando dinero por Internet !!



Sígueme en mis Redes Sociales!!!







 


Leer más...

jueves, 7 de junio de 2018

Colocar Menú Horizontal Despegable con Subpestañas


Colocar Menú Horizontal Despegable con Subpestañas. Hola amigos, hoy vamos con el tercer paso para crear el Blog de Trabaja Desde Casa y lo que haremos en esta ocación sera insertar nuestro menú principal con sus pestañas y subpestañas. También cambiaremos los colores de la barra, el tamaño, etc.



Lo primero que haremos es ir a Tema >> Editar HTML. Luego damos clic en cualquier lugar donde están los códigos y damos en el teclado a Ctrl+F. En el buscador colocamos  <b:section class=  y damos al Intro. Damos Intro hasta que aparezca la siguiente linea.

<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>

Eliminamos lo que está en color rojo. Es posible que encontremos muchas partes como las que están en color rojo, así que eliminamos todas las que encontremos.

Luego buscaremos el siguiente código /* Tabs.
Posteriormente borraremos todo lo que se encuentre entre /* Tabs y /* Headings y en su lugar pegaremos lo siguiente:


#crosscol ul {z-index: 200; padding:0 !important;}
#crosscol li:hover {position:relative;}
#crosscol ul li {padding:0 !important;}
.tabs-outer {z-index:1;}



Luego  dentro del buscador colocamos ]]></b:skin> y damos Intro.

Luego de haber encontrado el código anterior, lo que haremos será pegar el código completo que les dejaré a continuación antes de ]]></b:skin>.

/* Menu horizontal con buscador
----------------------------------------------- */
#menuWrapper {
width:100%; /* Ancho del menú */
height:35px;
padding-left:14px;
background:#333; /* Color de fondo */
border-radius:20px; /* Bordes redondeados de la barra principal */
}
.menu {
padding:0;
margin:0;
list-style:none;
height:35px;
position:relative;
z-index:99;
font-family:arial, verdana, sans-serif;
}
.menu li:hover li a {
background:none;
}
.menu li.top {display:block; float:left;}
.menu li a.top_link {
display:block;
float:left;
height:35px;
line-height:34px;
color:#ccc;
text-decoration:none;
font-family:"Lucida Sans Unicode", "Trebuchet Unicode MS", "Lucida Grande",sans-serif;
font-size:13px; /* Tamaño de la fuente */
font-weight:bold;
padding:0 0 0 12px;
cursor:pointer;
}
.menu li a.top_link span {
float:left;
display:block;
padding:0 24px 0 12px;
height:35px;
}
.menu li a.top_link span.down {
float:left;
display:block;
padding:0 24px 0 12px;
height:35px;
}
.menu li a.top_link:hover, .menu li:hover > a.top_link {color:#fff; }
.menu li:hover {position:relative; z-index:2;}
.menu ul, 
.menu li:hover ul ul,
.menu li:hover ul li:hover ul ul,
.menu li:hover ul li:hover ul li:hover ul ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

.menu li:hover ul.sub {
left:0;
top:35px;
background:#333; /* Color de fondo del submenú */
padding:3px;
white-space:nowrap;
width:200px;
height:auto;
z-index:99;
}
.menu li:hover ul.sub li {
display:block;
height:30px;
position:relative;
float:left;
width:200px;
font-weight:normal;
}
.menu li:hover ul.sub li a{
display:block;
height:30px;
width:200px;
line-height:30px;
text-indent:5px;
color:#ccc;
text-decoration:none;
}
.menu li ul.sub li a.fly {
/* Color de fondo del submenú */
background:#333 url(https://lh4.googleusercontent.com/_dsEG33PDaHw/TZ0rcSPpqlI/AAAAAAAABSc/RseHiYluzAM/arrow_over.gif) 185px 10px no-repeat;}
.menu li:hover ul.sub li a:hover {
background:#2580a2; /* Color de fondo al pasar el cursor */
color:#fff;
}
.menu li:hover ul.sub li a.fly:hover, .menu li:hover ul li:hover > a.fly {
/* Color de fondo al pasar el cursor */
background:#2580a2 url(https://lh4.googleusercontent.com/_dsEG33PDaHw/TZ0rcSPpqlI/AAAAAAAABSc/RseHiYluzAM/arrow_over.gif) 185px 10px no-repeat; color:#fff;}

.menu li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul {
left:200px;
top:-4px;
background: #333; /* Color de fondo del submenú */
padding:3px;
white-space:nowrap;
width:200px;
z-index:99;
height:auto;
}
#search { 
width: 228px; /* Ancho del buscador */
height: 22px;
float: right;
text-align: center;
margin-top: 6px;
margin-right: 6px;
/* Imagen de fondo del buscador */
background: url(http://4.bp.blogspot.com/_qgZA1ny_dAs/Szuhn02zO6I/AAAAAAAADdI/u2etpRWlwF8/s1600/search-bar.png) no-repeat;
}
#search-box {
margin-top: 3px;
border:0px;
background: transparent;
text-align:center;
}

Copiado todo el código anterior, daremos clic en Guardar Tema.


Ahora iremos a Diseño >> Agregar un Gadget >> HTML/JavaScript copiamos el siguiente código que les dejo. 

<div id='menuWrapper'>
<ul class='menu'>
<li class='top'><a class='top_link' href='URL del enlace'><span>Pestaña 1</span></a></li>

<li class='top'><a class='top_link' href='#'><span class='down'>Pestaña 2</span></a><ul class='sub'><li><a class='fly' href='#'>Pestaña 2.1</a><ul>
<li><a href='URL del enlace'>Pestaña 2.1.1</a></li>
<li><a href='URL del enlace'>Pestaña 2.1.2</a></li>
<li><a href='URL del enlace'>Pestaña 2.1.3</a></li>
</ul>
</li>
<li class='mid'><a class='fly' href='#'>Pestaña 2.2</a>
<ul>
<li><a href='URL del enlace'>Pestaña 2.2.1</a></li>
<li><a href='URL del enlace'>Pestaña 2.2.2</a></li>
<li><a href='URL del enlace'>Pestaña 2.2.3</a></li>
<li><a class='fly' href='#'>Pestaña 2.2.4</a>
<ul>
<li><a href='URL del enlace'>Pestaña 2.2.4.1</a></li>
<li><a href='URL del enlace'>Pestaña 2.2.4.2</a></li>
<li><a href='URL del enlace'>Pestaña 2.2.4.3</a></li>
</ul>
</li>
<li><a href='URL del enlace'>Pestaña 2.2.5</a></li>
<li><a class='fly' href='#'>Pestaña 2.2.6</a>
<ul>
<li><a href='URL del enlace'>Pestaña 2.2.6.1</a></li>
<li><a href='URL del enlace'>Pestaña 2.2.6.2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='URL del enlace'>Pestaña 2.3</a></li>
<li><a href='URL del enlace'>Pestaña 2.4</a></li>
<li><a href='URL del enlace'>Pestaña 2.5</a></li>
</ul>
</li>

<li class='top'><a class='top_link' href='#'><span class='down'>Pestaña 3</span></a>
<ul class='sub'>
<li><a href='URL del enlace'>Pestaña 3.1</a></li>
<li><a href='URL del enlace'>Pestaña 3.2</a></li>
<li><a href='URL del enlace'>Pestaña 3.3</a></li>
<li><a href='URL del enlace'>Pestaña 3.4</a></li>
</ul>
</li>

<li class='top'><a class='top_link' href='#'><span class='down'>Pestaña 4</span></a>
<ul class='sub'>
<li><a href='URL del enlace'>Pestaña 4.1</a></li>
<li><a class='fly' href='#'>Pestaña 4.2</a>
<ul>
<li><a href='URL del enlace'>Pestaña 4.2.1</a></li>
<li><a href='URL del enlace'>Pestaña 4.2.2</a></li>
<li><a href='URL del enlace'>Pestaña 4.2.3</a></li>
<li><a href='URL del enlace'>Pestaña 4.2.4</a></li>
<li><a href='URL del enlace'>Pestaña 4.2.5</a></li>
<li><a href='URL del enlace'>Pestaña 4.2.6</a></li>
</ul>
</li>
<li><a href='URL del enlace'>Pestaña 4.3</a></li>
<li><a href='URL del enlace'>Pestaña 4.4</a></li>
<li><a href='URL del enlace'>Pestaña 4.5</a></li>
<li><a href='URL del enlace'>Pestaña 4.6</a></li>
</ul>
</li>

<li class='top'><a class='top_link' href='#'><span class='down'>Pestaña 5</span></a>
<ul class='sub'>
<li><a href='URL del enlace'>Pestaña 5.1</a></li>
<li><a href='URL del enlace'>Pestaña 5.2</a></li>
<li><a href='URL del enlace'>Pestaña 5.3</a></li>
</ul>
</li>


<!-- Buscador -->
<li>
<form action='/search' id='search' method='get' name='searchForm' style='display:inline;'> 
<input id='search-box' name='q' onblur='if (this.value == &quot;&quot;) this.value = &quot;Buscar...&quot;;' onfocus='if (this.value == &quot;Buscar...&quot;) this.value = &quot;&quot;;' size='28' type='text' value='Buscar...'/></form>
</li>

</ul>
</div>



Colocar Menú Horizontal Despegable con Subpestañas "Vídeo" Próximamente








¿Que te ha parecido este artículo? Me encantaría saber tu opinión y para eso tienes la sección de comentarios un poco mas abajo para que te expreses siempre en el margen del respeto y asín dejar un comentario positivo como también uno negativo en el cual podamos debatirlo de forma amigable. Saludos amigos y a seguir ganando dinero por Internet !!



Sígueme en mis Redes Sociales!!!







 


Leer más...