Publica automáticamente en Twitter, Facebook y Google+ desde Blogger

Sácale partido a tu Blog, pon tus entradas y actualizaciones en Twitter automáticamente de una manera sencilla y rápida. Podrás incluso hacerlo con esta herramienta en otras redes sociales como Facebook o Linkedin.
El uso de las redes sociales es un valor incuestionable para la correcta promoción de un Blog. Desde Blogger siempre actualizamos la información de nuestro pequeño rincón de Internet en Google+.

Como herramienta de comunicación social, la aplicación de Google es excelente pero no la única. Tenemos Facebook y Twitter como las más utilizadas a parte de G+.

Con anterioridad hemos visto cómo publicar nuestras entradas automáticamente en Facebook o hasta meter un pequeño marco para Twitter en nuestro Blog. En este artículo paso a paso nos vamos a centrar en la publicación de nuestras entradas de una manera automática en Twitter o en cualquier suscriptor que admita RSS que podamos necesitar. Podremos publicar nuestras entradas virtualmente donde necesitemos.

Los Bloggers que utilizan Twitter suelen utilizarlo para publicar sus entradas. Resulta engorroso en muchas ocasiones salirse de Blogger para copiar el enlace correspondiente a nuestro Blog, seleccionar la foto adecuada, etc...

Sin necesidad de recurrir a programación de ninguna clase, podemos actualizar automáticamente en Twitter o en cualquier aplicación que admita datos con RSS, nuestros contenidos. ¿Quieres aprender cómo hacerlo de una manera sencilla y rápida?.

¿Cómo vamos a hacerlo?

Dado que queremos publicar en Twitter o en cualquier herramienta compatible con datos RSS nuestras entradas de Blogger automáticamente, emplearemos el Feed de nuestro Blog para llevarlo a cabo.

Tal como comentamos en el artículo sobre cómo publicar los últimos comentarios de nuestros usuarios en la página principal de nuestro Blog, un Feed, dejando a un lado los aspectos puramente técnicos, consiste en un documento electrónico que forma parte de tu Blog, mediante el cual podemos comunicar a nuestros suscriptores las últimas actualizaciones que hemos realizado en el mismo.

Los suscriptores pueden ser nuestros usuarios, otros blogs, herramientas de webmaster para actualizar mapas del sitio, aplicaciones de redes sociales... 

Si quieres ver el Feed de tu Blog por curiosidad, sólo tienes que poner en el navegador http://feeds.feedburner.com/NOMBRE_DE_TU_BLOG. Por ejemplo el de Diarios de la Nube es http://feeds.feedburner.com/diariosdelanube

Paso a paso:

1) Nos conectamos a la web http://twitterfeed.com/  escribiendo dicha URL en el navegador o haciendo "clic" en el enlace que te he proporcionado a tal efecto.

Página principal de la Web Twitterfeed, la cual utilizaremos para publicar automáticamente nuestras entradas en Twitter o en cualquier aplicación compatible con nuestro Feed.

2) Pulsa el botón "REGISTER NOW" para dar de alta tu cuenta en el servicio.

Página para darnos de alta en el servicio.

3) Rellena los datos solicitados: tu dirección de correo electrónico, la password que vas a utilizar con su correspondiente confirmación y rellena las letras del "Captcha" o imagen de reconocimiento "contra robots" que te son solicitadas. Llegados a este punto siempre debes leer los términos del contrato y la política de privacidad.

Rellena los datos solicitados. Lee la política de privacidad  y los términos del contrato.

4) Rellena el nombre que le desees poner a tu Feed. Te recomiendo que sea el del nombre de tu Blog para luego no perderte si lo vas a usar con más Feeds. En la caja de texto "BLOG URL or Feed URL" introduce la URL de tu Blog o la URL de tu Feed: http://feeds.feedburner.com/NOMBRE_DE_TU_BLOG. Por ejemplo el de Diarios de la Nube es http://feeds.feedburner.com/diariosdelanube.

5) Cuando hayas metido la URL de tu Feed o tu Blog, recuerda comprobar que no hay errores en la dirección que has proporcionado y que tu Feed está funcionando con normalidad. Pulsa el botón a la derecha de la caja de texto donde escribes tu Feed llamado "test rss feed" para comprobar que el resultado es correcto. Si todo va bien verás una pantalla como la que te muestro con todos los datos rellenos del feed de mi blog. Pulsa el botón de la parte inferior izquierda de la página "Continue to Step 2" para proseguir con el alta del servicio.

Tweetfeed relleno con los datos del feed del blog. Comprobación del Feed correcta.

