MENU

viernes, 31 de enero de 2014

RecuvaPortable 2022

Recuva  2022
 Portable Recupera archivos borrados por error

Nueva versión de este software de recuperación de archivos borrados

¿Has borrado accidentalmente un archivo valioso? No desesperes. Existen decenas de utilidades, muchas de ellas gratuitas, que permiten localizar y recuperar este tipo de datos.

Recuva es una de las más completas y efectivas. Permite recuperar hasta los archivos que han sido eliminados de la papelera de reciclaje o de dispositivos externos como una memoria USB o un reproductor MP3. Su efectividad alcanza también a los ficheros que hayan sido eliminados por un virus o por errores del sistema, detectándolos y permitiendo recuperarlos al instante.

Su funcionamiento es muy sencillo. Viene con un asistente que nos pregunta el tipo de archivo que estamos buscando y dónde estaba localizado antes de desaparecer, existiendo la posibilidad de decirle en ambos casos que no lo tenemos claro.

Una vez respondidas las preguntas, Recuva realiza un análisis exhaustivo y nos ofrece todos los archivos eliminados recientemente que responden a la descripción, incluyendo previsualizaciones en miniatura en el caso de imágenes. Si seleccionamos y le damos al botón de recuperar, el archivo regresa automáticamente a la ubicación de la que no tendría que haber desaparecido jamás.





Comodo IceDragon 65.0.2.15

Comodo IceDragon es un navegador de Internet rápido y versátil basado en Mozilla Firefox que cuenta con varias mejoras en seguridad, rendimiento y funciones. Totalmente compatible con Firefox plug-ins y Comodo IceDragon 65.0.2.15 [La seguridad de Comodo Dragon unida a la versatilidad de Firefox]


Comodo IceDragon es un navegador de Internet rápido y versátil basado en Mozilla Firefox que cuenta con varias mejoras en seguridad, rendimiento y funciones. Totalmente compatible con Firefox plug-ins y
extensiones, IceDragon combina la libertad y la funcionalidad de Firefox con la seguridad y la privacidad sin precedentes de Comodo.

SiteInspector tecnología de escaneo de malware

SiteInspector característica de enlace de escaneo le permite comprobar si una página web es malicioso antes de que usted visite esa página. Para escanear una página que parece sospechoso a usted, simplemente haga clic en el enlace a esa página y haga clic en "Enlace Scan '. Como alternativa, el botón SiteInspector en la esquina superior de IceDragon permite escanear instantáneamente la página que está viendo para averiguar si contiene virus u otro malware. Cuando la exploración haya terminado, podrás ver un desglose detallado de la seguridad del sitio, los detalles de registro de dominio, los contactos administrativos y una historia de las exploraciones de malware anteriores sobre ese sitio web.
Secure servicio DNS

IceDragon usuarios también tienen la opción de utilizar Comodo System nombres de dominio (DNS), de forma gratuita. Si lo hace, trae consigo varias ventajas, entre ellas:

La páginas se cargan más rápido - Comodo opera una red de servidores DNS totalmente redundantes situados en ubicaciones óptimas de todo el mundo. Esto significa que sus peticiones de páginas web siempre se resuelven por los DNS de alto rendimiento Cluster cercana a usted. ¿El resultado? Sitios web se cargan más rápido que si usted continúa usando el servidor DNS proporcionada por su ISP (que comparte con todos sus otros clientes).
Una experiencia de Internet más segura - SecureDNS ayuda a los usuarios a mantenerse seguros en línea con su función de dominio malicioso filtrado. Referencias SecureDNS un bloqueo en tiempo real de lista (RBL) de los sitios web dañinos. Estos incluyen sitios de phishing, sitios de malware, spyware, sitios y dominios aparcados que contengan publicidad excesiva. Se le advierte cuando se intenta acceder a un sitio que contiene dicho contenido potencialmente mortal. Nuestra infraestructura altamente segura también reduce su exposición a ataques de envenenamiento de DNS.

Integración social media

Encontró una página interesante o video? Dedicado IceDragon del botón de medios sociales hace que sea fácil de compartir instantáneamente su web-se encuentra con tus perfiles de Facebook, Twitter o LinkedIn amigos.


Privacidad y mejoras de rendimiento

IceDragon cuenta con varios ajustes a la versión de núcleo de Firefox para mejorar la seguridad y el rendimiento. Estos incluyen la eliminación de informe de errores y presentación de datos de rendimiento, la eliminación del servicio de fragmentos, un módulo de actualización de nuevo todo y otros muchos bajo el capó mejoras. Creemos que esto hace IceDragon la versión más rápida y segura de Firefox alrededor.
Diseñado pensando en usted

La interfaz IceDragon no sólo se ven bien - es el resultado de miles de horas de pruebas de usabilidad que han llevado a conseguir un navegador rápido y seguro.




* Nota: el lenguaje español, se selecciona desde Herramientas/Opciones, y se aplica como un pluggin mediante descarga.




jueves, 23 de enero de 2014

MEGADOWNLOADER ESPAÑOL + PORTABLE GESTOR DE DESCARGA DEL NUEVO MEGA

¿Que es MegaDownloader?

MegaDownloader es un cliente de descarga de ficheros de MEGA.CO.NZ, que te permite descargar fácilmente ficheros de MEGA.CO.NZ
¿Es una aplicación oficial?
No, es una aplicación independiente y no oficial. Su uso es gratuito y no se cobra NADA por usarlo o descargarlo.
¿Que características tiene MegaDownloader?
Rápido: Permite descargar varios ficheros a la vez con varias conexiones por fichero, aprovechando al máximo el ancho de banda.
Ligero: Pesa menos de 2MB y consume pocos recursos. No requiere instalación, es un solo exe. No crea archivos temporales gigantes. Tan solo usa un pequeño buffer en memoria y guarda en disco el fichero directamente.
Seguro: Sin publicidad, banners, adds, ni nada. No recopila información de ningún tipo. Tan solo se conecta a MEGA.CO.NZ para bajarse los ficheros, y comprueba periodicamente si hay actualizaciones. Nada más. Y la información interna sensible para funcionar se guarda cifrada localmente usando DPAPI y AES.
Sencillo: Su interfaz es simple de usar: añade links y empieza a descargar. Punto.
Completo: Permite pausar, detener y reanudar la descarga de ficheros, encolar los ficheros a bajar, agruparlos por paquetes, descomprimir automáticamente los ficheros comprimidos, ver los videos en streaming, detecta automáticamente los links de MEGA.CO.NZ del portapapeles, permite limitar la velocidad de bajada, es multilingüe, se puede controlar desde el móvil/de forma remota con su servidor web integrado, se puede configurar para iniciarse automáticamente o apagar el PC cuando termine, en caso de error se puede configurar para que se reconecte, etc etc.

