TRUCOS PARA BLOGER



Minus-10 GB PARA ALMACENAR ARCHIVOS (AMPLIABLE A 50 GB)


Una de las grandes deficiencias de Blogger es la incapacidad para alojar nuestros propios archivos en nuestro blog teniendo que recurrir a servicios externos,pero por fortuna hay sitios muy buenos donde alojar archivos .js y otros.

Esta vez les presento Minus,que aunque poco conocido nos da 10 GB por solo registrarnos e invitando amigos podemos llegar a los 50 GB
Te registras en Minus luego subes tu archivo en Upload,Seleccionas Upload form Computer,lo subes y luego te saldra el documento en su version Online,pero si queremos obtener la URL del documento vas a la parte inferior en Download,das click derecho y clickeas en Copiar la ruta del enlace y esa es la que nos sirve para Blogger.

Minus nos da URL'S como la siguiente:
http://i.minus.com/1330524384/vUY7Nz3ltxiq8bsnmQbVmA/dbxesdSYhRAKEg.xml.
Espero que os sea de utilidad este gran hosting que sin duda promete ser un duro rival para Dropbox.

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.


IMAGEN FLOTANTE EN BLOGGER U OTRO GESTOR  DE CONTENIDOS

El truco blogger de hoy es bastante sencillo e interesante, se trata de establecer una imagen flotante del lado superior derecho.


Debemos acceder al escritorio - diseño y en la edición html de la plantilla buscamos la etiqueta </head> e introducimos este código.
<a href='http://URL DE TU BLOG.blogspot.com/' style='display:scroll;position:fixed;bottom:0px;right:0px;'><img src='URL DE TU IMAGEN'/>

Lo que nos resta por hacer es modificar por nuestra url donde dice urldetublog.blogspot.com, al igual que la imagen.


AGREGAR UN VIDEO DE YOUTUBE COMO FONDO DE TO 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 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 LAS 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/AVvXsEgq_aYw4S2cj-ysVDVxOYsPlEeeLxK57GvjnrGdgspAEsTvm3wXnVymzV60YqvYpo9bv8LGwd_EnPu74PJ-coFAlBe6VzXEA0owxut3HoUZt3J-VxLae70TtEbaYtSEPcAX6tnCulg0wc0/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/AVvXsEjzNOrfi5cQtEsw_1aygLgQPIZbSa9AoeJZtfCnMXSEetHLnnAgNKOjgbh2TmYKIUN77KsnBSYBdznryh8MpZbcjjq6PUvhGN9vTSIhXjNvXn3DaBlnh3ACNuhoMD5EEcDGkGB3APxZHj8/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.


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/AVvXsEhmdur6vHUdxhQH46OOipNc7JsH1_luEoK9psLDNqO6aScmYdjHBOxwLcX4fNaGHBk6xEvfmG9ovEVAqoGkZeDo9l37AxqAniNNt3Ka7xlHgN_pVM9NxNc1rNLhiM23ttsIY5E5UXhTWSk/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/AVvXsEj2puBKm7WW6CYFh8t2q_6wBIBiXexSwpTBNeNn02hdLFcsPwOQ7hdEsYNoSICMxmtqdvW_sBOs7kYpT5Z02o_7ED_ULtGFVpPkhsBTjQsxIP6HVbHp1vzMp-n_emzo5G_JDYMQdKL3UOc/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.

SLIDER AUTOMATICO PARA MOSTRAR LAS ULTIMAS ENTRADAS DE TU BLOG

Este es un slider hecho con jQuery, y que con una adaptación lo ha hecho automático de manera que muestre las últimas entradas del blog tal como un slider automático, es decir, que el slider mostrará las últimas entradas del blog de forma automática, sin necesidad de agregar manualmente las entradas.
Aqui una imagen del Slider.