6) Ahora estás en "STEP 2: Configure Publishing Services". Aquí simplemente indicarás en qué servicios quieres que se publiquen tus entradas automáticamente cuando las publiques en Blogger (gracias a la utilización de tu Feed).

Listo para seleccionar dónde quieres publicar tus entradas automáticamente.

7) Si haces "clic" por ejemplo sobre "Twitter", te abrirá una pantalla para que autorices a Twitterfeed a publicar tu Feed en tu perfil de Twitter.  Pulsa el botón "Authenticate Twitter".

8) Se te redireccionará a la página de autorización de aplicaciones de Twitter, indicándote qué necesidades va a solicitar a Tweeter Twitterfeed para poder publicar tus entradas.

Autorizando en nuestro perfil de Tweeter la publicación de entradas por medio de la aplicación externa Twitterfeed

9) Una vez autorizada Twitterfeed a publicar en tu perfil de Twitter las entradas de tu Blog, se te redirecciona de nuevo a la pantalla de creación de la cuenta twitterfeed. Aquí ya finalizas pulsando el botón "Create service" (debajo del formulario). Observa que aparecerá en el combo de la parte superior del formulario el nombre de tu perfil en Twitter.

Twitterfeed autorizado, ya sólo queda pulsar "Create service"

10) Volverás a la pantalla de elección de otras aplicaciones receptoras de feed. Aquí si quieres puedes hacer lo mismo para Facebook, Linkedin, APP.net, etc... Observa que en la parte superior en "Active Services" ya tienes listado el de tu feed con Twitter. Si ya has terminado pulsa "All Done!".

11) Si pulsas "All Done" dejas terminada la creación del Feed que actualizará automáticamente tus entradas en Twitter o en las aplicaciones que hayas rellenado en el paso 9.

¡Todo listo!, ya tienes preparado Twitter para recibir tus entradas cuando las actualices por medio del Feed de tu Blog.

¡Eso es todo!, ya tienes tu Twitter listo para recibir tus entradas automáticamente. Es importante que sepas que no es inmediato, puede tardar un rato en función de cuando Twitterfeed informa de actualizaciones a Twitter. Notarás que según publiques nuevas entradas se verán en Twitter.

 

-Artículo escrito por Miguel para www.diariosenlanube.com

 Link http://www.diariosdelanube.com/2013/05/publica-las-entradas-de-tu-blog.html#.Uq6WIaZ4LIU

Read More

15 ebooks que todo Blogger debería leer

Knowledge empowers us with an in-depth understanding about different aspects of life as well as business which in turn gives us the confidence to deal with varying problems and also find apt solutions to it. We can enrich our knowhow in different ways; however one of the best ways to gain knowledge is by reading books. Setting up a new business not only requires hard work but also precise knowledge. This is true for the new as well as the seasoned bloggers.

Although the concept of developing blogging sites for online marketing has been introduced recently but it has been well accepted by the internet users from all over the world resulting in the proliferation of this business. Therefore, bloggers should be well informed and have all the technical knowhow and latest updates so that it can create a niche for itself amidst this aggressive competition. E-books are one of the richest resources that the bloggers had at their disposal and these will be of great help to all the bloggers for enhancing their knowhow. Many free e-books are available on the internet which the bloggers can download and use to gain useful knowledge.

The fifteen e-books that are present on this blog post have been collected by our team members after thoroughly searching the internet. These are the best and the most popular in this genre. It will definitely deepen the knowhow of the bloggers and enrich them with techniques which they can apply to enhance the traffic of their website. Read and enjoy!!

1. 279 Days to Overnight Success

2. Effective Internet Presence

3. How to Start a Business Blog

4. The Corporate Weblog Manifesto

5. BlogBash 30 days 30 experts

6. Blog Profits Blueprint

7. Everyone’s an expert

8. Killer Flagship Content

9. Make Money Blogging

10. Make Money Online

11. New version of Handbook for Bloggers and Cyber Dissidents

12. The Beginner’s Guide to SEO

13. The Long Tail

14. The Zen of Blogging

15. Unleashing the Ideavirus

Gracias a http://www.2expertsdesign.com  http://www.2expertsdesign.com/resources/15-best-free-e-books-to-enhance-your-blogging

Read More

El Slider J Query más sencillo de instalar

Artículo por Olo Man escrito para OloBlogger, visita su blog



¿Tenéis jQuery en vuestro blog y espacio para insertar 10 líneas de código? Sí la respuesta es afirmativa y además queréis tener un carrusel de imágenes automático, este es el código más simple que he visto hasta la fecha y seguro que no hay otro que lo sea mucho más. Si acaso con algún que otro carácter menos, pero pocos, pocos menos.