¿Que requisitos tiene?
Debes usar Windows XP SP3 o superior (Vista, Windows 7, Windows 8, etc) y tener instalado .NET 4.0 o superior.
También funciona en MAC con Parallels, teniendo en cuenta que debes instalar .NET 4.0 o superior.

¿Como descifra los ficheros de MEGA.CO.NZ?
Los descifra al vuelo, a medida que los baja, de forma que no consume recursos extra de espacio en RAM o disco.

¿Como comienzo a descargar?
En primer lugar debes iniciar el programa y esperar que cargue.
Luego tendrás que añadir enlaces para descargar.
Para ello puedes darle al botón “Agregar enlaces”. Si los copias en el portapapeles, lo detectará automáticamente. Agrega uno o varios enlaces y ponlos en la cola. Una vez en la cola, debes revisar el estado:
- Parado: No hay conexiones abiertas ni hay nada bajando.
- Descargando: Los elementos de la cola se van bajando en el orden establecido.
- Pausado: Las conexiones están abiertas pero sin descargar, cuando vuelva al estado ‘Descargando’ comenzará inmediatamente a descargar.

¿Como configuro el programa? ¡¡Salen muchas opciones!!
Puedes usar la configuración por defecto, sin tocar nada, para empezar a descargar. Cuando salga la pantalla de configuración, dale a Aceptar, y listo.
La única opción que tendrás que mirar un poco es la ruta de descarga por defecto (donde se guardarán los ficheros). Por defecto es en el Escritorio de Windows. Si no especificas ruta por defecto, tendrás que especificarla cada vez que te bajes algo.



¿Como puedo ver el tiempo restante de descarga?
Por defecto algunas columnas no se muestran. Haz click derecho en la cabecera de columnas del listado de descargas y selecciona las columnas a mostrar u ocultar.

¡No puedo cambiar el tamaño de la columna de nombre!
Esta columna se redimensiona automáticamente según el tamaño del resto de columnas. Por tanto debes modificar las otras columnas para cambiar el tamaño de la columna de nombre. Esto se hace así para evitar un scroll horizontal.

"]¿Como puedo traducir la aplicación a otro idioma?
En breve haré un tutorial más completo. Básicamente es crear un nuevo fichero dentro de la ruta de configuración, en el directorio Language, copiando otro fichero (se recomienda como base usar en-US.xml). Debes poner el código de idioma con el formato ISO 639 + ISO 3166. Luego editas el XML y cambias, en primer lugar, el código y nombre del idioma, y luego las traducciones (manteniendo el atributo id de cada nodo). Listo!
La próxima vez que inicies el programa, podrás cambiar el idioma desde la configuración (siempre y cuando el código de idioma sea correcto y exista).

¿Como puedo ver videos en streaming?
En este tutorial te explicamos como hacerlo: Ver videos online - Tutorial de streaming de MEGA

¿Como puedo configurar y usar el servidor web?
En breve haré un tutorial sobre esta funcionalidad.

¿Que es esta opción “Codificar enlaces”? ¿Y que es un “ELC”?
En este artículo (en inglés) se explica con más detalle: “Explaining mega:// links“.


v0.81 BETA - 24/04/2013




S.O: Windows XP/Windows Vista/Windows 7/ Windows 8
IDIOMA: MULTI-ESPAÑOL
MEDICINA INCLUIDA: FREEWARE
FECHA DE SALIDA: 24.04.2013








jueves, 16 de enero de 2014

IMAGENES CON ZOOM EN BLOGGER

En esta oportunidad les compartire un gran truco en el cual las imagenes del blog quedan con un genial efecto zoom al pasar el cursor sobre ellas, este genial truco se logra mediante CSS.

Aqui puedes ver una vista previa del truco.


Para agregar este truco pega el siguiente CSS antes de ]]></b:skin> :
/* Contenedor general y reset de margin y padding */
.expandir * {
margin: 0;
padding: 0;
}
.expandir {
font-family:Arial, Helvetica, sans-serif;
line-height:normal;
margin:20px auto 30px;
height:80px;
width:530px;
}
/* Las imágenes irán en forma de lista */
.expandir ul {
padding-top:10px;
margin-left:10px;
}
/* Se hacen flotar los elementos para que queden en línea y se elimina el estilo que podría haber predefinido para listas */
.expandir ul li {
float:left;
list-style-type:none;
}
/* Anulamos estilo predifinido para enlaces en listas */
.expandir ul li a {
text-decoration:none;
}
/* Estilo de cada imagen en situación inicial y transición suave */
.expandir ul li a img {
width:32px; /* Ancho inicial imagénes. 50% real */
height:32px; /* Alto inicial imagénes. 50% real */
border:none;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
-o-transition: all .3s ease-in;
-ms-transition: all .3s ease-in;
transition: all .3s ease-in;
}
/* El texto que acompaña a las imágenes no se ve inicialmente */
.expandir ul li a span {
display:none;
}
/* Mostramos el texto al hacer hover */
.expandir ul li:hover a span {
display:block;
font-size:14px;
text-align:center;
color:#000;
}
/* Agrandamos la imagen al hacer hover */
.expandir ul li:hover a img {
width:64px;
height:64px;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}

En el anterior codigo vienen incluidas algunas lineas para explicar un poco el contenido del CSS.

