BUSCA Y ENCONTRARAS

lunes, 24 de noviembre de 2008

Hospeda las imagenes de tu Blog en tu Blogger

Articulo sacado de

El lugar más seguro para hospedar las imágenes de tu plantilla blogger



Uno de los principales problemas de las plantillas blogger es cuando las imágenes fallan y no se visualizan o son sustituidas por mensajes poco agradables. El problema se debe a que en muchos de los casos las imágenes de esas plantillas se encuentran hospedadas en servicios gratuitos (ej: imageshack, photobucket, googlepages, entre otros.) que limitan el número de veces que pueden mostrar (ancho de banda).



Por lo tanto lo ideal es cambiar el hospedaje a un lugar seguro. ¿Cual?, pues el mismo Blogger, el cual no pone un limite (o es muy alto) al ancho de banda de cada imagen.Para obtener las imágenes que usa tu plantilla puedes hacer lo siguiente:



  1. Entra a la pestaña “Diseño” y posteriormente a la opción de “Edición de HTML”.

  2. Busca todas las direcciones (URLs) de las imágenes, todas serán del tipo:
    http://servicio.com/etc/nombre-imagen.jpg

    Y terminaran en jpg, png, gif u otra extensión de imagen. Seguramente las encuentres entre códigos como …url(url-de-imagen-aquí)… , así que habrá que buscar con detenimiento. Puede pasar que al buscar las urls de las imágenes en el código de las plantillas estas ya estén en Blogger, para tal caso no hay necesidad de hacer ningún.


  3. Entra a cada URL y guarda la imagen en un carpeta con el nombre de tu plantilla.


Ahora, para subir imágenes a blogger y poder usarlas en tus plantillas puedes seguir estos sencillos pasos.



  1. Entra al editor de entradas (Creación de entradas > Crear).

  2. Da clic al icono para subir imágenes normalmente y sube todas las que componen tu plantilla.

  3. Al terminar de subirlas y regresar al editor, el código resultante es más o menos como sigue:
    <a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_Zuzii37VUO4/SMM5YTgm0DI/AAAAAAAAC8s/AMBnCJkCENw/s1600-h/footerpg5.jpg"><img style="cursor:pointer; cursor:hand;"
    src="http://1.bp.blogspot.com/_Zuzii37VUO4/SMM5YTgm0DI/AAAAAAAAC8s/AMBnCJkCENw/s400/footerpg5.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5243097480906068018" /></a>


    Como puede verse el código contiene dos URLs aparentemente de las imágenes, sin embargo ninguna de ellas puede usarse en las plantillas, así que:

  4. Copia la primer URL del código de cada imagen y ábrela en una pestaña o ventana del navegador.

  5. Al entrar veras la imagen correspondiente, da clic derecho y después “Copiar la ruta la imagen” (firefox).

  6. Esa URL ya puede usarse en las plantillas blogger, el siguiente paso será sustituir la antigua URL de la imagen en Diseño > Edición de HTML por la recién copiada en blogger.

  7. Repite los pasos 4, 5 y 6 para todas las imágenes que subiste correspondientes a las que usa tu plantilla.


Este puede ser un proceso un poco tedioso, pero hay que pensar en que solo se hace una vez y al hacerlo tendrás mayor seguridad de que las imágenes en tu plantilla no fallaran. Lo mismo aplica si eres creador de plantillas blogger, hacer este proceso puede ahorrarte dolores de cabeza futuros.




domingo, 23 de noviembre de 2008

Agregar un sidebar a una Plantilla Blogger

Articulo extraido de

Como agregar una sidebar en una plantilla Blogger


Agregar una nueva sidebar a una plantilla Blogger es una de las preguntas más comunes entre lo usuarios de la plataforma para blogs de Google. Agregar una segunda sidebar varia en complejidad de acuerdo al diseño que se trate, así, mientras algunas solo requieran cambiar unas lineas de css, otras necesitarán de una remodelación total que tal vez hagan más conveniente cambiar de diseño.

A grandes rasgos el proceso es el siguiente:



  1. Analizar la estructura y estilos de la plantilla.

  2. Agregar un nueva zona editable, es decir, la nueva zona para agregar los gadgets.
  1. Modificar estilos.



Para seguir sin problema este y cualquier tutorial que implica hacer cambios en la estructura de un blog o sitio web es muy recomendable saber algo de html y css. Entonces:

Analizar la estructura y estilos de la plantilla



La mayoría de las plantillas, y especialmente las de Blogger, tienen una estructura muy similar, un header (cabecera) con título y descripción, un contenedor con la columna principal y una sidebar (barra lateral) y un footer (píe de página) con créditos y otra información.

Para este caso, es de interés el contenedor, donde se encuentra el contenido y la sidebar, desde el código de Blogger (Diseño / Edición HTML) este se ve como:


<div id='content-wrapper'>
<div id='main-wrapper'>

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>

</b:section>
</div>

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>

<!-- Código de los gadgets o widgets del sidebar -->
</b:section>


</div>
</div>

Varia un poco de plantilla en plantilla, pero generalmente es muy similar a lo anterior. Tanto main-wrapper (columna principal) como sidebar-wrapper (contenedor del sidebar) están definidos por estilos css que determinan su ancho, fondo y otras características. Así que lo

primero será averiguar estas características buscando algo como:



#main-wrapper {
float:left;
width:620px;
/*.... otros atributos ... */
}


#sidebar-wrapper {
float:right;
width:300px;
/*.... otros atributos ... */
}

Nota: Seguramente no los encontraran juntos ni exactamente igual y en algunas ocasiones, más de una vez.


Aquí es importante ver los anchos (width) de cada elemento, pues para agregar una nueva barra hay que cambiar la distribución. Al sumar los anchos del código de ejemplo se tiene un total de 920px, el cual será el espacio disponible para el contenedor principal y las sidebars.


