En pleno verano muchos no tenemos vacaciones, puesto que tenemos otras obligaciones que atender como los estudios, familia y otras preocupaciones más. Tal vez sea un buen momento para relajarnos y prestar un poco de atención a nuestro cuerpo y su armonía, ya sea mediante técnicas relajantes variopintas o mediante kinesiologia de kineteam y demás técnicas terapéuticas.
Es por eso que para los que no podamos viajar, que mejor que contar con un fondo de pantalla relajante para colocar de fondo de pantalla en la computadora o utilizar en nuestro blog de Blogger. Aunque yo os recomiendo colocarlo de fondo en una entrada del blog siguiendo estas sencillas indicaciones:
1) Ir a Diseño
2) Edición de HTML
3) Buscar en tu plantilla #main-wrapper (teclea Ctrl + F para encontrarlo más rápido).
4) Justo debajo pega el siguiente código:
En el enlace de color rojo debes poner la dirección de la imagen que siempre quieres que aparezca como fondo en las entradas. En este caso la que te acabas de descargar de fondo relajante.
Dependiendo de tu plantilla tendrás que añadir un margen. Para ello emplearemos el valor padding. Para especificar en dónde queremos que comience el margen añadiremos a padding lo siguiente:
-left (marge a la izquierda)
-right (margen a la derecha)
-top (margen arriba)
-bottom (margen abajo)
Por ejemplo, si necesitamos un margen a la izquierda sería así:
Tendremos que cambiar el valor 70px por el valor que necesitemos para que se vea correctamente.
5) Antes de guardar nada, clica en vista previa, y si todo está bien guarda tu plantilla.
¿Te gustó el resultado?
Mostrando entradas con la etiqueta Diseño. Mostrar todas las entradas
Mostrando entradas con la etiqueta Diseño. Mostrar todas las entradas
Cómo poner juegos en Blogger
En http://www.google.com/ig/directory?synd=open hallamos multitud de juegos para colocar en nuestro blog de Blogger. Concretamente más de 200.000 juegos engrosan la lista de ellos disponibles para nuestro blog.
Para insertar estos juegos en formato flash en nuestro blog es tan sencillo como seguir estos pasos:
1) Navega por el portal de Google y elige el que más te guste. Hay miles como ya he dicho, desde los clásicos plataformas, puzzles y demás, hasta los tan típicos como el de solitario spider. Selecciónalo, adápatalo con los colores que más te gusten y modifica el tamaño según tus preferencias (ancho y alto por píxeles)
2) Sólo queda clicar en vista previa (preview changes) o clicar en "get the code" para seleccionar el código para copiar-pegar en nuestro blog.
3) Finalmente, pega el código en una entrada o en un gadget.
Simple y rápido. ¿Jugamos?
Juegos recomendados: Juegos de hacer pasteles
Para insertar estos juegos en formato flash en nuestro blog es tan sencillo como seguir estos pasos:
1) Navega por el portal de Google y elige el que más te guste. Hay miles como ya he dicho, desde los clásicos plataformas, puzzles y demás, hasta los tan típicos como el de solitario spider. Selecciónalo, adápatalo con los colores que más te gusten y modifica el tamaño según tus preferencias (ancho y alto por píxeles)
2) Sólo queda clicar en vista previa (preview changes) o clicar en "get the code" para seleccionar el código para copiar-pegar en nuestro blog.
3) Finalmente, pega el código en una entrada o en un gadget.
Simple y rápido. ¿Jugamos?
Juegos recomendados: Juegos de hacer pasteles
Ya podemos probar el nuevo diseño de Blogger
Blogger quiere cambiar de look, y no sólo lo pretende hacer con un nuevo nombre (léase Google Blogs como se especula que se llamará), sino que también ha decidido dar un nuevo aspecto a su interfaz interna con nuevos menús y con un estilo muy minimalista.
Eso sí, por el momento tocará esperar hasta que el diseño pase a migrarse a la plataforma corriente, pues sólo está disponible en Blogger in draft.
¿Qué os parece el nuevo diseño? ¿Os gusta más que el actual? ¡Tú tienes la última palabra!
Eso sí, por el momento tocará esperar hasta que el diseño pase a migrarse a la plataforma corriente, pues sólo está disponible en Blogger in draft.
¿Qué os parece el nuevo diseño? ¿Os gusta más que el actual? ¡Tú tienes la última palabra!
Crea fotomontajes de portadas de revista y colócalos en tu blog
En "Soy Portada" podemos crear divertidos fotomontajes en los que podemos colocar nuestra foto y convertirnos en el protagonista de una revista o periódico.