Ahora agrega el siguiente HTML en la parte que quieras (puede ser un elemento HTML/JavaScript)
<div class="expandir">
<ul>
<li><a href="URL_Destino1"><img src="IMAGEN1"/><span>TEXTO1</span></a></li>
<li><a href="URL_Destino2"><img src="IMAGEN2"/><span>TEXTO2</span></a></li>
<li><a href="URL_Destino3"><img src="IMAGEN3"/><span>TEXTO3</span></a></li>
</ul>
</div>

Lo que se indica en verde corresponde a la URL del destino,a la URL de la imagen y el texto a mostrar.

Para agregar otras imagenes solo debes añadir la siguiente estructura (antes de </ul>)  :
 <li><a href="URL_Destino"><img src="IMAGEN"/><span>TEXTO</span></a></li>

Espero que les haya sido de utilidad este truco.

JUGANDO CON LA NAVBAR DE BLOGGER

Hace muchos años pocos querían conservar la Navbar, esa barra que está arriba del todo y que nos permite compartir el blog, buscar o acceder a las funciones básicas. El único color disponible que había era el azul así que no a todos les iba bien con el diseño de su plantilla. Hoy la barra de navegación (Navbar) dispone de más colores, y podemos jugar un poco con ella para hacerla ver más dinámica. O si prefieres ocultarla, también te diremos cómo hacerlo.








Ocultar la navbar

Ocultarla es más sencillo que antes, digo eso porque hasta hace poco teníamos que ingresar códigos a la plantilla para poder ocultarla, ahora no.
Si deseas ocultar la navbar ingresa a la sección Diseño, da click en Editar sobre la Navbar (Barra de navegación) y selecciona Desactivado.








Hacer flotante la navbar

Si por el contrario te gusta que se vea la barra de navegación entonces puedes hacerla flotante para que se siga viendo aun cuando bajes el scroll de la página. Para ello entra en la Edición HTML de la plantilla y antes de ]]></b:skin> pega lo siguiente:
#navbar-iframe {
left:0;
top:0;
position:fixed;
}

Si quisieras que la navbar este igual flotante pero en la parte de abajo entonces cambia top:0; por bottom:0;
Con cualquiera de esas dos opciones la barra siempre estará visible aunque se suba o se baje la página.







Aparecer la navbar al pasar el cursor con desvanecimiento

Una buena opción es mantener oculta la navbar y hacer que aparezca sólo si pasamos el cursor arriba del blog, y usando las transiciones haremos que aparezcan con un efecto de desvanecimiento como se aprecia en la imagen.



Para que se vea de esta manera sólo hay que añadir antes de ]]></b:skin> lo siguiente:
#navbar-iframe {
opacity:.0;
filter:alpha(Opacity=0,FinishedOpacity=0);
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#navbar-iframe:hover {
opacity:1.0;
filter:alpha(Opacity=100,FinishedOpacity=100);
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}







Aparecer la navbar al pasar el cursor de arriba a abajo

Una opción similar a la anterior es que la navbar esté oculta y aparezca al pasar el cursor sobre su área pero esta vez aparecerá de arriba a abajo.




Para ese caso el código que hay que añadir antes de ]]></b:skin> es este:
#navbar-iframe {
position:absolute;
top:-30px;
height:60px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#navbar-iframe:hover {
top:0;
height:30px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}







Cambiar el color de la Navbar

Aunque Blogger nos permite cambiarle el color, sólo nos ofrece 6 opciones de color, los cuales pueden no ser del gusto de todos, sin embargo podemos ponerle el color que queramos y no sólo eso, también podemos hacer que cambie de color al pasar el cursor con un efecto de desvanecimiento.

Para conseguirlo, sigue el paso del primer ejemplo que es para ocultarla, pero en lugar de desactivarla deberás seleccionar Claro transparente. Luego pega antes de ]]></b:skin> estos estilos:
#navbar-iframe {
background:#B40431; /* Color de la navbar */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#navbar-iframe:hover {
background:#000; /* Color de la navbar al pasar el cursor */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
Ahí verás dónde poner el color que quieras tanto para el estado normal, como el color que tendrá al pasar el cursor.
¿Una imagen? También se puede, en ese caso la línea que especifica el color irá de esta manera:
background:url(URL de la imagen);

Como puedes ver, la navbar puede verse más atractiva si lo deseas y sólo añadiendo un poco de CSS que hasta puedes combinar y conseguir el resultado que quieras.
Quizá haga falta recordar que en el caso de los efectos de desvanecimiento con CSS son transiciones que sólo son soportadas con navegadores modernos, así que en navegadores antiguos (o Internet Explorer) aunque no se verá ese desvanecimiento los demás estilos sí se ejecutarán.
Eso es todo.

AGREGAR UN VIDEO DE YOUTUBE COMO FONDO DE TU BLOG


Cómo poner un video como fondo del blog, es decir, que en lugar de que sea un color o una imagen sea un video. Eso podemos hacerlo gracias al plugin Tubular de jQuery que permite usar un video de YouTube como fondo de una página web.


Aunque el resultado puede ser muy original y atractivo, debo decir que tiene tres inconvenientes: que no se puede silenciar, que si el video tiene anuncios éstos también se mostrarán, y que puede hacer muy lenta la carga del blog, así que si alguien quiere usarlo puede considerar ponerlo sólo en ocasiones especiales, o en blogs que carguen muy rápido.

 También se puede hacer en HTML5, el problema es que con ese método se necesita cargar el video en 3 formatos distintos (.mp4, .webm y .ovg) además de una imagen para los navegadores que no lo soporten, así que con esta opción de YouTube me parece más práctica pese a los inconvenientes que tiene.
El primer paso es poner justo después de <head> el script:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
/* jQuery tubular plugin
|* by Sean McCambridge
|* http://www.seanmccambridge.com/tubular
|* Copyright 2012
|* licensed under the MIT License
|* Enjoy.
|*
|* Thanks,
|* Sean */

var videoWidth = 853;
var videoRatio = 16/9;
var defaultDiv = 'wrapper-video';