Agregar un nueva zona editable.


Agregar una nueva zona editable en blogger es muy sencillo, estas están definidas por elementos “section” que al incluirlos en el código ya pueden contener gadgets (elementos de página). El código de una nueva zona editable es algo como:


<b:section class='sidebar' id='sidebar2' preferred='yes'></b:section>


Y para agregar una nueva zona editable, solo hay que agregar este código justo después de la zona editable existente:


<div id='content-wrapper'>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>



<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
</b:section>

</div>

<div id='sidebar-wrapper'>
<!-- Zona editable existente -->
<b:section class='sidebar' id='sidebar' preferred='yes'>

<!-- Código de los gadgets o widgets del sidebar -->
</b:section>

<!-- Nueva zona editable -->
<b:section class='sidebar' id='sidebar2' preferred='yes'></b:section>

</div>

</div>

Hay que tener cuidado que el ID de la nueva zona, no exista en otro elemento “section”, es por eso que en el ejemplo aparece como “sidebar2″. La clase puede repetirse y en el caso de los

sidebars hasta es conveniente que lo haga. Como es una zona nueva, no necesita tener código de gadgets, estos se integraran automáticamente cuando agreguemos un nuevo gadgets desde “Elementos de página”.


Con esto ya hay una zona editable pero como no la plantilla no esta preparada seguramente se deformaría, así que falta hacer algunos cambios.


Modificar estilos.





Ya sabemos el ancho total disponible y tenemos la zona editable, así que hay que cambiar determinar el ancho de cada elemento. Siguiendo el ejemplo; main-wrapper se reduce a 540px y sidebar-wrapper el ahora contenedor de ambas sidebars se aumenta a 380px. Quedando los estilos como sigue:


#main-wrapper {
float:left;
width:540px;
/*.... otros atributos ... */
}
#sidebar-wrapper {
float:right;
width:380px;
/*.... otros atributos ... */
}

De esto modo el espacio disponible para ambas sidebars es de 380px. Lo más comun es ambas tengan el mismo ancho, es decir que ocupen el 50% cada una. A partir de lo IDs de cada zona editable definimos el ancho de cada una y su ubicación (derecha - izquierda) dentro del contenedor sidebar-wrapper, agregando los estilos:


#sidebar {
width:50%;
float:left;
/*.... otros atributos que consideres necesarios: padding, margin, etc ... */
}
#sidebar2 {
width:50%;
float:right;
/*.... otros atributos que consideres necesarios: padding, margin, etc ... */
}


Con esto ya se tiene 2 sidebars de un ancho de 190px cada una, capaces de soportar gadgets.


Observaciones


Algunas plantillas pueden tener problemas al cambiar el ancho del sidebar o el contenedor principal, sobre todo aquellas basadas en imágenes fijas que obviamente no cambian de tamaño al reducirse el ancho. En tal caso se pueden editar las imágenes con photoshop para adaptarlas al nuevo ancho.


Conclusión


En general esto proceso puede ser complicado, sobre todo si no se tiene nociones suficientes de css o la plantilla tiene una maquetación -estructura- compleja. Para tal caso queda aprender css o buscar una plantilla con 3 columnas y personalizarla.


Les agradezco cualquier opinión o corrección en los comentarios y sus dudas en nuestro foro.



Otras referencias sobre este tema:


miércoles, 15 de octubre de 2008

Casi 100 libros en pdf sobre blogs

Post sacado de

el contenedor de rafa


Son 94 y todo, gracias a diadelblog.com.

BLOGS Y BLOGÓSFERA

  1. La Blogósfera Hispana. Pioneros de la cultura digital. Bajo la dirección de José Manuel Cerezo. Fundación France Telecom España (PDF)
  2. El futuro es tuyo, La revolución social de las personas. Un libro colaborativo escrito por 120 personas (PDF)
  3. Blogonomia. Por José Luís Orihuela (PDF)
  4. Get Viral Get Visitors de Stacie Mahoe (PDF)
  5. Geeks Guide to Promoting Yourself With Twitter de Geekpreneur (PDF)
  6. The Zen of Blogging de Hunter Nutall (PDF)
  7. We Have a Website. Now What? de Craig Rentmeester (PDF)


INTERNET - WEB 2.0 - TICS - REDES SOCIALES

  1. Una década en la historia de Internet. The Internet Protocol Journal. (PDF)
  2. Planeta 2.0. Inteligencia colectiva o medios fast food. Cristóbal Cobo y Hugo Pardo. (PDF)
  3. Planeta Web 2.0. Cristobal Cobo y Hugo Kuklinski. (PDF)
  4. Web 2.0. Fundación Orange (PDF)
  5. El imperio digital. Leandro Zanoni (PDF)
  6. El Negocio de las Redes Sociales. Fundación de la Innovación Bankinter. (PDF)
  7. Redes Inalámbricas en Países en Desarrollo (PDF)
  8. Guía para editores sobre WEB 2.0, (2007) de Tim O’Reilly (Flash)
  9. Las nuevas tecnologías Web 2.0 en la promoción de museos y centros de arte. Por Javier Celaya y Mónica Viñarás (PDF)
  10. Inclusiva-net 2007 Medialab-Prado Madrid
  11. Conectado. (Un capítulo en PDF - portugués)
  12. Guía Web 1.0 (PDF)
  13. Social Web Analytics de Social Web Analytics (PDF)
  14. Effective Internet Presence de Effective Internet Presence (PDF)
  15. Introduction to Good Usability de Peter Pixel (PDF)
  16. Participative Web and User-Created Content: Web 2.0, Wikis and Social Networking (PDF)
  17. Wikiworld, Political Economy and the Promise of Participatory Media (PDF)
  18. The future of reputation de Daniel J. Solove (PDF)
  19. Capitalismo 3.0 de Peter Barnes (PDF)
  20. Education for a Digital World (PDF)