Ese código que después veremos y una sucesión de imágenes simples metidas dentro de una caja, con un contenedor general común, nos daría este resultado:

1. Instalación JavaScript necesario

Por empezar desde cero, si no tenemos jQueryprimero añadimos esta línea justo después de }]]></b:skin> para cargar esta conocida librería:

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

Una vez seguros de que tenemos la librería en nuestra plantilla, a continuación de esa misma línea añadimos lo que hace que la serie de imágenes funcionen como slider:

<script type="text/javascript">//<![CDATA[
$(function(){
    $('#slider div:gt(0)').hide();
    setInterval(function(){
      $('#slider div:first-child').fadeOut(0)
         .next('div').fadeIn(1000)
         .end().appendTo('#slider');}, 4000);
});
//]]></script>

Podemos guardar los cambios en la plantilla porque eso es todo. Es simple pero veréis que funciona y hace lo que tiene que hacer. Ahora ya sólo tenemos que poner las imágenes dónde queremos que aparezcan, de la manera que veremos a continuación.

2. Crear el slider

Con esto anterior en nuestra plantilla (aunque nada impide ponerlo directamente en un gadget, en una página o incluso en una entrada como veis aquí) ya podremos crear un visor como el que habéis visto arriba. Sólo tenemos que usar esta estructura HTML para añadir las imágenes:

<div id="slider">
    <div><img src="URL_IMAGEN1"/></div>
    <div><img src="URL_IMAGEN1"/></div>
    <div><img src="URL_IMAGEN1"/></div>
</div>

No sé cómo lo veis pero ya está todo lo necesario.

Para mí esto es bastante ligero y eficiente, mucho más que la mayoría de librerías que se usan quizás demasiado habitualmente.

Ajustes

Los tres últimos números del plugin permiten ajustar algunas cosillas. Todos van expresados en milisegundos (4000 = 4 segundos)

• fadeOut(0): Tiempo en desaparecer la imagen saliente
• fadeIn(1000): Tiempo en aparecer la imagen entrante
• ('#slider');},4000): Tiempo de permanencia de cada imagen

Cómo funciona

Y para los curiosos que quieren aprender cosas...

$('#slider div:gt(0)').hide();
Con gt(x) seleccionamos todos los div a partir del número x. En este caso 0 es el primero, así que lo que hacemos con esta línea es esconder (hide) todas las cajas excepto la primera, que será la imagen inicialmente visible.

setInterval(function(){ [lo que haremos] }, 4000);
Necesitamos reiterar una serie de cosas cada cierto tiempo y eso lo hacemos con setInterval, indicando el tiempo de retardo entre cada serie.

$('#slider div:first-child').fadeOut(0)
Dentro de cada uno de esos intervalos hacemos desaparecer (fadeOut) la primera caja (div:first-child) que haya en la relación de imágenes...

.next('div').fadeIn(1000)
... y hacemos que la siguiente caja (next) aparezca poco a poco (fadeIn).

.end().appendTo('#slider');
Por último tomamos la que hasta ese momento es la primera imagen y la situamos al final (appendTo) de la "lista".

end() resetea el contador de elementos que hicimos avanzar con next(). De esa manera, el primer hijo que antes hicimos desaparecer es el que enviamos al final de la pila y no la imagen que ahora tenemos visible. Para el siguiente ciclo la que hasta este momento era visible (que era la segunda) será la primera y por tanto la que haremos desaparecer.

Referencias sobre las funciones usadas:

• :gt()
• .hide()
• setInterval()
• :first-child
• .fadeOut()
• .fadeIn()
• .end()
• .appendTo()

Variantes y personalización

Como habéis visto no es necesario CSS para que el slider funcione, pero si lo usamos podremos cambiar su aspecto, permitir el uso de imágenes de diferente tamaño, incluir rótulos e incluso mejorar la transición. A continuación algunas ideas.

Cuestión de centímetros

No sabe hablar, pero se fija mucho

Limitar el tamaño del contenedor general y evitar el desbordamiento para que las imágenes más grandes no ocupen más espacio. Y ya que estamos le ponemos unas esquinas redondeadas, un borde y lo centramos. El position:relative nos vendrá bien para otra cosa que haremos después.

#slider {
position: relative;
overflow: hidden;
width: 500px;
height: 300px;
border:10px solid #333;
border-radius: 40px;
margin: 0 auto;
padding: 0;
}