Para poner este slider en tu blog entra en la Edición HTML, y antes de ]]></b:skin> agrega los estilos:
/* Easy Slider (Automático)
-------------------------------------------------------------------- */
#slide-container {
width:480px;
height:320px;
position:relative;
}
#slider {
width:480px;
height:320px;
left:25px;
overflow-x:hidden;
overflow-y:hidden;
position:relative;
}
.slide-desc {
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj33WyzqK6ja4o1syBXIUG7_xhkIySjLIaNu6LpuZ7Bc0-9VvYcgGWtv9FP53SlKjil7jMbQh_M5ThVtlIlmdSXvxROjiEJ9DsvTXwfOB5_8zWpg0NzxX0nFXtJjV6zKDpjIZ6UTQiCmqY/s30/bgtransparent.png) repeat scroll 0 0;
color:#FFFFFF;
padding:10px;
position:absolute;
text-align:left;
bottom:0;
width:100%;
z-index:99999;
}
.slide-desc h2{
display:block;
color:#f2f2f2;
font-size:14px;
}
.crosscol .widget-content {position:relative;}
#slider ul, #slider li {
margin:0;
padding:0;
list-style:none;
}
#slider li {
width:480px;
height:320px;
overflow:hidden;
}
#prevBtn, #nextBtn {
display:block;
width:30px;
height:77px;
position:absolute;
left:-30px;
text-indent:-9999px;
top:71px;
z-index:1000;
}
#nextBtn {
left:500px !important;
}
#prevBtn, #nextBtn {
display:block;
left:0;
position:absolute;
top:132px;
width:30px;
height:77px;
z-index:1000;
}
#prevBtn a, #nextBtn a {
display:block;
position:relative;
width:30px;
height:77px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRr_ChJVy4scEJ9zuT6j151TSchgxSG7hUou8ds5L9MDQxGhZnHs7aWnrnfdsWGpwdF1E5DcT2vGwtpAYdchpT81Bt_-5io6uHJXlBYNXZXIjdLpEVd0CCaAm0gPMN4iR887QcazKJRuw/s77/flecha-prev.png) no-repeat 0 0;
}
#nextBtn a {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizB1EB3UGehsFyDcNF5KhtS171PuEXE37WjwWruZqlFME_LsBCGTYBYTFfP3m8jvVBjzUSN9qiOYfpM-07L2S3Hat7vg31YmEKCPjO7TpimdjXgpkRmXSvVmCQV1ect5H3xTsSyx0zn6Q/s77/flecha-next.png) no-repeat 0 0;
}
/* Estilos de los números */
ol#controls{
margin:8px 25px;
padding:0;
height:28px;
}
ol#controls li{
margin:0 4px 0 0;
padding:0;
float:left;
list-style:none;
height:28px;
line-height:28px;
}
ol#controls li a{
float:left;
height:28px;
line-height:28px;
border:1px solid #000; /* Borde de los números */
background:#0B243B; /* Color de fondo de los números */
color:#fff; /* Color de los números */
padding:0 10px;
text-decoration:none;
}
ol#controls li.current a{
background:#5DC9E1; /* Color de fondo del número activo */
color:#fff; /* Color del número activo */
}
ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}
Ahora antes de </head> agrega este script:
<script>
//<![CDATA[
var showpostthumbnails_gal = true;
var showpostsummary_gal = true;
var random_posts = false;
var numchars_gal = 150;
var numposts_gal = 10;
function showgalleryposts(json) {
var numPosts = json.feed.openSearch$totalResults.$t;
var indexPosts = new Array();
document.write('<ul>');
for (var i = 0; i < numPosts; ++i) {
indexPosts[i] = i;
}
if (random_posts == true){
indexPosts.sort(function() {return 0.5 - Math.random()});
}
if (numposts_gal > numPosts) {
numposts_gal = numPosts;
}
for (i = 0; i < numposts_gal; ++i) {
var entry_gal = json.feed.entry[indexPosts[i]];
var posttitle_gal = entry_gal.title.$t;
for (var k = 0; k < entry_gal.link.length; k++) {
if ( entry_gal.link[k].rel == 'alternate') {
posturl_gal = entry_gal.link[k].href;
break;
}
}
if ("content" in entry_gal) {
var postcontent_gal = entry_gal.content.$t
}
s = postcontent_gal;
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 != "")) {
var thumburl_gal = d
} else var thumburl_gal = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgftgOoU8KnQ_k-KUR2pQMTzYN6EHEsY5_rh6LWhUVEIV_nlBIAX3s5i20rS5UyTCjUPjE_TASl4EBzrW8twCJ-Ifs6AAP0RqeaGCYyUPeLKmFfYOp0mxWH87_u4gUpcA_FZtI92AiQLCc/s0/sin-imagen.png';
document.write('<li><div id="slide-container"><span class="slide-desc"><h2 style="margin:10px 0px;">');
document.write(posttitle_gal + '</h2>');
var re = /<\S[^>]*>/g;
postcontent_gal = postcontent_gal.replace(re, "");
if (showpostsummary_gal == true) {
if (postcontent_gal.length < numchars_gal) {
document.write(postcontent_gal);
document.write('</span>')
} else {
postcontent_gal = postcontent_gal.substring(0, numchars_gal);
var quoteEnd_gal = postcontent_gal.lastIndexOf(" ");
postcontent_gal = postcontent_gal.substring(0, quoteEnd_gal);
document.write(postcontent_gal + '...');
document.write('</span>')
}
}
document.write('<a href="' + posturl_gal + '"><img src="' + thumburl_gal + '" width="480px" height="320"/></a></div>');
document.write('</li>');
}
document.write('</ul>');

}
//]]>
</script>
Lo siguiente será pegar antes de </body> este script:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
/*
* Easy Slider 1.7 - jQuery plugin
* written by Alen Grakalic
* http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding
* Copyright (c) 2009 Alen Grakalic (http://cssglobe.com)
*/
(function($){$.fn.easySlider=function(options){var defaults={prevId:'prevBtn',prevText:'Previous',nextId:'nextBtn',nextText:'Next',controlsShow:true,controlsBefore:'',controlsAfter:'',controlsFade:true,firstId:'firstBtn',firstText:'First',firstShow:false,lastId:'lastBtn',lastText:'Last',lastShow:false,vertical:false,speed:800,auto:false,pause:5000,continuous:false,numeric:false,numericId:'controls'};var options=$.extend(defaults,options);this.each(function(){var obj=$(this);var s=$("li",obj).length;var w=$("li",obj).width();var h=$("li",obj).height();var clickable=true;obj.width(w);obj.height(h);obj.css("overflow","hidden");var ts=s-1;var t=0;$("ul",obj).css('width',s*w);if(options.continuous){$("ul",obj).prepend($("ul li:last-child",obj).clone().css("margin-left","-"+w+"px"));$("ul",obj).append($("ul li:nth-child(2)",obj).clone());$("ul",obj).css('width',(s+1)*w)};if(!options.vertical)$("li",obj).css('float','left');if(options.controlsShow){var html=options.controlsBefore;if(options.numeric){html+='<ol id="'+options.numericId+'"></ol>'}else{if(options.firstShow)html+='<span id="'+options.firstId+'"><a href=\"javascript:void(0);\">'+options.firstText+'</a></span>';html+=' <span id="'+options.prevId+'"><a href=\"javascript:void(0);\">'+options.prevText+'</a></span>';html+=' <span id="'+options.nextId+'"><a href=\"javascript:void(0);\">'+options.nextText+'</a></span>';if(options.lastShow)html+=' <span id="'+options.lastId+'"><a href=\"javascript:void(0);\">'+options.lastText+'</a></span>'};html+=options.controlsAfter;$(obj).after(html)};if(options.numeric){for(var i=0;i<s;i++){$(document.createElement("li")).attr('id',options.numericId+(i+1)).html('<a rel='+i+' href=\"javascript:void(0);\">'+(i+1)+'</a>').appendTo($("#"+options.numericId)).click(function(){animate($("a",$(this)).attr('rel'),true)})}}else{$("a","#"+options.nextId).click(function(){animate("next",true)});$("a","#"+options.prevId).click(function(){animate("prev",true)});$("a","#"+options.firstId).click(function(){animate("first",true)});$("a","#"+options.lastId).click(function(){animate("last",true)})};function setCurrent(i){i=parseInt(i)+1;$("li","#"+options.numericId).removeClass("current");$("li#"+options.numericId+i).addClass("current")};function adjust(){if(t>ts)t=0;if(t<0)t=ts;if(!options.vertical){$("ul",obj).css("margin-left",(t*w*-1))}else{$("ul",obj).css("margin-left",(t*h*-1))}clickable=true;if(options.numeric)setCurrent(t)};function animate(dir,clicked){if(clickable){clickable=false;var ot=t;switch(dir){case"next":t=(ot>=ts)?(options.continuous?t+1:ts):t+1;break;case"prev":t=(t<=0)?(options.continuous?t-1:0):t-1;break;case"first":t=0;break;case"last":t=ts;break;default:t=dir;break};var diff=Math.abs(ot-t);var speed=diff*options.speed;if(!options.vertical){p=(t*w*-1);$("ul",obj).animate({marginLeft:p},{queue:false,duration:speed,complete:adjust})}else{p=(t*h*-1);$("ul",obj).animate({marginTop:p},{queue:false,duration:speed,complete:adjust})};if(!options.continuous&&options.controlsFade){if(t==ts){$("a","#"+options.nextId).hide();$("a","#"+options.lastId).hide()}else{$("a","#"+options.nextId).show();$("a","#"+options.lastId).show()};if(t==0){$("a","#"+options.prevId).hide();$("a","#"+options.firstId).hide()}else{$("a","#"+options.prevId).show();$("a","#"+options.firstId).show()}};if(clicked)clearTimeout(timeout);if(options.auto&&dir=="next"&&!clicked){;timeout=setTimeout(function(){animate("next",false)},diff*options.speed+options.pause)}}};var timeout;if(options.auto){;timeout=setTimeout(function(){animate("next",false)},options.pause)};if(options.numeric)setCurrent(0);if(!options.continuous&&options.controlsFade){$("a","#"+options.prevId).hide();$("a","#"+options.firstId).hide()}})}})(jQuery);