CIBERACTIVISMO - COMUNICACIÓN CIUDADANA

  1. Blog por una Causa de Mary Joice / Global Voices (PDF)
  2. El poder de las redes. Manual ilustrado para personas, colectivos y empresas abocados al ciberactivismo. Por David de Ugarte (PDF)
  3. Una Introducción a Medios Ciudadanos en Español. Rising Voices (PDF)
  4. Handbook for bloggers and cyber-dissidents, Reporteros sin Fronteras (PDF)

CIBERCULTURA - SOCIEDAD DE LA INFORMACIÓN

  1. Cultura Libre – Free Culture, Lawrence Lessig (PDF)
  2. Creación e inteligencia colectiva, deZemos98 (PDF)
  3. Inteligencia colectiva. Pierre Levy (PDF)
  4. Nosotros el medio, de Bowman y Willis (PDF)
  5. Cultura Digital y Comunicación Participativa, de Zemos98 (PDF)
  6. E-España. Fundación Orange (PDF)
  7. CODE, version 2.0. de Lawrence Lessig (PDF)
  8. The Mobile Generation porLasica (PDF)
  9. Futures of the ideas, por Lawrence Lessig (PDF)


COMUNICACIÓN Y PERIODISMO

  1. Periodismo 2.0. Una guía de alfabetización digital por Mark Briggs. (PDF español)
  2. Blogs y Medios, de José Manuel Noguera. (PDF)
  3. Web noticia: propuesta de un modelo periodístico para la WWW, por Joao Canavilhas (PDF)
  4. Los 10 Paradigmas de la e-Comunicación - The 10 Paradigms of Media in the Digital Age, por José Luís Orihuela (PDF)
  5. Tendencias Web 2.0 en el sector editorial. Por Javier Celaya y Mónica Viñarás (Resumen y PDF)
  6. Los retos de las editoriales independientes. Javier Celaya de Dosdoce.com y Elipsis Ediciones (PDF)
  7. Flash 2.0 Tecnología y cibermedios en la nueva Web social. Manuel Gago Mariño (PDF)
  8. Cómo apoderarse de los medios de comunicación (PDF)
  9. Los cibermedios valencianos: cartografía, características y contenidos, por Guillermo López. (PDF)
  10. La televisión no lo filma. Zemos98 (PDF)
  11. Educar por TV (PDF)
  12. Diseño Periodístico en Internet, (2007) de Ainara Larrondo, Ana Serrano y otros. (PDF de sólo un capítulo)
  13. 10 años de Periodismo.com. Libro recopilatorio de los mejores artículos del sitio Periodismo.com (PDF)
  14. Citizen Media: Fad or Future of News? J-Lab (PDF)
  15. Mapping Communication and Media Research: Estados Unidos (PDF), Japón (PDF), Estonia (PDF), Francia (PDF) y Alemania (PDF).
  16. Reclaiming the Media. Communication Rights and Democratic Media Roles. Nico Carpentier y Bart Cammaerts. ECREA. (PDF)
  17. Imaging the future of newspaper. Horizon Watching Initiative. Newspaper Association of America. (PDF)
  18. Blogs & Social Media - PRSA (PDF)
  19. What is Social Media por Crossing (PDF)
  20. A Primer in Social Media por SmashLab (PDF)
  21. INFOGRAFÍA 2.0, Alberto Cairo (PDF introducción y fragmentos I Capítulo)


MANAGMENT 2.0 - COMUNICACIÓN CORPORATIVA

  1. Comunicación empresarial 2.0. Por Javier Celaya y Pau Herrera (PDF)
  2. Los Blogs en la comunicación empresarial en España. Por Javier Celaya y Pablo Herrera (PDF)
  3. 10 cosas que una empresa puede hacer con los weblogs. Por José Luís Orihuela (PDF)
  4. Manual de uso del blog de la empresa. Por Alberto Ortiz de Zarate (PDF)
  5. El auge de la comunicación corporativa“. Por Benito Castro. (PDF)
  6. La empresa y la Web 2.0. por Enrique Dans. (PDF)
  7. Los blogs corporativos: una opción, no una obligación. Por Julián Villanueva, Cristina Aced y Guillermo Armeilini, (PDF).
  8. Social Bookmarking in the Enterprise. By Braly, Michael D. y Geoffrey B. Froh. (PDF)
  9. Corporate Use of Web 2.0 Technologies, ChangeWave Research“. (PDF)
  10. Coroporate Bloggin. Is it worth the hype? Backbone Media Inc. (whitepaper) (PDF)
  11. The Cluetrain Manifesto. The end of business as usual. (PDF)
  12. Democratizing the innovation por Eric von Hippel (PDF)
  13. The Wealth of Networks. How Social Production Transforms Markets and Freedom, por Yochai Benkler (PDF)

MARKETING Y PUBLICIDAD 2.0

  1. Publicidad 2.0, por Paúl Beelen (PDF)
  2. Marketing Apple por MarketingApple.com (PDF)
  3. The New Rules of Viral Marketing por David Meerman Scott (PDF)
  4. Masters of Marketing por Startup Internet Marketing (PDF)
  5. Marketing With Case Studies por Dynamic Copywriting (PDF)
  6. How to Write a Marketing Plan por Geisheker Group (PDF)
  7. Increasing the Response to Your Email Marketing Program by CRM Transformation (PDF)
  8. Podcast Marketing eBook por Christopher S. Penn (PDF)
  9. The Podcast Customer Revealed por Edison Media Research (PDF)
  10. The Art and Science of Web desing por Jeffrey Veen (PDF)

