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

 

COMO 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 UN MENSAJE DE BIENVENIDA EN EL BLOG

Hoy vamos a ver este trucos. 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

GANAR DINERO CON LOS COMENTARIOS DEL BLOG

Los bloggers nos encontramos ante la incipiente necesidad de generar mayores ingresos al blog. Muchos de los bloggers exitosos obtienen sus ingresos de las ganancias de Adsense. Sin embargo no todos los bloggers llegan a cubrir el cupo mínimo de cobro de Adsense o no cubren sus costos mensuales con ello.

Entre las diferentes alternativas a Adsense que existen en la actualidad, hoy veremos una muy particular, donde por primera vez lograremos sacar provecho (económico) de los spammers y también de nuestros comentaristas.


El servicio es brindado por adscaptcha empresa que nos paga por cada comentario que se haga en el blog. El funcionamiento es muy sencillo los comentaristas deben ingresar un captcha anti spam, pero en el cual hay publicidad gráfica.


Para el lector del blog, es todo normal, sin embargo para nosotros esto puede significar un notorio aumento de los ingresos.


Existen plugins y código php para insertar en los blogs y sitios basados en WordPress, Joomla, Drupal y ASP pero aún no está disponible para Blogger.


Se debe tener presente que los captcha pueden ser molestos para los lectores y en especial para aquellos que sufren problemas visuales, con lo que se recomienda un análisis de la verdadera utilidad.

ENLACE AQUI

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.

COMO BUSCAR UN CODIGO POSTAL

El envío de correos electrónicos es la modalidad que se impone hoy día, en especial para los bloggers, pero el envío de correos de forma tradicional aún se utiliza y a menudo nos vemos en la dificultad de no saber exactamente cual es el código postal de nuestro destinatario.
En las ocasiones en que se le puede consultar al destinatario nuestro, cual es su código postal el problema no es mayor, pero cuando esto no es posible, debemos ponernos a buscar código postal correspondiente al de la localidad de nuestro destinatario.

Incluso muchas veces cuando el blogger debe registrarse en sitios web, debe añadir el código postal de su ciudad para poder completar el formulario del registro. Para beneficio del blogger, buscar código postal es un proceso totalmente gratis y solo se demora unos pocos segundos.

Para conocer cual es el código postal de una ciudad, solo debemos buscar la ciudad y de forma instantánea tendremos el número correspondiente. Así que cuando quieras buscar el código postal de una localidad, ya sabes como hacerlo.

ENLACE AQUI

REPRODUCTOR DE DVD GRATIS

Las películas en dvd poseen una calidad superior a los formatos tradicionales, además de poseer funcionalidades extras que muchas filmaciones traen consigo.


Pero no todos podemos ver dvd desde nuestra computadora, ya que además de la lectora de dvd que debemos tener instalada en la computadora, debemos utilizar un reproductor de dvd, es decir un software apropiado.


En internet podemos encontrar muchos programas que son reproductores de dvd gratis, sin embargo el mejor reproductor de dvd gratis es Avs Dvd Player.


Muchos de Ustedes seguramente ya conocen este potente software reproductor de películas, pero en lo particular no lo conocía hasta hace poco que me lo recomendó un amigo. Cuando lo comencé a utilizar, descubrí varias funcionalidades que tiene este reproductor gratis de dvd:
•Lee multiformatos de videos, tales como Avi, Mpeg, Divx, entre otros.
•Soporta videos para Quick Time.
•Interfaz gráfica amigable al usuario
•Opciones de configuración avanzadas.
Pero dentro del programa encontraremos más funcionalidades que aún me quedan por descubrir, pero las mencionadas ya hacen que sea un reproductor de dvd de gran calidad, como si fuese uno pago.


Desde ya te recomiendo a Avs Dvd Player como tu reproductor de dvd gratis favorito.

DESGARGALO DE AQUI O AQUI

CORRECTOR ORTOGRAFICO ONLINE

Cuando tenemos que escribir en un blog o debemos enviar un mail de carácter formal, tenemos que tener en cuenta que las faltas de ortografía son muy mal vistas. Sabemos que a cualquier persona se le puede pasar un error ortográfico o una falta de tilde, más aún cuando escribimos rápido o tenemos la mente ocupada en otras cosas, pero la verdad es que debemos evitarlas.