Si situamos las cajas padre de las imágenes de manera absoluta con respecto al contenedor general (para eso pusimos antes el relative), estas se dispondrán solapadas una encima de otra. De esta manera al fadeOut le podremos dar un tiempo para que sea "visible" (hemos cambiado el 0 por un 1000) y la transición entre imágenes más suave. Es esa mezcla de imágenes que se produce en la segunda demo.

En las imágenes, el max-width nos sirve para que siempre ocupen todo el ancho y el min-height para que aunque sean deformadas, no se nos quede hueco por debajo cuando sean de menos de 300px de alto.

#slider > div {
position:absolute;
top:0;
left:0;
}
#slider img {
width:100%;
min-height:300px;
margin:0;
padding:0;
border:0;
}

Y ya si queremos añadir otros elementos sobre las imágenes (en este ejemplo un texto), sólo tendremos que etiquetarlos con un span o como párrafo (p) y en el CSS posicionarlos de manera absoluta, ubicándolos en el lugar exacto dónde queramos con top/bottom - left/right.

#slider p {
position: absolute;
bottom: 30px;
left: 0;
display: block;
width: 400px;
height: 24px;
margin:0;
padding: 5px 0;
color: #eee;
background: #990000;
font-size: 22px;
line-height:22px;
text-align:center;
}

El marcado en el HTML para esto último, incluyendo además un enlace sobre la imagen, sería tal que así:

<div id="slider">
<div><a href="URL_ENLACE1"><img src="URL_IMAGEN1" /></a><p>TEXTO1</p></div>
<div><a href="URL_ENLACE2"><img src="URL_IMAGEN2" /></a><p>TEXTO2</p></div>
<div><a href="URL_ENLACE3"><img src="URL_IMAGEN3" /></a><p>TEXTO3</p></div>
</div>

-Redactado por Olo Man para OloBlogger Link

Read More

Sustituye la leyenda Entradas Antiguas o Entradas Recientes por una imagen

Artículo escrito en el Balcón de Jaime, uno de los mejores blogs de ambiente blogger. Te insto a visitarlo y dejarle a un mensaje a Jaime ¡Que vuelva del retiro!

http://elbalcondejaime.blogspot.com/2008/10/iconos-de-navegacin-sustituyendo.html

En tu blog, cuando ves una entrada, te darás cuenta de que debajo de ella, sale lo siguiente:

*Entrada más recientes *Página principal *Entradas antiguas

Pero hay una manera de cambiar esas frases por iconos...

Diseño>edición HTML>expandimos artilugios 

Busca esto:

<b:includable id='nextprev'>

Ahora busca la línea <b:includable id='nextprev'> y la línea que finaliza el bloque: </b:includable>

Borra todo ese bloque incluidas las líneas de <b:includable id='nextprev'> y </b:includable>

Pega esto en su lugar:

<b:includable id='nextprev'>
<div id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<a expr:href='data:newerPageUrl' expr:title='data:newerPageTitle' id='blog-pager-newer-link'>
<img src='URL FLECHA IZQUIERDA'/></a>
</b:if>
<b:if cond='data:olderPageUrl'>
<a expr:href='data:olderPageUrl' expr:title='data:olderPageTitle' id='blog-pager-older-link'>
<img src='URL FLECHA DERECHA'/></a>
</b:if>
<a class='home-link' expr:href='data:blog.homepageUrl'>
<img src='URL IMAGEN DE INICIO'/></a>
</div>
<div class='clear'/>
</b:includable>

Ahora te toca rellenar con URL (direcciones) las tres líneas marcadas.

Si también quieres los iconos de navegación encima de las entradas, para mejorar la navegación de tus usuarios, busca esto y añades la línea que está en rojo:

<b:includable id='main' var='top'>
<div id='blog-posts'>
<b:include name='nextprev'/>

Por último, buscamos la etiqueta ]]></b:skin> y antes de ella le pegamos esto:

#blog-pager-older-link {
float: right;
}
#blog-pager-newer-link {
float: left;
}
#blog-pager {
text-align: center;
}

La función del bloque que hemos añadido ahora consiste en "recordar" dónde va cada icono, y así cuando cambiemos algo de los posts en la plantilla, no se descolocarán, si no lo haces tus iconos se acabarán juntando o descolocando.

Puedes encontrar muchos iconos de flechas en las siguientes páginas web...

Icon Finder

Icon let

Icon look

Nota:
Las páginas están en inglés, por lo que si deseas las flechas debes buscarlas así:

Left arrow: flecha izquierda
Right arrow: flecha derecha
Home: Inicio (la casita :-D)

Read More