En Soy Portada nos convertiremos en la portada de revistas y periódicos tan conocidos como Marca, Interviu y PlayBoy, aunque siempre bajo nombres ficticios. Para gustos colores.
Para ello, subiremos nuestra foto (menos de 5 MB y en formato gif, jpg o png) y configuraremos ciertos parámetros como tipo de letra, color y tamaño.
Una vez acabemos con las portadas, podremos enviarla por e-mail o compartirla por redes sociales como Facebook, Twitter, Badoo, MySpace y compañía.
Una página perfecta para crear nuestros diseños y sorprender a los visitantes de nuestro blog.
Enlace | Soy Portada
Visto en Recursos en web - Fotomontajes portadas de revistas

En Soy Portada nos convertiremos en la portada de revistas y periódicos tan conocidos como Marca, Interviu y PlayBoy, aunque siempre bajo nombres ficticios. Para gustos colores.
Para ello, subiremos nuestra foto (menos de 5 MB y en formato gif, jpg o png) y configuraremos ciertos parámetros como tipo de letra, color y tamaño.
Una vez acabemos con las portadas, podremos enviarla por e-mail o compartirla por redes sociales como Facebook, Twitter, Badoo, MySpace y compañía.
Una página perfecta para crear nuestros diseños y sorprender a los visitantes de nuestro blog.
Enlace | Soy Portada
Visto en Recursos en web - Fotomontajes portadas de revistas
Reflectionmaker: herramienta para añadir reflejos a las fotos de tu blog
Seguramente en tu blog añades imágenes en cada entrada que creas, por este motivo quizá sea buena idea tratar de personalizar un poco más el estilo de tu blog otorgándole un aspecto más profesional y atractivo.

Reflectionmaker es una aplicación online que nos ayuda a añadir reflejos a las fotos que añadimos en nuestro blog. El proceso es muy simple y rápido. Con tan sólo subir la imagen y aplicar ciertas configuraciones tendremos el resultado en cuestión de segundos.
Obviamente, las fotos las podemos compartir en el blog como bien dijimos, o en diferentes redes sociales, ya sean las típicas Facebook o Twitter, o las tan de moda como Tuenti y cía.
Enlace | Reflectionmaker
Visto en Recursos en web - Añadir reflejos a fotos con reflectionmaker

Reflectionmaker es una aplicación online que nos ayuda a añadir reflejos a las fotos que añadimos en nuestro blog. El proceso es muy simple y rápido. Con tan sólo subir la imagen y aplicar ciertas configuraciones tendremos el resultado en cuestión de segundos.
Obviamente, las fotos las podemos compartir en el blog como bien dijimos, o en diferentes redes sociales, ya sean las típicas Facebook o Twitter, o las tan de moda como Tuenti y cía.
Enlace | Reflectionmaker
Visto en Recursos en web - Añadir reflejos a fotos con reflectionmaker
Crea tu propio favicon y ponlo en tu blog
Poner un favicon en Blogger debería ser una de las tareas básicas a la hora de diseñar y personalizar un blog. Desgraciadamente no todos los usuarios cuentan con las herramientas y la ayuda necesaria para tal menester.
Herramientas online como Favicon.cc nos prestan ayuda a la hora de crear un favicon para colocar en nuestro blog.

Su funcionamiento es muy sencillo. A través del cursor del ratón y nuestra habilidad como diseñadores podremos hacernos servir de diversas herramientas, como paletas de colores, importar fotografías y muchas funciones más. Una vez hayamos creado un diseño acorde a nuestras exigencias de diseño podremos guardar y descargar el favicon haciendo clic en "Download favicon".
Así de simple y bonito.
Enlace | Favicon.cc
Visto en Recursos en web - Crear un favicon online
Herramientas online como Favicon.cc nos prestan ayuda a la hora de crear un favicon para colocar en nuestro blog.

Su funcionamiento es muy sencillo. A través del cursor del ratón y nuestra habilidad como diseñadores podremos hacernos servir de diversas herramientas, como paletas de colores, importar fotografías y muchas funciones más. Una vez hayamos creado un diseño acorde a nuestras exigencias de diseño podremos guardar y descargar el favicon haciendo clic en "Download favicon".
Así de simple y bonito.
Enlace | Favicon.cc
Visto en Recursos en web - Crear un favicon online
¿Cómo se ve tu blog en un iPad?
Anteriormente vimos cómo se ve tu blog en un iPhone/iPod, adaptándolo mediante un script para facilitar la carga en este tipo de dispositivos. El pasado día 3 de abril la nueva joya de Apple, iPad, comenzó a venderse de forma oficial. Es por este motivo que sería buena idea saber qué tal se ve nuestro blog en el nuevo todo en uno de Apple.