En  Blogger varias son las veces que hemos hecho hincapié en esto, y consideramos que debemos seguir trabajando día a día para crear contenido de calidad, y para ello el control ortográfico es fundamental.

Para eso, nada mejor que antes de enviar el mail o publicar el post, es controlarlo con un corrector ortográfico online. Hablamos de una aplicación online porque son de interfaz más sencilla y no necesitas de instalaciones, ni programas.

Una buena opción es el Corrector Ortográfico Español a de mas de diez idiomas mas en línea que permite pegar el texto a controlar y luego nos muestra todas las faltas de ortografía y gramática con las posibles soluciones.

Para ir al CORRECTOR O AQUI

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

DROPBOX

Bueno aquí os dejo una web muy buena para almacenar vuestras imagenes, música o lo que queráis

Dropbox ha evolucionado el concepto de subir archivos a Internet hasta tal punto que, gracias a sus aplicaciones de Escritorio, es como si como si tuvieras un nuevo disco duro disponible en Internet. ¿Sabes que, además, puedes acceder a él desde tu navegador?
La versión web de Dropbox se caracteriza sobre todo por su austeridad. Un diseño muy limpio y minimalista te ofrece, una vez registrado, la visión por carpetas de tu unidad de disco virtual. A través de sencillos menús podrás mover ficheros, renombrarlos o incluso recuperar versiones anteriores de los mismos.
Si el concepto de Dropbox es fácil de entender, aprenderlo es todo una delicia gracias al tutorial perfectamente integrado en la experiencia de uso. A medida que realices acciones distintas en Dropbox, conseguirás rellenar una lista de tareas que, una vez llena, te proporcionará algo más de espacio en disco. Además, podrás conseguir hasta 8GB recomendando la aplicación a tus contactos.
La posibilidad de compartir carpetas con otros usuarios de Dropbox, de enviar enlaces de descarga de ficheros e incluso de llevar un registro de los movimientos que se han realizado entre carpetas, son algunas de las muchas posibilidades que permiten a Dropbox ser una alternativa razonable a los discos externos y un imprescindible de las aplicaciones web.

2GB de espacio gratuito.

PARA REGISTRAROS CLICK AQUI

FLIQLO

Bueno aqui hos traigo un buen salvapantallas es muy vistoso imitando a un reloj de placas en el mismo enlace esta para windows y mac

PARA DESCARGAR CLICK AQUI O AQUI

GANAR DINERO POR DESCARGA DE ARCHIVOS

Bueno aqui ostraigo un listado de web donde podeis alojar buestros archivos para que se los descarges.

Uploaded. Es un servicio de hosting gratuito que te permite ganar interesantes cantidades de dinero compartiendo tus archivos o documentos. Ofrecen la posibilidad de subir los archivos mediante FTP. Las ganancias varían según el país desde donde se realice la descarga.
El minimo de pago son 20 € y pagan a traves de Paypal. Megaupload murio, Fileserve y compañia, de momento solo queda Uploaded. Sigue subiendo tus archivos y gana dinero con ellos.

Letitbit. Es un servicio de hosting gratuito que te permite ganar interesantes cantidades de dinero compartiendo tus archivos o documentos. Ofrecen la posibilidad de subir los archivos mediante FTP. Las ganancias varían según el país desde donde se realice la descarga.
El minimo de pago son 10 $ y pagan a traves de Paypal. Megaupload murio, Fileserve y compañia, de momento solo queda Uploaded y Letitbit, como los mejores. Sigue subiendo tus archivos y gana dinero con ellos.

Rapidgator. Es un servidor que nos paga por que otras personas se decargen los archivos que subamos a través de el. Ser uploader es la mejor manera de ganar dinero en Internet, si estas empezando o quieres saber como va este mundillo, no dudes en comunicarte conmigo.
El mínimo de pago es de 15 $ y pagan muy bien por descarga. No dudes mas, y gana dinero con Rapidgator.