$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true,
numeric: false // Cambiar a true si se quiere mostrar la paginación de números
});
});
//]]>
</script>
Por último entra en la sección de Diseño y agrega un elemento HTML/Javascript, ahí pega esto:
<div id="slider">
<script style="text/javascript">
var numposts_gal = 10; // Número de entradas a mostrar
var numchars_gal = 150; // Número de caracteres en el resumen
var random_posts = false; // Cambiar por true si se quieren aleatorios
</script>
<script src="http://nombre-de-mi-blog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>
</div>

Cambia el nombre de tu blog donde se indica y listo.
En color naranja puedes ver algunas variantes, una de ellas es que con numeric podemos hacer desaparecer las flechas y en su lugar mostrar una paginación con números para poder navegar por las entradas del slider.
En el último código podrás ver dónde configurar el número de entradas a mostrar, el número de caracteres en el resumen, y si se desea que las entradas aparezcan de forma aleatoria.

Si deseas cambiar las medidas del slider cambia todos los width:480px; y height:320px; que encuentres.
Las flechas son imágenes, así que si deseas modificarlas en color o forma tendrás que cambiar las URLs que se encuentran en el primer código.

Como puedes ver, es un slider con muchas ventajas, la principal es que muestra el contenido de forma automática, sin necesidad de estar agregando entrada por entrada; pero además, la posibilidad de elegir la paginación y las entradas de forma aleatoria le dan un extra.



BOTONES PARA IR ARRIBA E IR ABAJO EN TU BLOG

Veamos entonces cómo poner los botones de Ir Arriba e Ir Abajo con un efecto de deslizamiento usando jQuery.
Lo primero es entrar en la Edición HTML y pegar antes de ]]></b:skin> los estilos:
/* Botones de Ir arriba e Ir abajo con jQuery
----------------------------------------------- */
.nav_up{
padding:7px; /* Distancia entre el borde y el ícono */
background-color:white;
border:1px solid #CCC; /* Color del borde */
position:fixed;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivXzfMna0LSQtede0rJKqXs5p0DrsZG64QVFvapBonuV7v2ljQV8huz7nE9Up7b8o5SHgfQ4xhalt4RSRLxPp7dlqGrJwmMEGKLDV3rtS-D9FenSLhxcFjppsKE9TPPtjb7bGt642l8HI/s16/arrow_up.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Ancho del botón */
height:20px; /* Alto del botón */
bottom:10px; /* Distancia desde abajo */
left:30px; /* Cambiar left por right si se quiere a la derecha */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
.nav_down{
padding:7px; /* Distancia entre el borde y el ícono */
background-color:white;
border:1px solid #CCC; /* Color del borde */
position:fixed;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJXvr3wHcsGj7UGnBIjMA5dWkPKlsl4L6McI53QE_tdXHVuxS6ZOxbKfuYjb4gWd4jUEO2KV14AhYpKn0OvtvO_XFsa_pGb2ApKBQ0cJfw7W0i83t8DiE_kiEi_P-Ijl-f1_dosL3AZ40/s16/arrow_down.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Ancho del botón */
height:20px; /* Alto del botón */
bottom:10px;
left:70px; /* Cambiar left por right si se quiere a la derecha */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
Luego antes de </body> pega este código:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

<div class='nav_up' id='nav_up' style='display:none;'/>
<div class='nav_down' id='nav_down' style='display:none;'/>

<script>
//<![CDATA[
(function(){var special=jQuery.event.special,uid1='D'+(+new Date()),uid2='D'+(+new Date()+1);special.scrollstart={setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}else{evt.type='scrollstart';jQuery.event.handle.apply(_self,_args)}timer=setTimeout(function(){timer=null},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid1,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid1))}};special.scrollstop={latency:300,setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}timer=setTimeout(function(){timer=null;evt.type='scrollstop';jQuery.event.handle.apply(_self,_args)},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid2,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid2))}}})();

$(function() {
var $elem = $('body');
$('#nav_up').fadeIn('slow');
$('#nav_down').fadeIn('slow');
$(window).bind('scrollstart', function(){
$('#nav_up,#nav_down').stop().animate({'opacity':'0.2'});
});
$(window).bind('scrollstop', function(){
$('#nav_up,#nav_down').stop().animate({'opacity':'1'});
});
$('#nav_down').click(
function (e) {
$('html, body').animate({scrollTop: $elem.height()}, 800);
} );
$('#nav_up').click(
function (e) {
$('html, body').animate({scrollTop: '0px'}, 800);
} );});
//]]>
</script>
Y listo, así se sencillo. En el primer código puedes ver en color verde algunos estilos que puedes modificar. Las flechas son imágenes, así que puedes cambiarlas por otras cambiando las URLs de las mismas que se encuentran también en el primer código. Si quieres cambiarlas del lado derecho ahí mismo verás qué valores debes modificar.