PROPIEDAD INTELECTUAL - ÉTICA

  1. Copia este libro, por David Bravo (PDF)
  2. La ética hacker y el espíritu de la era de la información, Pekka Himanen (PDF)
  3. Manual de Copyleft (PDF)
  4. The State of the Commons (PDF)
  5. GUÍA DE LICENCIAS Creative Commons. Por Ariel Vercelli y Ana Marotias (PDF)
  6. Siete cosas que deberías saber acerca de Creative Commons. (PDF)
  7. Science Dissemination using Open Access (PDF)
  8. A report on the Surveillance Society (PDF)


SEO

  1. Google Adwords Secrets por SEOBook (PDF)
  2. SEO for WordPress blogs por Blizzard Internet (PDF)

martes, 23 de septiembre de 2008

Los posts mas populares con el widget de AideRSS en blogger

AideRSS nos ofrece la posibilidad de analizar la popularidad de nuestras entradas teniendo en cuenta el feed de nuestro blog. Asi los posts mas populares los podemos mostrar en un widget en la barra lateral (sidebar). Tiene en cuenta el numero de comentarios, Diggs, Del.icio.us, los backlinks y los clics directos a la pagina. Para empezar a analizar el ranking, visita AideRSS y incluye tu RSS blog feed en el cuadro:

Si utilizas Feedburner, entra la url del feed de Feedburner:

Ejemplo:

http://feeds.feedburner.com/ElNombreDeTuFeed

Si no redireccionas tus feeds con Feedburner entra la url de tu feed como sigue:

http://NombreBlog.blogspot.com/feeds/posts/default

Una vez hayas visto la popularidad de tus posts puedes crear el widget clicando en el enlace "Sharing and Widgtes" arriba a la derecha de la pagina. La previsualización la encontraras a la izquierda y el código a la derecha. Copia y pega en un elemento HTML/JavaScript de Blogger en la barra lateral (por ejemplo), puedes modificar el rango de tiempo y el numero de posts que por defecto son 5. También puedes pegar el código en un post en modo edición html.



http://www.aiderss.com/

Via: Blogger Buster

Entradas mas populares en español

Copiado exactamente del Blog de Rosa

He conseguido modificar el widget de "entradas mas populares" del que os hablaba hace un par de días, de manera que muestre al lado de cada título de entrada, el número de comentarios con esta palabra en español, es decir, ya no dirá "comments" sino "comentarios".

Lo he hecho modificando la Yahoo Pipe que Amanda usa para que el widget funcione.
No he podido lograr que el tipo de texto que muestra el widget, acepte más cambios que uppercase (la primera letra de cada palabra en mayúscula) y capitalice (los títulos en mayúsculas), es decir que en el script una vez instalado, donde dice text-transform: capitalize; podemos poner text-transform:uppercase para ver los títulos en mayúsculas.

Para cambiar el número de entradas a mostrar, cambiaremos dentro del código una vez colocado en el elemento, donde dice &num=5 por el número de entradas que queremos ver en el widget.


Para instalar el widget, simplemente tenéis que copiar y pegar en un nuevo elemento HTML el código del script y cambiar después donde dice elescaparatederosa por el nombre de vuestro blog (el que aparece en la url del navegador).
Hay que tener cuidado al hacerlo de no borrar o cambiar nada más.

<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ol style="text-transform: capitalize;">');
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write('</ol>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback& _id=54d6d19d945db96177de90962bc15e83&url=http%3A%2F%2Felescaparatederosa.blogspot.com&num=5" type="text/javascript"></script>
<span style="gt;Widget by <a href="http://www.bloggerbuster.com">Blogger Buster </a></span>

Nota:
En el código del widget he incluido los créditos a Blogger Buster, para retirarlos si así lo queréis, solo tenéis que borrar las últimas líneas del código:
<span style="gt;Widget by <a href="http://www.bloggerbuster.com">Blogger Buster </a></span>

Y otra cosa, si al colocarlo tarda un poco en cargar tened paciencia, he comprobado que la primera vez se demora un poco, aunque pudiera ser debido a que esta tarde Yahoo Pipes tenía algunos problemillas en su web...

Si vas a utilizar las imágenes de esta entrada, subelas antes a tu propio alojamiento. No hagas Hotlinking.

domingo, 21 de septiembre de 2008

Recibir donaciones en Blogger

Via blogandweb

Una forma popular de aceptar donaciones en blogs es aquella con la famosa frase “cómprame un café” (buy me a coffe) o bien, “cómprame una cerveza” (buy me a beer) al final de cada post. Tanto que incluso existe un plugin para incorporarlo de forma rápida a wordpress y ahora tratare de explicar como implementarlo en un blog de Blogger.


donaciones-blogger.png



  1. Entra a la pestaña “Plantilla”, después a la opción “Edición HTML” y activa el botón “Expandir plantillas de artilugios” (importante).


  1. Ahí busca el siguiente código:
    <p class='post-footer-line post-footer-line-3'/>

    Nota: Sí no encuentras búscalo sin la diagonal (/) del final.

  2. Justo abajo pega lo siguiente:
    <b:if cond='data:blog.pageType == "item"'>

    <div class="donaciones">
    &lt;form method=&quot;post&quot; target=&quot;paypal&quot; action=&quot;https://www.paypal.com/cgi-bin/webscr&quot;&gt;
    &lt;input type=&quot;hidden&quot; value=&quot;_xclick&quot; name=&quot;cmd&quot;/&gt;
    &lt;input type=&quot;hidden&quot; value=&quot;email@tumail.com&quot; name=&quot;business&quot;/&gt;
    &lt;input type=&quot;hidden&quot; value=&quot;&quot; name=&quot;return&quot;/&gt;
    &lt;input type=&quot;hidden&quot; value=&quot;Comprame un cafe&quot; name=&quot;item_name&quot;/&gt;
    &lt;input type=&quot;hidden&quot; value=&quot;&quot; name=&quot;currency_code&quot;/&gt;
    &lt;input type=&quot;hidden&quot; value=&quot;&quot; name=&quot;amount&quot;/&gt;
    &lt;input type=&quot;image&quot; align=&quot;left&quot; alt=&quot;C&oacute;mprame un caf&eacute;&quot; class="imgdon" src=&quot;http://2.bp.blogspot.com/_Zuzii37VUO4/R57aKlcfGgI/AAAAAAAAChg/rBhrCfjdZBs/s1600/Coffee%2BTime-32.png&quot;/&gt;

    &lt;/form&gt;
    &lt;a target=&quot;paypal&quot; href=&quot;https://www.paypal.com/cgi-bin/webscr?cmd=_xclick&amp;business=email@tumail.com&amp;currency_code=&amp;amount=&amp;return=&amp;item_name=Comprame+un+Cafe+para+seguir+escribiendo&quot;&gt;Si te gusto este post cómprame un café&lt;/a&gt;
    </div>

    </b:if>

    En ese código sustituye mail@tumail.com por el mail de tu cuenta paypal y opcionalmente puedes sustituir el link de la imagen “Coffee%2BTime-32.png” por el link de la imagen que prefieras.

  3. Ahora busca ]]></b:skin> y justo antes pega los siguientes estilos:
    /* DONACIONES */

    /* Estilo del contenedor */
    .donaciones {
    border-top:#CCCCCC solid 1px;
    border-bottom:#CCCCCC solid 1px;
    margin:15px auto;
    padding:10px 0px;
    width:95%;
    }

    /* Estilo del enlace */
    .donaciones a {
    text-decoration:none;
    }

    /* Estilo de la imagen */
    .donaciones .imgdon {
    margin:-5px 5px 0 0;
    }

    Si sabes algo de CSS puedes editar estos estilos a tu gusto.

  4. Guarda los cambios y ¡listo! El resultado final es como se muestra en la imagen de arriba.