iPad Peek es una herramienta que nos ayudará a ver cómo se ve nuestro blog en un iPad. Para ello bastará con introducir nuestra URL y ver el resultado.
¿Qué tal se ve tu blog?
Enlace | iPad Peek
Visto en Mashable
iPad Peek es una herramienta que nos ayudará a ver cómo se ve nuestro blog en un iPad. Para ello bastará con introducir nuestra URL y ver el resultado.
¿Qué tal se ve tu blog?
Enlace | iPad Peek
Visto en Mashable
Convierte tus imágenes y fotografías en iconos con ConvertICO
Hace un tiempo vimos una web que nos permitía convertir imágenes en iconos llamada iconverticons. Hoy hablaremos de otra excelente página que también cumple con la misma función de convertir imágenes en iconos llamada ConvertICO.

ConvertICO no requiere registro previo y en pocos pasos conserguiremos transformar la imagen que queramos en un icono, excelente opción para decorar nuestro blog y darle un diseño más atractivo.
Enlace ConvertICO
Visto en Recursos en web - Convertir imágenes en iconos

ConvertICO no requiere registro previo y en pocos pasos conserguiremos transformar la imagen que queramos en un icono, excelente opción para decorar nuestro blog y darle un diseño más atractivo.
Enlace ConvertICO
Visto en Recursos en web - Convertir imágenes en iconos
Crea banners en flash online para tu blog con BannerSnack
BannerSnack es una utilidad online que nos permite crear banners en formato flash para colocar en nuestro blog. Su funcionamiento es bien sencillo. Podemos registrarnos o acceder al servicio gracias a nuestra cuenta de Facebook, Google y compañía. Una vez dentro podremos crear banners por aspecto totalmente profesional totalmente gratis. Su interfaz gráfica nos facilitará la tarea, pudiendo añadir numerosos efectos y realizar ajustes gracias a sus más que notables posibilidades. También podemos subir imágenes y acoplar los textos que queramos.
El único "pero" que podemos ponerle a BannerSnack es que al resultado final se le añade automáticamente una marca de agua del fabricante, pero que podremos retirar si nos hacemos usuario premium por 9$ al mes, lo que supodrá al mismo tiempo obtener más funciones y características para mejorar aún más el diseño de banners.
Cuando hayas creado tu banner, copia el código que se te facilitará y pégalo en Diseño > Elementos de página > Añadir un gadget > HTML/Javascript.
Enlace | BannerSnack
Visto en Recursos en web - Crear online banners en flash
El único "pero" que podemos ponerle a BannerSnack es que al resultado final se le añade automáticamente una marca de agua del fabricante, pero que podremos retirar si nos hacemos usuario premium por 9$ al mes, lo que supodrá al mismo tiempo obtener más funciones y características para mejorar aún más el diseño de banners.
Cuando hayas creado tu banner, copia el código que se te facilitará y pégalo en Diseño > Elementos de página > Añadir un gadget > HTML/Javascript.
Enlace | BannerSnack
Visto en Recursos en web - Crear online banners en flash
Cómo numerar las páginas en Blogger (II)
Prácticamente en los inicios de este blog ya explicamos cómo numerar las páginas en Blogger, con ello conseguíamos un diseño elegante a la vez que profesional. Hoy vamos a explicar otra manera de paginar el blog, pero esta vez con un nuevo estilo que gracias a Abu-Farhan y al todopoderoso Javascript lograremos un bonito efecto con scroll.