En el segundo código he puesto en color gris el script de jQuery, sólo para distinguirlo, por si ya lo tuvieras no lo agregues de nuevo. Hasi son los botones.


CREAR LISTA DE REPRODUCCION XML

Algunos reproductores de música para el blog como el que vimos en la entrada anterior, tienen la posibilidad de usar listas de reproducción en formato XML, esto es para agregar varias canciones en un solo archivo sin tener que llenar el reproductor con tantas URLs.

 Desde un editor de texto crearemos nuestra lista que luego subiremos a la red.

Empecemos, primero abre un BLOC DE NOTAS
Ahí pega lo siguiente:
<?xml version="1.0" encoding="UTF-8"?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
<trackList>

<track>
<location>URL de la canción</location>
<title>Título de la canción</title>
<image>URL de la imagen de la portada</image>
</track>


<track>
<location>URL de la canción</location>
<title>Título de la canción</title>
<image>URL de la imagen de la portada</image>
</track>


<track>
<location>URL de la canción</location>
<title>Título de la canción</title>
<image>URL de la imagen de la portada</image>
</track>


</trackList>
</playlist>
Puedes agregar tantas canciones como quieras sólo añade antes de </trackList> un trozo de código como este:
<track>
<location>URL de la canción</location>
<title>Título de la canción</title>
<image>URL de la imagen de la portada</image>
</track>

Ahora agrega donde se indica, la URL de la canción que debe ser en formato MP3. De igual forma agrega el título de la canción, y sólo de forma opcional agrega la URL de la imagen de la portada del disco. Digo que es de forma opcional porque no todos los reproductores muestran la imagen de la canción, así que si el reproductor donde lo usarás no tiene la capacidad de mostrar dicha imagen entonces no es necesario ponerla, en ese caso elimina la línea:
<image>URL de la imagen de la portada</image>

Una vez que termines de añadir todas las canciones, guarda el archivo en formato XML, es decir, que al momento de guardarlo pongas la extensión .XML seguidamente del nombre del archivo, por ejemplo: playlist.XML
Si lo prefieres, puedes descargar este archivo, es un archivo ya con la extensión XML y listo para agregar los datos de las canciones.

Una vez que tengas tu lista de reproducción en formato XML súbela a un hosting, a partir de ese momento ya la puedes usar en algún reproductor de música.
Supongamos que la usamos con el reproductor EMFF que vimos en la entrada anterior, en ese caso el código sería de esta forma (recordando que la URL del archivo XML no debe tener el protocolo HTTPS, sino sólo HTTP):
<object type="application/x-shockwave-flash" data="URL del archivo SWF" width="200" height="55"> <param name="movie" value="URL del archivo SWF">
<param name="wmode" value="transparent" />
<param name="FlashVars" value="playlist=URL del archivo XML">
Y el resultado sera como el que podeis ver con el reproductor que tengo en el blog
EMFF REPRODUCTOR FLASH PARA BLOG

EMFF es un reproductor en flash para escuchar música MP3 o WAV en el blog, su instalación es como la de la mayoría de los reproductores de su tipo, y su uso también. Sin embargo EMFF admite listas de reproducción y además posee varios skins para que pueda adaptarse a los gustos de cada quien. Puedes verlos aquí mismo en esta entrada.



<object type="application/x-shockwave-flash" data="URL del archivo SWF" width="91" height="25"> <param name="movie" value="URL del archivo SWF">
<param name="wmode" value="transparent" />
<param name="FlashVars" value="src=URL del archivo MP3">
</object>




<object type="application/x-shockwave-flash" data="URL del archivo SWF" width="200" height="55"> <param name="movie" value="URL del archivo SWF">
<param name="wmode" value="transparent" />
<param name="FlashVars" value="src=URL del archivo MP3">
</object>




<object type="application/x-shockwave-flash" data="URL del archivo SWF" width="32" height="32"> <param name="movie" value="URL del archivo SWF">
<param name="wmode" value="transparent" />
<param name="FlashVars" value="src=URL del archivo MP3">
</object>



<object type="application/x-shockwave-flash" data="URL del archivo SWF" width="100" height="50"> <param name="movie" value="URL del archivo SWF">
<param name="wmode" value="transparent" />
<param name="FlashVars" value="src=URL del archivo MP3">
</object>



<object type="application/x-shockwave-flash" data="URL del archivo SWF" width="84" height="32"> <param name="movie" value="URL del archivo SWF">
<param name="wmode" value="transparent" />
<param name="FlashVars" value="src=URL del archivo MP3">
</object>



<object type="application/x-shockwave-flash" data="URL del archivo SWF" width="16" height="16"> <param name="movie" value="URL del archivo SWF">
<param name="wmode" value="transparent" />
<param name="FlashVars" value="src=URL del archivo MP3">
</object>


<object type="application/x-shockwave-flash" data="URL del archivo SWF" width="140" height="30"> <param name="movie" value="URL del archivo SWF">
<param name="wmode" value="transparent" />
<param name="FlashVars" value="src=URL del archivo MP3">
</object>


<object type="application/x-shockwave-flash" data="URL del archivo SWF" width="120" height="60"> <param name="movie" value="URL del archivo SWF">
<param name="wmode" value="transparent" />
<param name="FlashVars" value="src=URL del archivo MP3">
</object>


Para usarlo sólo necesitas descargar este archivo, descomprimirlo, y subir uno de los archivos SWF a un hosting.

Luego pega el código del reproductor que más te guste en un elemento HTML/Javascript de tu blog, o incluso una entrada, ahí agrega la URL del archivo SWF que subiste previamente (sólo el que hayas elegido), verás que debes agregar la URL dos veces.
También agrega donde se indica la URL de tu canción y listo.