Este tema de las donaciones es controvertido para algunas personas que llegan a catalogarlo como “cibermendigar”. En lo particular no tengo nada en contra de esto y por el contrario hasta podría implementarlo en un futuro aquí. Si tu generas algo útil y alguien esta dispuesto a agradecerte de forma monetaria no veo el porque de la indignación, finalmente, la información es también es un producto.

martes, 9 de septiembre de 2008

7 Tips to design professional blog layout using Blogger

Sacado de http://woork.blogspot.com

Blogger it's a very powerful platform to publish your blog. It's free and with some features which you can customize how you prefer, without limits.

In this post I want to illustrate some tips which can help you to improve your Blogger template to design a professional layout for your blog.


1. Start creating a custom template
A nice template is important for the success of your blog in terms of visits and return of money using AdSense. Before to start your custom template, writing code from zero, I suggest you to download a simple basic Blogger template, for example "Minima": so, copy and past on your preferred HTML editor HTML source (remeber to check "expand widget models" option) and remove everything is contained within b:skin tag. This is the only code which have to remain:

<b:skin> /*</b:skin>

...and, below the previous line, add this code into the <head> tag to create your custom CSS style. I suggest you to use the following CSS structure:

<style type="text/css">
/* -- 1. Standard HTML elements reset --*/
/* -- 2. Custom Page Elements --*/
/* -- 3. Redefine blogger standard elements --*/
/* -- 4. Other custom classes --*/
</style>


In this way CSS code will be simpler to manage and update. This is a screenshot of a part of CSS code I used to design my blog:



At this point you can start writing HTML code, adding layer, sections and other elements to your template. When your template is ready, copy the code and paste it on Blogger Layout editor and save it. If you need more info about Blogger customization, I suggest you to take a look at BloggerBuster a "Blogger-dedicated" site mantained for my friend Amanda which provides useful templates, tips and tricks for Blogger users.


2. Create single custom pages on Blogger
Using Blogger you can create single custom pages like on WordPress. How do you do it? Simply creating a post which you will use like a web page for example adding links or in general contents organized for category. On my blog I created some pages (Tutorials, Showcases, Freebies) and, for each page, I added a link on navigation bar:



...and each page contains links organized for topic (take a look at the page Tutorials). When you have to modify the content of the pages you have simply modify the related post directly from Blogger Post editor.


3. Display some HTML elements only on home page
Sometimes it's usefult to display some page elements only on home page and not on each single post. To do it, you have to use Blogger <b:if> statement, adding the following code on your Blogger template:

<b:if cond='data:blog.pageType != "item"'>
<!-- ... HTML code if you want to display only on home page here... -->
</b:if&gt


In this way, if the current page isn't an "item" page (but for example it's your home page) , will be displayed all code within <b:if> tag.


5. Page title and meta tag description
For a better indexing of your blog on Google I suggest you to make these simple changes on your template. Change this line (blog title):

<title><data:blog.pageTitle/></title>

...with the following code:

<b:if cond='data:blog.pageType != "item"'>
<title>My site | This is a short description</title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>


...and add Meta tag description below the previous <b:if> statement.

<b:if cond='data:blog.pageType != "item"'>
<meta name="Description" content="Add here a short description of your site" />
</b:if>

For example on my template I added: "Woork is a popular tech blog mantained by from Antonio Lupetti. Topics focus on web design, tutorials, resources and inspiration", so when someone looking for my blog on Google, search results display the following description:





4. Design custom categories section
By default, categories on Blogger are displayed on one column. If you want to modify the default layout showing labels on two columns instead one column, you have manage manually your labels using this simple trick: adding on your template, for each labels, a link like this:

<a href="http://yoursite.blogspot.com/search/label/Category Name?max-results=max numbers of posts to display">Category Name</a>

For example, to design my categories section I used this code:

<a href="http://woork.blogspot.com/search/label/ajax?max-results=2">Ajax</a>
<a href="http://woork.blogspot.com/search/label/blogger?max-results=2">Blogger</a>
<a href="http://woork.blogspot.com/search/label/coldfusion?max-results=2">Coldfusion</a>
...

...and how you can see on my sidebar the result is:



I know, the process is not automatic and each time you add new categories, you have to udate your template manually... but this solutions renders more flexible template design.


5. Republish Feed RSS to manage recent entries and comments
Personally I don't like Blogger default archive widget. So, on my template I used FeedBurner BuzzBoost service to add a section with recent entries and recent comments. If you have a FeedBurner account login, clik on "Publicize" tab and select "BuzzBoost" service:




Follow instructions on the page and copy and paste BuzzBoost code on your Blogger template, within a new layer with class property = "recentPost" (you can insert this layer, for example, within sidebar):

<div class="recentPost">
/* FeedBurner BuzzBoost Code*/
<script src="http://feeds.feedburner.com/your feed here?format=sigpro" type="text/javascript" ></script><noscript><p>Subscribe to RSS headline updates from: <a href="http://feeds.feedburner.com/Woork"></a><br/>Powered by FeedBurner</p> </noscript>
</div>

To customize recent entries section add a CSS class (recentPost) using, for example, the following code:

.recentPost li{background:url(arrow image URL) no-repeat left top;
padding-left:14px;}

Final result is something like this:



You can repeat the same process to add a new section which contains links to recent comments, simply changing the feed URL.


