tag:blogger.com,1999:blog-53576882612438587972024-03-23T10:13:45.209+00:00iniciaBlog - Te ayuda con Blogger para mejorar tu blog 2023Jesús Manuelhttp://www.blogger.com/profile/10733551378578370820noreply@blogger.comBlogger15125tag:blogger.com,1999:blog-5357688261243858797.post-46009929964915125522014-07-17T21:52:00.000+01:002015-04-08T22:49:03.555+01:00Cómo escuchar lo que dicen de tu blog en los medios sociales<div style="text-align: justify;">
A estas alturas, habrás leído mucho sobre las ventajas que supone para las empresas tener presencia en los <a href="http://www.iniciablog.com/p/medios-sociales-blogger.html">medios sociales</a>. Está claro, las marcas buscan la cercanía con sus seguidores y el motivo no es solo para acercarles las novedades, sino fundamentalmente para escucharles, conocer su opinión y saber de primera mano qué opinan de sus productos o servicios y por qué no, qué opinan de la competencia.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Al igual que una empresa, tu eres una marca, tu blog es sin duda uno de tus productos,... si lo sé, te interesa <a href="http://www.iniciablog.com/2014/07/cual-es-mejor-horario-publicar-blogger-twitter-google.html">difundir tus nuevas publicaciones</a> entre cuanto más seguidores mejor y ese es el primero de los motivos que te mencionaba anteriormente, pero...¿Escuchas? ¿Te enteras de lo que dicen de tu blog?¿Cómo monitorizas tu marca?. De esto trata esta nueva publicación, de <b>escuchar</b>.<br />
<br /></div>
<div style="text-align: justify;">
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://www.iniciablog.com/2014/07/como-monitorizar-lo-que-dicen-de-tu-blog.html" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Cómo escuchar lo que dicen de tu blog en los medios sociales" border="0" src="http://3.bp.blogspot.com/-39v1NxPUUz8/U8WwjM8hrDI/AAAAAAAAGr4/rnkutu5r0w4/s1600/como-monitorizar-tu-blog.png" title="Cómo escuchar lo que dicen de tu blog en los medios sociales" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Cómo escuchar lo que dicen de tu blog en los medios sociales. Monitorizar tu Marca</td></tr>
</tbody></table>
</div>
<h3 style="text-align: justify;">
Escuchar para detectar necesidades del mercado</h3>
<div>
La capacidad que tienen las empresas y las marcas para escuchar lo que se cuece dentro de los medios sociales, es posible gracias a que están en un estado de alerta permanente. Si a esto le sumamos una capacidad de reacción, hablamos entonces de empresas/marcas 2.0. Un comentario negativo que no es gestionado de manera correcta puede derivar en una crisis de marca.<br />
<br /></div>
<div>
<h4>
</h4>
<h4>
Opiniones sobre los productos o servicios</h4>
</div>
<div style="text-align: justify;">
Te pongo un ejemplo un poco más rebuscado con respecto a este punto, llamas por teléfono y....no lo cogen o tardan en cogerlo o sencillamente no te dan la solución que esperabas. Este es motivo suficiente para que el usuario, lance a través de Twitter su malestar sobre esta situación. Si tienes capacidad para escuchar, puedes corregir estos aspectos tan básicos y que muchas veces pasan totalmente desapercibidos.<br />
<br /></div>
<div>
<h4>
</h4>
<h4>
Opiniones sobre la necesidad de satisfacer un deseo</h4>
</div>
<div style="text-align: justify;">
Cuantas veces hemos visto, por ejemplo a través de Twitter o Facebook preguntas del tipo Cómo se hace....Dónde puedo encontrar.... Alguién me recomienda... Este tipo de comentarios, puede desembocar si se administran de manera adecuada no solo en un nuevo seguidor sino también en una venta.</div>
<div style="text-align: justify;">
<br /></div>
<h4 style="text-align: justify;">
Opiniones sobre la competencia</h4>
<div>
Puede dar una ventaja competitiva a nuestra marca, tener mayor capacidad de escucha que nuestra propia competencia, con el fin de conocer los puntos flacos de un producto o servicio y mejorar los propios o sencillamente lanzar una campaña de lanzamiento potenciando aquellas características que te hacen más fuerte.</div>
<div>
<br /></div>
<div>
<h4 style="text-align: justify;">
Opiniones de los propios empleados</h4>
<div>
Son mucho los ejemplos (<a href="http://www.asuntosdigitales.com/redes_sociales_caso_de_estudio_dominos_pizza/" rel="nofollow" target="_blank">aquí tienes uno</a>) que podemos encontrar sobre crisis en las marcas originadas por empleados molestos, desmotivados y que en definitiva no se sienten identificado son los valores de las marca. ¿qué pasaría si uno de estos empleados molesto sube por ejemplo un <a href="https://www.youtube.com/watch?v=eYmFQjszaec&feature=player_embedded" target="_blank">video</a> a Youtube? Un buen sistema de escucha puede sin duda evitar situaciones muy desagradables.</div>
</div>
<div>
<br /></div>
<div>
<h4 style="text-align: justify;">
Opiniones sobre otros actores como los fabricantes, mayoristas, distribuidores</h4>
<div style="text-align: justify;">
Imagina que vas a distribuir una nueva marca a través de tu negocio, cual es la reputación de su fabricante, qué opina el consumidor final...productos que respetan el medio ambiente, productos que favorecen el ahorro energético, productos con un buen servicio postventa, trazabilidad, derechos del trabajador, condiciones de trabajo, garantías...todo cuenta en la cadena de distribución. </div>
</div>
<div>
<br /></div>
<h3 style="text-align: justify;">
Herramientas para escuchar lo que dicen de tu marca (o de tus competidores)</h3>
<div>
<div style="text-align: justify;">
Vamos a poner en práctica lo aprendido, escuchar no solo aquello que afecta a nuestra marca, también posibles oportunidades de ventas y a la competencia.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqvr6liguveiAXyZn63Y-gwP4bkNBApdOefznzUhj9X2TBCm5oZ3imnzSIJEdlRq42ZuE2jGLbHvDAd0oC_bFy3jJ2Z-5leKPyPdmVcPmABUWLi-JxUdJXZ16ypLCpf5hqM9WgbhV3XnE/s1600/Google-alerts-iniciablog.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqvr6liguveiAXyZn63Y-gwP4bkNBApdOefznzUhj9X2TBCm5oZ3imnzSIJEdlRq42ZuE2jGLbHvDAd0oC_bFy3jJ2Z-5leKPyPdmVcPmABUWLi-JxUdJXZ16ypLCpf5hqM9WgbhV3XnE/s1600/Google-alerts-iniciablog.png" height="200" width="185" /></a></div>
<br /></div>
<div style="text-align: justify;">
<a href="http://www.google.es/alerts?hl=es" rel="nofollow" target="_blank">Google Alert</a>. Es el método más estándar de monitorizar tu marca así como palabras claves de tu interés. Este servicio gratuito de Google es capaz de avisarte por mail cada vez que se mencione determinadas palabras. El aviso puede ser inmediato (ideal para por ejemplo el nombre de tu blog o marca) o un resumen diario o semanal. Es muy sencillo, ve indicando palabras o expresiones que quieres "escuchar". Tienes opciones para que te devuelva todos los resultados o los mejores. En todo momento verás una vista previa de la escucha.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br />
<br />
<a href="http://topsy.com/" rel="nofollow" target="_blank">Topsy</a>. Cuando hablamos de monitorizar, Topsy es el servicio por excelencia para Twitter.. Puedes hacer búsqueda simples y avanzadas y aplicar varios filtros. Puedes configurar las alertas para que te lleguen a través de email o a través de Twitter, para ello deberás iniciar sesión.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<a href="https://twitter.com/search-advanced" rel="nofollow" target="_blank">Buscador Avanzado de Twitter</a>. Aunque no ofrece un sistema de alertas, el buscador cuenta con campos suficientes como para hacer una búsqueda muy ajustada incluso con opciones de geolocalización. Vale la pena conocerlo y probarlo.</div>
</div>
<div>
<br /></div>
<div>
<br /></div>
<div style="text-align: justify;">
<h3>
¿Qué herramientas usas tu?¿Monitorizas el nombre de tu blog? ¿y el tuyo?</h3>
<div>
Deja tu comentario. Si te ha gustado esta publicación, compártela con tus seguidores.</div>
<div>
Un abrazo</div>
<div>
<br /></div>
</div>
iniciaBloghttp://www.blogger.com/profile/05921317092177374710noreply@blogger.com0tag:blogger.com,1999:blog-5357688261243858797.post-13692949749630092062014-04-29T23:47:00.002+01:002015-04-08T22:57:28.996+01:00Entradas relacionadas en Blogger con miniaturas<div style="text-align: justify;">
En este tutorial te mostraré cómo colocar un <b>bloque con miniaturas</b> que muestre un conjunto de <b>artículos relacionados</b> con la publicación activa. Debes tener presente que ofreciendo contenido relacionado y sumándole la miniaturas lograrás invitar de una forma elegante al lector a descubrir más contenido en tu blog, además, este tipo de soluciones debe repercutir en la cantidad de páginas vistas de tu blog y por consecuencia en el tiempo medio de estancia. Recuerda que este elemento es uno de los <a href="http://www.iniciablog.com/2011/10/elementos-imprescindibles-redes.html" target="_blank">5 elementos claves de un blog</a><br />
<br />
<br />
<br />
Hasta ahora había usado enlaces relacionados al pie de la entrada, proporcionado por un script de BloggerTrix (<a href="http://www.iniciablog.com/2011/05/los-mejores-trucos-blogger-blog.html">truco nº 16 </a>de la lista de los 50 mejores trucos para Blogger). Ya que he potenciado mis publicaciones mediante imágenes, vamos a aprovecharlas para este nuevo bloque de contenido relacionado con miniaturas que vamos a instalar.<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://1.bp.blogspot.com/-3s6VE5nuGfE/U11MqNX4UjI/AAAAAAAAGX0/G4X7xPC6MEI/s1600/contenido-relacionado-blogger-miniaturas.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Contenido relacionado con miniaturas al pie de las publicaciones en Blogger" border="0" src="http://1.bp.blogspot.com/-3s6VE5nuGfE/U11MqNX4UjI/AAAAAAAAGX0/G4X7xPC6MEI/s1600/contenido-relacionado-blogger-miniaturas.png" title="Contenido relacionado con miniaturas al pie de las publicaciones en Blogger" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Contenido relacionado con miniaturas al pie de las publicaciones en Blogger</td></tr>
</tbody></table>
<br />
<br />
Para lograr este objetivo he analizado estos cuatro servicios; <a href="http://www.linkwithin.com/" target="_blank">LinkWithin</a>, <a href="http://www.outbrain.com/" target="_blank">OutBrain</a>, <a href="http://www.addthis.com/" target="_blank">AddThis</a>, <a href="http://www.engageya.com/" target="_blank">Engageya</a>, veremos los pros y los contras y te ayudaré a identificar cual de ellos se ajusta a tus necesidades. Existen otros como <a href="http://www.taboola.com/" target="_blank">Taboola</a>, <a href="http://nrelate.com/" target="_blank">NRelate</a> o <a href="http://www.zemanta.com/" target="_blank">Zemanta</a> (WordPress) que te los dejos como dato adicional por si quieres verlos y analizarlos.</div>
<div style="text-align: justify;">
<br />
<h3>
¿Dónde debe aparecer el bloque el contenido relacionado?</h3>
<div>
Independientemente de cual de los servicios que vamos a ver a continuación elijas como proveedor del script necesario para lograr tu objetivo, me gustaría llegar a un consenso contigo y es que el bloque con los artículos relacionados, debe aparecer s<b>ólo y únicamente al pie de la entrada activa</b>, es decir, tienes que estar dentro del artículo para ver el contenido relacionado. Te lo digo porque he visto muchos blogs que muestran los artículos relacionados en la vista inicial del blog debajo de cada entrada, esto debemos considerarlo una mala práctica ya que estas sobre cargando demasiado el <a href="http://www.iniciablog.com/2012/10/configurar-resumen-miniatura-post-blogger.html">vista inicial de tu blog</a>, volviéndola muy lenta, pesada por lo que <a href="http://www.iniciablog.com/2011/10/como-optimizar-velocidad-blogger-tiempo.html">influirá negativamente en el posicionamiento</a>.</div>
<h3>
</h3>
<h3>
Un análisis rápido de cada servicio para situarte</h3>
Te voy a ser muy sincero, si lo que buscas es algo sencillo, fácil de implementar en el blog y sin complicaciones adicionales tu servicio es <b>LinkWithin</b>. Si por el contrario, quieres "complicarte" un poquito más y registrarte en un servicio gratuito que además del script, te va a proporcionar diferentes estilos y estadísticas mensuales, tu servicio puede ser <b>Engageya </b>(aunque en mi caso me he encontrado con un problemita que te explicaré luego)<b>. </b>Si quieres subir un poco más el nivel y tener acceso a estadísticas en tiempo real, opciones de monetización, contenido externo recomendado, el servicio que buscas es<b> OutBrain</b>. Si quieres ir un poco más allá y además de las estadísticas quieres dotar a tu blog de otros elementos como una barra flotante para compartir las entradas o un bloque para recomendar la próxima lectura y todo gracias a un <b>mismo proveedor</b> entonces lo que buscas son las <b><i>c</i>apas inteligentes</b> o <i>smart layers </i>de <b>Addthis</b>.<br />
<br />
<h3>
Tabla comparativa con las características más importantes</h3>
<div>
He creado una tabla comparativa utilizando una <a href="http://www.iniciablog.com/2013/09/Blogger-Google-Docs-Hojas-Calculo.html">hoja de cálculo de Google Drive</a>, con el fin de compartir contigo las características más destacada que he podido ver:</div>
<div>
<br /></div>
<iframe border="0" height="400px" scroll="no" src="https://docs.google.com/spreadsheets/d/1hznl41b5SOSp7MGF-VsqW3JQDsgmHLAq6_DLjcc6JIc/pubhtml?widget=true&headers=false" width="710px"></iframe><br />
<br />
<h3>
Modificando la plantilla de Blogger para incrustar el gadget</h3>
<div>
Este es un paso que deberemos realizar si o si, independientemente del proveedor que elijas finalmente. El objetivo es identificar dentro de la plantilla de Blogger el punto exacto donde luego incluiremos el script correspondiente. Para ello, realiza estos pasos.</div>
<div>
<ul style="text-align: start;">
<li><b>Paso 1. </b><a href="https://blogger.com/" rel="nofollow" target="_blank">Conecta con Blogger</a></li>
<li><b>Paso 2. </b>Acceder a la pestaña <b><i>Plantilla</i></b></li>
<li><b>Paso 3. </b>Haz copia de seguridad usando el botón <b><i>Crear/Restablecer copia de seguridad</i></b></li>
<ul>
<ul></ul>
</ul>
<li><b>Paso 4. </b>Presiona el botón <i>Plantilla HTML</i></li>
<li><b>Paso 5. </b>Sitúa el cursor del ratón en cualquier linea del editor</li>
<li><b>Paso 6.</b> Pulsa<b> Ctrl F o Ctrl B </b></li>
<li><b>Paso 7.</b> Pon este texto en el buscador de la plantilla <i><data:post.body/> , </i>da intro y vuelve a dar otro intro, si encuentras otra linea igual, es la segunda.</li>
<li><b>Paso 8. </b>Copia este bloque de código y pégalo justo debajo de la linea encontrada en el paso anterior.</li>
</ul>
<textarea class="cajacodigo" cols="68" name="widget.content" onclick="this.select();" rows="7" style="color: #666666; font-family: Courier New, Courier, monospace; font-size: 14px;"><b:if cond='data:blog.pageType == "item"'>
<!--Entradas relacionadas con miniaturas. -->
<!--El script del proveedor que selecciones va debajo de esta linea -->
</b:if>
</textarea>
<br />
<div style="text-align: left;">
<ul>
<li><b>Paso 9. </b>Guarda la plantilla y no debe presentar ningún problema.</li>
</ul>
<div>
Ya hemos creado el hueco donde pondremos posteriormente el script (debe ir por encima de la linea </b:if>) que nos proporcione el proveedor que selecciones finalmente. Ahora te hago un resumen de cada uno de ellos y los pasos que debes dar para obtener dicho script.</div>
</div>
<div style="text-align: left;">
<br /></div>
</div>
</div>
<div style="text-align: justify;">
<h3>
LinkWithin</h3>
<div>
Como te mencionaba anteriormente, <b>LinkWithin</b> es el más sencillo de implementar, no necesita registro y si no te quieres complicar la vida es muy recomendable. El script funciona si bien es cierto que el servicio parece estar inactivo en cuanto a actualizaciones se refiere. Pese a todo se ha convertido en todo un clásico. Puedes mostrar 3, 4 ó 5 miniaturas. Este gadget suele verse mucho en blogs de cocina, moda, cine, etc.<br />
<br />
<div>
Sigue estos obtener el script</div>
<div>
<ul style="text-align: start;"><ul>
</ul>
<li><b>Paso 1. </b>Copia el siguiente código.</li>
<ul style="font-style: italic;"></ul>
<div style="font-style: italic;">
<b><br /></b></div>
<div style="font-style: italic;">
<textarea class="cajacodigo" cols="68" name="widget.content" onclick="this.select();" rows="7" style="color: #666666; font-family: Courier New, Courier, monospace; font-size: 14px;"><div class='linkwithin_div'/>
<script>
var linkwithin_site_id = TU_ID_AQUI ;
</script>
<script>linkwithin_text='Quizás también te interese estos temas: '</script>
<script src='http://www.linkwithin.com/widget.js'/>
<a href='http://www.linkwithin.com/'><img alt='Related Posts Plugin for WordPress, Blogger...' src='http://www.linkwithin.com/pixel.png' style='border: 0'/></a>
</textarea>
</div>
</ul>
<ul style="text-align: start;">
<li><b>Paso 2.</b> Pégalo en tu plantilla, en el lugar que ya habíamos previsto para ello.</li>
<li><b>Paso 3. </b><a href="http://www.linkwithin.com/learn" target="_blank">Conecta ahora con LinkWithin</a></li>
<li><b>Paso 4</b>. Cumplimenta el formulario</li>
<ul>
<li>Por tu email</li>
<li><b>Blog link</b>: La dirección de tu blog</li>
<li><b>Plataform</b>: Selecciona <b><i>Other</i></b></li>
<li><b>Width</b>: El numero de niniaturas que quieres mostrar (de 3 a 5 historias)</li>
<li>Marca la casilla si tu blog tiene fondo oscuro</li>
<li>Presiona el botón <b><i>Get Widget </i></b></li>
</ul>
<li><b>Paso 5. </b>Se mostrará otra ventana con el código,<b> copia solo el número o id</b></li>
<li><b>Paso 6. Vuelve a Blogger</b></li>
<li><b>Paso 7. </b>Cambia donde hemos puesto<b> TU_ID_AQUI </b>por el número copiado anteriormente</li>
<li><b>Paso 8. </b>Guarda tu plantilla, visualiza tu blog y entra en un post. Al pie debes ver las entradas relacionadas con miniaturas. ¡Enhorabuena!</li>
</ul>
</div>
</div>
<div>
<br /></div>
<div>
<h3>
Engageya</h3>
</div>
<div>
Las sensaciones con este proveedor son muy buenas, una de las cosas que más me ha gustado es que tiene varios estilos para mostrar los artículos relacionados, desde miniaturas redondas, rectangulares, cuadradas y así hasta <b>16 variantes diferentes (fantástico!)</b>. Además puedes asociar a tu blog en diferentes categoría o temáticas y puedes decir si quieres mostrar artículos relacionados de terceros bajo tu misma temática.<br />
<br />
Sin embargo, e<a href="http://www.iniciablog.com/2013/06/blogger-feedburner-boletin-resumido.html">n mi caso que ofrezco un feed corto</a> desde mi blog (y no la entrada completa) la miniaturas que muestra nada tiene que ver con mis post ni con la temática de mi blog y esto me ha desanimado un poco, sin embargo insisto que puede ser útil para ti evaluarlo. Ofrece estadísticas mensuales que nos permitirán ver por ejemplo los clics recibidos y las publicaciones correspondientes. Vale la pena conocerlo.<br />
<br />
Sigue estos obtener el script:<br />
<br />
<ul>
<li><b>Paso 1</b>. <a href="http://www.engageya.com/" rel="nofollow" target="_blank">Debes registrarte en Engageya</a></li>
<li><b>Paso 2</b>. Cumplimenta los campos del formulario, presta especial atención a la cuenta de email y dirección de tu blog</li>
<li><b>Paso 3.</b> Conecta con tu buzón de correo electrónico y copia el código que te habrás recibido.</li>
<li><b>Paso 4.</b> Pégalo en el formulario y presiona el botón <b><i>Sign Up</i></b></li>
<li><b>Paso 5</b>. Accederás al constructor del Widget, cumplimenta y personaliza todo lo que creas conveneniente</li>
<li><b>Paso 6</b>. En el apartado Plantaforma, selecciona <b><i>JavaScript Any Plataform </i></b></li>
<li><b>Paso 7</b>. Cuando estés listo presiona el botón <b><i>Save & Get Code</i></b></li>
<li><b>Paso 8</b>. Copia el código que te ofrece</li>
<li><b>Paso 9</b>. Vuelve a <b><i>Blogger</i></b> y pégalo en el sitio que teníamos previsto.</li>
<li><b>Paso 10.</b> <span style="text-align: left;">Guarda tu plantilla, visualiza tu blog y entra en un post. Al pie debes ver las entradas relacionadas con miniaturas. ¡Enhorabuena!</span></li>
</ul>
<div>
<b>Nota: </b>Según nos indica Engageya <b>puede tardar 30 minutos</b> en aparecer en tu blog, por lo tanto paciencia.</div>
<br />
<br />
<div>
<ul style="text-align: start;"><i>
</i></ul>
</div>
</div>
<div>
<h3>
Outbrain (el usado por iniciaBlog)</h3>
</div>
<div>
OutBrain parece consolidarse como un buen referente. A parte de las estadísticas en tiempo real, ofrece también la posibilidad de ofrecer contenido de terceros en tu blog, dentro de la misma temática y donar directamente tus ingresos a ONGs internacionales, tipo Cruz Roja, Children.org, Protección cambio climático entre otras. Puedes indicar la cantidad de artículos relacionados entre 1 y 10 y si los quieres con o sin miniaturas.<br />
<br />
El cuadro de mandos que ofrece es bastante intuitivo y repito es el que parece consolidarse como estándar. También te permitirá (de pago) ofrecer tus contenidos a su red con el fin de adquirir más tráfico y seguidores hasta tu blog.<br />
<br />
En este caso <b>Outbrain</b> ofrece cara a instalar el script un icono con la <b>plataforma Blogger</b>. Esto permite añadir un gadget a la vista diseño de tu blog aunque sin embargo lo que haremos es copiar el contenido de ese Gadget, lo eliminamos de la vista diseño del blog y lo pegamos en el hueco que habíamos creado en la plantilla. Uff parece complicado, pero no te preocupes, vamos paso a paso.<br />
<br /></div>
<div>
<div>
Sigue estos obtener el script:<br />
<br />
<ul>
<li><b>Paso 1</b>. <a href="https://my.outbrain.com/register?kme=hp%20register%20click&km_pos=top%20green%20button" rel="nofollow" target="_blank">Debes registrarte en Outbrain</a></li>
<li><b>Paso 2</b>. Cumplimenta los campos del formulario, usuario, contraseña y email</li>
<li><b>Paso 3.</b> Acepta los términos y haz clic en el botón <b><i>Register</i></b></li>
<li><b>Paso 4.</b> Se mostrará una nueva página donde indica que debes revisar tu correo electrónico para confirmar la suscripción.</li>
<li><b>Paso 5</b>. Accede a tu buzón y confirma haciendo clic en el enlace del correo electrónico</li>
<li><b>Paso 6</b>. Pulsa el apartado de <b><i><a href="https://my.outbrain.com/manage/blogs" rel="nofollow" target="_blank">Manage Blog </a> y añade tu blog</i></b></li>
<li><b>Paso 7</b>. A la pregunta Install widget? indica <b><i>Yes</i></b></li>
<li><b>Paso 8</b>. En el apartado <b>Plataforma</b> selecciona <b><i>Blogger</i></b></li>
<li><b>Paso 9. </b>Indica Blog URL, ejemplo http://www.iniciablog.com y selecciona el lenguaje</li>
<li><b>Paso 10.</b> Elije el tipo de recomendación (Miniaturas o texto)</li>
<li><b>Paso 11. </b>Acepta los términos de uso y pulsa el botón <b><i>Continue</i></b></li>
<li><b>Paso 12</b>. Se abrirá una nueva ventana, debes abrir seleccionar tu blog</li>
<li><b>Paso 13. </b>Pulsa el botón <b><i>Añadir Artilugio</i></b></li>
<li><b>Paso 14.</b> Ve a Blogger a la pestaña Diseño</li>
<li><b>Paso 15.</b> Fíjate que tienes un Gadget nuevo (en la parte de la derecha, el primero). En el título pone <i>Ratings an Recommendations...</i></li>
<li><b>Paso 16.</b> Pulsa el enlace Editar del gadget en cuestión</li>
<li><b>Paso 17.</b> Copia el código script que te aparece en la ventana que se muestra. Asegúrate por favor de haberlo seleccionado todo. Este es el script que ahora pondremos en el hueco creado en el paso previo dentro de la plantilla. Una vez copiado debes pulsar el botón Eliminar y guarda el diseño.</li>
<li><b>Paso 18</b>. Vuelve a <b><i>la Plantilla HTML</i></b> y pégalo en el sitio que teníamos previsto.</li>
<li><span style="text-align: left;"><b>Paso 19. </b>Guarda tu plantilla, visualiza tu blog y entra en un post. Al pie debes ver las entradas relacionadas con miniaturas. ¡Enhorabuena!</span></li>
</ul>
<div>
<b>Nota: </b>Según nos indica <b>Outbrain</b>, <b>puede tardar varios minutos</b> en aparecer en tu blog, por lo tanto paciencia.</div>
</div>
<div>
<ul style="text-align: start;"><i>
</i></ul>
</div>
</div>
<div>
<div>
<h3>
Smart Layers de Addthis</h3>
</div>
<div>
A mi modo de ver las cosas, considero que Addthis es el proveedor más completo, <a href="https://www.addthis.com/smart-layers-demo.html" target="_blank">además tienes una página DEMO para que puedas verlo</a>. Addthis ofrece además del bloque de artículos relacionados contempla otros gadgets, como por ejemplo la barra flotante para compartir en medios sociales. Todos dirigidos a lograr una mayor interactividad con nuestros lectores.<br />
<br />
Al igual que ocurre con Outbrain, Addthis tiene soporte para Blogger, por lo que lo aprovecharemos para añadir automáticamente el Gadget en la vista diseño del blog, copiaremos el código, eliminaremos ese gadget y pegaremos finalmente el código en el hueco previsto, dentro de la plantilla de tu blog, ánimo!. Sin embargo con Addthis prefiero quedarme por aquí y dejarte a la aventura de probarlo tu mismo y así le damos un poco más de emoción a la cosa ¿te parece?. <a href="https://www.addthis.com/get/smart-layers" target="_blank">Conecta con AddThis y echa un vistazo.</a><br />
<br /></div>
<div>
<div>
<ul style="text-align: start;"><i>
</i></ul>
</div>
</div>
</div>
<div>
<h3>
Conclusiones</h3>
</div>
<div>
Como habrás podido ver todos y cada uno de estos servicios satisface el objetivo de incorporar a nuestro blog un bloque con contenido relacionado y miniaturas al pie de la entrada activa. En función del momento, del grado de exigencia podrás de cantarte por cualquiera de ellos.<br />
<br />
En mi caso y como ya podrás ver al pié de esta entrada, hemos seleccionado <b>OutBrain</b>.</div>
</div>
<br />
Por favor deja tu comentario, un abrazo.iniciaBloghttp://www.blogger.com/profile/05921317092177374710noreply@blogger.com1tag:blogger.com,1999:blog-5357688261243858797.post-55350317452774530322014-01-14T22:48:00.001+00:002015-04-08T23:00:22.670+01:00Ley de cookies en Blogger. ¿Cómo adaptar tu blog?<div style="text-align: justify;">
En este artículo abordo un tema que ya lleva unos meses dando vueltas por todas las web y blogs en España, se trata de la <b style="font-style: italic;">Ley de Cookies</b><span style="font-style: italic;">...si cookies, galletas!</span><br />
<b style="font-style: italic;"><br /></b>
El origen lo encontramos en la <b>Ley de Servicios de la Sociedad de Información</b> (LSSI), concretamente en el <a href="http://www.boe.es/buscar/act.php?id=BOE-A-2002-13758&b=34&tn=1&p=20120331#a22" rel="nofollow" target="_blank">segundo apartado del artículo 22 de la ley 34/2002</a>.<br />
<br />
<h3>
¿Por qué esta Ley de Cookies trae tanta polémica?</h3>
Cualquier sitio web o blog que use <b><i>Google Analytics</i></b> y/o <b><i>Google Adsense</i></b> está haciendo uso de cookies. Las cookies permiten, en el primero de los casos, obtener datos para generar las estadísticas que tanto necesitamos. En el segundo caso, es gracias a las cookies lo que hace posible conocer preferencias del usuario y por lo tanto mostrar publicidad ajustada a cada perfil. Sin cookies no hay problemas con la ley pero te quedas sin estadísticas y/o publicidad. Con cookies tendrás lo que necesitas, podrás mejorar la experiencia de usuario y generar ingresos pero será necesario que obtengas el<b> consentimiento</b> para el uso de las cookies por parte de quien te visita.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://4.bp.blogspot.com/-u4efyS-0TTQ/UtWzgDl8vPI/AAAAAAAAEYk/5nP_gGnGdfc/s1600/ley-de-cookies-en-blogger.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="ley de cookies en blogger" border="0" src="http://4.bp.blogspot.com/-u4efyS-0TTQ/UtWzgDl8vPI/AAAAAAAAEYk/5nP_gGnGdfc/s1600/ley-de-cookies-en-blogger.png" title="ley de cookies en blogger" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">¿Cómo adaptar tu blog a la Ley de Cookies en Blogger?</td></tr>
</tbody></table>
<br />
Seguramente te habrás topado ya con la cara visible de esta ley. Habrás visitado sitios web (incluido blogs) donde se muestran en la cabecera o pie un mensaje que podemos clasificar en <b>dos tipos</b>:<br />
<br />
<ul>
<li><b>Tipo 1:</b> <i>"En este sitio usamos Cookies.... ¿Aceptas nuestra política? Si, No y más información</i></li>
<li><b>Tipo 2:</b><i> </i><i>"En este sitio usamos Cookies...si sigues navegando entendemos que aceptas nuestra política." Aceptar y más información</i></li>
</ul>
<i><br /></i>
Hay una gran diferencia entre el primero y el segundo de los mensajes y es la forma en la que se obtiene el consentimiento. Con el tiempo, es precisamente el <b>segundo tipo de consentimiento</b> el que parece haberse impuesto, por otra parte, es el más nos conviene desde el punto de vista de la administración de un sitio web o de un blog como es nuestro caso ya no interrumpe la instalación de las cookies.<br />
<br />
Mi intención no es analizar la letra pequeña ni hacer un tratado sobre esta ley. Abordaré este asunto de la manera más práctica posible, aportando soluciones concretas para adaptar tu blog a la <b><i>dichosa</i></b> <b style="font-style: italic;">Ley de Cookies </b>tal y como he tenido que hacer yo en iniciaBlog.com<br />
<br />
<h3>
Información de referencia</h3>
Para lograr este objetivo me he basado en dos documentos (después de mucho buscar y analizar), uno es "<a href="http://www.agpd.es/portalwebAGPD/canaldocumentacion/publicaciones/common/Guias/Guia_Cookies.pdf" rel="nofollow" target="_blank">Guía sobre el uso de las Cookies</a>" está editado por la <a href="http://www.agpd.es/portalwebAGPD/canaldocumentacion/publicaciones/index-ides-idphp.php" rel="nofollow" target="_blank">Agencia Española de Protección de Datos</a> (AEPD), y el otro es "<a href="http://www.adigital.org/sites/default/files/studies/5pasoscookies.pdf" rel="nofollow" target="_blank">Cumplir con la ley de Cookies en cinco pasos</a>", editado por <a href="http://www.adigital.org/" rel="nofollow" target="_blank">adigital</a>.<br />
<br />
También me gustaría dar las gracias a <a class="g-profile" href="https://plus.google.com/117733767241735548325" target="_blank">+Jesús Pérez Serna</a>, experto en LOPD por su predisposición a ayudar y aclarar cuestiones sobre este tema.<br />
<br />
<h3>
<b>Vamos al grano, ¿Tu blog usa Cookies?, ¡Claro que si!</b></h3>
</div>
<div style="text-align: left;">
<span style="text-align: justify;">¿Usas en tu blog </span><b style="text-align: justify;"><i>Google Analytics</i></b><span style="text-align: justify;">?, la respuesta debería ser </span><a href="http://www.iniciablog.com/2011/01/estadisticas-blogger-google-analitics.html" style="text-align: justify;" target="_blank">¡pues claro!</a><span style="text-align: justify;">. Bien, siguiendo con la mini introducción, comentarte que </span><b style="text-align: justify;"><i>Google Analytics</i></b><span style="text-align: justify;"> recoge información para elaborar estadísticas, gracias a pequeños archivos, los ya famosos cookies que se almacenan en el ordenador/dispositivo de la persona que te visita y que ahora con esta nueva Ley, se debe </span><b style="text-align: justify;">informar de este hecho (la instalación)</b><span style="text-align: justify;">, algo que por otro lado, ha venido ocurriendo así desde hace muchísimos años. </span><br />
<span style="text-align: justify;"><br /></span>
<span style="text-align: justify;">Además </span><b style="text-align: justify;">debes obtener el consentimiento del lector</b><span style="text-align: justify;">, de lo contrario no estas cumpliendo con esta ley y por lo tanto puede ser objeto de sanción (<a href="http://descargalegal.blogs.lexnova.es/2014/01/23/primera-sancion-por-no-informar-correctamente-sobre-el-uso-de-las-cookies/" target="_blank">primera sanción firme de la AEPD a dos empresas</a>)</span><span style="text-align: justify;">. Lo mismo ocurre si usas <b><i>Google Adsense</i></b> o de cualquier otro servicio de terceros que use este tipo de tecnología (cookies). Según la <b><i>guía sobre el uso de las Cookies de la AEPD</i></b>, quedan exentas aquellas que tienen que ver con redes sociales cuya finalidad es facilitar que tus artículos puedan ser compartidos.</span></div>
<i><br /></i>
<br />
<h3 style="text-align: justify;">
Si lo sé, tu blog tiene alcance global, pero tu vives en España</h3>
<div>
<div style="text-align: justify;">
Exacto, esta Ley te afecta como blogger residente en España, por lo que si no es tu caso revisa <a href="http://www.iniciablog.com/p/contenidos.html" target="_blank">mis contenidos</a> para centrarte en otro tutorial. Te presente que esta ley es de ámbito europeo aunque cada país puede tener sus especificaciones, en este caso, siendo yo el administrador de mi blog y residiendo en España, nos regimos por la Agencia Española de Protección de Datos.</div>
<br />
<h3>
Video explicativo, antes de pasar a la parte práctica.</h3>
<div>
Llegados a este punto, me gustaría invitarte a ver este video de 5 minutos, de Marta Soler de <a href="http://www.interdigital.es/" target="_blank">interdigital</a>, que nos ayudará a <b>entender mejor todos los conceptos</b> y los elementos que vamos a usar a continuación.<br />
<br /></div>
<div>
<div style="text-align: center;">
<iframe allowfullscreen="" frameborder="0" height="360" src="//www.youtube.com/embed/OX_hnnPUeF0?rel=0" width="640"></iframe>
</div>
</div>
<br /></div>
<h3 style="text-align: justify;">
¿Qué vamos a necesitar para adaptar el blog a la ley de Cookies?</h3>
<div>
Vamos a necesitar <b>informar al usuario</b> sobre el uso de las Cookies al mismo tiempo que vamos a <b>obtener su consentimiento</b>. Para hará falta lo siguiente:<br />
<br />
<h4>
1. Crear una página en tu blog, titulada "Política de Cookies"</h4>
<div>
Esta nueva página debe quedar perfectamente integrada en tu blog, siguiendo la misma estética que otras. Puedes redactar los textos y orientarlos al tipo de público que recibes, además el enlace a ella debe estar disponible de manera permanente, por ejemplo al pie del blog. Si ya tenias una página con temas de privacidad, se recomienda que uses otra exclusiva para la política de cookies. Esta página debe contemplar como mínimo los siguientes apartados:</div>
<div>
<ul>
<li>¿Qué son las cookies?</li>
<li>¿Qué tipos de cookies usas en el blog?</li>
<li>Revocación y eliminación de cookies</li>
</ul>
<div>
A modo de ejemplo y de inspiración, <a href="http://www.iniciablog.com/p/politica-de-cookies.html" target="_blank">revisa mi página con mi política de Cookies</a> para que te sirva de plantilla para elaborar la tuya (copia, pega y adáptala). </div>
</div>
<div>
<br /></div>
<div>
Para crear una nueva página en Blogger, sigue estos pasos.</div>
<div>
<ol>
<li>Ve al menú <b><i>Página</i></b></li>
<li>Pulsa el botón <b><i>Crear nueva página en blanco</i></b></li>
<li>En el título de la página pon<b style="font-style: italic;"> "Politica de Cookies"</b></li>
<li>Pega el texto copiado de <a href="http://www.iniciablog.com/p/politica-de-cookies.html" target="_blank">mi plantilla</a>, adáptalo y guarda</li>
<li>Visualiza la página</li>
</ol>
<div>
Para más información sobre cómo crear una página en Blogger, <a href="http://www.iniciablog.com/2013/07/como-crear-paginas-menu-blogger.html">consulta este tutorial que contiene un video</a>.</div>
</div>
<h4>
</h4>
<h4>
2. Cuadro flotante al pie o en la cabecera de tu blog para solicitar el consentimiento</h4>
</div>
<div>
<div style="text-align: justify;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsNIjLK2JO8fvtKQtJmDLzNBCZRJHL2OJsJA2oEztZaE9qLIkVS_ATRZOaOH9inH5Ohuj_rPxMeFYmvz3MphpSwNpQXLRmwvCuX0aNvKnCHDt3A-PtpaLxld7hWdt-OP__lGG_et_RfxU/s1600/cookie-script-iniciablog-blogger.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsNIjLK2JO8fvtKQtJmDLzNBCZRJHL2OJsJA2oEztZaE9qLIkVS_ATRZOaOH9inH5Ohuj_rPxMeFYmvz3MphpSwNpQXLRmwvCuX0aNvKnCHDt3A-PtpaLxld7hWdt-OP__lGG_et_RfxU/s1600/cookie-script-iniciablog-blogger.png" height="221" width="400" /></a></div>
<a href="http://cookie-script.com/" rel="nofollow" target="_blank">Cookie-script </a>es el servicio gratuito que te recomendamos para poner en tu blog este cuadro flotante con un <b>mensaje</b>, un <b>botón</b> de aceptar y un <b>enlace</b> a la página de la política de cookies realizada en el paso anterior. Lo bueno de este sistema, es que una vez registrado puede ir dando de alta tus diferentes blogs si fuese el caso. Tienes estadísticas y tienes opciones sobre dónde quieres que aparezca el cuadro flotante, además tiene dos estilos uno claro y el otro oscuro. Es el que tengo en iniciaBlog y por lo tanto es el que te recomiendo.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>2.1 Configurar el mensaje y obtener un código HTML usando Cookies-script</b></div>
<div style="text-align: justify;">
</div>
<ol>
<li>Regístrate (si es la primera vez) o inicia sesión en<a href="http://cookie-script.com/" rel="nofollow" target="_blank"> Cookie-script.com</a></li>
<li>Una vez dentro, crea un nuevo "item"</li>
<li>Ponle un nombre, por ejemplo el nombre de tu blog</li>
<li>Selecciona el diseño</li>
<li>El parámetro Enabled, debe estar en True. De lo contrario no se mostrará.</li>
<li>La URL de tu blog, en mi caso www.iniciablog.com</li>
<li>Cual es la página donde tienes la política de cookies, en mi caso <a href="http://www.iniciablog.com/p/politica-de-cookies.html">http://www.iniciablog.com/p/politica-de-cookies.html</a></li>
<li>La posición: Arriba (Top) o Abajo (Bottom)</li>
<li>El estilo de color: Oscuro (Dark) o Claro (Light)</li>
<li>Body Text: Es el mensaje que mostraremos al usuario. Te recomiendo algo como esto : <i>"Utilizamos cookies para mejorar nuestros servicios y experiencia de usuario. Si continua navegando, consideramos que acepta su uso. "</i></li>
<li>Texto para el botón de "I agree", por ejemplo "Acepto" o "Estoy de acuerdo"</li>
<li>Texto para el botón de "Read more", por ejemplo "Leer más" o "Más información"</li>
</ol>
</div>
<span style="text-align: justify;"><b><br /></b></span>
<span style="text-align: justify;"><b>2.2 Insertar el código HTML en la plantilla de Blogger para mostrar el cuadro flotante.</b></span><br />
<span style="text-align: justify;"><br /></span>
<span style="text-align: justify;">Una vez configurado, podremos copiar el código. Si hacemos algún cambio posterior en el diseño o texto, el blog se actualizará automáticamente. Sigue estos paso para insertar el código HTML en la plantilla de tu blog:</span><br />
<ol>
<li style="margin: 0px 0px 0.25em; padding: 0px;"><a href="http://blogger.com/" target="_blank">Accede a Blogger</a></li>
<li style="margin: 0px 0px 0.25em; padding: 0px;">Haz clic en <b><i>Pestaña</i> <span style="font-style: italic;">Plantilla</span></b></li>
<li style="margin: 0px 0px 0.25em; padding: 0px;">Haz una copia de seguridad pulsando el botón<span style="font-style: italic;"> "Crear copia de seguridad/Reestablecer"</span></li>
<li style="margin: 0px 0px 0.25em; padding: 0px;">Haz clic en el botón <i><b>Edición de HTML</b></i></li>
<li style="margin: 0px 0px 0.25em; padding: 0px;">Haz clic en el cualquier linea del editor para situar el cursor del ratón en la plantilla</li>
<li style="margin: 0px 0px 0.25em; padding: 0px;">Pulsa la combinación de teclas <b>Ctrl F</b> o <b>Ctrl B </b> (en Mac ⌘F o ⌘B) y busca <span style="color: #38761d;"><i></body></i></span><span style="font-style: italic;"> </span></li>
<li style="margin: 0px 0px 0.25em; padding: 0px;">Pega el código de seguimiento obtenido anteriormente justo por encima de la linea encontrada</li>
<li style="margin: 0px 0px 0.25em; padding: 0px;"><b>Guarda</b>, visualiza tu blog, no debe verse nada raro salvo que debe salirte un <b>cuadro flotante</b> informado sobre el uso de las cookies. Si no lo ves espera unos minutos, limpia la caché del navegador web que estas usando y vuelve a visualizar tu blog.</li>
</ol>
Recuerda que si quieres hacer cambios en cuadro flotante debes volver a <b>Cookie-script </b>y editarlo allí. Una vez que lo guardes y pasados unos minutos ya verás los cambios en tu blog<br />
<br />
Si no te acaba de convencer el servicio <b>Cookie-script</b> que te he recomendado, comentarte que existen muchos otros, por ejemplo, desde <a href="http://www.checkapps.net/2014/01/Cookie-Assistant-widget-informativo-uso-cookie-sitio-web.html" target="_blank">CheckApps también recomendan Cookie Assintant</a><br />
<br />
<div style="text-align: justify;">
Con el cuadro flotante informado sobre el uso de las cookies, con el enlace desde el cuadro flotante y desde tu blog a la página de política de cookies y con la explicación en dicha página de lo mencionado anteriormente, acabas de adaptar tu blog a esta normativa. ¡<b>Felicidades</b>! </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
PD. Con tanta cookies me ha entrado hambre jejeje.</div>
<h3>
</h3>
<h3>
</h3>
<h3>
¿Qué te ha parecido este artículo?, ¿Conocías la Ley de Cookies? ¿Has adaptado ya tu blog? ¿Crees que esta solución se ajusta a lo exigible? ¿Qué otros servicios conoces que puedan ayudar a complir con esta ley?¿Dónde me he podido equivocar?¿Qué se puede mejorar?</h3>
<div>
<br /></div>
<div>
<h3>
Lecturas recomendadas</h3>
</div>
<div>
<ul>
<li><a href="http://blog.sarbacan.es/envios-newsletter/nueva-reforma-de-la-lssi-indigestion-de-cookies/" target="_blank">Nueva reforma de la LSSI: ¿Indigestión de cookies?</a></li>
<li><a href="http://www.apprentalonline.es/blog/2013/11/infografia-ley-de-cookies/" target="_blank">Infografía Ley de cookies en España</a></li>
<li><a href="http://www.agpd.es/portalwebAGPD/canaldocumentacion/publicaciones/common/Guias/Guia_Cookies.pdf" rel="nofollow" target="_blank">Guía sobre el uso de las cookies por AEPD</a></li>
<li><a href="http://www.adigital.org/sites/default/files/studies/5pasoscookies.pdf" target="_blank">Cumplir con la Ley de cookies en 5 pasos</a></li>
</ul>
</div>
iniciaBloghttp://www.blogger.com/profile/05921317092177374710noreply@blogger.com2tag:blogger.com,1999:blog-5357688261243858797.post-90658731577576639102012-02-07T23:32:00.001+00:002013-05-15T13:42:15.064+01:00Cómo adjuntar archivos pdf, excel, zip... a Blogger<div>
Cuando creamos un post, tenemos la opción de insertar una <b>imagen </b>o un <b>video</b>...pero... ¿y qué pasa si queremos adjuntar un archivo <b>PDF, Zip, Rar</b> o un documento de <b>Microsoft Office</b>?<br />
<a name='more'></a><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfk_mCv55VoJBZIgzim2qRATC0OJLjiwIF14akMu6flW4g6Z1bjsr60-93ZSA8ZBNzMH-tJ-FIMJv7nBwGu4Bj_3QkpznGloSc9E3qFHs8hUqYJ8oG3pU1Oi1k94zMALDQ-kLS-oLHKFc/s1600/iniciablog-archivos-adjuntos.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em; text-align: justify;"><img alt="Adjuntar archivos a Blogger" border="0" height="137" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfk_mCv55VoJBZIgzim2qRATC0OJLjiwIF14akMu6flW4g6Z1bjsr60-93ZSA8ZBNzMH-tJ-FIMJv7nBwGu4Bj_3QkpznGloSc9E3qFHs8hUqYJ8oG3pU1Oi1k94zMALDQ-kLS-oLHKFc/s200/iniciablog-archivos-adjuntos.jpg" title="" width="200" /></a></div>
<div style="text-align: justify;">
La respuesta es... no se puede y la explicación es muy sencilla, el espacio de almacenamiento que nos ofrece el<b> servicio Blogger de Google</b> es<b> gratuito</b> y está destinado exclusivamente para <b>nuestro blog</b>. Un elemento adicional como puede ser un archivo PDF consumiría espacio de almacenamiento y entiendo que no es interesante para <b>Google</b>. En el caso de las <b>fotos</b>, éstas se alojan en otro servicio llamado <b>Picasa</b>. En el caso de los vídeo ésto se publican en otro servicio llamado <b>YouTube </b>o<b> Google videos</b>. Por lo que en los servidores de Google destinados al servicio de <b>Blogger</b> se almacena el blog (entradas, texto, plantillas, comentarios y poco más).</div>
<br />
En fin, debemos <b>buscar un hosting</b> donde guardar los archivos auxiliares al blog para posteriormente hacer un enlace desde el post o desde el blog e invitar al usuario a descargarlo.<br />
<br />
<h3>
<b>¿En qué servicio de hosting puedo publicar archivos para adjuntarlos al blog?</b></h3>
<div style="text-align: justify;">
Mi recomendación es utilizar <b>Dropbox</b>, es un <b>servicio de hosting</b> pero además los archivos que publiquen puedes opcionalmente mantenerlos sincronizados con una carpeta local en tu ordenador o incluso smartphone. <b>Dropbox </b>ofrece en su modalidad <b>gratuita</b> hasta <b>2 Gbytes de almacenamiento </b>donde podremos subir todo tipo de archivos.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Si no conocías este servicio, te invito a ver este video. Si ya lo conoces salta este punto y ve a por el siguiente.</div>
<iframe allowfullscreen="" frameborder="0" height="420" src="http://www.youtube.com/embed/AQml7f6weZw?rel=0" width="619"></iframe>
<br />
<h3>
<b>¿Cómo subir un archivo hasta Dropbox?</b></h3>
<ol>
<li><a href="https://www.dropbox.com/login" target="_blank">Inicia sesión o create una nueva cuenta en Dropbox</a></li>
<li>Si acabas de crear una cuenta en Dropbox <a href="https://www.dropbox.com/enable_public_folder" target="_blank">debes Activar la carpeta "Public"</a></li>
<li>Abre la carpeta "<b>Public</b>" (si no la tienes <a href="https://www.dropbox.com/enable_public_folder" target="_blank">actívala siguiendo este enlace</a>)</li>
<li>Una vez dentro verás que tienes una carpeta <b><i>Public</i></b>, entra dentro</li>
<li>Crear carpetas y organiza tus directorios (Manuales_PDF, Actas, Reuniones, Comunidad...)<br />Importante trata de evitar nombres muy largos y con espacios, acentos y caracteres especiales</li>
<li>Tienes un botón de <b><i>cargar</i></b>, puedes elegir uno o varios archivos</li>
</ol>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div>
<div style="text-align: left;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-v6oZsH64eEg/URLflWDNEmI/AAAAAAAAB7c/kD1NxX21-JU/s1600/dropbox-iniciablog-public-folder-carpeta.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="dropbox-carpeta-publica" border="0" height="118" src="http://2.bp.blogspot.com/-v6oZsH64eEg/URLflWDNEmI/AAAAAAAAB7c/kD1NxX21-JU/s640/dropbox-iniciablog-public-folder-carpeta.png" title="" width="640" /></a></div>
<b><br /></b>
<br />
<h3>
<b>¿Cómo obtener la URL del archivo publicado en Dropbox?</b></h3>
</div>
<div>
Una vez que el archivo termine de subir, solo tienes que seleccionarlo y hacer clic en el botón <b><i>copiar vínculo público</i></b>, tal y como se muestra en la imagen superior.</div>
<div>
<h3>
<b><br /></b><b>¿Cómo crear un enlace en el blog de descarga del archivo?</b></h3>
</div>
<div>
<div style="text-align: justify;">
Regresa al blog y dependiendo del caso:</div>
<div style="text-align: justify;">
<br /></div>
<ul>
<li style="text-align: justify;"><b>Enlace en uno de los post. </b>Simplemente selecciona el texto y haz clic en el botón enlace, y mediante el botón derecho del ratón pega el enlace copiado en el paso anterior y listo. Aquí tienes un pequeño regalo: <a href="http://db.tt/SffAk87Z" target="_blank">Descarga la Guia Seo de Google (9,2 Mbytes)</a></li>
<li style="text-align: justify;"><b>Enlace desde Gadget en el lateral del blog:</b> Ve a la pestaña <b><i>Diseño</i></b>, haz clic en <b><i>Agregar Gadget </i></b>y del listado que aparece, baja un poco hasta que veas <i style="font-weight: bold;">Lista de enlaces. </i>Pon un título, por ejemplo <b>Descargas</b> y pega el enlace obtenido en el paso anterior, guarda y pruébalo.</li>
</ul>
</div>
<div style="text-align: justify;">
Otros servicios alternativos de hosting gratuitos pueden ser, <a href="https://sites.google.com/" target="_blank">Google Sites</a>, <a href="https://www.sugarsync.com/" target="_blank"><span style="background-color: white; font-family: Helvetica, Arial, sans-serif; font-size: 13px; line-height: 19px;">SugarSync</span></a>, <a href="http://www.microsoft.com/spain/windowslive/skydrive.aspx" target="_blank">Microsoft Sky Drive</a> o <a href="http://minus.com/" target="_blank">Minus</a>. Por su puesto si cuentas con tu propio hosting, el procedimiento es el mismo. Lo más importante es obtener la URL pública al archivo.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Espero que te haya sido de utilidad y puedas sacarle partido al <b>Drobox. </b>Por último comentarte que este es un tema sugerido por un seguidor de iniciaBlog en Facebook, desde aquí ¡Gracias!</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Como siempre, te invito a <b>utilizar los comentarios para dejar tu opinión</b> en este artículo. Si te ha gustado esta publicación y no quieres perderte ninguna otra, <b>sígueme</b> a través de <a href="http://www.facebook.com/iniciaBlog">Facebook</a>, <a href="http://twitter.com/#!/iniciablog">Twitter</a>, <a href="http://feedburner.google.com/fb/a/mailverify?uri=iniciaBlog&loc=es_ES">suscripción por email</a>, <a href="http://www.google.com/friendconnect/signin/home?st=e%3DAOG8GaCLH4AuMCO4xXqZGoC6ZXvyu1iQCl4TaEaYG%252BSYEhJqkYEhtMcODISaRD96iTu1pPJcQdBtYXu3J002V4rPICfOBHohYYp48Rzby%252BFfE9QCYsRRPl6BUbGM%252FaNpTu4M8o0avvae7tdhhkbkovTLAv7zFiLN%252BNb5hYZFGp%252F5SLs0RbBz9Iz5T7OkCAMfntWfuk9EH%252BMrvUr1EnWS%252FGAts%252FFtcN1QP%252FOWr4TFFpJ7zf550TdpCpA%253D%26c%3Dpeoplesense&psinvite=&subscribeOnSignin=1">Google Friend </a>, <a href="http://feeds.feedburner.com/iniciaBlog">RSS</a> ahora también en <a href="http://gplus.to/iniciablog">Google +</a>. Usa los botones sociales al pié de la publicación para <b>recomendarla a tus amigos</b>. <b>¡Gracias!</b> ;-) </div>
</div>
<b><br /></b>
<br />
<h3>
<b>Lecturas Recomendadas:</b></h3>
<br />
<ul>
<li><a href="http://bitelia.com/2012/02/google-drive-el-dropbox-de-google-llegaria-en-las-proximas-semanas" target="_blank">Google Drive, el Dropbox de Google</a></li>
<li><a href="http://www.arielbrailovsky.com/2011/08/22/sugarsync-donde-dropbox-no-llega/" target="_blank">SugarSync, donde Dropbox no llega</a></li>
<li><a href="http://www.xatakandroid.com/productividad-herramientas/android-en-la-nube-sky-drive" target="_blank">Android en la nube: Sky Drive</a></li>
</ul>
iniciaBloghttp://www.blogger.com/profile/05921317092177374710noreply@blogger.com62tag:blogger.com,1999:blog-5357688261243858797.post-84434327775362965842011-08-18T08:44:00.041+01:002011-12-27T12:56:17.943+00:00Cómo obtener varios feed (rss) temáticos del blogImagínate el siguiente supuesto, tenemos un <b>blog corporativo</b> que utilizamos para publicar <b>noticias de los diferentes departamentos</b>, actividades o áreas de una empresa. Utilizando las <b>etiquetas</b> de cada entrada podemos<b> asociar</b> cada artículo al <b>departamento o actividad correspondiente</b>. Por ejemplo un<b> complejo deportivo</b> (tenis, padel, futbol...), una empresa de <b>servicios para el hogar</b> (Electricidad, Fontanería, Carpintería...), una empresa de <b>servicios informáticos</b> (Consultaría, Desarrollo, Diseño...).<br />
<a name='more'></a><br />
El objetivo es tener una <b>sección de noticias individual por cada departamento en la web corporativa</b>. En <b>iniciaBlog</b> ya hemos explicado <a href="http://www.iniciablog.com/2011/07/como-integrar-publicaciones-blog-en.html">cómo integrar las publicaciones del blog en una página Web</a>, en esta ocasión separaremos en canales temáticos filtrando el Feed del Blog por etiquetas.<br />
<br />
<b>Sintaxis para filtrar el feed del blog por etiqueta:</b><br />
<ul>
<li><i><b>http://<span class="Apple-style-span" style="font-style: normal;"><i>direcciondetublog</i></span>.<span class="Apple-style-span" style="font-style: normal;"><i> blogspot</i></span>/feeds/posts/default/-/ETIQUETA</b></i></li>
</ul>
<div>
<i>Ejemplo con la etiqueta Servicios de iniciaBlog:<br /><a href="http://www.iniciablog.com/feeds/posts/default/-/Servicios" target="_blank">http://www.iniciablog.com/feeds/posts/default/-/Servicios</a></i><br />
<br /></div>
<div>
<b>Nota</b>: Si tu etiqueta tiene espacios debes poner el caracter "%20", por ejemplo: <b style="font-style: italic;">Redes%20Sociales. </b>Además debes tener cuidad con las mayúsculas y minúsculas.</div>
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://1.bp.blogspot.com/-YkQEsD6-Bq0/TlIzsIKpRII/AAAAAAAAALM/51_Bebc550U/s1600/feedburner-iniciablog-etiquetas.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="343" src="http://1.bp.blogspot.com/-YkQEsD6-Bq0/TlIzsIKpRII/AAAAAAAAALM/51_Bebc550U/s640/feedburner-iniciablog-etiquetas.png" width="610" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Configuración de Feed filtrando por la etiqueta Servicios</td></tr>
</tbody></table>
<br />
<b>Pasos para integrar las publicaciones del blog en una página web:</b><br />
<ol>
<li>Entra en <a href="http://feedburner.google.com/" target="_blank">FeedBurner</a></li>
<li>Puedes seleccionar el idioma español (arriba donde pone "<b><i>Languages</i></b>")</li>
<li>En la casilla del texto debes poner el Feed del blog y la etiquetas por la que quieres filtrar: <i><b>http://<span class="Apple-style-span" style="font-style: normal;"><i>direcciondetublog</i></span>.<span class="Apple-style-span" style="font-style: normal;"><i> blogspot</i></span>/feeds/posts/default/-/ETIQUETA</b></i></li>
<ul>
<li>Presiona el botón <b><i>Siguiente</i></b></li>
<li>Podrás indicar el título y la descripción del Feed. Presiona <b><i>Siguiente</i></b></li>
<li>Ahora haz clic abajo, donde pone<b style="font-style: italic;"> "ir directamente a la gestión del Feed"</b></li>
</ul>
<li>Haz clic en la pestaña <b><i>Publicize</i></b> y luego en <b><i>BuzzBoost</i></b></li>
<li>Configura la cantidad de titulares a mostrar, el titulo, la fecha, etc-</li>
<li>Haz clic en <b><i>Activar</i></b></li>
<li>Copia el <b><i>script</i></b> que te facilita la propia página</li>
<li>Pégalo en tu página Web, guarda y prueba que funciona.</li>
<li>Repite estos mismos pasos con el resto de las etiquetas</li>
</ol>
<b>Ejemplo en vivo:</b><br />
Para que te sirva de ejemplo aquí tienes un enlace donde he integrado las publicaciones de iniciaBlog en una página Web divididas por canales temáticos<br />
<ul>
<li><a href="http://dl-web.dropbox.com/u/22283429/iniciablog/livesamples/NoticiasPorEtiquetas.html" target="_blank">Ejemplo página web con canales de noticias temáticas extraídas de iniciaBlog</a></li>
</ul>
Siempre me ha parecido muy interesante a partir de un único blog obtener diferentes feed, para alimentar secciones de noticias independientes en un sitio web, espero que te sirva y que puedas aplicarlo con éxito.<br />
<br />
Como siempre, te invito a <b>utilizar los comentarios para dejar tu opinión</b> en este artículo. Si te ha gustado esta publicación y no quieres perderte ninguna otra, <b>sígueme</b> a través de <a href="http://www.facebook.com/iniciaBlog">Facebook</a>, <a href="http://twitter.com/#!/iniciablog">Twitter</a>, <a href="http://feedburner.google.com/fb/a/mailverify?uri=iniciaBlog&loc=es_ES">suscripción por email</a>, <a href="http://www.google.com/friendconnect/signin/home?st=e%3DAOG8GaCLH4AuMCO4xXqZGoC6ZXvyu1iQCl4TaEaYG%252BSYEhJqkYEhtMcODISaRD96iTu1pPJcQdBtYXu3J002V4rPICfOBHohYYp48Rzby%252BFfE9QCYsRRPl6BUbGM%252FaNpTu4M8o0avvae7tdhhkbkovTLAv7zFiLN%252BNb5hYZFGp%252F5SLs0RbBz9Iz5T7OkCAMfntWfuk9EH%252BMrvUr1EnWS%252FGAts%252FFtcN1QP%252FOWr4TFFpJ7zf550TdpCpA%253D%26c%3Dpeoplesense&psinvite=&subscribeOnSignin=1">Google Friend </a>, <a href="http://feeds.feedburner.com/iniciaBlog">RSS</a> ahora también en <a href="http://gplus.to/iniciablog">Google +</a>. Usa los botones sociales al pié de la publicación para <b>recomendarla a tus amigos</b>. <b>¡Gracias!</b> ;-)<br />
<br />iniciaBloghttp://www.blogger.com/profile/05921317092177374710noreply@blogger.com15tag:blogger.com,1999:blog-5357688261243858797.post-72960559971334822272011-08-03T08:48:00.228+01:002011-12-27T12:56:17.898+00:00Un blog es el primer paso hacia la nube<div class="separator" style="clear: both; text-align: center;">
</div>
La "<b>nube</b>" es como se conoce popularmente al término inglés "<b>Cloud Computing</b>", traducido como "<b>Computación en la nube</b>" y que viene a definir, el uso de Internet como<b> plataforma de trabajo</b> donde crear y guardar documentos e incluso, ejecutar aplicaciones complejas. Todo se almacena usando el espacio de los servidores web, en lugar de utilizar el disco duro de tu ordenador y todo usando un <b>simple navegador web</b>.<br />
<a name='more'></a><br />
Si somos capaces de plantear esta filosofía de trabajo y aplicarla como estrategia para nuevas empresas o para el trabajo colaborativo entre varias personas de un equipo, habrás dado un <b>salto sumamente importante</b> ya que todos los documentos estarían disponibles y accesibles desde cualquier punto con acceso a Internet e incluso desde un<b> teléfono móvil</b>.<br />
<br />
Te invito a ver el siguiente video que ilustra muy bien este modelo de trabajo frente al modelo que tradicionalmente hemos usado.<br />
<iframe allowfullscreen="" frameborder="0" height="390" src="http://www.youtube.com/embed/VOn6tg3e1t4" width="640"></iframe><br />
<br />
Yo veo <b>muchas ventajas</b> en este modelo si lo comparo con el que hemos usado hasta ahora. Otros, dirán que no es seguro o qué pasa si los servicios web dejan de funcionar. Pero lo que sí es cierto es que no es un tema que deje a nadie indiferente, por un momento piensa, por ejemplo en las fotos digitales que has hecho con tu cámara ¿dónde las tienes guardadas...en tu ordenador? uff, ¿revelas todas las fotos que haces con tu cámara?, no lo creo. ¿Y si tuvieras una copia en Internet, no estarías más seguro?<br />
<br />
<b>¿Qué tiene que ver el trabajo en la nube con el blog?</b><br />
Resulta que sí, que tiene que ver con el blog para ello pongamos un ejemplo. Imagínate que quieres poner en marcha un <b>pequeño negocio</b>, una tienda de juguetes por ejemplo, llegará el momento en el que debas plantearte la presencia en Internet, pero claro, no a cualquier precio ya que tu presupuesto es muy bajo sobre todo para los primeros años. En este caso <b>crear un blog es la manera más barata de tener presencia en Internet</b>, te recomendaría en este punto leer "<a href="http://www.iniciablog.com/2011/03/blog-vs-web-twitter-facebook-lowcost.html">Estrategia Low Cost en Internet y Redes Sociales para Pymes y Autónomos</a>".<br />
<br />
Ya tienes presencia en Internet y redes sociales agracias al Blog, pero tienes que cuidar tu imagen corporativa y no es lo mismo anunciar www.juguetesgarcia.blogspot.com que <b>www.juguetesgarcia.com</b>. Entonces es cuando decides <a href="http://www.iniciablog.com/2011/02/blogger-blogspotcom-cambiar-com-comprar.html">cambiar del blogspot hasta el.com</a> por un módico precio de unos 9€/anuales.<br />
<br />
Cuando ya tienes tu propio dominio .com, resulta que tienes acceso de manera inmediata y sin tener que realizar ninguna configuración a la versión gratuita de<b> Google Apps.</b><br />
<br />
<b>¿Qué es Google Apps?</b><br />
<b>Google Apps </b> (Google Aplicaciones) es una suite de <b>Google </b>para la gestión de documentos, correo electrónico, calendario, etc., de manera online y usando un simple navegador, es decir la solución de <b>Google </b>para el trabajo en la nube.<br />
<br />
<b>¿Qué se puede hacer con Google Apps?</b><br />
<ul>
<li>Gestionar hasta <b>10 usuarios</b> (definir sus cuentas, grupos y permisos). </li>
<li>Dispones de <b>Google Docs</b> para crear y compartir <b>documentos de texto</b>, <b>hojas de cálculo</b>, <b>presentaciones</b>, dibujos, <b>formularios </b>entre los integrantes de la organización e incluso con tus clientes y proveedores.</li>
<li><b>Google Calendar</b> para crear calendarios de trabajo y compartirlo con los miembros de tu equipo</li>
<li><b>GMail </b>desde donde enviar/recibir tu correo electrónico usando tu propio dominio ejemplo ventas@juguetesgarcia.com, etc. </li>
<li>Podrás <b>sustituir el logo</b> que aparece en el buzón de <b>GMail </b>por tu<b> logo corporativo</b>.</li>
</ul>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://1.bp.blogspot.com/-0L9-pAbcWb4/TjlSQczDSDI/AAAAAAAAAK4/jNcOqLjm1rk/s1600/iniciablog-google-apps-gratis.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="365" src="http://1.bp.blogspot.com/-0L9-pAbcWb4/TjlSQczDSDI/AAAAAAAAAK4/jNcOqLjm1rk/s640/iniciablog-google-apps-gratis.png" width="610" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Panel de control de Google Apps disponible para iniciaBlog.com desde donde gestionar usuarios, correo y documentos</td></tr>
</tbody></table>
<br />
Si todos tus documentos y tu correo electrónico están online,<b> no tendrás la necesidad de guardar o descargar datos </b>para almacenarlos en el disco duro de tu ordenador y por lo tanto podrás seguir trabajando aunque estés fuera de la oficina, algo de lo que hablamos en el artículo "<a href="http://www.iniciablog.com/2011/02/movilidad-futuro-o-presente.html">Movilidad, futuro o presente</a>". Además no has tenido que adquirir licencias de <b>software de ofimática</b>, <b>antivirus </b>o <b>sistemas de copias de seguridad</b>, etc., si además de todo lo dicho, mencionamos que ya existen<a href="http://www.google.es/chromebook" target="_blank"> portátiles con el sistema operativo Chrome diseñados para el trabajo en internet (sin disco duro)</a> ...uff realmente este es un tema que hace reflexionar sobre cómo trabajaremos en un futuro o mejor dicho cómo deberíamos estar trabajando ya.<br />
<br />
Es evidente que no todos los negocios o empresas tienen las mismas necesidades, por otro lado es también muy complejo migrar una empresa que ya esté funcionado con el modelo tradicional hasta el modelo en la nube, pero aquí te dejo planteado este nuevo reto.<br />
<br />
Si te ha gustado esta publicación y no quieres perderte ninguna otra, sígueme a través de <a href="http://www.facebook.com/iniciaBlog">Facebook</a>, <a href="http://twitter.com/#!/iniciablog">Twitter</a>, <a href="http://feedburner.google.com/fb/a/mailverify?uri=iniciaBlog&loc=es_ES">suscripción por email</a>, <a href="http://www.google.com/friendconnect/signin/home?st=e%3DAOG8GaCLH4AuMCO4xXqZGoC6ZXvyu1iQCl4TaEaYG%252BSYEhJqkYEhtMcODISaRD96iTu1pPJcQdBtYXu3J002V4rPICfOBHohYYp48Rzby%252BFfE9QCYsRRPl6BUbGM%252FaNpTu4M8o0avvae7tdhhkbkovTLAv7zFiLN%252BNb5hYZFGp%252F5SLs0RbBz9Iz5T7OkCAMfntWfuk9EH%252BMrvUr1EnWS%252FGAts%252FFtcN1QP%252FOWr4TFFpJ7zf550TdpCpA%253D%26c%3Dpeoplesense&psinvite=&subscribeOnSignin=1">Google Friend </a>, <a href="http://feeds.feedburner.com/iniciaBlog">RSS</a> ahora también en <a href="http://gplus.to/iniciablog">Google +</a>. Usa los botones sociales al pié de la publicación para recomendarla a tus amigos. ¡Gracias! ;-)<br />
<br />
<b>Lecturas recomendadas:</b><br />
<ul>
<li><a href="http://www.google.com/apps/intl/es/group/index.html" target="_blank">Información comercial de Google Apps (Gratis) y Google Apps Business (Pago)</a></li>
<li><a href="http://www.google.com/apps/intl/es/index.html" target="_blank">Tabla comparativa de las diferentes versiones de Google Apps</a></li>
<li><a href="http://www.google.com/apps/intl/es/business/faq.html" target="_blank">Preguntas más frecuents sobre Google Apps</a></li>
<li><a href="http://youtu.be/sy2P9TinDBQ" target="_blank">Conferencia Google Apps de la empresa EOI</a> (Escuela de Organización Industria) (Video de 1:30 horas)</li>
</ul>
<br />iniciaBloghttp://www.blogger.com/profile/05921317092177374710noreply@blogger.com11tag:blogger.com,1999:blog-5357688261243858797.post-56506615904087295732011-07-21T22:36:00.093+01:002011-12-27T12:56:17.830+00:00Cómo Integrar las publicaciones del blog en una webImagínate el caso en el que por un lado tenemos un <b>blog</b> y por otro un <b>sitio web</b>, seguramente habrás pensado en cómo integrar las publicaciones del blog en una de las páginas del sitio, por ejemplo bajo la sección "últimas noticias"<br />
<a name='more'></a><br />
Para este fin usaremos el servicio <b>FeedBurner</b> también de <b>Google</b> y el mismo que utilizamos cuando hablamos de cómo establecer un <a href="http://www.iniciablog.com/2011/01/suscripcion-blogger-email-feedburner.html">mecanismo de suscripción por email en el blog</a>. Este servicio ofrece multitud de opciones una de ellas se llama <b>BuzzBoost</b>, que es capaz de convertir el Feed (RSS) del blog en un fragmento HTML gracias a un código javascript listo para integrar en tu página Web. Así de sencillo y directo.<br />
<br />
<b>Pasos para integrar las publicaciones del blog en una página web:</b><br />
<ol>
<li>Entra en <a href="http://feedburner.google.com/" target="_blank">FeedBurner</a></li>
<li><b>Configuración</b> (solo en el caso de que no lo hubieras hecho antes)</li>
<ul>
<li>Puedes seleccionar el idioma español</li>
<li>En la casilla del texto debes poner el Feed del blog, que por regla general es: <i><b>http://ladirecciondetublog.blogspot.com/atom.xml</b></i></li>
<li>Presiona el botón <b><i>Siguiente</i></b></li>
<li>Podrás indicar el título y la descripción del Feed. Presiona <b><i>Siguiente</i></b></li>
<li>Ahora haz clic abajo, donde pone<b style="font-style: italic;"> "ir directamente a la gestión del Feed"</b></li>
</ul>
<li>Haz clic en la pestaña <b><i>Publicize</i></b> y luego en <b><i>BuzzBoost</i></b></li>
<li>Configura la cantidad de titulares a mostrar, el titulo, la fecha, etc-</li>
<li>Haz clic en <b><i>Activar</i></b></li>
<li>Copia el <b><i>script</i></b> que te facilita la propia página</li>
<li>Pégalo en tu página Web, guarda y prueba que funciona.</li>
</ol>
<div>
Puedes hacer cambios, como por ejemplo la cantidad de titulares, las palabras mostradas de cada noticia, etc., directamente en el servicio sin que tengas que volver a copiar y pegar el código html. Tu página de noticias se actualizará sobre la marcha.</div>
<div>
<br /></div>
<a href="http://dl.dropbox.com/u/22283429/iniciablog/livesamples/noticias.html" target="_blank">Haz click aquí ver las publicaciones de este blog en una página web</a> (publicada en Dropbox)<br />
<br />
Para la creación de la página web he usado <b>Adobe Dreamweaver</b>. A través de los estilos CSS podrás cambiar la apariencia de cada elemento de las noticias.<br />
<br />
Conclusiones. Usamos el blog como gestor de noticias para alimentar una sección de la web corporativa. Este tutorial ha sido sugerido por uno de los lectores de iniciaBlog a través del formulario de contacto. ¡Gracias!<br />
<br />
Si te ha gustado esta publicación y no quieres perderte ninguna otra, sígueme a través de <a href="http://www.facebook.com/iniciaBlog">Facebook</a>, <a href="http://twitter.com/#!/iniciablog">Twitter</a>, <a href="http://feedburner.google.com/fb/a/mailverify?uri=iniciaBlog&loc=es_ES">suscripción por email</a>, <a href="http://www.google.com/friendconnect/signin/home?st=e%3DAOG8GaA1THVMvitCBwJOYimZRY2W9lYz41bIR%252Fv49k2rPPrmmGMPDCd5vryzWVVXKhuIeaMFfEwfA%252BSuPbLkJ5P3vteNuXo931%252Bea%252FdkCJSoOc7QpF5T8SxadABgpgquagy5phhAOnyDCDzlgyD8Fl9WUv4qi0i7bbaKqxdjhg4TOfPFarCm%252BKFddqaOSERsw2sRA3g%252FlZUbuGaglza69UEiYCsk5TVr1zjTqR328%252BqCyaq29rrtboEJtXg4apUE3hdrq1C553FRdzligQchiM1nzcg6ZHnLalIryCrEzApicHCzXVWRq%252FE%253D%26c%3Dpeoplesense&psinvite=&subscribeOnSignin=1">Google Friend </a>, <a href="http://feeds.feedburner.com/iniciaBlog">RSS</a> ahora también en <a href="http://gplus.to/iniciablog">Google +</a>. Usa los botones sociales al pié de la publicación para recomendarla a tus amigos. ¡Gracias! ;-)<br />
<br />iniciaBloghttp://www.blogger.com/profile/05921317092177374710noreply@blogger.com22tag:blogger.com,1999:blog-5357688261243858797.post-62285642107540740782011-05-20T11:13:00.013+01:002013-11-07T22:52:59.493+00:00Los 50 mejores trucos para bloggerTe presento los <b>50 mejores trucos para Blogger. </b>En esta lista encontrarás no solo los tutoriales creados por <b>iniciaBlog</b>, sino también enlaces a los mejores trucos y servicios sobre temas que he considerado interesantes para el blog. Solo han sido seleccionados aquellos sitios que ofrecen un contenido de calidad con respecto a cada tema. Espero que encuentres ideas interesantes y que puedas aplicarlas con éxito.<br />
<a name='more'></a><br />
<ol>
<li><div style="-webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">
<a href="http://www.vivirsencillamente.com/2011/04/como-hacer-un-backup-o-copia-de.html" target="_blank">Cómo hacer copias de seguridad de las entradas del blo</a>g</div>
</li>
<li><b><span class="Apple-style-span" style="background-color: orange; font-family: Arial, Helvetica, sans-serif; font-size: xx-small;"><span class="Apple-style-span" style="color: orange;"> </span>iB </span><span class="Apple-style-span" style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: xx-small;"> </span></b><a 04="" 2010="" como-crear-un-blog-privado-en-blogger.html="como-crear-un-blog-privado-en-blogger.html" href="http://www.iniciablog.com/2012/03/blogger-privado-invitacion-lectores.html" http:="" target="_blank>Cómo pasar de WordPress a Blogger</a></li>
<li><a href=" www.vidablogger.com.ar="">Cómo configurar un blog para que sea privado</a></li>
<li><a href="http://ayudawordpress.com/como-migrar-de-wordpress-a-blogger/">Cómo pasar de Wordpress a Blogger</a></li>
<li><span class="Apple-style-span" style="-webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px;"><b><span class="Apple-style-span" style="background-color: orange; font-family: Arial, Helvetica, sans-serif; font-size: xx-small;"><span class="Apple-style-span" style="color: orange;"> </span>iB </span><span class="Apple-style-span" style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: xx-small;"> </span></b></span><a href="http://www.iniciablog.com/2011/03/vincular-facebook-twitter-blogger.html" target="_blank">Cómo vincular blogger con twitter y facebook</a> </li>
<li><span class="Apple-style-span" style="-webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px;"><b><span class="Apple-style-span" style="background-color: orange; font-family: Arial, Helvetica, sans-serif; font-size: xx-small;"><span class="Apple-style-span" style="color: orange;"><span class="Apple-style-span" style="color: black; font-family: 'Times New Roman'; font-size: small; font-weight: normal;"><b><span class="Apple-style-span" style="background-color: orange; font-family: Arial, Helvetica, sans-serif; font-size: xx-small;"><span class="Apple-style-span" style="color: orange;"> </span>iB </span><span class="Apple-style-span" style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: xx-small;"> </span></b></span></span></span></b></span><a href="http://www.iniciablog.com/2011/04/boton-enviar-facebook-blogger-send.html" target="_blank">Cómo poner el botón de Me gusta + Enviar de Facebook en cada entrada</a> </li>
<li><span class="Apple-style-span" style="-webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px;"><b><span class="Apple-style-span" style="background-color: orange; font-family: Arial, Helvetica, sans-serif; font-size: xx-small;"><span class="Apple-style-span" style="color: orange;"> </span>iB </span><span class="Apple-style-span" style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: xx-small;"> </span></b></span><a href="http://www.iniciablog.com/2011/03/boton-me-gusta-facebook-blog-blogger.html" target="_blank">Cómo poner el botón de Me Gusta de Facebook en cada entrada del Blog</a></li>
<li><span class="Apple-style-span" style="-webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px;"><b><span class="Apple-style-span" style="background-color: orange; font-family: Arial, Helvetica, sans-serif; font-size: xx-small;"><span class="Apple-style-span" style="color: orange;"> </span>iB </span><span class="Apple-style-span" style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: xx-small;"> </span></b></span><a href="http://www.iniciablog.com/2011/03/twitter-blogger-cada-entrada-post.html" target="_blank">Cómo poner el botón de Twittear en cada entrada del Blog</a></li>
<li><span class="Apple-style-span" style="-webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px;"><b><span class="Apple-style-span" style="background-color: orange; font-family: Arial, Helvetica, sans-serif; font-size: xx-small;"><span class="Apple-style-span" style="color: orange;"> </span>iB </span><span class="Apple-style-span" style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: xx-small;"> </span></b></span><a href="http://www.iniciablog.com/2011/03/caras-facebook-caja-blogger-like-box.html" target="_blank">Cómo incluir las caras de los fans de Facebook en la barra lateral del Blog</a></li>
<li><span class="Apple-style-span" style="-webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px;"><b><span class="Apple-style-span" style="background-color: orange; font-family: Arial, Helvetica, sans-serif; font-size: xx-small;"><span class="Apple-style-span" style="color: orange;"> </span>iB </span><span class="Apple-style-span" style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: xx-small;"> </span></b></span><a href="http://www.iniciablog.com/2011/03/como-twitter-actividad-en-blog-web.html" target="_blank">Cómo incluir la actividad de Twitter en la barra lateral del Blog</a></li>
<li><span class="Apple-style-span" style="-webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px;"><b><span class="Apple-style-span" style="background-color: orange; font-family: Arial, Helvetica, sans-serif; font-size: xx-small;"><span class="Apple-style-span" style="color: orange;"> </span>iB </span><span class="Apple-style-span" style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: xx-small;"> </span></b></span><a href="http://www.iniciablog.com/2011/03/iconos-sociales-twitter-facebook-blog.html" target="_blank">Cómo colocar iconos sociales del tipo sígueme en la barra lateral del Blog</a></li>
<li><a href="http://vagabundia.blogspot.com/2011/05/el-nuevo-comment-box-de-facebook-en.html" target="_blank">Cómo poner el cuadro de comentario de Facebook en Blogger</a></li>
<li><a href="http://ayuda-bloggers.blogspot.com/2011/03/el-pajaro-de-twitter-volando-por-el.html?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+blogspot%2FvkhLT+%28Ayuda+Bloggers%29">Cómo poner el pajarito de Twitter volando por el Blog</a></li>
<li><a href="http://www.genbeta.com/web/blogger-por-fin-permite-programar-entradas-para-su-publicacion">Cómo programar entradas en Blogger para que se publique automáticamente</a></li>
<li><a href="http://ciudadblogger.com/2009/01/abrir-links-en-una-ventana-nueva.html" target="_blank">Cómo hacer para que los enlaces se muestren en una nueva ventana</a></li>
<li><a href="http://diyva.blogspot.com/2011/02/publicar-los-post-via-e-mail.html" target="_blank">Cómo publicar entradas enviando un email a Blogger</a></li>
<li><a href="http://www.bloggertrix.com/2011/03/how-to-add-related-post-for-blogger.html" target="_blank">Cómo poner los artículos relacionados en cada entrada (inglés)</a> <span class="Apple-style-span" style="font-size: xx-small;">(aplicado en <span class="Apple-style-span" style="-webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px; font-size: small;"><b><span class="Apple-style-span" style="background-color: orange; font-family: Arial, Helvetica, sans-serif; font-size: xx-small;"><span class="Apple-style-span" style="color: orange;"> </span>iB </span><span class="Apple-style-span" style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: xx-small;"> </span></b></span>)</span></li>
<li><span class="Apple-style-span" style="font-size: xx-small;"><span class="Apple-style-span" style="font-size: small;"><a href="http://ayuda-bloggers.blogspot.com/2011/04/entradas-relacionadas-en-blogger-con.html" target="_blank">Entradas relacionadas en cada post con miniaturas</a></span></span></li>
<li><a href="http://www.pazosblogger.com/2009/11/poner-ultimos-comentarios-en-blogger.html" target="_blank">Cómo publicar los últimos comentario recibidos</a> <span class="Apple-style-span" style="font-size: xx-small;">(aplicado en </span><span class="Apple-style-span" style="font-size: xx-small;"><span class="Apple-style-span" style="-webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px; font-size: small;"><b><span class="Apple-style-span" style="background-color: orange; font-family: Arial, Helvetica, sans-serif; font-size: xx-small;"><span class="Apple-style-span" style="color: orange;"> </span>iB </span><span class="Apple-style-span" style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: xx-small;"> </span></b></span></span><span class="Apple-style-span" style="font-size: xx-small;">)</span></li>
<li><b><span class="Apple-style-span" style="background-color: orange; font-family: Arial, Helvetica, sans-serif; font-size: xx-small;"><span class="Apple-style-span" style="color: orange;"> </span>iB </span><span class="Apple-style-span" style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: xx-small;"> </span></b><a href="http://www.iniciablog.com/2013/07/como-crear-paginas-menu-blogger.html" target="_blank">Cómo crear páginas y secciones en Blogger</a></li>
<li><a href="http://www.todoblogger.com/2010/09/traductor-con-banderas-en-el-blog.html" target="_blank">Cómo poner un traductor de idiomas en el Blog</a></li>
<li><b><span class="Apple-style-span" style="background-color: orange; font-family: Arial, Helvetica, sans-serif; font-size: xx-small;"><span class="Apple-style-span" style="color: orange;"> </span>iB </span><span class="Apple-style-span" style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: xx-small;"> </span></b><a href="http://www.iniciablog.com/2011/08/feed-etiquetas-blogger-noticias.html">Cómo obtener un Feed por etiquetas del Blog</a></li>
<li><span class="Apple-style-span" style="-webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px;"><b><span class="Apple-style-span" style="background-color: orange; font-family: Arial, Helvetica, sans-serif; font-size: xx-small;"><span class="Apple-style-span" style="color: orange;"> </span>iB </span><span class="Apple-style-span" style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: xx-small;"> </span></b></span><a href="http://www.iniciablog.com/2011/01/titulo-de-la-pagina-en-blogger.html" target="_blank">Cómo Optimizar el título de las entradas del blog para mejor posicionamiento</a></li>
<li><span class="Apple-style-span" style="-webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px;"><b><span class="Apple-style-span" style="background-color: orange; font-family: Arial, Helvetica, sans-serif; font-size: xx-small;"><span class="Apple-style-span" style="color: orange;"> </span>iB </span><span class="Apple-style-span" style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: xx-small;"> </span></b></span><a href="http://www.iniciablog.com/2011/01/como-ocultar-la-barra-de-navegacion-de.html"><span id="goog_1138725464"></span>Cómo ocultar la barra de navegación de Blogger<span id="goog_1138725465"></span></a></li>
<li><span class="Apple-style-span" style="-webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px;"><b><span class="Apple-style-span" style="background-color: orange; font-family: Arial, Helvetica, sans-serif; font-size: xx-small;"><span class="Apple-style-span" style="color: orange;"> </span>iB </span><span class="Apple-style-span" style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: xx-small;"> </span></b></span><a href="http://www.iniciablog.com/2011/01/iv-como-hacer-para-que-google-indexe-mi.html" target="_blank">Cómo acelerar el proceso de indexación del blog en Google</a></li>
<li><span class="Apple-style-span" style="-webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px;"><b><span class="Apple-style-span" style="background-color: orange; font-family: Arial, Helvetica, sans-serif; font-size: xx-small;"><span class="Apple-style-span" style="color: orange;"> </span>iB </span><span class="Apple-style-span" style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: xx-small;"> </span></b></span><a href="http://www.iniciablog.com/2011/02/bing-webmaster-seo-buscadores-sitemap.html" target="_blank">Cómo acelerar el proceso de indexacion del blog en Bing</a></li>
<li><span class="Apple-style-span" style="-webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px;"><b><span class="Apple-style-span" style="background-color: orange; font-family: Arial, Helvetica, sans-serif; font-size: xx-small;"><span class="Apple-style-span" style="color: orange;"> </span>iB </span><span class="Apple-style-span" style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: xx-small;"> </span></b></span><a href="http://www.iniciablog.com/2011/04/blogger-print-pdf-imprimir-exportar.html" target="_blank">Cómo poner un botón de imprimir en cada entrada del Blog</a></li>
<li><a href="http://www.elcosario.com/2476/como-podemos-insertar-un-boton-paypal-para-rentabilizar-nuestro-blog-o-pagina-web/">Cómo poner un boton de PayPal para vender productos a través de Blogger</a></li>
<li><span class="Apple-style-span" style="-webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px;"><b><span class="Apple-style-span" style="background-color: orange; font-family: Arial, Helvetica, sans-serif; font-size: xx-small;"><span class="Apple-style-span" style="color: orange;"> </span>iB </span><span class="Apple-style-span" style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: xx-small;"> </span></b></span><a href="http://www.iniciablog.com/2011/02/mp3-reproductor-blogger-player.html" target="_blank">Cómo incluir un reproductor MP3 en el Blog</a></li>
<li><span class="Apple-style-span" style="-webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px;"><b><span class="Apple-style-span" style="background-color: orange; font-family: Arial, Helvetica, sans-serif; font-size: xx-small;"><span class="Apple-style-span" style="color: orange;"> </span>iB </span><span class="Apple-style-span" style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: xx-small;"> </span></b></span><a href="http://www.iniciablog.com/2011/05/reproductor-mp3-multitrack-playlist.html" target="_blank">Cómo incluir un reproductor MP3 con una lista de reproducción en el Blog</a></li>
<li><span class="Apple-style-span" style="-webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px;"><b><span class="Apple-style-span" style="background-color: orange; font-family: Arial, Helvetica, sans-serif; font-size: xx-small;"><span class="Apple-style-span" style="color: orange;"> </span>iB </span><span class="Apple-style-span" style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: xx-small;"> </span></b></span><a href="http://www.iniciablog.com/2011/02/chat-blogger-blog-poner-insertar.html" target="_blank">Cómo incluir un Chat en el Blog</a></li>
<li><a href="http://www.todoblogger.com/2010/07/poner-radio-en-blogger.html" target="_blank">Cómo poner la radio en tu Blog</a></li>
<li><a href="http://aulamagica.wordpress.com/2008/04/02/insertar-video-de-youtube-en-un-blog-de-blogger/">Cómo insertar un video de Youtube en Blogger</a></li>
<li><a href="http://aprendo-blogger.blogspot.com/2010/01/publicar-galerias-de-picasa-en-blogger.html" target="_blank">Cómo insertar una galería de fotos de Picasa en Blogger</a></li>
<li><a href="http://aprendo-blogger.blogspot.com/2010/02/publicar-galerias-de-flickr-en-blogger.html" target="_blank">Cómo insetar una galeria de fotos Flickr en Blogger</a></li>
<li><span class="Apple-style-span" style="-webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px;"><b><span class="Apple-style-span" style="background-color: orange; font-family: Arial, Helvetica, sans-serif; font-size: xx-small;"><span class="Apple-style-span" style="color: orange;"> </span>iB </span><span class="Apple-style-span" style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: xx-small;"> </span></b></span><a href="http://www.iniciablog.com/2011/04/favicon-blogger-cambiar-reemplazar.html" target="_blank">Cómo cambiar el FavIcon del Blog</a></li>
<li><span class="Apple-style-span" style="-webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px;"><b><span class="Apple-style-span" style="background-color: orange; font-family: Arial, Helvetica, sans-serif; font-size: xx-small;"><span class="Apple-style-span" style="color: orange;"> </span>iB </span><span class="Apple-style-span" style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: xx-small;"> </span></b></span><a href="http://www.iniciablog.com/2011/01/v-como-crear-un-formulario-de-contacto.html" target="_blank">Cómo crear un formulario de Contacto para el Blog</a></li>
<li><span class="Apple-style-span" style="-webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px;"><b><span class="Apple-style-span" style="background-color: orange; font-family: Arial, Helvetica, sans-serif; font-size: xx-small;"><span class="Apple-style-span" style="color: orange;"> </span>iB </span><span class="Apple-style-span" style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: xx-small;"> </span></b></span><a href="http://www.iniciablog.com/2011/01/estadisticas-blogger-google-analitics.html" target="_blank">Cómo configurar las estadísticas del Blog</a></li>
<li><span class="Apple-style-span" style="-webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px;"><b><span class="Apple-style-span" style="background-color: orange; font-family: Arial, Helvetica, sans-serif; font-size: xx-small;"><span class="Apple-style-span" style="color: orange;"> </span>iB </span><span class="Apple-style-span" style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: xx-small;"> </span></b></span><a href="http://www.iniciablog.com/2011/01/suscripcion-blogger-email-feedburner.html" target="_blank">Cómo incluir un sistema de suscripcion por email en Blogger</a></li>
<li><span class="Apple-style-span" style="-webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px;"><b><span class="Apple-style-span" style="background-color: orange; font-family: Arial, Helvetica, sans-serif; font-size: xx-small;"><span class="Apple-style-span" style="color: orange;"> </span>iB </span><span class="Apple-style-span" style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: xx-small;"> </span></b></span><a href="http://www.iniciablog.com/2011/05/crear-libro-desde-blogger-blogger2book.html">Cómo crear un libro a partir de los contenidos del blog</a></li>
<li><span class="Apple-style-span" style="-webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px;"><b><span class="Apple-style-span" style="background-color: orange; font-family: Arial, Helvetica, sans-serif; font-size: xx-small;"><span class="Apple-style-span" style="color: orange;"> </span>iB </span><span class="Apple-style-span" style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: xx-small;"> </span></b></span><a href="http://www.iniciablog.com/2011/02/blogger-blogspotcom-cambiar-com-comprar.html" target="_blank">Cómo pasar el .blogspot.com a un .com</a></li>
<li><span class="Apple-style-span" style="-webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px;"><b><span class="Apple-style-span" style="background-color: orange; font-family: Arial, Helvetica, sans-serif; font-size: xx-small;"><span class="Apple-style-span" style="color: orange;"> </span>iB </span><span class="Apple-style-span" style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: xx-small;"> </span></b></span><a href="http://www.iniciablog.com/2011/02/movil-blogger-plantilla-android.html" target="_blank">Cómo activar la plantilla para Móviles en Blogger</a></li>
<li><b><span class="Apple-style-span" style="background-color: orange; font-family: Arial, Helvetica, sans-serif; font-size: xx-small;"><span class="Apple-style-span" style="color: orange;"> </span>iB </span><span class="Apple-style-span" style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: xx-small;"> </span></b><a href="http://www.iniciablog.com/2012/12/apps-aplicaciones-smartphone-blogger.html">10 aplicaciones para administrar el blog desde un teléfono con Android o iOS</a></li>
<li><a href="http://www.readwriteweb.es/tecnologias/4-simples-pasos-convertir-blog-app-android/">Servicio para crear una aplicación para leer el tu blog desde un SmartPhone con Android</a></li>
<li><a href="http://www.pazosblogger.com/2010/02/anadir-efecto-esquina-plegable-en-el.html" target="_blank">Efecto hoja en la esquina superior derecha del blog</a></li>
<li><a href="http://emiliocobos.net/paginacion-para-blogger-mas-ligera/" target="_blank">Cómo poner un paginado en el blog</a> <span class="Apple-style-span" style="font-size: xx-small;">(aplicado en </span><span class="Apple-style-span" style="font-size: xx-small;"><span class="Apple-style-span" style="-webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px; font-size: small;"><b><span class="Apple-style-span" style="background-color: orange; font-family: Arial, Helvetica, sans-serif; font-size: xx-small;"><span class="Apple-style-span" style="color: orange;"> </span>iB </span><span class="Apple-style-span" style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: xx-small;"> </span></b></span></span><span class="Apple-style-span" style="font-size: xx-small;">)</span></li>
<li><b><span class="Apple-style-span" style="background-color: orange; font-family: Arial, Helvetica, sans-serif; font-size: xx-small;"><span class="Apple-style-span" style="color: orange;"> </span>iB </span><span class="Apple-style-span" style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: xx-small;"> </span></b><a href="http://www.iniciablog.com/2013/10/como-insertar-un-formulario-drive-en-blogger.html">Cómo crear encuestas para el Blog</a></li>
<li><b><span class="Apple-style-span" style="background-color: orange; font-family: Arial, Helvetica, sans-serif; font-size: xx-small;"><span class="Apple-style-span" style="color: orange;"> </span>iB </span><span class="Apple-style-span" style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: xx-small;"> </span></b><a href="http://www.iniciablog.com/2011/05/como-poner-publicidad-en-el-blog.html" target="_blank">Cómo insertar publicidad en el Blog</a></li>
<li><a href="http://blogandweb.com/adsense/blogger-adsense/" target="_blank">10 lugares recomendados para poner publicidad Adsense en el Blog </a></li>
<li><b><span class="Apple-style-span" style="background-color: orange; font-family: Arial, Helvetica, sans-serif; font-size: xx-small;"><span class="Apple-style-span" style="color: orange;"> </span>iB </span><span class="Apple-style-span" style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: xx-small;"> </span></b><a href="http://www.iniciablog.com/2013/09/blogger-google-calendar.html" target="_blank">Integrar un Calendario de Google Calendar en el Blog</a></li>
<li><a href="http://www.acercadeinternet.com/crea-tu-licencia-creative-commons-paso-a-paso/" target="_blank">Licencia Commons Creative para el Blog</a></li>
</ol>
<div>
Te invito a comentar así como ha sugerir tus propios trucos.</div>
iniciaBloghttp://www.blogger.com/profile/05921317092177374710noreply@blogger.com28tag:blogger.com,1999:blog-5357688261243858797.post-17048870135381960372011-05-16T08:31:00.358+01:002013-04-15T16:26:47.238+01:00Cómo insertar un reproductor mp3 con una lista de reproducciónEn este tutorial veremos cómo insertar un <b>reproductor MP3</b> con una lista de reproducción (PlayList) asociada. Es ideal, para cuando tenemos varios archivos de audio (mp3) y queremos utilizar un único reproductor que muestre en una lista todas las canciones posibles.<br />
<a name='more'></a><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGaVfldpFAym0USx6qjRmFKiGrGQuLong6ZEV6rwg57HrNilDX3tdhusKmAlwxTRgC8L-57ky6uUxC3oasywEOoij1nSi0SNifDj1F5YStOJ7Ct6-yalcVuz1NrNKdgg1MhA7zsmKFOUM/s1600/picto-dewplayer.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGaVfldpFAym0USx6qjRmFKiGrGQuLong6ZEV6rwg57HrNilDX3tdhusKmAlwxTRgC8L-57ky6uUxC3oasywEOoij1nSi0SNifDj1F5YStOJ7Ct6-yalcVuz1NrNKdgg1MhA7zsmKFOUM/s1600/picto-dewplayer.png" /></a></div>
<h3>
<b>¿Qué necesitamos?</b></h3>
<ol>
<li>Las canciones en formato mp3</li>
<li>El reproductor mp3</li>
<li>La lista de reproducción en formato xml</li>
<li>El código para insertar en el blog</li>
</ol>
<div>
<h3>
<b>Pasos para insertar el reproductor mp3 con lista de reproducción en el blog.</b></h3>
</div>
<div>
<ol>
<li><b>Publica los archivos de audio. </b>Utilizaremos el servicio <b>Dropbox</b> que nos ofrece hasta <b>2 Gbytes</b> gratis para almacenar los archivos de audio.<br />
<br />
1.1 <a href="https://www.dropbox.com/login" target="_blank">Entra en DropBox</a> (o crea una nueva cuenta si no tienes)<br />1.2 Si acabas de crear una cuenta en DropBox <a href="https://www.dropbox.com/enable_public_folder" target="_blank">deberás activar tu carpeta "Public"</a> (solo para cuentas creadas a partir del 4 de Octubre de 2012)<br />1.3 Publica tus archivos mp3 siguiendo estas recomendaciones.<br />
<b><br />
Recomendaciones: </b>Crea dentro de la carpeta <i><b>public </b>(<a href="https://www.dropbox.com/enable_public_folder" target="_blank">debes activarla</a> si no la tienes<b>)</b></i><b>, </b>una carpeta<b> <i>mp3 </i></b>y luego<b> subcarpetas por cada álbum. </b>Por ejemplo:<br />
<br />
../mp3/<b>cd1</b>/pista1.mp3, ../mp3/<b>cd1</b>/pista2.mp3....<br />
../mp3/<b>cd2</b>/pista1.mp3, ../mp3/<b>cd2</b>/pista1.mp3....<br />
<b><br />
</b>No uses mayúsculas. No uses espacios en el nombre de carpetas ni archivos. El nombre de los archivos mp3 que sean de tipo pista1.mp3, pista2.mp3.. Esto facilitará mucho la edición posterior de la lista de reproducción.<br />
<b></b><br />
Sube las canciones hasta la carpeta correspondiente. En mi caso son t<b>res canciones </b>y el album se llama <b>discotutorial. </b>Mi carpeta queda de la siguiente forma: <b><i>mp3/discotutorial</i>.</b><br />
<b><br />
</b></li>
<li><span class="Apple-style-span" style="font-weight: normal;"><b>Reproductor MP3. </b></span><span class="Apple-style-span"><span class="Apple-style-span" style="font-weight: normal;">Utilizaremos el reproductor desarrollado por </span><b><a href="http://www.alsacreations.fr/dewplayer-en.html" target="_blank">DewPlayer</a></b><span class="Apple-style-span" style="font-weight: normal;"> .</span><br />
<a href="http://dl.dropbox.com/u/22283429/mp3/dewplayer-playlist.zip" style="font-weight: normal;"> Descarga aquí el reproductor mp3 hasta tu ordenador</a><span class="Apple-style-span"> (zip), descomprímelo y publícalo en la carpeta </span><i style="font-weight: bold;">public/mp3 </i><span class="Apple-style-span" style="font-weight: normal;">creada en el paso anterior.</span><br />
<br />
</span></li>
<li><span class="Apple-style-span"><span class="Apple-style-span" style="font-weight: normal;"><b>Lista de Reproducción. </b></span><span class="Apple-style-span">Es un archivo de texto con extensión xml donde deberemos indicar el enlace a cada uno de los archivos. También podemos indicar el autor, albúm, observaciones de cada canción.<br />
<br />
Dentro del archivo existe una sección llamada <b>TrackList</b> donde verás tantos bloques de texto como canciones tengas que reproducir. Ejemplo del primer bloque:<br />
<br />
<trackList><br />
<br />
<b> <track></b><br />
<location><span class="Apple-style-span" style="color: red;">http://dl.dropbox.com/u/22283429/mp3/discotutorial/pista1.mp3</span></location><br />
<creator>Bedrich Smetana</creator><br />
<album>Má Vlast</album><br />
<title>La Moldau (Vltava)</title><br />
<annotation>Me encanta esta cancion</annotation><br />
<duration></duration><br />
<image></image><br />
<info></info><br />
<link></link><br />
<b> </track></b><br />
.<br />
.<br />
.<br />
</trackList><br />
<br />
<a href="http://dl.dropbox.com/u/22283429/mp3/discotutorial/playlist.zip" style="font-weight: normal;">Descarga aquí la lista de reproducción</a> (zip) de ejemplo con mis tres canciones.<br />
Descomprime el archivo y ábrelo en el bloc de notas para editarlo.<br />
<br />
En el campo <b><i>location</i></b> (<span class="Apple-style-span" style="color: red;">resaltado en color rojo</span>) debes indicar la <b>url</b> hasta el <b>archivo mp3 (</b>usa la opción <b><i>Copiar enlace publico</i></b> situado en el menú contextual a cada archivo en <b>DropBox)</b>. Recuerda que si tienes 12 archivos mp3 deberás tener 12 bloques de texto como en el anterior dentro de la sección <b>trackList.</b><br />
<br />
Una vez que lo tengas, guardalo con el nombre <b><i>playlist.xml</i></b> y publícalo en <b>Dropbox </b>dentro de la carpeta del albúm en mi caso quedaría así <i><b>public/mp3/discotutorial/playlist.xml</b><br />
<br />
</i></span></span></li>
<li><b>El código para insertar en el blog</b><br />
LLegados hasta este punto, ya tenemos las canciones, el reproductor y el playlist alojados en <b>Dropbox</b>. Ahora vamos a por el código que hará posible que el reproductor funcione en nuestro blog. Para ello, copia el siguiente fragmento de código, pégalo en el bloc de notas para cambiar los parámetros. <br />
<blockquote>
<div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">
<object type="application/x-shockwave-flash" data="<span class="Apple-style-span" style="color: red;">https://dl.dropbox.com/u/XXXX/mp3/dewplayer-playlist.swf</span>" width="240" height="200" id="dewplayer" name="dewplayer"></div>
<div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">
<span class="Apple-tab-span" style="white-space: pre;"> </span><param name="wmode" value="transparent" /></div>
<div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">
<span class="Apple-tab-span" style="white-space: pre;"> </span><param name="movie" value="<span class="Apple-style-span" style="color: red;">https://dl.dropbox.com/u/XXX/mp3/dewplayer-playlist.swf</span>" /></div>
<div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">
<span class="Apple-tab-span" style="white-space: pre;"> </span><param name="flashvars" value="showtime=true&autoreplay=true&xml=<span class="Apple-style-span" style="color: #38761d;">https://dl.dropboxusercontent.com/u/XXX/mp3/discotutorial/playlist.xml</span>" /></div>
<div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">
<span class="Apple-tab-span" style="white-space: pre;"> </span></object></div>
</blockquote>
Deberás cambia el link tanto del reproductor mp3 (<span class="Apple-style-span" style="color: red;">resaltado en color rojo</span>) como el link del playlist (<span class="Apple-style-span" style="color: #38761d;">resaltado en color verde</span>). Estos enlaces los obtienes con la opción "<b><i>Copiar enlace publico</i></b>" en el menú contextual de cada archivo en <b>DropBox</b>.<br />
<br />
Fíjate como ha quedado en mi caso:</li>
</ol>
<ol></ol>
<blockquote>
<blockquote>
<object type="application/x-shockwave-flash" data="<b>https://dl.dropbox.com/u/22283429/mp3/dewplayer-playlist.swf</b>" width="240" height="200" id="dewplayer" name="dewplayer"><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><param name="wmode" value="transparent" /><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><param name="movie" value="<b>https://dl.dropbox.com/u/22283429/mp3/dewplayer-playlist.swf</b>" /><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><param name="flashvars" value="showtime=true&autoreplay=true&xml=<b>https://dl.dropboxusercontent.com/u/22283429/mp3/discotutorial/playlist.xml</b>" /><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span></object></blockquote>
</blockquote>
<blockquote>
Una vez tengas el código habrá que pegarlo en el blog. Si lo quieres pegar en una entrada en concreto, edítala y pega el código estando en la pestaña "<b><i>Edición de HTML</i></b>".</blockquote>
<blockquote>
Si lo que quieres es situar el reproductor en un lugar común en el blog, deber ir a la <b><i>pestaña Diseño </i></b>y luego <b><i>Elementos de la página</i></b>, haz clic en agregar <b><i>Añadir un Gadget</i></b> y elije el tipo <b><i>HTML/JavaScript</i></b> y pega el código. Arrastra el Gadget hasta situarlo en el sitio deseado. Guarda la plantilla y visualiza el blog.</blockquote>
<br />
<h3>
<b>Ejemplo funcionando en esta entrada</b></h3>
Aquí puedes ver el resultado final. En mi caso el reproductor con mis tres canciones.<br />
<br /></div>
<div>
<div style="text-align: center;">
<object data="https://dl.dropbox.com/u/22283429/mp3/dewplayer-playlist.swf" height="200" id="dewplayer" name="dewplayer" type="application/x-shockwave-flash" width="240"> <param name="wmode" value="transparent" /><param name="movie" value="https://dl.dropbox.com/u/22283429/mp3/dewplayer-playlist.swf" /><param name="flashvars" value="showtime=true&autoreplay=true&xml=https://dl.dropboxusercontent.com/u/22283429/mp3/discotutorial/playlist.xml" /></object></div>
</div>
<div>
Este tutorial ha sido sugerido por uno de los seguidores de <b>iniciaBlog</b>. Si hay algo que buscas y que no encuentras, utiliza el <a href="http://www.iniciablog.com/p/contacto.html">formulario de contacto para proponer nuevos temas</a>.<br />
<br />
Espero que te halla resultado útil. Como en todas mis publicaciones, te agradezco que colabores con este blog opinando a través de los comentarios y recomendado esta entrada utilizando los botones de "Me gusta" o de "Twittear". ¡Gracias! :D</div>
iniciaBloghttp://www.blogger.com/profile/05921317092177374710noreply@blogger.com130tag:blogger.com,1999:blog-5357688261243858797.post-73344796015038379352011-05-09T22:20:00.330+01:002012-10-10T23:21:52.326+01:00Cómo crear un libro a partir del blog (Blogger y WordPress)¿Quién no ha pensado alguna vez en publicar un libro? <br />
Cualquier persona con ciertas inquietudes, con grandes vivencias o con una imaginación incontenida son grandes candidatos para lograr este objetivo, pero... también formamos parte de este selecto club, aquellos que <b>escribimos en un blog</b>, ya que después de varios meses conseguiremos atesorar una buena cantidad de entradas, que equivalen a <b>posibles páginas de un libro</b>. Evidentemente destacan aquellos "bloggers" que crean <b>contenido original</b>.<br />
<a name='more'></a><br />
Aunque no es mi caso (todavía), hay mucha gente con estupendos blogs (Blogger/WordPress), que llevan ya tiempo escribiendo y que por lo tanto, invito a <b>reflexionar </b>sobre este tema y que desde <b>iniciaBlog </b>animamos.<br />
<br />
¿Y para qué un libro? No cabe duda, que un libro es un objeto tangible, donde se ve realmente<b> la dimensión del trabajo </b>que hemos ido haciendo de manera minuciosa a lo largo del tiempo. ¿Vender?, si claro que sí, aunque ésta no debería ser el detonante principal que te haga emprender este nuevo reto.<br />
<br />
Después de mucho, he encontrado a <b>FastPencil</b>, un <b>servicio online profesional</b> para la edición, maquetación, distribución de libros y que cuenta con opciones para la <b>importación de texto desde Blogger, Wordpress</b> además de Word y PDF.<br />
<br />
<b>Modelo de distribución de FastPencil:</b><br />
<ul>
<li><b>Impresión bajo demanda</b> (no necesitas una cantidad mínima), por lo que puedes solicitar un único ejemplar, ¡tu primer ejemplar!</li>
<li><b>Distribución electrónica</b> en formato PDF, ePUB para Amazon, iBookStore de Apple, LuLu.com y otros.</li>
</ul>
<br />
<b>Lo más destacado es:</b><br />
<ul>
<li><b>Importación </b>de las entradas del <b>blog</b>, ya sea de Blogger o Wordpress.</li>
<li><b>Editor online</b> no necesitas instalar ningún software</li>
<li>Control sobre la portada, contraportada y lomo del libro. Permite incluir imágenes.</li>
<li>Dispone de <b>10 plantillas predefinidas</b> que normalizan los diferentes aspectos de maquetación.</li>
<li>Puedes <b>descargar un PDF</b> (con marcas de agua) para <b>revisar</b>.</li>
<li>Personalización de los textos sobre licencias, copyright, reclamaciones, dedicatorias y agradecimientos.</li>
<li>Tamaño, tipo de papel, interior en color o B&N, tapas duras o blandas para la opción de impresión</li>
<li>Puedes <b>fijar el precio de ventas</b>. Control sobre los derechos de autor y <b>gestión de royalties</b>.</li>
<li>Los libros electrónicos puede ser distribuidos a través de<b> iBookstore Apple, Amazon Kindle Store</b>, Barnes & Noble.com, Borders.com, Kobobooks.com, Powells.com, Ebookmall.com, Diesel-ebooks.com, Booksonboard.com, <b>Lulu.com</b>, Lybrary.com y <b>FastPencil</b>.</li>
</ul>
<br />
<b>Lo que menos me ha gustado es:</b><br />
<ul>
<li>Interfaz solamente en <b>Inglés </b>(de momento)</li>
<li>Las <b>medidas </b>sólo aparecen en <b>pulgadas</b></li>
<li>Las plantillas no disponen de una imagen que te ayude a ver el estilo, por lo debes probar.</li>
<li>El tipo de letra depende de la plantilla. Según se mire esto puede ser también una ventaja.</li>
</ul>
<br />
<b>Pasos para la publicación de un libro a partir del Blog.</b><br />
<ul>
<li><a href="https://www.fastpencil.com/signup" target="_blank">Entrar en FastPencil y crear una cuenta de usuario</a></li>
<li>Crear <b>un nuevo proyecto </b>del tipo Book o Ebook (también tienes libros de fotos, libros de cocina..)</li>
<li><b>Importar el Blog </b>desde las opciones de <b>importación/exportación</b> situadas a la derecha</li>
<li><b>Editar </b>los contenidos</li>
<li><b>Publicar </b>el libro</li>
<li><b>Ordenar </b>un ejemplar</li>
</ul>
<br />
<b>Enlaces de interés (Inglés):</b><br />
<ul>
<li><a href="http://www.fastpencil.com/" target="_blank">Sitio oficial de FastPencil</a></li>
<li><a href="http://www.fastpencil.com/company/calculator" target="_blank">Calculadora para saber lo que cuesta la impresión del libro</a></li>
<li><a href="http://blog.fastpencil.com/" target="_blank">Blog de FastPencil</a></li>
<li><a href="http://www.facebook.com/FastPencil" target="_blank">Comunidad FastPencil en Facebook</a></li>
<li><a href="http://twitter.com/#!/fastpencil" target="_blank">Canal en Twitter</a></li>
<li><a href="http://www.fastpencil.com/company/faq" target="_blank">Preguntas más frecuentes</a></li>
<li><a href="http://www.youtube.com/user/FastPencilTV" target="_blank">Canal de vídeo tutoriales en YouTube</a></li>
</ul>
<br />
<b>Video tutorial de importación de un Blog a FastPencil</b><br />
<br />
<iframe allowfullscreen="allowfullscreen" frameborder="0" height="338" src="http://www.youtube.com/embed/rWvt2KnFuCk?list=PL601805DF58841971&hl=es_ES" width="600"></iframe>
<br />
¿Lo conocías?, ¿tienes pensado publicar tu libro? ¿qué otro servicio puedes recomendar? ¿qué impresión de te llevas de FastPencil?<br />
<br />
Como en cada entrada te invito a participar utilizando los comentarios y a difundir esta entrada utilizando el botón de Me Gusta o Twittear. ¡Gracias!iniciaBloghttp://www.blogger.com/profile/05921317092177374710noreply@blogger.com14tag:blogger.com,1999:blog-5357688261243858797.post-48012489427667892352011-04-11T09:14:00.133+01:002013-06-09T12:59:58.429+01:00¿Cómo incluir un botón de imprimir en cada entrada del blog?<div style="text-align: justify;">
Según en qué tipo de blogs puede tener mucho sentido un <b>botón de imprimir</b> asociado a cada entrada. Imagínate un blog de <b>recetas de cocina</b> o un <b>blog de manualidades</b>. A parte de imprimir también podremos descargar el post en PDF.</div>
<div style="text-align: justify;">
<br /></div>
<a name='more'></a><div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-Nbjp2m7RRrw/UOygOxOdEqI/AAAAAAAABuQ/AOd4LkzzMoA/s1600/print-friendly-logo-iniciablog.jpeg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="http://3.bp.blogspot.com/-Nbjp2m7RRrw/UOygOxOdEqI/AAAAAAAABuQ/AOd4LkzzMoA/s1600/print-friendly-logo-iniciablog.jpeg" /></a></div>
<div style="text-align: justify;">
De todos los servicios evaluados te recomiendo <b><a href="http://www.printfriendly.com/button" target="_blank">PrintFriendly</a> </b>(haz clic para ver el botón de impresión estándar del servicio). Puedes <b>personalizar el botón</b> y obtienes un <b>código</b> para <b>Web</b>, <b>Blogger </b>y <b>WordPress</b>. Una vez puesto, al hacer clic se abre una nueva ventana de PrintFriendly como si de una vista previa se tratara. El usuario puede elegir entre imprimir, exportar a PDF o enviar por email. Puedes incluso quitar texto. También te explican como ponerlo en el blog (paso 7 en adelante en este tutorial).</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Una vez visto, si el resultado es el que esperas ya has terminado. Si por el contrario quieres mejorar el código o personalizar el icono con otro gráfico sigue leyendo.</div>
<div style="text-align: justify;">
<br /></div>
<h3>
<b>Pasos para mejorar el código de PrintFriendly y agregar un icono personalizado</b></h3>
<div style="text-align: justify;">
</div>
<ol>
<li>Conseguir el icono de impresión. Te recomiendo el servicio <a href="http://www.iconfinder.com/search/?q=pdf+print" target="_blank">www.iconfinder.net</a></li>
<li>Elige bien el tamaño del icono, el que yo seleccione es de 24px*24px</li>
<li>Descarga en formato <b>PNG</b> hasta tu ordenador</li>
<li>Ahora debemos alojar el PNG. Te recomiendo Google Sites (<a href="http://www.iniciablog.com/2011/03/iconos-sociales-twitter-facebook-blog.html">ya lo vimos cuando hablamos de los iconos sociales en el blog</a>), el cual te permite crear un sitio web y también alojar archivos para luego acceder a ellos desde el blog, sigue estos pasos:</li>
<ul>
<ul>
<li style="text-align: justify;"><a href="https://sites.google.com/" target="_blank">Entra en Google Sites</a> </li>
<li style="text-align: justify;">Abre tu sitio o crear uno nuevo (recuerda que el sitio que tengas debe ser <b>público)</b></li>
<li style="text-align: justify;">Ve a la opción <i style="font-weight: bold;">Administrar Sitio</i> desde el que podrás <b>subir archivos adjuntos</b>.</li>
<li style="text-align: justify;">Sube el icono de impresión que has elegido.</li>
</ul>
</ul>
<div>
<div style="text-align: justify;">
</div>
<br />
<br />
<li>Ahora fíjate en el código <b>HTML Mejorado de PrintFriendly</b> (un simple enlace):</li>
</div>
<blockquote>
<div style="text-align: justify;">
<i><a expr:href='&quot;http://www.printfriendly.com/print?url=&quot; + data:post.canonicalUrl' target='_blank'><img alt='Imprimir o exportar PDF' src='<span class="Apple-style-span" style="color: red;">https://sites.google.com/site/iniciablog/PDF24.png</span>'/> </a></i></div>
</blockquote>
<div style="text-align: justify;">
<span class="Apple-style-span" style="background-color: white; color: red;">En lo seleccionado en rojo</span> desde indicar la dirección <b>url de tu sitio</b> y el<b> archivo PNG</b></div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
</div>
<li>Copia el fragmento de HTML hasta un bloc de notas para personalizarlo.</li>
<li>Cuando lo tengas, cópialo y ve a la <b style="font-style: italic;">Pestaña Plantilla </b>y luego a <b style="font-style: italic;">Editor HTML</b></li>
<li>Por seguridad haz una copia de la plantilla <i style="font-weight: bold;">"</i><b style="font-style: italic;">Descargar plantilla completa</b><i style="font-weight: bold;">".</i></li>
<li>Busca <b style="font-weight: normal;"><i><b:include data='post' name='shareButtons'/></i> (usa el buscador del navagador).</b></li>
<li><b>Pega el código</b> que copiaste justo debajo de la linea que has encontrado.</li>
<li><b style="font-weight: normal;">Guarda la plantilla y visualiza el Blog.</b> </li>
</ol>
<br />
<div style="text-align: justify;">
El mi caso el sentido que tiene este botón es que te sirva a ti y puedas aplicarlo con éxito. Deja tus comentarios. Gracias.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<h3>
Extensión de PrintFriendly para Google Chrome</h3>
Si usas Google Chrome, quizás te interese valorar la e<a href="https://chrome.google.com/webstore/detail/print-friendly-pdf/ohlencieiipommannpdfcmfdpjjmeolj?hl=es" target="_blank">xtensión correspondiente a PrintFriendly</a> para agregarla a tu navegador.</div>
<div>
<div style="text-align: justify;">
<br /></div>
</div>
<div>
<br /></div>
<div style="text-align: right;">
<span style="color: #444444; font-size: xx-small;">Actualizado el </span><b style="color: #444444; font-size: x-small;">08 de Enero de 2013</b>
</div>
iniciaBloghttp://www.blogger.com/profile/05921317092177374710noreply@blogger.com39tag:blogger.com,1999:blog-5357688261243858797.post-75744234829585006902011-02-09T13:38:00.104+00:002012-03-09T08:49:37.503+00:00¿Cómo poner un chat en el blog?<b>Un chat en el blog</b>...¿y para qué?. Imagínate que tienes una tienda de juguetes y que además tienes un blog donde publicas entradas sobre las características de cada artículo. Posiblemente recibirás mensajes del tipo ¿<b>te quedan peluches parlanchines</b>? Imagina ahora que puedas chatear con la gente que esté viendo el blog...<br />
<a name='more'></a><br />
Existen muchos gadget, widgets o plugins...pero personalmente, recuerdo uno que use en su momento, y que me funcionó. Se llama <b>Plugoo, </b>tienen una versión gratuita y puedes chatear desde MSN Messenger, <b>Google Talk</b> (el chat de Gmail) y otros.<br />
<br />
Esta entrada es un poco extensa...¿estás preparado?<br />
<br />
Debemos tener claro que son <b>dos apartados</b>, por un lado el <b>chat incrustado en el Blog</b> o Web y por otro el <b>servicio que usaremos para responder</b> las preguntas. En este ejercicio usaremos el <b>Chat de Gmail.</b><br />
<br />
<b>Apartado 1. Incrustar el chat en el blog:</b><br />
<b>Paso 1. </b><a href="http://www.plugoo.com/" target="_blank">Entra en Plugoo </a><br />
<b>Paso 2.</b> Selección <b>Talk (</b>o el que crear mejor en tu caso)<br />
<b>Paso 3.</b> Indica en nombre de usuario IM la cuenta de Gmail que asociarás a este servicio<br />
<b>Paso 4.</b> Cumplimenta el registro<br />
<b>Paso 5.</b> Una vez dentro del servicio, ve a la pestaña "<b>Mis widgets</b>" y personaliza el objeto chat<br />
<b>Paso 6. </b>Copia el codigo HTML<br />
<b>Paso 7.</b> En mi caso el código HTML lo he pegado en está en esta misma entrada, pero lo más lógico es que este en la barra lateral del blog. De esta forma siempre estará visible.<br />
<br />
Ten en cuenta que puedes personalizar la apariencia, <b>ancho y alto</b>, <b>textos</b>, colores, etc. Además si la cuenta de Gmail que atiende el chat está conectado, este muestra un icono verde, en caso contrario rojo (cerraste la tienda para ir a comer algo). En estos casos puedes configurarlo para que actúe como un formulario de contacto, ¡maravilloso!.<br />
<br />
<b>Chat incrustado y funcionando en esta entrada del blog</b><br />
Recuerda que si no estoy en la "<b>tienda de juguetes</b>" verás un <b><span class="Apple-style-span" style="color: red;">icono rojo</span> </b>en la parte superior izquierda.<br />
<object data="http://www.plugoo.com/plug.swf?go=2KNPP9TT9XHD9CZ" height="260" id="plugoo" type="application/x-shockwave-flash" width="240"> <param name="movie" value= "http://www.plugoo.com/plug.swf?go=2KNPP9TT9XHD9CZ" />
<param name="allowScriptAccess" value="always" />
<param name="wmode" value="transparent" />
</object>
<br />
<br />
<b>Apartado 2. Responder utilizando la cuenta de Gmail</b><br />
Para chatear, necesitas estar conectado a Gmail, entra a tu cuenta como siempre y activa el chat (enlace que pone activar chat en la parte inferior de los mensajes recibido). A la izquierda tienes la gente online con la que chatear...y verás un nuevo amigo llamado <b>MyPlugoo</b>.<br />
<div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">
<br /></div>
<div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">
<b>Post Relacionado:</b></div>
<ul>
<li><a href="http://bquestion.blogspot.com/2011/01/suscripcion-blogger-email-feedburner.html"><b>Sistema de suscripción al boletin de noticias por email</b></a></li>
<li><b><a href="http://bquestion.blogspot.com/2011/01/v-como-crear-un-formulario-de-contacto.html">Formulario de contacto para el blog</a></b></li>
</ul>Unknownnoreply@blogger.com25tag:blogger.com,1999:blog-5357688261243858797.post-39157436023184831522011-02-06T19:55:00.182+00:002013-01-13T20:27:38.547+00:00¿Cómo insertar un reproductor MP3 en el blog?<div style="text-align: justify;">
En algunas ocasiones, puede darse el caso de querer insertar una <b>pista de audio o fragmento musical </b>en el blog...pero ¿cual es el mejor reproductor mp3 y qué pasos dar...</div>
<a name='more'></a><br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="text-align: justify;">
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGaVfldpFAym0USx6qjRmFKiGrGQuLong6ZEV6rwg57HrNilDX3tdhusKmAlwxTRgC8L-57ky6uUxC3oasywEOoij1nSi0SNifDj1F5YStOJ7Ct6-yalcVuz1NrNKdgg1MhA7zsmKFOUM/s1600/picto-dewplayer.png" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img alt="Alsacreations" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGaVfldpFAym0USx6qjRmFKiGrGQuLong6ZEV6rwg57HrNilDX3tdhusKmAlwxTRgC8L-57ky6uUxC3oasywEOoij1nSi0SNifDj1F5YStOJ7Ct6-yalcVuz1NrNKdgg1MhA7zsmKFOUM/s1600/picto-dewplayer.png" title="Alsacreations" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Foto Alsacreations</td></tr>
</tbody></table>
...Aunque probé varios reproductores mp3, el que yo te recomiendo es <a href="http://www.alsacreations.fr/dewplayer-en.html" target="_blank">DewPlayer de Alsacreations</a> (en inglés) . Es sumamente sencillo de implementar. Tienes diferentes versiones del reproductor (mini, classic, multi...), es <b>gratuito </b>y está desarrollado en Flash. Tienes un botón para descargar el reproductor y desde la propia página obtienes el <b>código HTML</b> necesario para insertar en el blog o web.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
El único requisito, es que debes tener un <b>sitio ftp</b> (hosting) tanto para alojar el <b>archivo del reproductor</b>(SWF) como los mp3. En el caso de una web esto no es inconveniente, pero en el caso de un blog con blogger esto es un problema.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Usaremos un servicio de llamado <b>DropBox</b> que permite alojar archivos de todo tipo de manera gratuita. Es ideal para <a href="http://www.iniciablog.com/2012/02/blogger-adjuntar-pdf-archivos-excel.html">adjuntar todo tipo de archivos como PDF, Zip, Excel, etc a tu blog.</a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Antes de ponernos manos a la obra comentarte que también tienes un tutorial para agregar un <a href="http://www.iniciablog.com/2011/05/reproductor-mp3-multitrack-playlist.html">reproductor mp3 con una lista de reproducción</a>. es decir un reproductor y varias canciones.</div>
<h3>
<b><br /></b></h3>
<h3>
<b>Alojando el archivo flash del reproductor y los archivos MP3 en Dropbox.</b></h3>
DropBox es un servicio que cuenta con una versión gratuita donde tienes a tu disposición hasta 2 <b>GBytes Gratis</b>. No está nada mal. Esto quiere decir que cuentas con todo este espacio para almacenar archivos en internet. Lo más importante de DropBox es que puede facilitarte un LINK Directo al archivo y por lo tanto podremos indicar la url del mp3 y del reproductor.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzwhtTIIo1Z-9d8z_Vdv-zmTA9SAyntZOFeSlDUdIK7N9qQtXxjDR_vVjebE5Vr1SjLCQQqIhGp-70wa8kLo0pSJKRgO8g-IZwRQi7K7Nt0mZ9KckM2lZEJKJJRcYNfKNGJJHn-XSVXFQ/s1600/dropbox-iniciablog-mp3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="interfaz de dropbox" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzwhtTIIo1Z-9d8z_Vdv-zmTA9SAyntZOFeSlDUdIK7N9qQtXxjDR_vVjebE5Vr1SjLCQQqIhGp-70wa8kLo0pSJKRgO8g-IZwRQi7K7Nt0mZ9KckM2lZEJKJJRcYNfKNGJJHn-XSVXFQ/s1600/dropbox-iniciablog-mp3.jpg" title="interfaz de dropbox" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<h4>
<b>Sigue estos pasos para usar Dropbox para alojar el archivo .swf y el mp3:</b></h4>
Paso 1. <a href="https://www.dropbox.com/">Entra en Dropbox</a> (en inglés), create un cuenta o identificate si ya la tienes<br />
Paso 2. Si acabas de crear una cuenta en Dropbox <a href="https://www.dropbox.com/enable_public_folder" target="_blank">debes Activar la carpeta "Public"</a><br />
Paso 3. Abre la carpeta "<b>Public</b>" (si no la tienes <a href="https://www.dropbox.com/enable_public_folder" target="_blank">actívala siguiendo este enlace</a>)<br />
Paso 4. Presiona el botón "<b>Upload o cargar</b>"<br />
Paso 5. Localiza el archivo .swf y el mp3 que vas a utilizar y súbelos<br />
Paso 6. Copia el siguiente código por ejemplo hasta el blog de notas o hasta un Gadget del tipo HTML/Javascript del blog o bien hasta el HTML de uno de tus post:<br />
<br />
<div style="margin: 0px;">
<br />
<object data="<span class="Apple-style-span" style="color: red;">http://dl.dropbox.com/u/22283429/dewplayer-mini.swf</span>" height="20" id="dewplayer" name="dewplayer" type="application/x-shockwave-flash" width="160"> <param name="wmode" value="transparent" /></div>
<div style="margin: 0px;">
<param name="movie" value="<span class="Apple-style-span" style="color: red;">http://dl.dropbox.com/u/22283429/dewplayer-mini.swf</span>" /></div>
<div style="margin: 0px;">
<param name="flashvars" value="mp3=<span class="Apple-style-span" style="color: red;">http://dl.dropbox.com/u/22283429/test1.mp3</span>&amp;showtime=1" /></div>
<div style="margin: 0px;">
</object><br />
<br /></div>
<br />
Paso 7. Vuelve a Dropbox, selecciona el archivo swf y haz clic en <b><i>Copiar enlace público del archivo</i></b><br />
Paso 8. Remplaza las dos primeras URL marcadas en rojo del código que pegaste en el paso 6<br />
Paso 9. Haz lo mismo para el archivo MP3. (copia enlace publico en dropbox y reemplaza la última url)<br />
<br />
Guarda y visualiza tu blog!<br />
<div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">
<br /></div>
<h3>
<span class="Apple-style-span" style="color: red;"><span class="Apple-style-span" style="color: black;"><b>Aquí tienes mi ejemplo funcionando:</b></span></span></h3>
<br />
<object data="http://dl.dropbox.com/u/22283429/dewplayer-mini.swf" height="20" id="dewplayer2" name="dewplayer" type="application/x-shockwave-flash" width="160"> <param name="wmode" value="transparent" /><param name="movie" value="http://dl.dropbox.com/u/22283429/dewplayer-mini.swf" /><param name="flashvars" value="mp3=http://dl.dropbox.com/u/22283429/test1.mp3&showtime=1" /></object><br />
<br />
<div class="Actualizado" style="text-align: right;">
<span style="color: #444444; font-size: xx-small;">Actualizado el </span><b style="color: #444444; font-size: x-small;">9 de Agosto de 2012</b>
</div>
Unknownnoreply@blogger.com76tag:blogger.com,1999:blog-5357688261243858797.post-699626513276034032011-02-01T08:46:00.043+00:002012-02-11T16:01:25.448+00:00¿Cómo crear anotaciones de seguimiento de las estadísticas?Muchas veces me ocurre, sobre todo en la fase de optimización de un sitio web o blog, que hago cambios en el HTML con el fin de buscar mayores visitas. Pero cómo saber si determintados cambios tienen efecto positivo o negativo en las estadísticas..<br />
<a name='more'></a><br />
...La única manera práctica que he encontrado es usar las <b>Notas en Google Analytics</b>. Pensadas para explicar determinados picos por ejemplo "Día de conferencias en el congreso...", pero en mi caso es perfecto para llevar anotaciones cronológicas sobre los cambios en el sitio.<br />
<br />
Sigue estos pasos:<br />
1.- Accede a <a href="http://www.google.com/intl/es_ALL/analytics">Google Analytics</a><br />
2.- Accede a los informes del sitio<br />
3.- Haz clic en la gráfica, justo en el punto concreto donde quieres especificar una nota<br />
4.- Haz clic en "Crear nueva anotación" y escribe tu nota<br />
<br />
Observa que puedes recorrer todas las anotaciones desde el panel situado en la parte inferior de la gráfica.<br />
<b><br />
</b><br />
<b>Post relacionados:</b><br />
<br />
<ul><li><b><a href="http://bquestion.blogspot.com/2011/01/estadisticas-blogger-google-analitics.html">¿Cómo conocer las estadísticas del blog?</a></b></li>
</ul>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-5357688261243858797.post-71274565054073973422011-01-16T10:56:00.002+00:002011-12-27T12:56:17.891+00:00Cómo aumentar el espacio de almacenamiento PicasaResulta que después de un tiempo utilizando Picasa puedes quedarte sin espacio para subir más fotos. Por defecto Google asigna 1 GBytes a Picasa y 7Gbytes para Gmail. En el caso de Gmail elimina todo el correo spam que seguramente estas almacenando. En el caso de Picasa asegúrate de que las fotos que estás publicando no sean a tamaño original para no consumir rápidamente el espacio gratuito. Recuerda que si tienes un blog y subes fotos, éstas también se almacenan en Picasa. Finalmente, para aumentar el espacio de almacenamiento de Picasa debes...<br />
<a name='more'></a><br />
<a href="https://www.google.com/accounts/b/0/PurchaseStorage?hl=es" target="_blank">pasa por caja (debes identificarte)</a> , y es lo mejor que puedes hacer, como vez, por los precios (20 Gigabytes adicionales por 5 Dólares/Año) está regalado. Cualquier otro invento es complicarte la vida.<br />
<br />
Espero que te sirva...deja tus comentarios. Gracias.<br />
<br />
Fuente: <a href="http://picasa.google.com/support/bin/answer.py?hl=es&answer=39567" target="_blank">Soporte de Picasa</a>Unknownnoreply@blogger.com15