jQuery.fn.tubular = function(videoId,wrapperId) {
wrapperId = (typeof(wrapperId) == undefined) ? 'wrapper-video' : wrapperId;
t = setTimeout("resizePlayer()",1000);

jQuery('html,body').css('height','100%');
jQuery('body').prepend('<div id="yt-container" style="overflow: hidden; position: fixed; z-index: 1;"><div id="ytapiplayer">You need Flash player 8+ and JavaScript enabled to view this video.</div></div><div id="video-cover" style="position: fixed; width: 100%; height: 100%; z-index: 2;"></div>');
jQuery('#' + wrapperId).css({position: 'relative', 'z-index': 99});

var ytplayer = 0;
var pageWidth = 0;
var pageHeight = 0;
var videoHeight = videoWidth / videoRatio;
var duration;

var iframe = '<iframe id="myytplayer" width="' + videoWidth + '" height="' + videoHeight + '" src="http://www.youtube.com/embed/' + videoId + '?autoplay=1&controls=0&modestbranding=1&showinfo=0&hd=1&iv_load_policy=3&version=3&wmode=transparent&loop=1&playlist=' + videoId + '" frameborder="0" allowfullscreen></iframe>';

jQuery('#ytapiplayer').html(iframe);
jQuery(window).resize(function() {
resizePlayer();
});
return this;
}

function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("myytplayer");
ytplayer.setPlaybackQuality('medium');
ytplayer.mute();
}

function resizePlayer() {
var newWidth = jQuery(window).width();
var newHeight = jQuery(window).height();
jQuery('#yt-container, #video-cover').width(newWidth).height(newHeight);
if (newHeight > newWidth / videoRatio) {
newWidth = newHeight * videoRatio;
}
jQuery('#myytplayer').width(newWidth).height(newWidth/videoRatio);
}

//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
$().ready(function() {
$('body').tubular('7gZd4b6bXu4','wrapper-video');
});
//]]>
</script>
Luego localiza la etiqueta <body>
Si usas una plantilla del Diseñador de Plantillas entonces busca esta línea:
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
Debajo de cualquiera de ellas dos agrega lo siguiente:
<div id='wrapper-video'>

Luego antes de </body> coloca esta etiqueta de cierre:
</div>

Guarda los cambios y listo. En color rojo debes poner la ID del video de YouTube, la ID son los caracteres que aparecen al final de la URL:


Recuerda: No tiene opción de silenciar, así que si no quisieras que tenga sonido como en el demo del blog de pruebas tendrás que elegir un video que no tenga sonido. También se recomienda usar un video en HD para que no aparezcan partes negras alrededor del video.
Si ya usaras jQuery elimina las otras versiones que tengas para que no se dupliquen y tengas problemas.
Y si usas Scriptaculous o Mootools deberás aplicar unos cambios a la segunda parte sel primer código que se agrega para que puedas usarlo.

USAR UN ARCHIVO FLASH COMO FONDO DEL BLOG



La otra vez vimos cómo poner un video de YouTube como fondo del blog, ahora veremos algo similar pero con un archivo SWF, es decir, veremos cómo poner un archivo flash (SWF) como fondo del blog.

Los archivos flash (SWF) son esas animaciones que se crean con programas especiales para este tipo de archivos, aunque también hay programas que permiten convertir películas en estos formatos.
Por lo tanto, primero deberás tener un archivo en flash (entre más grande mejor) subido a tu alojamiento, aunque mientras puedes probar con el archivo que usé en el blog de pruebas.


El procedimiento en realidad es muy sencillo ya que es sólo un paso a seguir. Sólo ingresa a la Edición HTML de la plantilla, y localiza esta linea
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
 Justo debajo de cualquiera de ellas dos agrega este código:
<object height='100%' id='fondoflash' width='100%'>
<param name='movie' value='URL del archivo SWF'/>
<param name='scale' value='exactFit'/>
<param name='wmode' value='transparent'/>
<embed height='100%' scale='exactFit' src='URL del archivo SWF' type='application/x-shockwave-flash' width='100%' wmode='transparent'/>
</object>
<style>
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
}
#fondoflash {
height: 100%;
z-index:-9999;
position:fixed;
margin: 0 auto;
}
</style>
Pon la URL del archivo en formato .SWF donde se indica (dos veces) y listo.

Si quieres usar el archivo de matrix puedes descargarlo aquí y subirlo a tu alojamiento.

Este procedimiento está probado en Internet Explorer 9, Chrome 21.0, Firefox 14, Safari 6, y Opera 12, en todos funciona sin problema.
El archivo flash se adaptará al ancho y alto de la ventana del navegador, es decir, que ocupará el 100% del ancho y alto de la misma, por lo tanto no se recomienda usar animaciones que tengan medidas muy cuadradas (por ejemplo 600x600) sino mas bien rectangulares (por ejemplo 1200x720) para que no se distorsione tanto.
 En Softonic puedes encontrar algunos programas para la creación de animaciones en flash.

COMO HACER QUE LA IMAGEN DE FONDO DEL BLOG CUBRA LA PANTALLA


Una constante pregunta es cómo hacer para que la imagen de fondo del blog siempre ocupe toda la pantalla sin importar la resolución del monitor. Y es que a veces ponemos una imagen de fondo según las medidas de nuestro monitor, y no consideramos que en la actualidad los monitores los hay de todas las resoluciones, muy pequeños y muy grandes. Así que si ponemos una imagen de acuerdo a nuestra pantalla habrá alguien con un monitor mayor que seguramente no verá toda la imagen o la verá repetida, y en el caso de los que usan monitores muy pequeños verán la imagen incompleta.


Aquí veremos dos soluciones a ello, una usando CSS3, y otra con jQuery. Con cualquiera de las dos haremos que la imagen de fondo de la página ocupe toda la pantalla del monitor sin importar la resolución del mismo.
 CSS3