Turbobit. Es un servidor que nos paga por que otras personas se bajen los archivos que subamos a través de el. Ser uploader es la mejor manera de ganar dinero en Internet, si estas empezando o quieres saber como va este mundillo, no dudes en comunicarte conmigo.
El mínimo de pago es de 10 $ y pagan muy bien por descarga. No dudes mas, y gana dinero con Turbobit

FORMAT FACTORY

Format Factory es un conversor de formatos que te ayuda a convertir cualquier archivo de audio, vídeo o imagen que se cruce en tu camino, incluidos los formatos compatibles con móviles, PSP, PS3, y iPod.

Para qué sirve

Format Factory te permite hacer un montón de cosas:
- Convertir imágenes, vídeo y audio a otros formatos
- Optimizar vídeos para tu móvil, PSP, PS3 y iPhone
- Extraer contenido de CDs y DVDs
- Unir dos o más vídeos en uno solo
- Cambiar la extensión, tamaño y orientación de varias imágenes
- Insertar texto en fotos como marca de agua

Lo mejor de Format Factory es que puedes hacer todo esto sin tener que ser un experto. El entorno del programa está pensado para acceder a cualquier tipo de conversión que necesites en apenas dos clics. Seleccionas el tipo de archivo, el formato de destino y listo.


Cómo usar Format Factory
Usar Format Factory es muy sencillo. Lo puedes hacer prácticamente todo en unos pocos clics. En la columna de la izquierda, selecciona el tipo de contenido; luego, añade los ficheros originales; por último, escoge el perfil de conversión y haz clic en el botón "Iniciar". Format Factory se encarga del resto.

Además de convertir música y vídeo, con Format Factory también puedes modificar la resolución de un vídeo o cambiar la extensión, tamaño y orientación de una imagen - o de tantas como quieras al mismo tiempo. Otra función interesante es la de unir varios vídeos o pistas de audio en una sola.

Desde las opciones de Format Factory puedes personalizar los detalles de la conversión. Elegir las carpetas de trabajo, la calidad y resolución del archivo, el nivel de compresión, entre otras posibilidades.

En definitiva, si buscas un entorno que te lo permite convertir todo, o casi todo, Format Factory es una excelente elección.

DESCARGAR FORMAT FACTORY O AQUI

MECANET

La mecanografía es el arte de escribir a máquina, un arte que ha quedado en desuso con los años y que hoy en día sólo unos pocos conocen y aplican en su día a día delante del ordenador.
¿Cuántos dedos utilizas para teclear? ¿Todos? ¿Y en el orden adecuado? Conocer los secretos de la mecanografía te ayudará a escribir más rápido con el teclado y, en definitiva, a ahorrar tiempo.
MecaNet es uno de los mejores programas para aprender mecanografía en español. A través de lecciones y de juegos te convertirá en un experto en mecanografía para que tengas las manos más rápidas.
MecaNet no requiere instalación. Lo descargas, lo abres y ya lo puedes utilizar. Por defecto, abre la primera lección, la más sencilla.
MecaNet se estructura en tres ventanas: en la principal verás las letras a escribir, estadísticas de la lección y consejos para escribir siguiendo las normas de mecanografía. Las otras dos ventanas muestran un teclado virtual y un dibujo de dos manos, indicando a qué dedo corresponde la tecla a pulsar.
Siguiendo cada lección, de un total de 20, MecaNet te ayudará a coger soltura y a acelerar tu ritmo de mecanografiado. Las primeras lecciones son letras sueltas, pero a medida que avances empezarás a teclear palabras enteras y frases.
Desde la categoría Lecciones también puedes abrir tus propias lecciones en formato TXT o texto plano. Y cuando consideres que dominas una lección, desde Exámenes te podrás examinar. Tienes dos opciones: imprimir la prueba y repetirla o seguir las instrucciones directamente desde MecaNet.
No todo en MecaNet va a ser aprender a teclear correctamente. También hay tiempo para juegos, y es que MecaNet incluye tres juegos que te permitirán aprender mecanografía mientras te diviertes. En los tres casos deberás pulsar la tecla adecuada antes de que se acabe el tiempo o la pantalla se llene de letras.

DESCARGA MECANET o MECANET