El proceso de paginación en Blogger es muy sencillo y lo lograremos siguiendo los siguientes pasos:
1) Vamos a Diseño
2) Edición de HTML
3) Marcamos la casilla "Expandir artilugios"
4) Buscamos ]]></b:skin> (tecleamos Ctrl + F para buscar más rápido)
5) Antes de ]]></b:skin> pegaremos el siguiente código:
6) Ahora buscamos </body>
7) Antes de </body> pegaremos el siguiente código:
Observaciones:
var postperpage=7; -> Indica el número de entradas por página.
var numshowpage=6; -> Indica el número de páginas que se mostrarán en el scroll.
8) Por último buscamos 'data:label.url' y cada vez que lo encontremos lo encontremos lo sustituimos por 'data:label.url + "?&max-results=7"' De esta forma estaremos editando la paginación en las etiquetas o categorías (labels).
Clicamos en vista previa y si todo está bien guardaremos nuestra plantilla. Recuerda que es recomendable guardar los scripts en tu PC o alojarlos en alguna página web que permita subir archivos javascript.
Ya está todo listo. Espero que te guste esta nueva forma de numerar las páginas en Blogger.
El proceso de paginación en Blogger es muy sencillo y lo lograremos siguiendo los siguientes pasos:
1) Vamos a Diseño
2) Edición de HTML
3) Marcamos la casilla "Expandir artilugios"
4) Buscamos ]]></b:skin> (tecleamos Ctrl + F para buscar más rápido)
5) Antes de ]]></b:skin> pegaremos el siguiente código:
<!-- Paginar Blogger -->
.paginator {
margin-top:60px;
font-size:1em;
}
.paginator table {
border-collapse:collapse;
table-layout:fixed;
width:100%;
}
.paginator table td {
padding:0;
white-space:nowrap;
text-align:center;
}
.paginator span {
display:block;
padding:3px 0;
color:#fff;
}
.paginator span strong,
.paginator span a {
padding:2px 6px;
}
.paginator span strong {
background:#ff6c24;
font-style:normal;
font-weight:normal;
}
.paginator .scroll_bar {
width:100%; height:20px;
position:relative;
margin-top:10px;
}
.paginator .scroll_trough {
width:100%; height:3px;
background:#ccc;
overflow:hidden;
}
.paginator .scroll_thumb {
position:absolute;
z-index:2;
width:0; height:3px;
top:0; left:0;
font-size:1px;
background:#363636;
}
.paginator .scroll_knob {
position:absolute;
top:-5px; left:50%;
margin-left:-10px;
width:20px; height:20px;
overflow:hidden;
background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/slider_knob.gif) no-repeat 50% 50%;
cursor:pointer; cursor:hand;
}
.paginator .current_page_mark {
position:absolute;
z-index:1;
top:0; left:0;
width:0; height:3px;
overflow:hidden;
background:#ff6c24;
}
.fullsize .scroll_thumb {
display:none;
}
.paginator_pages {
width:600px;
text-align:right;
font-size:0.8em;
color:#808080;
margin-top:-10px;
}
<!-- Fin Paginar Blogger -->
6) Ahora buscamos </body>
7) Antes de </body> pegaremos el siguiente código:
<script src='http://all-in-one-blogger-widget.googlecode.com/files/paginator3000.js' type='text/javascript'></script>
<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=6;
</script>
<script src='http://all-in-one-blogger-widget.googlecode.com/files/paginator3000-forblogger-v1.0.0.js' type='text/javascript'/>
Observaciones:
var postperpage=7; -> Indica el número de entradas por página.
var numshowpage=6; -> Indica el número de páginas que se mostrarán en el scroll.
8) Por último buscamos 'data:label.url' y cada vez que lo encontremos lo encontremos lo sustituimos por 'data:label.url + "?&max-results=7"' De esta forma estaremos editando la paginación en las etiquetas o categorías (labels).
Clicamos en vista previa y si todo está bien guardaremos nuestra plantilla. Recuerda que es recomendable guardar los scripts en tu PC o alojarlos en alguna página web que permita subir archivos javascript.
Ya está todo listo. Espero que te guste esta nueva forma de numerar las páginas en Blogger.
Smoothicons 15: iconos de redes sociales para tu blog
Smoothicons 15 es una magnífica colección de iconos de redes sociales que cuentan con un magnífico diseño, el cual podremos aprovechar para colocar en nuestro blog y otorgarle un aspecto mejorado y profesional. En este pack encontraremos iconos para redes sociales tan conocidas y empleadas como YouTube, Facebook, Flickr, MySpace, entre muchos otros.

El formato disponible de estos iconos está suministrado bajo el archivo .ICO, el mismo que empleamos para colocar un favicon en Blogger.
Enlace | IconFactory
Descarga | Smoothicons

El formato disponible de estos iconos está suministrado bajo el archivo .ICO, el mismo que empleamos para colocar un favicon en Blogger.
Enlace | IconFactory
Descarga | Smoothicons
Crea divertidos textos para tu blog con Textanim
Textanim es una aplicación web que sirve para hacer textos animados y divertidos que después podremos insertar en nuestro blog. Nos recuerda mucho a TextSpace, otra utilidad que nos servía para poner un texto de bienvenida en el blog; o FlashVortex, que nos permitía crear banners.

Lo bueno de Textanim es su capacidad de personalización y configuración, pudiendo insertar el texto o palabras que queramos, su tipo de letra (fuente), su tamaño, color de fondo, sombra, dirección de movimiento, textura, entre otros. Una vez hayamos diseñado a nuestro gusto el texto y letras que queramos deberemos pulsar en "Generate" y en pocos segundos obtendremos un código (clicando arriba en "Get the embed code") que deberemos insertar en nuestro blog yendo a Diseño > Elementos de página > Añadir un gadget > HTML/Javascript y pegar el código allí.