Puedes agregar más de una canción, sólo añade las demás URLs de las canciones una seguida de la otra, pero todas separadas por una coma, por ejemplo:

<object type="application/x-shockwave-flash" data="URL del archivo SWF" width="91" height="25"> <param name="movie" value="URL del archivo SWF">
<param name="wmode" value="transparent" />
<param name="FlashVars" value="src=URL del archivo MP3 uno,URL del archivo MP3 dos,URL del archivo MP3 tres">
</object>

También podemos usar tres parámetros, autoplay, repetir, y aleatorio:
&amp;autostart=yes
&amp;repeat=yes
&amp;shuffle=yes

Cualquiera de ellos se agrega al final de la última URL de la canción, por ejemplo, si usáramos los tres se vería así:
<object type="application/x-shockwave-flash" data="URL del archivo SWF" width="91" height="25"> <param name="movie" value="URL del archivo SWF">
<param name="wmode" value="transparent" />
<param name="FlashVars" value="src=URL del archivo MP3&amp;autostart=yes&amp;repeat=yes&amp;shuffle=yes">
</object>

Como puedes ver es un reproductor de fácil uso, sencillo y visualmente agradable.
En la siguiente entrada veremos cómo crear listas de reproducción en formato XML.
Si ya sabes crear listas XML entonces siempre has de cambiar esta línea del reproductor:
<param name="FlashVars" value="src=URL del archivo MP3">
Por esta otra:
<param name="FlashVars" value="playlist=URL del archivo XML">
En el caso de las listas de reproducción XML la URL del archivo nunca deberá llevar el protocolo seguro de transferencia de hipertexto, es decir, que en vez de que sea HTTPS será HTTP.
PICMARK, PROTEGER NUESTRAS IMAGENES  CON MARCAS DE AGUA
Todos alguna vez fuimos victimas de plagios con nuestras obras publicadas en Internet. Ya sean imágenes, textos o videos, muchas veces el problema no esta en que la utilicen, sino en el uso que se les da y en que otros se terminen adueñando de ellos.Existen servicios como Safe Creative en el que podemos registrar nuestras obras y decidir cuales serán los derechos que le adjuntamos y cuales liberamos.
Pero si no te incomodan que utilicen tus fotografías, sino que tu preocupación es que no se adueñen de ella mostrándose como autores, puedes aplicarle una marca de agua para evitar estos problemas.
Proteger las fotos con marca de agua es uno de los métodos más antiguos, pero si da buenos resultados.
PicMarkr es un servicio online gratuito que hará el trabajo por nosotros.Es que añadir una marca de agua en una foto sin tener algo de práctica en esto puede resultar muy trabajoso o terminar con malos resultados, ya que podemos arruinar la imagen con las letras.
Entonces nada mejor que subir las imágenes a PicMark que nos da la posibilidad de utilizar nuestras imágenes de facebook, flickr o picasa, y también las que tengamos guardadas en nuestro ordenador. Podemos subir hasta 5 imágenes juntas. Le damos el “ok” y PicMark añadirá las marcas de agua para proteger nuestras imágenes

ENLACE AQUI

CREAR MENSAJE DE BIENVENIDA EN EL BLOG

Hoy vamos a ver uno de los trucos que me han pedido bastante por email. Se trata de colocar un Mensaje de Bienvenida al Blog, el cual aparecerá solamente en el Home, y al cual daremos un aspecto diferente del resto del blog para que resalte.
Es una forma de dar bienvenida a los usuarios y de recomendarles algunas cosas que creemos que le interesarán, a la vez de proporcionarles información breve acerca de los temas que trata el blog, o bien pueden usarlo para lo que crean necesario.
Para añadir el Mensaje de Bienvenida al blog debemos ir a la Edición HTML de la plantilla (Diseño --> Edición HTML) y buscamos el siguiente código:
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Entradas del blog'
type='Blog'/>
</b:section>

y justo antes del mismo añadimos esta sección:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:section class='main' id='main-dos'
showaddelement='yes'>
<b:widget id='HTML50' locked='false' title=''
type='HTML'/>
</b:section>
</b:if>

Guardamos los cambios y ahora nos dirigimos a Diseño, donde veremos que aparece un gadget HTML nuevo (que acabamos de añadir al agregar el código anterior)


Hacemos click en "Editar" ese gadget y pegamos el código del Mensaje de Bienvenida, el cual puede ser algo así como este:

<div class="mensaje">
<h2>¡Bienvenido!</h2>

<img
src="http://img155.imageshack.us/img155/3627/34283694.jpg"/>
<p>Bienvenido a mi blog: AQUI LA URL DE TU BLOG
Blogs</p>
<p>Espero que lo que veas aquí sea de tu
agrado y pases un buen momento con nosotros.</p>
<p>¡Estás en tu casa! Por lo cual
puedes leer y comentar lo que quieras.</p>

<p>Si quieres puedes suscribirte a mi <a
href="http://feeds2.feedburner.com/blogspot/hnBy">feed</a>
</p>

<p>Y si necesitas contactar conmigo, puedes enviarme un
<a
href="mailto:TU-EMAIL@hotmail.com">email</a></p>

</div>


Con estos pasos ya tenemos un Mensaje de Bienvenida, podemos dejarlo tal como esta o bien darle un poco más de estilo para que quede más bonito. Para ello nos dirigimos a Diseño y buscamos ]]></b:skin> y justo antes de eso pegamos este código:


.mensaje{background:#B7D3D9;padding: 10px;font-size: 14px;}
.mensaje h2{font-size: 22px; margin: 0 auto; color: #fff; font-weight:
bold;text-align: center; }
.mensaje a{font-weight: bold; color:#fff;text-decoration:underline;}

Para cambiar la imagen solo editamos la parte que dice:

<img
src="http://img155.imageshack.us/img155/3627/34283694.jpg"/>

por: <img src="URL-DE-TU-IMAGEN"/>


Espero que les sirva

IMAGEN FLOTANTE EN BLOGGER U OTRO GESTOR DE CONTENIDOS

El truco blogger de hoy es bastante sencillo e interesante, se trata de establecer una imagen flotante del lado superior derecho.


Debemos acceder al escritorio - diseño y en la edición html de la plantilla buscamos la etiqueta </head> e introducimos este código.
<a href='http://URL DE TU BLOG.blogspot.com/' style='display:scroll;position:fixed;bottom:0px;right:0px;'><img src='URL DE TU IMAGEN'/>

Lo que nos resta por hacer es modificar por nuestra url donde dice urldetublog.blogspot.com, al igual que la imagen.

CREAR MENU CON SUB-MENUS

Hoy esplicare como crear menus con sub-menus para colocarlos en nuestro blog.

El primer paso es añadir el código CSS del menu. Para ello nos dirigimos a la edición HTML de nuestra plantilla, y sin expandir artilugios, buscamos ]]></b:skin> y justo antes de ello pegamos el siguiente código:


/* MENU DOS (Robs)

----------------------------------------------- */

#subnavbar {
background: #333333;
width: 100%;
height: 27px;
font-weight:bold;
color: #FFFFFF;
margin: 0px;
padding: 0px;
font-family:"Trebuchet MS";
}

#subnav {
margin: 0px;
padding: 0px;
}

#subnav ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}

#subnav li {
list-style: none;
margin: 0px;
padding: 0px;
}

#subnav li a, #subnav li a:link, #subnav li a:visited {
color: #FFFFFF;
display: block;
font-size: 11px;
text-transform: uppercase;
margin: 0px 0px 0px 0px;
padding: 5px 10px 5px 10px;
border-left: 1px solid #FFFFFF;
}

#subnav li a:hover, #subnav li a:active {
background: #999999;
color: #000000;
display: block;
text-decoration: none;
margin: 0px 0px 0px 0px;
padding: 5px 10px 5px 10px;
}

#subnav li li a, #subnav li li a:link, #subnav li li a:visited {
background: #333333;
width: 120px;
heigth: 20px
float: none;
margin: 0px;
padding: 5px 10px 5px 10px;
border-bottom: 1px solid #FFFFFF;

border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
}

#subnav li li a:hover, #subnav li li a:active {
background: #999999;
margin: 0px;
padding: 5px 10px 5px 10px;
}

#subnav li {
float: left;
padding: 0px;
}

#subnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0px;
padding: 0px;
}

#subnav li li {
}

#subnav li ul a {
width: 140px;
}

#subnav li ul a:hover, #subnav li ul a:active {
}

#subnav li ul ul {
margin: -25px 0 0 161px;
}

#subnav li:hover ul ul, #subnav li:hover ul ul ul, #subnav li.sfhover
ul ul, #subnav li.sfhover ul ul ul {
left: -999em;
}

#subnav li:hover ul, #subnav li li:hover ul, #subnav li li li:hover ul,
#subnav li.sfhover ul, #subnav li li.sfhover ul, #subnav li li
li.sfhover ul {
left: auto;
}

#subnav li:hover, #subnav li.sfhover {
position: static;
}


Es en este código donde podemos cambiar el color que tiene la barra, el texto, el tamaño o cualquier otra cosa del aspecto visual. Por ejemplo, si quieren cambiarle el color de fondo (que por defecto está negro) busquen donde dice background y cambien el color (para saber los colores miren esta WEB). Una vez listo guardamos los cambios.

Ahora nos dirigimos a Diseño --> Elementos de Página --> Añadir un gadget --> HTML/JavaSript, y pegamos el siguiente código:


<div id="subnavbar">
<ul id="subnav">

<li><a href="URL DEL BLOG"
title="Inicio">INICIO</a>
</li>
<li><a href=""
title="">PESTAÑA1</a>
<ul>
<li><a href=""
title="">SUB-PESTAÑA1</a>
</li>
<li><a href=""
title="">SUB-PESTAÑA1</a>
</li>
<li><a href=""
title="">SUB-PESTAÑA1</a>
</li>
</ul>
</li>
<li><a href="mailto:" title="Enviame un
email">CONTACTO</a>
</li>

<li><a href=""
title="">PESTAÑA2</a>
<ul>
<li><a href=""
title="">SUB-PESTAÑA2</a>
</li>
<li><a href=""
title="">SUB-PESTAÑA2</a>
</li>
<li><a href=""
title="">SUB-PESTAÑA2</a>
</li>
</ul>
</li>
<li><a href=""
title="">PESTAÑA3</a>
<ul>
<li><a href=""
title="">SUB-PESTAÑA3</a>
</li>
<li><a href=""
title="">SUB-PESTAÑA3</a>
</li>
</ul>
</li>
<li><a href=""
title="">PESTAÑA4</a>
<ul>
<li><a href=""
title="">SUB-PESTAÑA4</a>
</li>
<li><a href=""
title="">SUB-PESTAÑA4</a>
</li>
</ul>
</li>
<li><a href=""
title="">PESTAÑA5</a>
<ul>
<li =><a href=""
title="">SUB-PESTAÑA5</a>
</li>
<li><a href=""
title="">SUB-PESTAÑA5</a>
</li>
<li><a href=""
title="">SUB-PESTAÑA5</a>
</li>
<li><a href=""
title="">SUB-PESTAÑA5</a>
</li>
</ul>

</li></ul></div>


Es en este código es donde tenemos que colocar los enlaces y el texto que aparecerá en cada pestaña del menú y de los sub-menús.

Donde dice a herf= se coloca cada enlace entre las comillas. Entre las comillas de title= colocamos el texto explicativo que se verá al pasar el puntero sobre el enlace.

En PESTAÑA1, PESTAÑA2, etc. colocamos el texto que se verá en cada pestaña del menú y en SUB-PESTAÑA1, SUB-PESTAÑA2, etc. el texto que se verá en cada sub-menú
Guardamos y listo

WIDGET DE POSTS RECIENTES CON IMAGENES PARA BLOGGER

Hay varias versiones de widgets para mostrar los últimos posts el Blogger.
Aqui les dejo una que esta en español.
Para añadir el windget, Este widget de posts recientes se añade simplemente copiando el siguiente códígo en un gadget en blanco (Diseño&gt;Añadir un Gadget&gt;HTML/Javascript):