La primera opción es usando CSS3, la ventaja con este método es que no sobrecargamos el blog con scripts, usaremos únicamente la propiedad background-size que se encargará de realizar lo que queremos.
La desventaja es que esta propiedad sólo es soportada por los navegadores modernos, así que en el caso de Internet Explorer sólo se verá de la versión 9 en adelante, en los demás navegadores no deberá haber problema.
El método es muy simple, sólo tenemos que ingresar a la Edición HTML de la plantilla, localizar el background que está dentro de body { y reemplazarlo por esto:
background: url(URL de la imagen) no-repeat center center fixed;
background-size: cover;
Se vería más o menos así:

body {
background: url(URL de la imagen) no-repeat center center fixed;
background-size: cover;
margin:0;
color:#000;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
Sólo pon la URL de la imagen y listo.

COMO ELIMINAR UN BLOG DE BLOGGER

Si tienes un blog en blogger y lo quieres eliminar por el motivo que sea, hacerlo es muy fácil aunque puede que te cueste encontrar esta opción.

Actualmente la opción para borrar o suprimir el blog de blogger se encuentra mucho más facilmente pues la han movido y, donde antes aparecía al final del todo de una página, ahora aparece al principio.

Eliminar blog en blogger con la nueva interfaz

Con la nueva interfaz de blogger, una vez que entras en tu cuenta ve al configuración de tu blog: a Configuración->Otros y, debajo del título "Herramientas del blog" aparecen tres enlaces: "Importar blog", "Exportar blog" y "Suprimir blog", ya sabes sobre que enlace debes pinchar, no?
Suprimir un blog en blogger con la interfaz antigua

Si utilizas la interfaz anterior y quieres borrar un blog de blogger:
 •Ve a blogger.com y accede a tu cuenta.
 •Ve a escritorio
 •Ve a la configuración del blog
 •Ahora estás en una página con varias pestañas. Haz clic en la pestaña "Configuración"
 •Al principio de esta página aparecen tres opciones: Importar blog, Exporta blog y Suprimir blog. Como su nombre indica, haz clic en el enlace "Suprimir Blog". Aparecerá una pantalla de confirmación. Haz clic en "Sí".

Es de mencionar que el blog eliminado de blogger es recuperable durante 90 días, útil si te arrepientes. No obstante, el blog suprimido no es accesible aunque no haya sido eliminado definitivamente (antes del plazo de 90 días).
Para recuperar un blog eliminado dentro del plazo que te dan de 90 días accede al escritorio de tu cuenta en blogger. El título del blog eliminado aparece diferente a los demás y bajo él aparece la fecha en la que fue eliminado y un enlace para recuperarlo, haciendo clic en este enlace el blog volverá a estar operativo (dicho enlace desaparecerá a los 90 día el blog de blogger eliminado no podrá ser recuperado nunca más.

CREA TU TARJETA VIRTUAL (LICENSE CARD) DE GOOGLE+

Para obtener una tarjeta como la anterior solo debes ir a Mygoogleplus e insertar el ID de tu cuenta de Google+ como lo muestra la siguiente imagen:


Luego debes dar click en  “Create my Google+ License”.

Con esto ya habras generado tu tarjeta de Google+, ahora para agregarla a Blogger solo debes copiar la URL de la imagen (la imagen esta en base64) y agregarla como una imagen normal -recomiendo hacerlo manualmente no en el editor de Blogger ya que no reconoces las imagenes bas64-

CAMBIAR LA IMAGEN "CARGANDO" EN LA VISTAS DINAMICAS

Es cierto que las plantillas de Vistas Dinámicas lucen modernas, pero a muchos no les agrada la idea de tener la marca de Blogger por todas partes. Cada vez que se carga el blog (con estas plantillas) aparece el ícono de "cargando" con la imagen de Blogger:

Ahora esposible cambiar esa imagen por otra o bien no mostrar ninguna. La respuesta es sí. Ambas cosas se pueden hacer. Puedes verlo en este blog de pruebas, al cargar la página en lugar de que aparezca la imagen tradicional de Blogger con los engranes, aparecerá un ícono distinto:

Si usas la antigua interfaz entra en Diseño | Diseñador de plantillas | Avanzado | Añadir CSS. Y si usas la nueva interfaz entra en Plantilla | Personalizar | Avanzado | Añadir CSS Si no quieres que aparezca ningún icono agrega lo siguiente: Si no quieres que aparezca ningún icono agrega lo siguiente:
.blogger-gear {background-image:none !important;}
Guarda los cambios y listo. Con eso no aparecerá nada mientras cargue el blog.
Pero si quieres que en lugar del ícono tradicional aparezca otro personalizado entonces agrega lo siguiente:
.blogger-gear {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqjNWQowLqzpyhVUL2LnL-_8PY5uhU9Yq-l9Avi93MpyCPRv25y9QRbDHW6qrnXOPch-_xoLZ_AJxPsk9FyOHx31j13lM0arZRmUJAf3lTfczyF0NQf_NR11Gpfq-1XI0MnZqn3MI2rS0/s0/cargando.gif);
width:128px; /* Ancho de la imagen */
height:128px; /* Alto de la imagen */
}
Si quieres cambiar la imagen por otra, cambia la URL que está en color azul.
En las anotaciones en color verde se indica el tamaño destinado para la imagen, es importante que el tamaño de la imagen concuerde con las medidas que agregues ahí.

Es un pequeño cambio, pero seguro será apreciado por quienes son amantes de la personalización.

ABRIR DOS O MAS ENLACES CON UN SOLO LINK

No sé si sera muy útil, pero aqui hosdejo cómo abrir dos páginas con un solo enlace, supongo que podría servir para abrir todas las redes sociales de un sitio con un solo click, o todos los blogs de un autor, etc., el uso ya dependerá de cada quien.

Sin embargo se recomienda que si lo usan avisen al lector que dicho enlace abrirá todas las páginas que han configurado, para que el usuario sepa que abrirá todas esas páginas, y no le abramos páginas que no ha solicitado.

La función para conseguir abrir varios links con un solo click es sencilla, es usar Javascript simple, nada extravagante.

El código a utilizar es el siguiente:
<a href="javascript:void(0);" onclick="javascript:window.open('URL del enlace UNO', '_blank'); window.open('URL del enlace DOS', '_blank'); ">Abrir varios enlaces</a>
Agrega donde se indica las URLs de los enlaces y listo.

Si quieres que se abran más páginas entonces añade justo antes de las comillas dobles en color azul, una línea como esta:
window.open('URL de otro enlace', '_blank');

De esa forma podrás agrupar varios enlaces en uno solo.

MENU VERTICAL DRAG Y DROP CON JQUERY




jGlideMenu es un menú vertical que se puede arrastrar y soltar para que el lector lo ubique donde quiera, pero además, se puede navegar a través de sus pestañas de una forma muy peculiar y con un efecto deslizante para darle ese toque sexy.
Una de las ventajas que tiene es que puede almacenar un gran número de enlaces, y que se puede quitar el efecto drag and drop (arrastrar y soltar) si se desea.
Para poner en tu blog este menú vertical, primero descarga este archivo, descomprímelo y súbelo a un hosting.
Luego ingresa a la Edición HTML de tu plantilla y antes de </head> agrega los scripts:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript' />
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js' type='text/javascript' />
<script src='URL del archivo' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$('#jGlide_001').jGlideMenu({
tileSource : '.jGlide_001_tiles' ,
demoMode : false
}).show();

$('#switch').click(function(){$(this).jGlideMenuToggle();});
});
//]]>
</script>
Coloca la URL del archivo que subiste previamente donde se indica, luego pega antes de
]]></b:skin> los estilos:
.jGM_box {
position: absolute; /* Cambiar absolute por fixed si se quiere flotante */
top: 150px; /* Distancia desde arriba */
left: 200px; /* Distancia desde la izquierda */
width: 227px;
height: 317px;
background: #fff; /* Color de fondo */
margin: 0;
padding: 0;
border: 1px solid #ccc; /* Borde */
overflow: hidden;
}
.jGM_header {
position: absolute;
top: 0;
left: 0;
height: 18px;
width: 227px;
background: #d1d1d1; /* Color de fondo de la barra de arriba */
color: #fff;
text-align: right;
vertical-align: middle;
line-height: 18px;
cursor: move;
}
.jGM_header a {
margin-right: 12px;
text-decoration: none;
color: #000 !important;
cursor: pointer;
}
.jGM_wrapper {
position: absolute;
top: 19px;
left: 0;
width: 2270px;
height: 288px;
margin: 0;
padding: 0;
border: 0;
}
.jGM_tile {
position: absolute;
top: 0;
left: 7px;
width: 213px;
height: auto;
overflow: hidden;
margin: 0;
padding: 0;
border: 0;
display: block;
}
.jGM_cats {
width: 100%;
height: 64px;
overflow: hidden;
vertical-align: middle;
text-align: left;
}
.jGM_cats h4 {
font-family: Verdana,Arial,serif;
font-size: 1.8em;
margin: 0;
padding: 2px 0;
line-height: 1.8em;
color: #414141;
font-weight: normal;
}
.jGM_cats p {
font-family: Verdana,tahoma,arial;
font-size: 1em; /* Tamaño de la descripción */
margin: 0;
padding: 0;
line-height: 1.2em;
color: #858585; /* Color de la descripción */
font-weight: normal;
}
.jGM_pager {
height: 18px;
width: 213px;
line-height: 18px;
margin: 0;
border: 0;
padding: 0;
background: #f6f6f6; /* Color de fondo barras */
text-align: center;
vertical-align: middle;
}
.jGM_pager a {
text-decoration: none;
font-weight: bold;
text-decoration: none;
display: block;
}
.jGM_pager a:hover { background: #d1d1d1; }
.jGM_pager img { border: 0; margin: 6px 0; }
.jGM_content {
width: 213px;
height: 150px;
margin: 1px 0;
padding: 0;
border: 0;
overflow: hidden;
}
.jGM_content a {
font-family: Tahoma,arial;
text-decoration: none;
color: #333 !important;
height: 18px;
width: 100%;
display: block;
line-height: 18px;
padding: 0 0 0 10px;
background-color: #e6e7e9;
margin: 1px 0;
}
.jGM_content a:hover {
color: #fff !important;
background-color: #4D4E67; /* Color de la barra al pasar el cursor */
}
.jGM_more {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBivfhXbzE-0f_d38hkQJ84md9fzoLDC3W0lbOKVDF87BZ4IpCVS2HkXX4r4S5Hb79bxhS1kQdIvMR52RARk8Cf_1M08aksyzKjGziUIhdD-6W7INyKHFs5K7XcRXS8EE_hLu_rNhBgNs/s10/arrow.gif);
background-repeat: no-repeat;
background-position: 203px 50%;
}
.jGM_back {
position: absolute;
top: 255px;
right: 0;
height: 18px;
width: 52px;
background: #d1d1d1;
line-height: 18px;
vertical-align: middle;
text-align: center;
margin: 10px 0 0 0;
padding: 0;
border: 0;
z-index: 99;
}
.jGM_back a {
height: 100%;
width: 100%;
text-decoration: none;
color: #000 !important; /* Color del enlace "atrás" */
display: block;
}
.jGM_back a:hover {
color: #fff !important; /* Color del enlace "atrás" al pasar el cursor */
background: #4D4E67;
}
.jGM_reset {
position: absolute;
top: 255px;
right: 62px;
height: 18px;
width: 52px;
background: #d1d1d1;
line-height: 18px;
vertical-align: middle;
text-align: center;
margin: 10px 0 0 0;
padding: 0;
border: 0;
z-index: 99;
}
.jGM_reset a {
height: 100%;
width: 100%;
text-decoration: none;
color: #000 !important; /* Color del enlace "inicio" */
display: block;
}
.jGM_reset a:hover {
color: #fff !important; /* Color del enlace "inicio" al pasar el cursor */
background: #4D4E67;
}