Sin duda, logaremos un efecto especial y divertido para decorar nuestro blogspot. ¿Te gusta? Recuerda que también puedes hacer un GIF para poner en tu blog.
Enlace | Textanim
Visto en Recursos en web - Crea divertidos textos animados con Textanim
Lo bueno de Textanim es su capacidad de personalización y configuración, pudiendo insertar el texto o palabras que queramos, su tipo de letra (fuente), su tamaño, color de fondo, sombra, dirección de movimiento, textura, entre otros. Una vez hayamos diseñado a nuestro gusto el texto y letras que queramos deberemos pulsar en "Generate" y en pocos segundos obtendremos un código (clicando arriba en "Get the embed code") que deberemos insertar en nuestro blog yendo a Diseño > Elementos de página > Añadir un gadget > HTML/Javascript y pegar el código allí.

Sin duda, logaremos un efecto especial y divertido para decorar nuestro blogspot. ¿Te gusta? Recuerda que también puedes hacer un GIF para poner en tu blog.
Enlace | Textanim
Visto en Recursos en web - Crea divertidos textos animados con Textanim
Calendario humano para Blogger
No lees mal, se trata de un calendario humano que puedes insertar como gadget en tu blog de Blogger. HumanCalendar es una divertida página web (en inglés) en el que cada día, mes y año está personalizado con una persona de carne y hueso portando un cartel con la fecha. Bueno, como dicen que una imagen vale más que mil palabras, aquí tienes un ejemplo:
Si te ha parecido curioso este calendario y lo quieres poner en tu blog, sigue estos sencillos pasos:
1) Entramos a HumanCalendar
2) Seleccionamos el ancho que queramos que tenga el calendario de acuerdo a las medidas de nuestro blog y donde lo deseemos poner.

3) Después copiaremos el código que nos aparece a la derecha.
4) Por último deberemos pegar ese código en nuestro blog, para ello iremos a Diseño > Elementos de página > Añadir un gadget > HTML/Javascript, y seleccionamos el lugar que queramos para adjuntarlo según nuestras preferencias.
Espero que te haya gustado.
Si lo deseas puedes optar por poner otro calendario para Blogger.
Si te ha parecido curioso este calendario y lo quieres poner en tu blog, sigue estos sencillos pasos:
1) Entramos a HumanCalendar
2) Seleccionamos el ancho que queramos que tenga el calendario de acuerdo a las medidas de nuestro blog y donde lo deseemos poner.
3) Después copiaremos el código que nos aparece a la derecha.
4) Por último deberemos pegar ese código en nuestro blog, para ello iremos a Diseño > Elementos de página > Añadir un gadget > HTML/Javascript, y seleccionamos el lugar que queramos para adjuntarlo según nuestras preferencias.
Espero que te haya gustado.
Si lo deseas puedes optar por poner otro calendario para Blogger.
Más fotomontajes para tu blog
Si hace poco hablábamos de fotomontajes con portadas de revistas, hoy os presentaré más páginas para hacer fotomontajes online gratuitas.
El primero de ellas es Festisite, una página web que nos sirve para hacer fotomontajes de billetes con nuestra foto.

Otra interesante opción es emplear Photofunia, donde podremos hacer fotomontajes divertidos con imágenes en movimiento (GIF), así como añadirles efectos y marcos a las fotografías.

Por último, Picjoke es perfecta para hacer fotomontajes con corazones, así como también fotomontajes con graffitis, calendarios, revistas, etc.

Visto en Recursos en web - Páginas para hacer fotomontajes online
El primero de ellas es Festisite, una página web que nos sirve para hacer fotomontajes de billetes con nuestra foto.

Otra interesante opción es emplear Photofunia, donde podremos hacer fotomontajes divertidos con imágenes en movimiento (GIF), así como añadirles efectos y marcos a las fotografías.

Por último, Picjoke es perfecta para hacer fotomontajes con corazones, así como también fotomontajes con graffitis, calendarios, revistas, etc.

Visto en Recursos en web - Páginas para hacer fotomontajes online
Tu blog en un iPhone