&lt;style type='text/css'&gt;
img.recent_thumb {padding:2px;width:70px;height:
70px;border:0;float:left;margin:5px 10px 10px 0;
 border: 1px solid #ccc;}.recent_posts_
with_thumbs {float: left;width: 100%;min-height:
 100px;margin:
0px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent_posts_with_thumbs li {padding-bottom:
5px;padding-top:5px;min-height:
75px;}.recent_posts_with_thumbs a 
{text-decoration:none;}
.recent_posts_with_thumbs strong 
{font-size:10px;}
.recent_posts_with_thumbs h4 {
text-transform: uppercase;
font-size: 14px;
}
&lt;/style&gt;
&lt;script type='text/javascript'&gt;
//&lt;![CDATA[
function showrecentpostswiththumbs(json) 
{document.write('&lt;ul class="
recent_posts_with_thumbs"&gt;'); for 
(var i = 0; i &lt; numposts; i++) 
{var entry = json.feed.entry[i];var posttitle
 = entry.title.$t;var posturl;if 
(i == json.feed.entry.length) break;for
 (var k = 0; k &lt; 
entry.link.length;k++){if(entry.link[k]
.rel=='replies'&amp;&amp;entry.link[k]
.type=='text/html'){var commenttext=entry
.link[k].title;var commenturl=entry.
link[k].href;}if (entry.link[k].rel == 
'alternate') {posturl = entry.link[k].
href;break;}}var thumburl;try {thumburl
=entry.media$thumbnail.url;}catch (error)
 
{
s=entry.content.$t;a=s.indexOf("&lt;img"
);b=s.indexOf("src=\"",a);c=s.indexOf
("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1
)&amp;&amp;(b!=-1)&amp;&amp;(c!=-1)
&amp;&amp;(d!="")){thumburl=d;} else 
thumburl='http://www.webaholic.co.in
/other/no-image.jpg';
}
 
var postdate = entry.published.$t;var 
cdyear = postdate.substring(0,4);
var cdmonth = postdate.substring(5,7);
var cdday = postdate.substring(8,10);
var monthnames = new Array();monthnames[1]
 = "Ene";monthnames[2] 
= "Feb";monthnames[3] = "Mar";monthnames[4]
 = "Abr";monthnames[5] 
= "May";monthnames[6] = "Jun";monthnames[7]
 = "Jul";monthnames[8] 
= "Ago";monthnames[9] = "Sep";monthnames[10]
 = "Oct";monthnames[11] 
= "Nov";monthnames[12] = "Dic";document.write
('&lt;li class="clearfix"&gt;');
 
 
if(showpostthumbnails==true) 
document.write('&lt;img class="recent_thumb"
 src="'+thumburl+'"/&gt;');
document.write('&lt;b&gt;&lt;h4&gt;&lt;a 
href="'+posturl+'" 
target ="_top"&gt;'+posttitle+'
&lt;/a&gt;&lt;/b&gt;&lt;/h4&gt;');
 
    if ("content" in entry) {
      var postcontent = entry.content.$t;}
    else
    if ("summary" in entry) {
      var postcontent = entry.summary.$t;}
    else var postcontent = "";
    var re = /&lt;\S[^&gt;]*&gt;/g; 
    postcontent = postcontent.replace(re, "");
 
 
if (showpostsummary == true) {
 
      if (postcontent.length &lt; numchars) {
          document.write('&lt;i&gt;');
         document.write(postcontent);
          document.write('&lt;/i&gt;');}
      else {
          document.write('&lt;i&gt;');
         postcontent = postcontent.
substring(0, numchars);
         var quoteEnd = postcontent.
lastIndexOf(" ");
         postcontent = postcontent.
substring(0,quoteEnd);
         document.write(postcontent + '...');
          document.write('&lt;/i&gt;');}
}
 
var towrite='';var flag=0;
document.write('&lt;br&gt;&lt;strong&gt;');
 
if(showpostdate==true) 
{towrite=towrite+monthnames[parseInt
(cdmonth,10)]+' - '+cdday+' - '+cdyear;flag=1;}
 
if(showcommentnum==true) 
{
if (flag==1) {towrite=towrite+' | ';}
if(commenttext=='0 Comments')
 commenttext='0 comentarios';
if(commenttext=='1 Comment') 
commenttext='1 comentario';
commenttext = '&lt;a href="
'+commenturl+'" target 
="_top"&gt;'+commenttext+'&lt;/a&gt;';
towrite=towrite+commenttext;
flag=1;
;
}
 
if(displaymore==true) 
{
if (flag==1) towrite=towrite+' | ';
towrite=towrite+'&lt;a href="
'+posturl+'" class="url" 
target ="_top"&gt;Más&lt;/a&gt;';
flag=1;
;
}
 
document.write(towrite);
 
document.write('&lt;/strong&gt;&lt;/li&gt;');
if(displayseparator==true) 
if (i!=(numposts-1))
document.write('');
}document.write('&lt;/ul&gt;');
 
}
//]]&gt;
&lt;/script&gt;
&lt;script style='text/javascript'&gt;
var numposts = 5;
var showpostthumbnails = true;
var displaymore = true;
var displayseparator = true;
var showcommentnum = true;
var showpostdate = true;
var showpostsummary = true;
var numchars = 80;&lt;/script&gt;
&lt;script src='http:
//TUBLOG.blogspot.com
/feeds/posts/default?orderby
=published&amp;alt=json-in-script
&amp;callback=showrecentpostswiththumbs
'&gt;&lt;/script&gt;
 
Para que funcione, en la última línea
 debes reemplazar “TUBLOG
por el nombre de tu blog.
BOTONES DE GOGLE PLUS +1

Teniendo encuenta la  nueva red social de GOOGLE (Google Plus) les dejo un pack de botones de Google + para que tu llames mas facil la atencion de tus lectores y asi ganes seguidores en esta red social.
Para añadir a tu blog uno de estos botones de Google plus +1 tiene que ir a :  


Si usas la interfaz antigua entra en Diseño | Elementos de la página | Añadir gadget | HTML/Javascript.
Si usas la nueva interfaz entra en Diseño | Añadir gadget | HTML/Javascript. y pega el codigo del boton que tu quieras.

<a style="" href="URL DE TU GOOGLE+"><img src="https://lh4.googleusercontent.com/-xckKK57B5SQ/Ts0W2Lyu38I/AAAAAAAAAhE/G418dY5hirQ/s100/google1.png" /></a>
<a style="" href="URL DE TU GOOGLE+"><img src="https://lh6.googleusercontent.com/-VyJhxp5xI14/Ts0W2cI7ViI/AAAAAAAAAhM/P2vxOVUJIZU/s100/google2.png" /></a>

<a style="" href="URL DE TU GOOGLE+"><img src="https://lh5.googleusercontent.com/-vLLZLsW7Mjg/Ts0W2ljN3MI/AAAAAAAAAhQ/65ciE0B2eT8/s100/google3.png" /></a>
<a style="" href="URL DE TU GOOGLE+"><img src="https://lh3.googleusercontent.com/-21eQkgMPB5A/Ts0W2wQOgMI/AAAAAAAAAhc/eLa9x-AOpwo/s100/google4.png" /></a>

<a style="" href="URL DE TU GOOGLE+"><img src="https://lh4.googleusercontent.com/-0v1FgcoZvR0/Ts0W3cTJGvI/AAAAAAAAAhs/RVm6RWZfuGc/s100/google5.png" /></a>
<a style="" href="URL DE TU GOOGLE+"><img src="https://lh6.googleusercontent.com/-ceT7pXQPoHc/Ts0W3PyQcYI/AAAAAAAAAhk/pchKQJBx2Z0/s100/google6.png" /></a>
<a style="" href="URL DE TU GOOGLE+"><img src="https://lh3.googleusercontent.com/-AT_6V-GTZMU/Ts0W3hbXN8I/AAAAAAAAAhw/-UrzlxqaVAY/s100/google7.png" /></a>
 <a style="" href="URL DE TU GOOGLE+"><img src="https://lh3.googleusercontent.com/-AT_6V-GTZMU/Ts0W3hbXN8I/AAAAAAAAAhw/-UrzlxqaVAY/s100/google8.png" /></a>
 <a style="" href="URL DE TU GOOGLE+"><img src="https://lh5.googleusercontent.com/-zMsfJ6y1ebU/Ts0W4Jf_cGI/AAAAAAAAAiE/xWWAD7CLpYA/s100/google9.png" /></a>
 <a style="" href="URL DE TU GOOGLE+"><img src="https://lh6.googleusercontent.com/-fw6KqcxlKYE/Ts0W4ACI86I/AAAAAAAAAiI/t2ZquRjArBY/s100/google10.png" /></a>


COMO UN GADGET DE TWITTER PARA BLOG
Twitter es una de las redes sociales mas populares del mundo y muchos sitios webs tienen paginas de seguidores en dicha red social así que os dejo un pequeño gadget que aunque sencillo atraerá la curiosidad de tus lectores al ver el pajarito de Twitter en la parte inferior de tu blog.
Para agregar este gadget sigue los siguiente pasos:

Si usas la interfaz antigua entra en Diseño | Elementos de la página | Añadir gadget |   HTML/Javascript

Si usas la nueva interfaz entra en Diseño | Añadir gadget | HTML/Javascript. 
 <br /><a style="display:scroll;position:fixed;bottom:0px;right:0px;" href="URL DE TU TWITTER"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMy95rusqIsuwUg_S83rY6pM9dOKtJTDIMf2s5IlQOSOxYZHoQor2ZTi8Mp4baRAFlVkDF3ASzFixff00c065UQA_bwlYBEAN6_gGwH-poD4cidNvlnDhd7hQYV5kviqr95JH7iDzm2So/s1600/followme_right.png" /></a><br />

En la parte de color azul donde dice URL DE TU TWITTER poner tu dirección

COMO AÑADIR EL BOTON SUBIR
Como se añade el boton subir que es muy similar al de Taringa!.
Para agregar este boton ve a la Edición HTML de tu blog y pega antes de </head> lo siguiente:
<script src='http://dl.dropbox.com/u/35784805/subirtaringa.js' type='text/javascript'/>

Ahora antes de  ]]></b:skin> pega lo siguiente:
 #topcontrol {top:20px;right:20px;}
#topcontrol img {opacity:0.5;}
#topcontrol img:hover {opacity:1;}

Es muy facil de agregar este truco solo es cuestion de agregar un par de codigos y ya tenemos este famoso boton.

EFECTO ARCOIRIS AL PASAR EL RATON POR LOS EN LASCES

Con un script vamos a dar un efecto de arcoiris al pasar el mouse sobre los links.
Este efecto se aplica para todos los links que tengas en el blog.

Sólo entra a Diseño > Edición de HTML y pega antes de </head> esto:
<script src='http://dl.getdropbox.com/u/647003/CiudadBlogger/Scripts/rainbowlinks.js'/>
Así de fácil tendrás un efecto animado en tus links del blog


ENLACES CON LINEAS DE MOVIMIENTO

Para darle este efecto a tus vínculos entra a Diseño ; Edición de HTML y busca esta línea:
a:hover {

Abajo de ella pega cualquiera de estos códigos:

1
text-decoration:none;
background:url(http://img233.imageshack.us/img233/5403/linearrow.gif);
background-repeat: repeat-x;
background-position: 100% 100%;
padding-bottom: 3px;

2
text-decoration:none;
background:url(http://img694.imageshack.us/img694/2616/linearrow2.gif);
background-repeat: repeat-x;
background-position: 100% 100%;
padding-bottom: 3px;

3
text-decoration:none;
background:url(http://img35.imageshack.us/img35/8056/linearrow3.gif);
background-repeat: repeat-x;
background-position: 100% 100%;
padding-bottom: 3px;

4
text-decoration:none;
background:url(http://img35.imageshack.us/img35/1221/linepoints.gif);
background-repeat: repeat-x;
background-position: 100% 100%;
padding-bottom: 5px;

5

text-decoration:none;
background:url(http://img233.imageshack.us/img233/1752/lineyellow.gif);
background-repeat: repeat-x;
background-position: 100% 100%;
padding-bottom: 3px;


Si ves que la línea animada está muy cerca del texto puedes modificar padding-bottom: 3px; por otro número, por ejemplo 5px
Así de simple puedes darle a tus enlaces un estilo diferente al pasar el mouse.