Ahora en un elemento HTML/Javascript pega la estructura del menú:
<div class="jGM_box" id="jGlide_001">

<!-- Aquí todos los enlaces del primer nivel -->
<ul id="tile_001" class="jGlide_001_tiles" title="Menú" alt="Descripción del primer nivel">
<li rel="tile_002">Enlace 1</li>
<li rel="tile_003">Enlace 2</li>
<li rel="tile_004">Enlace 3</li>
<li rel="tile_006">Enlace 4</li>
<li rel="tile_007">Enlace 5</li>
<li><a href="URL del enlace">Enlace 6</a></li>
<li><a href="URL del enlace">Enlace 7</a></li>
<li><a href="URL del enlace">Enlace 8</a></li>
<li><a href="URL del enlace">Enlace 9</a></li>
<li><a href="URL del enlace">Enlace 10</a></li>
<li><a href="URL del enlace">Enlace 11</a></li>
</ul>

<!-- Aquí todos los enlaces del segundo nivel -->
<ul id="tile_002" class="jGlide_001_tiles" title="Menú" alt="Descripción del segundo nivel">
<li rel="tile_005">Enlace 1.1</li>
<li><a href="URL del enlace">Enlace 1.2</a></li>
<li><a href="URL del enlace">Enlace 1.3</a></li>
<li><a href="URL del enlace">Enlace 1.4</a></li>
</ul>