Así es, estás leyendo correctamente. Gracias a Blog2iPhone es posible crear una versión de lectura de tu blog para que tus visitantes puedan leerlo a través de un iPhone, aunque sirve también para cualquier otro teléfono móvil (celular). Está disponible para plataformas como Blogger, Wonrdpress y Drupal.
El proceso es muy sencillo. Bastará con registrarnos en Blog2iPhone, confirmar el registro a través de nuestro correo de email y luego dar de alta nuestro blog en el servicio (gratuito). Deberemos colocar nuestra URL, la URL de nuestro FEED de Feedburner y algún que otro dato más para configurar este magnífico servicio a nuestro gusto. Finalmente obtendremos un código HTML que nos indicarán que deberemos colocar en nuestra plantilla (Diseño > Edición de HTML > Colocar entre head y /head). De esta forma, automáticamente cuando entremos desde un iPhone al blog lo veremos así:
El resultado es tu blog sin imágenes para que sea fácil y cómoda su navegación. ¿Te gusta como se ve tu blog en un iPhone?
Miles de iconos para tu blog
Hace un tiempo hablamos de un recopilatorio de iconos para Twitter. Personalizar y decorar el blog es algo muy personal, cada persona tiene sus propios gustos, pero afortunadamente en la red existen numerosas páginas que dejan a nuestra elección un amplio abanico de iconos para que los podamos descargar y emplear en nuestros blogs y páginas web. Nos referimos a Find icons, un increíble buscador de iconos en el que podremos encontrar una extensa variedad de ellos, clasificados por categorías, colores, tamaños, etc.

Enlace | Find icons
Visto en Recursos en web - Buscar iconos
Enlace | Find icons
Visto en Recursos en web - Buscar iconos
Wibiya, una barra de herramientas para Blogger
Wibiya es una completa barra de herramientas que se implementa a pie de página en páginas web y blogs de forma elegante y sencilla.

Muy bien, ¿pero para qué sirve esta barra de herramientas Wibiya? En ella podemos incluir datos sobre nuestra cuenta Twitter, Facebook, vídeos Youtube, chat online, datos sobre el blog, mostrar entradas aleatorias del blog, añadir un buscador, suscripción RSS, contador de visitas online y un sinfín de posibilidades más.
La página está en inglés, por eso voy a tratar de explicar brevemente los pasos a seguir para incluir Wibiya en Blogger.
1) Vamos a Wibiya.
2) Nos registramos clicando en Get it now.
3) Nos llegará una notificación al email que deberemos confirmar.
4) Apareceremos en nuestra cuenta y allí podremos configurar la barra wibiya. Seleccionaremos qué aplicaciones activar y cuáles no. Podremos seleccionar el color de la barra, cuál será su posición en el blog y bajo qué plataforma. En este caso será Blogger, obviamente.
![Barra]()
5) Automáticamente apareceremos en nuestro panel de control añadiendo la barra Wibiya como gadget.
Todo listo. Espero que sepas ver todas las posibilidades de esta increíble barra de herramientas Wibiya para Blogger.
Muy bien, ¿pero para qué sirve esta barra de herramientas Wibiya? En ella podemos incluir datos sobre nuestra cuenta Twitter, Facebook, vídeos Youtube, chat online, datos sobre el blog, mostrar entradas aleatorias del blog, añadir un buscador, suscripción RSS, contador de visitas online y un sinfín de posibilidades más.
La página está en inglés, por eso voy a tratar de explicar brevemente los pasos a seguir para incluir Wibiya en Blogger.
1) Vamos a Wibiya.
2) Nos registramos clicando en Get it now.
3) Nos llegará una notificación al email que deberemos confirmar.
4) Apareceremos en nuestra cuenta y allí podremos configurar la barra wibiya. Seleccionaremos qué aplicaciones activar y cuáles no. Podremos seleccionar el color de la barra, cuál será su posición en el blog y bajo qué plataforma. En este caso será Blogger, obviamente.
5) Automáticamente apareceremos en nuestro panel de control añadiendo la barra Wibiya como gadget.
Todo listo. Espero que sepas ver todas las posibilidades de esta increíble barra de herramientas Wibiya para Blogger.
Slider (carrusel de imágenes) para Blogger
Hace tiempo ya hablamos sobre como poner un slideshow con imágenes que iban pasando automáticamente y otro slideshow con los títulos de las entradas, así como también una marquesina de imágenes gracias al atributo marquee. Un slideshow colocado debajo de la cabecera de nuestro blog otorga un estilo diferente y una profesionalidad increíble. Por eso mismo, hoy de mano de anshuldudeja, voy a explicar cómo poner en Blogger un slidesow (carrusel de imágenes) que se pueden ir pasando al hacer clic, mejor mira esta imagen para entenderlo:

Para colocar este slideshow (carrusel de imágenes) en nuestro blog de Blogger deberemos seguir las siguientes acciones:
1) Vamos a Diseño
2) Edición de HTML
3) Buscamos </head> y antes pegamos el siguiente código:
Estos dos scripts los he subido a un servicio gratuito para subir scripts. Te recomiendo que los guardes por si algún día fallan.
4) Ahora buscamos el código ]]></b:skin> y añade encima lo siguiente:
5) Ahora clicamos en vista previa y si no hay ningún error, guardamos la plantilla.
6) Finalmente vamos a Diseño> Elementos de página> Añadir un gadget> HTML/Javascript y allí pegamos el siguiente código:
Si nos fijamos en ese último código, en él es donde incluiremos cada imagen del slideshow (carrusel de imágenes). Cada bloque de código por imagen esta diferenciada por <!-- 1st imagen --> y <!-- end code of 1st --> y entre ese código ese está el enlace de la imagen que deberemos incluir, concretamente en http://www.ENLACEENTRADA.html deberemos poner el enlace al que queramos que se nos dirija cuando hagamos clic en una imagen determinada; y en http://ENLACEIMAGEN.jpg deberá ir el enlace de la imagen que queramos incluir. Y así con todas imágenes predefinidas. No te olvides DE la descripción y título del SEO imágenes para Blogger. Si queremos añadir o eliminar imágenes basta con fijarse en el código y ver cómo está formado. No guarda ningún secreto.
Todo listo, espero que te guste el resultado final.

Para colocar este slideshow (carrusel de imágenes) en nuestro blog de Blogger deberemos seguir las siguientes acciones:
1) Vamos a Diseño
2) Edición de HTML
3) Buscamos </head> y antes pegamos el siguiente código:
<script src='http://pmsc.free.fr/gb/J/1039115625.js' type='text/javascript'/>
<script src='http://pmsc.free.fr/gb/J/1039115553.js' type='text/javascript'/>
<style type='text/css'>
#mygallery{overflow: hidden;}
</style>
<script type='text/javascript'>
stepcarousel.setup({
galleryid: 'mygallery', //id of carousel DIV
beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
panelclass: 'panel', //class of panel DIVs each holding content
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 3, leftnav: ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSGOr871uSBsT-VXkRn8RNN3IL5S-JbH-d2XLQUGDCjINY7T5o0r0d9BfXHdTzc8ZNRYKCu8pCfxEIHTuI-9w59Zi48M-8dWWrZFfOp7Yk_TYphyphenhyphenMGbFFD8LCB_wC66WtNieSihKObHzw/s400/left.jpg', -48, 0], rightnav: ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgukrkHHc0CJZWi64Im133F2RdvcDDnCVbmOV649TvBZDjkRhia__-Wtj8yqr2Dv-Qx5ZztvdmjssLpQt-xhbH7pE6MOfSmVuk1KhVFGpFpn-pvZ8LvMpXxtsIqDYxmqQUZxqn70-tntoc/s400/right.jpg', 0, 0]},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['external'] //content setting ['inline'] or ['external', 'path_to_external_file']
})
</script>
Estos dos scripts los he subido a un servicio gratuito para subir scripts. Te recomiendo que los guardes por si algún día fallan.
4) Ahora buscamos el código ]]></b:skin> y añade encima lo siguiente:
#myslides{
background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAiaTEVNKGy-t_cE9ocP9ir2HM2TNB5ccyIzfJaHbChe1C0mNWj3U0qozmE_vRoSd7YrrCzEbxQKjDfIZys1XJfqRNL2ZcdlSeXZYvyx7qLUDONka0oTCzlbs0IEQhl6CN59G-QvnM7w/s1600/mslid.jpg) repeat-x;
width: 650px;
height:165px;
margin-bottom:5px;
}
.stepcarousel{
position: relative; /*leave this value alone*/
overflow: scroll; /*leave this value alone*/
width: 554px; /*Width of Carousel Viewer itself*/
height: 160px; /*Height should enough to fit largest content's height*/
margin: 0px 48px 5px 48px;
}
.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}
.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 20px 10px ; /*margin around each panel*/
width:170px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
background:#0e1829;
height:120px;
border:1px solid #1d2c44;
}
.stepcarousel .panel p{
text-align: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 5px 5px ; /*margin around each panel*/
}
.stepcarousel .panel h2{
text-align: left; /*leave this value alone*/
height:20px;
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 2px 5px ; /*margin around each panel*/
font-size:16px;
font-weight:bold;
text-align:center;
font-family:Georgia,century gothic,Arial,verdana, sans-serif;
}
.stepcarousel .panel img{
float: left; /*leave this value alone*/
background:#0E1829; /*clip content that go outside dimensions of holding panel DIV*/
margin: 5px 5px 5px 5px; /*margin around each panel*/
padding:0px 0px;
}
5) Ahora clicamos en vista previa y si no hay ningún error, guardamos la plantilla.
6) Finalmente vamos a Diseño> Elementos de página> Añadir un gadget> HTML/Javascript y allí pegamos el siguiente código:
<div id="myslides">
<div id="mygallery" class="stepcarousel">
<div class="belt">
<!-- 1st imagen -->
<div class="panel">
<a href="http://www.ENLACEENTRADA.html" target="blank" title="TITULO"> <img width="160" alt="DESCRIPCION" src="http://ENLACEIMAGEN.jpg" height="110"/> </a>
</div>
<!-- end code of 1st -->
<!-- 2nd imagen -->
<div class="panel">
<a href="http://www.ENLACEENTRADA.html" target="blank" title="TITULO"> <img width="160" alt="DESCRIPCION" src="http://ENLACEIMAGEN.jpg" height="110"/> </a>
</div>
<!-- end code of 2nd -->
<!-- 3rd imagen -->
<div class="panel">
<a href="http://www.ENLACEENTRADA.html" target="blank" title="TITULO"> <img width="160" alt="DESCRIPCION" src="http://ENLACEIMAGEN.jpg" height="110"/> </a>
</div>
<!-- end code of 3rd -->
<!-- 4th imagen -->
<div class="panel">
<a href="http://www.ENLACEENTRADA.html" target="blank" alt="DESCRIPCION" title="TITULO"> <img src="http://ENLACEIMAGEN.jpg"/> </a>
</div>
<!-- end code of 4th -->
</div></div></div>
Si nos fijamos en ese último código, en él es donde incluiremos cada imagen del slideshow (carrusel de imágenes). Cada bloque de código por imagen esta diferenciada por <!-- 1st imagen --> y <!-- end code of 1st --> y entre ese código ese está el enlace de la imagen que deberemos incluir, concretamente en http://www.ENLACEENTRADA.html deberemos poner el enlace al que queramos que se nos dirija cuando hagamos clic en una imagen determinada; y en http://ENLACEIMAGEN.jpg deberá ir el enlace de la imagen que queramos incluir. Y así con todas imágenes predefinidas. No te olvides DE la descripción y título del SEO imágenes para Blogger. Si queremos añadir o eliminar imágenes basta con fijarse en el código y ver cómo está formado. No guarda ningún secreto.
Todo listo, espero que te guste el resultado final.
Crea tu propio logo para tu blog con AAA Logo
Con AAA Logo podemos crear un logo para nuestro blog o página web sin la necesidad de tener conocimientos previos en programas de diseño como por ejemplo en el conocido Photoshop.

