GANA DINERO FACIL CON MYBROWSERCASH

Mybrowsercash es una página con bastante futuro o eso dice mi intuición. Tiene un formato destinado a publicidad bien pensado y que si es bien gestionado durará bastante tiempo. Te contamos a continuación como ganar dinero en Mybrowsercash.

En Mybrowsercash puedes ganar dinero viendo anuncios, pero esos anuncios no se encuentran en una web como una ptc. Ahí está la verdadera novedad de Mybrowsercash. Tan sólo debes de navegar por internet y los anuncios se irán mostrando en tu pantalla. Simplemente deberás de hacer clic en los anuncios e irás ganando dinero mientras navegas.

Te preguntarás como salen los anuncios sólos, para ello deberás de instalar un pequeño plugin o addon que funciona en los navegadores Internet Explorer y Firefox. Además necesitarás tener instalado el sistema operativo Windows.

Si navegas bastante por internet, podrás ganar más dinero que en una ptc. Mybrowsercash es una de las mejores opciones para aquellos que pasan largas horas delante del pc. Si eres de los activos, conseguirás llegar muy rápido al mínimo de pago de Mybrowsercash que se encuentra actualmente en 20$. Podrás pedir el pago por Alertpay o Paypal.

Una vez registrado deberás de entrar en tu cuenta y bajarte e instalar el plugin. Para ello te pedirá que cierres el navegador y lo vuelvas a abrir. Nada más abrirlo te pedirá los datos de acceso a tu cuenta Mybrowsercash. Eso queda grabado y no deberás de introducirlo más. Una vez instalado ya solo te queda navegar por internet y ver todos los anuncios que se van mostrando en tu navegador.

Aparte de los anuncios mostrados en una caja de texto, también se mostrarán anuncios a pantalla completa que se cierran con un close en la parte superior derecha, tras finalizar el contador de 5 segundos. En última instancia puedes encontrar anuncios contextuales. Estos anuncios de Mybrowsercash se encuentran marcados en el texto de las webs que visites con una doble raya azul.

Si eres activo podrás conseguir alrededor de 10$ al mes o lo que es lo mismo, podrás cobrar en apenas 2 meses de Mybrowsercash sin referidos. Todo esto es relativo, porque depende del número de anuncios que veas, tu país de procedencia, tu actividad, etc… Aqui teneis en bannner para registraros

GANADINERO FACIL CON 20DOLLARS2SURF

Una manera cómoda de ganar dinero con tu conexión de internet, sin necesidad de dar Clicks, sin tener que pasar horas frente a tu PC, es colocar o descargar una barra de navegación automatizada, o como se conoce mejor un “Cashbar”; lo cual no es otra cosa que una simple Mini Barra la cual se ejecuta en tu PC, siempre que estés conectado.

¿Cómo funciona? Simplemente hay que descargar la “barra” y comandarla a que se ejecute cada vez que se inicia la PC o se conecta a Internet, la misma permanecerá en actividad por el tiempo que se desee y sobre las demás paginas de navegación (no causa ningún tipo de problemas al navegar, ejecutar otros programas, etc), se puede arrastrar y colocar en cualquier área del monitor, dejándola allí sin causar molestia alguna y sobre todo lo principal, es que no se depende de la observación hacia la misma o hacer Clicks (como en las PTC).

Ahora lo importante. Lo mejor de todo esto es que se Gana Dinero con esta Cashbar, el programa paga por mostrar publicidad sobre esta barra, además ofrece la posibilidad de conseguir referidos desde la propia página, cuenta con un sistema varios niveles de referidos, el cual permite aumentar las ganancias; también posee un método de premiación o puntos extras.

Detalles e Integración del Programa: lo primero a hacer es registrarse, luego descargarel Cashbar y ejecutarlo en la PC, aparecerá una Mini Barra (con diversas publicidades).



La misma irá cambiando de publicidad automáticamente; como se puede apreciar en la Cashbar, posee en su margen izquierdo un panel lateral con tres opciones: el “$” redirigirá la navegación hacia cuenta personal y sus detalles de Ganancias, opciones y extras; el símbolo “-“ minimiza las ventanas emergentes y el “X” cierra el Cashbar.

Al ejecutar el programa aparecerán dos ventanas:

1ra: Esta ventana debe Quedar Siempre en el ordenador:

2da: Esta otra puede cerrarse:

Si se da Click en “$” abrirá la ventana con los Datos Personales, Ganancias, etc:

Ahora las Ganancias: el proceso consiste en mantener el Cashbar la mayor cantidad de horas posibles al día (sin exceder el máximo de 5:30Hs diarias), cada hora que la barra se esté ejecutando proporcionara la cantidad de 1 punto por publicidad, cada una dura 1 minuto, por lo tanto serian 60 puntos por hora, Ejemplo: 1 hs = 60 puntos / 5 hs = 300 puntos, lo que equivale a: € 0,050 (euros); si bien no es mucho, la ventaja esta en las ganancias de los referidos multinivel, si se consiguen 2 referidos (lo cual es fácil), el programa Paga el 10% por cada referido, sin importar el nivel en que este se encuentre (hay 10 niveles), y haciendo el simple cálculo (sin exagerar), que cada referido, tenga solo 2 referidos y asi en cada nivel, se obtiene una ganancia mensual de: €308,80. Sí tan sencillo con solo tener 2 referidos y que se mantenga ese orden por c/u.