<ul id="tile_003" class="jGlide_001_tiles" title="Menú" alt="Descripción del segundo nivel">
<li><a href="URL del enlace">Enlace 2.1</a></li>
<li rel="tile_008">Enlace 2.2</li>
<li><a href="URL del enlace">Enlace 2.3</a></li>
</ul>

<ul id="tile_004" class="jGlide_001_tiles" title="Menú" alt="Descripción del segundo nivel">
<li><a href="URL del enlace">Enlace 3.1</a></li>
<li><a href="URL del enlace">Enlace 3.2</a></li>
<li><a href="URL del enlace">Enlace 3.3</a></li>
</ul>


<ul id="tile_006" class="jGlide_001_tiles" title="Menú" alt="Descripción del segundo nivel">
<li><a href="URL del enlace">Enlace 4.1</a></li>
<li><a href="URL del enlace">Enlace 4.2</a></li>
<li><a href="URL del enlace">Enlace 4.3</a></li>
</ul>

<ul id="tile_007" class="jGlide_001_tiles" title="Menú" alt="Descripción del segundo nivel">
<li><a href="URL del enlace">Enlace 5.1</a></li>
<li><a href="URL del enlace">Enlace 5.2</a></li>
</ul>


<!-- Aquí todos los enlaces del tercer nivel -->
<ul id="tile_005" class="jGlide_001_tiles" title="Menú" alt="Descripción del tercer nivel">
<li><a href="URL del enlace">Enlace 1.1.1</a></li>
<li><a href="URL del enlace">Enlace 1.1.2</a></li>
</ul>


<ul id="tile_008" class="jGlide_001_tiles" title="Menú" alt="Descripción del tercer nivel">
<li><a href="URL del enlace">Enlace 1.2.1</a></li>
<li><a href="URL del enlace">Enlace 1.2.2</a></li>
</ul>


</div>
Agrega las URLs de los enlaces y los nombres de las pestañas y listo.
Si quieres agregar más enlaces al primer nivel añade en esa área otra línea como esta:
<li><a href="URL del enlace">Enlace 12</a></li>

Si quisieras que el enlace tenga otro nivel entonces la línea será así:
<li rel="tile_0010">Enlace 5</li>
Luego en el área del segundo o tercer nivel agregarías un fragmento así:
<ul id="tile_0010" class="jGlide_001_tiles" title="Menú" alt="Descripción del segundo nivel">
<li><a href="URL del enlace">Enlace 5.1</a></li>
<li><a href="URL del enlace">Enlace 5.2</a></li>
</ul>

Aquí hay que tener algo muy en cuenta, si te fijas el enlace lleva el atributo REL, que debe ser el mismo que el ID que ponemos en el segundo nivel, estos IDs nunca se debe repetir, siempre serán únicos.
Sí, suena complicado, pero una vez que entendemos el concepto ya no lo es tanto.

En el área de los estilos están las partes que podemos personalizar. Si quisieras que el menú esté estático, es decir, que esté en la sidebar y no se arrastre, entonces elimina del primer código el script que está en cursiva. Y de los estilos elimina esta parte:
position: absolute; /* Cambiar absolute por fixed si se quiere flotante */
top: 150px; /* Distancia desde arriba */
left: 200px; /* Distancia desde la izquierda */

Cuando sean muchos enlaces entonces aparecerán unas flechitas, pasando el cursor sobre ellas se mostrarán el resto de los enlaces ya sea hacia arriba o hacia abajo.

A lo largo de la estructura del menú verás que puedes cambiar el nombre Menú así como las descripciones.

COMO USAR CUALQUIER MENU EN LAS PLANTILLAS DEL DISEÑADOR DE PLANTILLAS DE BLOGGER



Desde que aparecieron las plantillas del Diseñador de plantillas de Blogger muchos de los comentarios acerca de los Menús son: que los menús no se ven igual que al del ejemplo de la entrada, o que las subpestañas no se despliegan. Y la respuesta que siempre doy es Los menús de subpestañas no funcionan en esas plantillas.

La razón es que esas plantillas tienen estilos predefinidos en esa área que inhabilitan cualquier otro menú que se agregue debajo de la cabecera.

Pero les digo la forma de que los menús funcionen en esas plantillas, así que veamos cómo hacer funcionar cualquier menú en las plantillas hechas a través del Diseñador de plantillas de Blogger.

Lo primero es entrar en Diseño | Edición de HTML y SIN expandir los artilugios busca esta línea:
<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>

Elimina lo que está en color rojo.
Es posible que tengas muchas partes como la que está en rojo, elimina todas las que encuentres.

Luego busca esta parte en la plantilla:
/* Tabs
----------------------------------------------- */
Y elimina todo lo que haya dentro de ello. Por ejemplo, en la plantilla Awesome Inc. eliminarías todo lo que está en color verde
/* Tabs
----------------------------------------------- */
.tabs-outer {
overflow: hidden;
position: relative;
background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll 0 0;
}

#layout .tabs-outer {
overflow: visible;
}

.tabs-cap-top, .tabs-cap-bottom {
position: absolute;
width: 100%;

border-top: 1px solid $(tabs.border.color);

}