Al crear un logo mejoraremos notablemente la apariencia de nuestro blog, ya que lo primero que entra por los ojos en un blog es su diseño. Si un blog es agradable estéticamente provoca de cierta manera una tranquilidad y relajación en los visitantes que les permitirá (mayoritariamente) quedarse más tiempo en tu blog. Al mismo tiempo, lograremos otro importante beneficio: diferenciarnos del resto de blogs teniendo una identidad que nos distinga e identifique.
Para ello, contaremos con varios logos ya hechos que podremos modificar a nuestro gusto, o por otro lado, crear uno desde cero gracias a la multitud de diseños, dibujos, elementos y objetos que tendremos a nuestra disposición. ¿A qué esperar para hacer tu propio logo?
Visto en Recursos en web - Programa para crear logo gratis.
Enlace de descarga | AAA Logo

Al crear un logo mejoraremos notablemente la apariencia de nuestro blog, ya que lo primero que entra por los ojos en un blog es su diseño. Si un blog es agradable estéticamente provoca de cierta manera una tranquilidad y relajación en los visitantes que les permitirá (mayoritariamente) quedarse más tiempo en tu blog. Al mismo tiempo, lograremos otro importante beneficio: diferenciarnos del resto de blogs teniendo una identidad que nos distinga e identifique.
Para ello, contaremos con varios logos ya hechos que podremos modificar a nuestro gusto, o por otro lado, crear uno desde cero gracias a la multitud de diseños, dibujos, elementos y objetos que tendremos a nuestra disposición. ¿A qué esperar para hacer tu propio logo?
Visto en Recursos en web - Programa para crear logo gratis.
Enlace de descarga | AAA Logo
Crea tu propio fondo para tu blog
En bgpatterns podemos crear un fondo para nuestro blog o página web de forma totalmente sencilla y gratuita. Podemos elegir el fondo que queramos, su tamaño, su color, etc y configurarlo a nuestro gusto. Después sólo tendremos que descargarlo y subirlo a algún servidor o a nuestra cuenta de Blogger.

Enlace | bgpatterns
Recuerda que con estos fondos podrás hacer lo siguiente:
Enlace | bgpatterns
Recuerda que con estos fondos podrás hacer lo siguiente:
- Imagen en el fondo del blog en Blogger.
- Imagen de fondo en todas las entradas en Blogger.
- Imagen de fondo sólo en una entrada en Blogger.
Suscribirse a:
Entradas (Atom)