6. Add custom subtitle to your posts
If you want to add a subtitle to your Blogger post you can use a simple "trick" using CSS. On your Blogger template, create a custom class ".subtitle" (for example, I used this code for Woork's subtitles style):

.subtitle{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:20px;
color:#555555;
line-height:28px;
}

Now, when you add a new post, to add a subtitle, add a div layer with class property = "subtitle" before the post content:

<div class="subtitle">This is a subtitle</div>

This is a screenshot of Blogger Post Editor:




So, add the rest of your post below the div layer and the result is:




7. Add social web buttons
Social web buttons are a extraordinary solution to share and make popular content you write on your blog. Delicious, StumbleUpon and Digg are my preferred social network which drive on my site a lot of traffic but also Mixx, Reddit, Yahoo Buzz!, DZone can help you to increase your visitors. For more info about how to add social buttons on your site take a look at this post for the full list.


Related content
Some Blogger Tips you probably don't know
Blogger Hack: add social buttons to increase your traffic

jueves, 4 de septiembre de 2008

Existen los Bloggers

Visto en Blog And Web

Fernando Tellado (Ciberprensa) nos comparte en uno de sus últimos posts ¿Existen los Bloggers? un compendio de las opiniones que se vertieron durante el foro virtual que se montó con motivo del Día del Blog y en el que tuvo la oportunidad de participar con otros blogueros como Marcelino Madrigal e Iván Lasso. Aquí 10 que rescato, recomendando leer el artículo fuente:
si el que camina es caminante y el que vuela volador… supongo que el que blogea será un Bloger..
… el “objetivo” del blog. Si lo inicias porque tu inquietud es compartir, tu blog será un desestresante, una vía de comunicación, hasta terapia. Si lo inicias para ganar dinero la decepción la tienes a la vuelta de la esquina.
… uno de los mitos sobre los bloggers es decir que aquel que escribe en un blog es un blogger y no siempre es así. La realidad es que hay muchos blogs sin bloggers y muchos bloggers sin blog.
Un Blog sin comentarios es como sentarse en un bar a hablar solo….
Pero eso no quita que bloggear en si es como hacer… yo que sé.. es como andar en bicicleta… te convierte eso en ciclista y vas por ahí presentandote a todo dios como ciclista ??? “Hola soy Paco y soy ciclista”…
Los blogs profesionales es a los blogs lo que las putas de lujo al sexo. Se las follan unos pocos por muchos pavos y los demás babean. Prefiero el sexo amateur.
a mi me dió miedo cuando vi que mis gritos eran escuchados, casi que me quedé muda; luego me adapté. Me sale más barato escribir en mi blog que contratar a un sicoanalista.
Un bloguer es un pobre individuo que disfraza su mediocridad media hora al día consultando sus estadísticas y mirando blogs de tops como si estuviera viendo a la Paris Hilton volviendo a delinquir. ?Un tipo normal que usa un blog es otra cosa.
Lo fantastico del fenomeno Blog es que por primera vez una plataforma permitió que la gente común entrará de lleno a vivir el fenomeno de Internet ya no como simples espectadores sino como participantes activos…
El concepto “bloguer” para mí implica un comportamiento y una forma de hacer que es más que el uso de una herramienta. No es un escultor todo el mundo que pica piedras, y no todos los que usan un pico o un cincel son escultores.

jueves, 24 de julio de 2008

Solución a algunos problemas con los formularios de comentarios

extraido de VAgabundia

Ha habido algunos problemas en ciertas plantillas que parecen haber copiado y pegado los códigos para agregar el formulario de comentarios incrustado debajo de los posts; no tienen errores de sintaxis, Blogger los acepta pero, aún así no funciona y lo que siguen viendo debajo de los comentarios es un enlace que suele decir Publicar un comentario en la entrada pero no aparece el formulario de envío.

Si se fijan, ese enlace apunta a:

http://nombreBlog.blogspot.com/XXXX/XX/tituloPost.html#comment-form

Por lo que he visto después de varias consultas, esto, se debe a que el segundo código está mal ubicado ya que la explicación decía busquen:
<p class='comment-footer'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:postCommentMsg/>
</a>
</p>
y lo reemplazan por el contenido de este archivo de texto

El problema es que no todas las plantillas poseen la misma estructura y que el dato importante a buscar es este:
<a expr:href='data:post.addCommentUrl'
expr:onclick='data:post.addCommentOnclick'>
Si buscan sólo esa línea, es probable que encuentren dos iguales pero ubicadas en sectores diferentes. Una se encuentra en:
<b:includable id='backlinks' var='post'>
la otra en:
<b:includable id='comments' var='post'>
La primera es para los backlinks y la segunda para los comentarios; el que debemos cambiar es el segundo y no siempre está entre las etiquetas <p class='comment-footer'> y </p>, puede estar entre etiquetas <div class='comment-footer'> y </div> o etiquetas <hx class='comment-footer'> y </hx>; puede tener otro nombre de clase, realmente, pueden haber muchas variantes y es difícl enumerarlas todas.

Si ya hicieron los cambios y ven el enlace al que me refiero y no ven el formulario incrustado, lo más probable es que ese segundo código esté en en sector de backlinks y no en el sector de comments. Así que, lo que debe hacerse es cambiarlo de lugar, restaurar el que cambiaron y buscar el otro que es el que debe cambiar.

En resumen, ese segundo código es el que MUESTRA el formulario y ese DEBE estar dentro de <b:includable id='comments' var='post'>



Insertar el formulario de comentarios en plantillas modificadas - mas tips

Sacado de Blogandweb

Hace unos días que Blogger la opción de agregar el formulario de comentarios en la misma página, una gran noticia pero que no se aplica de forma automática en los blogs que usan plantillas modificadas previamente. Para estos casos hay que introducir modificar un código manualmente. El proceso es el siguiente:




  1. Entrar a Blogger in Draft (No blogger normal).

  2. Ir a la pestaña “Opciones” y posteriormente a la opción “Comentarios”.

  3. Ahí encontraran una nueva sección “Ubicación del formulario de comentarios” con las opciones:


    Donde se selecciona la marcada en la imagen.


  4. Guarda los cambios. Ahora dirígete a la pestaña “Diseño” y posteriormente a la opción “Edición de HTML”. Ahí marca la opción “Expandir plantillas de artilugios”.

  5. Ahora busca el siguiente código:
    <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>


    Nota: Si encuentras dos códigos iguales a este, el indicado será el que se encuentre dentro de: <b:includable id='comments' var='post'> , es decir, que este código estará unas lineas arriba del buscado. Si encuentras solo una vez el código, continua normalmente.


    Y remplázalo con el siguiente:


              <b:if cond='data:post.embedCommentForm'>
    <b:include data='post' name='comment-form'/>

    <b:else/>
    <b:if cond='data:post.allowComments'>
    <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
    </b:if>

    </b:if>


  6. Guarda los cambios en la plantilla y tendrás a disposición tu nuevo formulario de comentarios.


Nota: La variación en el diseño de las plantillas puede causar algunas pequeñas diferencias el proceso, si tienes alguno problema con este método, puedes consultar las aclaraciones hechas en Blogger Buster o en Vagabundia.

domingo, 29 de junio de 2008

Entrevista a Darren Rowse de ProBlogger.net

Sacado de el Blog del Piloto

Hace unas semanas leí una interesante entrevista que hacía Guy Kawasaki a Darren Rowse, autor de ProBlogger.net, considerada como una referencia en el mundo de los blogs profesionales. En esta entrevista Darren Rowse desnuda la realidad de bloguear para hacer dinero respondiendo a las preguntas de Guy Kawasaki.
Sin querer hacer una traducción literal de la entrevista, recogeré las preguntas realizadas y la esencia de las respuestas. Resalto aquellas que me parecieron más interesantes para reducir la lectura a los que lo deseen:

1. ¿Cuánto puede realmente ganar un bloguero trabajando duro y con un buen contenido? Aunque la mayoría de los blogueros lo hacen por diversión u otras razones personales, sí existen blogueros que ganan dinero. No obstante, el porcentaje de los que realmente ganan mucho dinero es muy pequeño. Darren comenta que en unas encuestas que hizo la mitad de los blogueros no llegaban a 100 dólares mensuales.

2. Para la mayoría de blogueros, ¿cuál es el escenario más probable de beneficios? Un escenario muy positivo es que un bloguero después de un par de años de duro esfuerzo pueda llegar a un punto en el que del contenido de su blog pueda obtener ingresos que complementen su sueldo principal. No obstante, Darren recomienda que se pongan metas asequibles a corto y medio plazo y luego se eleven a medida que se superan.

3. ¿Qué piensas de la política de Seth Godin de no permitir comentarios en su blog? Le funciona muy bien. En su caso, por su reputación incluso genera un efecto de viralidad ya que otros blogueros para contestarle tienen que publicar una entrada en su blog haciendo un link al blog de Seth.

4. ¿Y de la política de Valleywag de estar “aprobado” para poder dejar comentarios? Entiendo que es para evitar la gestión del spam. Akismet ha bloqueado cerca de 4 millones de mensajes de spam en ProBlogger. Al igual que en la pregunta anterior Darren reconoce que el resultado no ha sido malo, pero que cree que el impacto en un blog más joven podría ser muy negativo.

5. ¿A cuantos feeds de blogs estás suscrito? Unos 650, aunque está en fase de reducción. Ha reducido 50 en la última semana y planea reducir a la mitad en el próximo mes.

6. ¿Cuáles son tus tres favoritos? Chris Brogan sobre medios sociales. No se presenta como un experto sino como una persona en constante aprendizaje. ZenHabits ya que a pesar de ser relativamente nuevo trata temas que están relacionados con su vida estresante (productividad). Lifehacker que siempre aporta algo para mejorar su vida.

7. ¿Cuánto debería preocupar a una compañía lo que se diga de ella en la blogosfera? Las compañías deberían, al menos, saber lo que se dice sobre ellas, especialmente teniendo en cuenta las excelentes herramientas disponibles. Alcanzado este punto el desafío es saber si y cómo contestar. Hay muchas oportunidades, pero también se puede meter la pata.
8. ¿Cuál es el kit de supervivencia para el nuevo bloguero? Siendo usuario de Mac propone usar b5media como hosting especializado en blogs (del que él es socio) y Ecto como editor de blogs. También utiliza Imagewell para editar imágenes, twhirl como cliente twitter, skype como sistema de comunicación, google reader como lector rss y gmail para el email.

9. ¿Qué porcentaje de los 46.695 suscriptores por Feedburner crees que realmente leen tus entradas? Ojalá hubiera una mejor medida. Cree que muchos leerán por encima y que pocos leerán sus entradas en detalle.

10. ¿Cuantos blogueros crees que pueden estar ingresando 100.000 dólares al año con sus blogs? No sabe, estima que algunos miles viven de o tienen los blogs como principal fuente de ingresos, pero de éstos cuántos ganan 100.000 dólares lo desconoce.

11. ¿Entonces por qué bloguear? Lo mismo se puede preguntar de otros temas, como por ejemplo los deportes. La gente lo hace por diversas razones, de las cuales ganar dinero es sólo una de ellas. Otras son por diversión, crear una presencia online, encontrar novio/a, networking…
12. ¿Qué sucedería si una persona con un blog con muchos seguidores dejara de proveer un feed RSS? Además del lío que se podría montar, perdería una gran parte de clientes, principalmente aquellos que leen en los agregadores. No obstante los más fieles seguirían.

13. ¿Cuál es tu reacción cuando un lector te amenaza con dejar de leer tu blog? Se interesaría saber por qué y pediría disculpas si ve que ha podido ofenderle de algún modo, y en todo caso le desearía que encuentre lo que realmente está buscando.

14. Además de los anunciantes ¿le importa todavía a alguien Google Page Rank? A juzgar por los mails que recibe cree que sí, aunque no debería. Reconoce que a los blogueros les suele importar el poder ver cómo lo que hacen tiene algún impacto.

15. ¿Se engañan los anunciantes sobre la importancia de Page Rank? Cree que Page Rank perderá protagonismo frente a otras métricas como comscore.

16. ¿Qué harías si fueras Yahoo!? No se muestra muy contento con lo que Yahoo! aporta a sus usuarios frente a Google que realmente está desarrollando productos útiles.

17. ¿Qué harías si fueras Technorati? Si fuera technorati enfocaría sus esfuerzos en colaborar con los blogueros más que en desarrollar productos para los blogueros
18. ¿Cómo puede una PYME usar los blogs para incrementar su éxito? Bloguear no es sólo para ganar dinero. Preguntando a sus lectores lleguó a las siguiente lista:
1. Establecer marca
2. Dar voz a los empleados
3. Llevar el marketing más allá del alcance local
4. Crear una relación con los clientes
5. Construir una relación basada en la confianza
6. Equilibrar el campo de juego para los pequeños jugadores ya que los blogs se “rankean” bien en los buscadores
7. Conseguir información del mercado
8. Proveer de relaciones públicas a un coste ajustado


A los lectores blogueros les pregunto por qué bloguean y si ganan dinero con sus blogs.

miércoles, 28 de mayo de 2008

Quitar el Nav Bar o la Barra de Arriba de los Blogs de Blogger

Via Observadores Webs

Solo debes poner esto

.navbar {
display:none;
}


Despues de algo similar a esto
/*
-----------------------------------------------
Blogger Template Style
Name: Denim
Designer: Darren Delaye
URL: www.DarrenDelaye.com
Date: 11 Jul 2006
-----------------------------------------------
*/


Eso es todo
te quedara algo como esto

-----------------------------------------------
Blogger Template Style
Name: Denim
Designer: Darren Delaye
URL: www.DarrenDelaye.com
Date: 11 Jul 2006
-----------------------------------------------
*/
.navbar {
display:none;
}


Si hay dudas dejen comentarios

sábado, 24 de mayo de 2008

Tip SEO: Optimizar los títulos en Blogger

Via BlogandWeb


Hace un tiempo les había comentado sobre un método para optimizar los títulos de las entradas en Blogger que por cambios recientes había dejado de funcionar. Por suerte entre las correcciones periódicas anunciadas en Blogger Buzz agregaron un código que puede ayudarnos con esa tarea igual o mejor que antes.


El código permite mostrar el nombre de una entrada particular sin traer consigo el nombre del blog en primera posición (aspecto que resta posicionamiento en buscadores). De esto modo podemos optimizar los títulos de la siguiente forma.



  1. Dirígete a la pestaña “Diseño” y posteriormente a la opción “Edición HTML”.


  2. Busca el código correspondiente a los títulos:
    <title><data:blog.pageTitle/></title>


  3. Sustituye ese código por el siguiente condicional:
    <b:if cond='data:blog.pageType == "item"'>
    <title><data:blog.pageName/> | <data:blog.title/></title>

    <b:else/>
    <title><data:blog.pageTitle/></title>
    </b:if>



De este modo los títulos para la página principal, archivos y etiquetas quedan sin cambios (nombre blog:elemento) y los títulos de las entradas quedan optimizados (nombre entrada | nombre blog).


¿Porqué no se optimizan también los títulos de página principal, archivos y etiquetas? En la mayoría de los casos no es conveniente pues los buscadores pueden confundir el contenido de una entrada particular por el de una etiqueta o archivo, elementos donde la información no queda estática. Incluso Blogger en el archivo robots.txt los ha excluido automáticamente.



Este detalle no hace magia con los buscadores, pero si les ayuda a clasificar mejor el contenido de tus artículos, además puedes complementarlo optimizando las URLs de tus posts.