.tabs-cap-bottom {
bottom: 0;
}

.tabs-inner .widget li a {
display: inline-block;

margin: 0;
padding: .6em 1.5em;

font: $(tabs.font);
color: $(tabs.text.color);

border-top: 1px solid $(tabs.border.color);
border-bottom: 1px solid $(tabs.border.color);
border-$startSide: 1px solid $(tabs.border.color);
}

.tabs-inner .widget li:last-child a {
border-$endSide: 1px solid $(tabs.border.color);
}

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
background: $(tabs.selected.background.color) $(tabs.background.gradient) repeat-x scroll 0 -100px;
color: $(tabs.selected.text.color);
}

/* Headings
----------------------------------------------- */

Ya eliminado, en su lugar agrega 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;}
Una vez hecho lo anterior podremos agregar cualquier menú y estos se verán como deben verse y las subpestañas podrás desplegarse sin problema.

martes, 7 de enero de 2014

MENU HORIZONTAL CON SUBPESTAÑAS Y BUSCADOR INTEGRADO


ATENCIÓN: Si usas una plantilla hecha a través del Diseñador de plantillas de Blogger primero necesitas seguir los pasos de esta entrada.

El siguiente menú está hecho únicamente con CSS, es un menú horizontal con subpestañas, y del lado derecho tiene un buscador redondeado.
Es un menú práctico para los que no requieren de menús muy complejos o prefieren no usar uno que requiera scripts y/o demasiadas imágenes, además, la instalación y personalización es bastante sencilla, y por si fuera poco es bastante funcional, ya que al tener el buscador integrado puedes tener dos elementos en una misma área.
Si usas el buscador escribe la palabra y presiona ENTER.
Para poner este menú horizontal con submenús en tu blog entra en la Edición HTML de tu plantilla, y antes de ]]></b:skin> pega los estilos:
/* Menu horizontal con buscador
----------------------------------------------- */
#menuWrapper {
width:100%; /* Ancho del menú */
height:35px;
padding-left:14px;
background:#333333; /* Color de fondo */
border-radius:20px; /* Bordes redondeados */
}
.menu {
width: 100%;
float: left;
font-family:"Lucida Sans Unicode", "Trebuchet Unicode MS", "Lucida Grande",sans-serif;
font-size:13px; /* Tamaño de la fuente */
font-weight:bold;
}
.menu ul {
float:left;
height:0px;
list-style:none;
margin:0;
padding:0;
border-radius: 0px 0px 20px 20px; /* Bordes redondeados del submenú */
}
.menu li{
float:left;
padding:0px;
}
.menu li a{
background:#333333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggy8ypP2I5Kvck53UeM9nia552_MpSn5l0LTwqINJYaZgVtRn_CvGJmORRolNcjlqiszrUkhOpJmchQWD_zw8mNVkEhtCr8lmVF8OJwZcXgvIXqlpZhodsCKHNHtiE9DfsKvP50ZxkAzs/s35/separador.gif) bottom right no-repeat;
color:#cccccc; /* Color de la fuente */
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px; /* Espacio entre cada pestaña */
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a {
background: #2580a2; /* Color de las pestañas al pasar el cursor */
color:#FFFFFF; /* Color del texto al pasar el cursor */
text-decoration:none;
}
.menu li ul {
background:#333333; /* Color de fondo del submenú */
display:none;
height:auto;
padding:0px;
margin:0px;
position:absolute;
width:200px; /* Ancho del submenú */
z-index:100;
border-top:1px solid #fff; /* Borde superior del submenú */
}
.menu li:hover ul{
display:block;
}
.menu li li {
display:block;
float:none;
margin:0px;
padding:0px;
width:200px;
}
.menu li:hover li a {
background:none;
border-radius: 0px 0px 20px 20px; /* Borde de las subpestañas */
}
.menu li ul a {
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a{
background:#2580a2; /* Color de las subpestañas al pasar el cursor */
color:#ffffff;
text-decoration:none;
}

#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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjnq2mYqkJ9dMucld_9tYT-FLFb_jREhTBlWkRuK_qe1S-SiMJqdeuPFSjufqkkZM1wEKIfyVRHtGI1-GPT11hoIOJFUH_cH-_mhXx4PFjHeI8yfKBjF8h5ojg99k_mBrkM2d8SwRgsgw/s1600/search-bar.png) no-repeat;
}
#search-box {
margin-top: 3px;
border:0px;
background: transparent;
text-align:center;
}
Luego entra en la sección de Diseño, y en un elemento HTML/Javascript pega la estructura del menú:
<div id='menuWrapper'>
<div class='menu'>
<ul>
<li><a href="URL del enlace">Pestaña 1</a></li>
<li><a href="#">Pestaña 2</a>
<ul>
<li><a href="URL del enlace">Pestaña 2.1</a></li>
<li><a href="URL del enlace">Pestaña 2.2</a></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>
</ul>
</li>
<li><a href="#">Pestaña 3</a>
<ul>
<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><a href="#">Pestaña 4</a>
<ul>
<li><a href="URL del enlace">Pestaña 4.1</a></li>
<li><a href="URL del enlace">Pestaña 4.2</a></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>
</ul>
</li>

</ul>


<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>

</div></div>
Agrega las URLs de los enlaces donde se indica así como el nombre de tus pestañas.
En el primer código puedes ver las áreas que se pueden personalizar tales como el color, etc.
La apariencia redondeada del ancho de todo el menú también es CSS, así que si usas un navegador antiguo no se verán esos bordes.

Si quisieras agregar otra pestaña entonces añade antes del último </ul> en color azul una línea como esta:
<li><a href="URL del enlace">Pestaña 5</a></li>
Si quisieras que ésta tenga submenús entonces el código que deberás poner es este:
<li><a href="#">Pestaña 5</a>
<ul>
<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>
<li><a href="URL del enlace">Pestaña 5.4</a></li>
</ul>
</li>
Sin embargo, se recomienda no poner muchas pestañas, ya que si se excede entonces las pestañas se mostrarán en un segundo renglón.

Y eso es todo.