Tabla Ejemplo:

Si bien parece irreal obtener esta cantidad de referidos en todos los niveles, el programa permite ofrecer una compensación a los referidos, por lo tanto esto estimula la aplicación diaria del Cashbar, como asi también la suma de mas referidos en los 10 niveles.

El monto mínimo para recibir el pago es de €20,00, se realiza el último día del mes y se percibe por medio de PayPal, de entre 3 a 5 días. El programa está en español, posee Fórum y un Chat propio.

Esta página cuenta con su servicio en varios idiomas lo hace ver que verdaderamente en un proyecto muy en serio y a gran escala


AQUI EL ENLACE:

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.

AGREGAR UN VIDEO DE YOUTUBE COMO FONDO DE TU BLOG

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


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

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

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

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

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

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

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

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

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

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

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

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

//]]>
</script>

<script type='text/javascript'>
//<![CDATA[
$().ready(function() {
$('body').tubular('7gZd4b6bXu4','wrapper-video');
});
//]]>
</script>

Luego localiza la etiqueta <body>
Si usas una plantilla del Diseñador de Plantillas entonces busca esta línea:

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

Debajo de cualquiera de ellas dos agrega lo siguiente:

<div id='wrapper-video'>

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

</div>

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

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

USAR UN ARCHIVO FLASH COMO FONDO DEL BLOG

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

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


El procedimiento en realidad es muy sencillo ya que es sólo un paso a seguir. Sólo ingresa a la Edición HTML de la plantilla, y localiza esta linea

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

 Justo debajo de cualquiera de ellas dos agrega este código:

<object height='100%' id='fondoflash' width='100%'>
<param name='movie' value='URL del archivo SWF'/>
<param name='scale' value='exactFit'/>
<param name='wmode' value='transparent'/>
<embed height='100%' scale='exactFit' src='URL del archivo SWF' type='application/x-shockwave-flash' width='100%' wmode='transparent'/>
</object>
<style>
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
}
#fondoflash {
height: 100%;
z-index:-9999;
position:fixed;
margin: 0 auto;
}
</style>

Pon la URL del archivo en formato .SWF donde se indica (dos veces) y listo.

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

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

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

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


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

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

background: url(URL de la imagen) no-repeat center center fixed;
background-size: cover;

Se vería más o menos así:

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

Sólo pon la URL de la imagen y listo.

COMO ELIMINAR UN BLOG DE BLOGGER

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

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

Eliminar blog en blogger con la nueva interfaz

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

Suprimir un blog en blogger con la interfaz antigua

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

Es de mencionar que el blog eliminado de blogger es recuperable durante 90 días, útil si te arrepientes. No obstante, el blog suprimido no es accesible aunque no haya sido eliminado definitivamente (antes del plazo de 90 días).

Para recuperar un blog eliminado dentro del plazo que te dan de 90 días accede al escritorio de tu cuenta en blogger. El título del blog eliminado aparece diferente a los demás y bajo él aparece la fecha en la que fue eliminado y un enlace para recuperarlo, haciendo clic en este enlace el blog volverá a estar operativo (dicho enlace desaparecerá a los 90 día el blog de blogger eliminado no podrá ser recuperado nunca más.

CREA TU TARJETA VIRTUAL (LICENSE CARD) DE GOOGLE+

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

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

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

CAMBIAR LA IMAGEN "CARGANDO" EN LA VISTAS DINAMICAS

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

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

Si usas la antigua interfaz entra en Diseño | Diseñador de plantillas | Avanzado | Añadir CSS. Y si usas la nueva interfaz entra en Plantilla | Personalizar | Avanzado | Añadir CSS Si no quieres que aparezca ningún icono agrega lo siguiente: Si no quieres que aparezca ningún icono agrega lo siguiente:

.blogger-gear {background-image:none !important;}

Guarda los cambios y listo. Con eso no aparecerá nada mientras cargue el blog.
Pero si quieres que en lugar del ícono tradicional aparezca otro personalizado entonces agrega lo siguiente:

.blogger-gear {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/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.

CONVERTIR PDF A WORD ONLINE

Los archivos pdf se encuentran cada vez más en uso, desde documentos sencillos, hasta informes avanzados podemos encontrar en este formato, y sobre todo en internet.

Muchas veces nos encontramos frente a un archivo PDF que necesitamos editar pero no podemos hacerlo porque no contamos con el software necesario. En estos momentos, nuestra solución seria convertir el archivo PDF en WORD.

Esta conversión podemos hacerla con otro software, pero también podemos hacerlo con PDF-to-WORD . Se trata de una aplicación online que nos permite convertir un archivo en otro en tan solo cuestión de minutos.

Es una muy buena opción para poder editar esos archivos PDF que teníamos guardado hace tiempo por no poder modificarlo. Una vez que lo tengamos en .DOC o .RTF ya podremos re-editarlo con cualquier programa de texto.

Lo único que debemos hacer es subir nuestro archivo PDF y luego seleccionar si queremos convertirlo en un .DOC o .RTF. En el siguiente recuadro debemos escribir el mail a donde queremos que nos envíen el archivo y le damos click a Convertir.

De esta forma obtendremos nuestro archivo listo para modificar en nuestra computadora sin la necesidad de instalar algún programa extra.

ENLACE DE LA WEB AQUI O AQUI

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.