BUSCA Y ENCONTRARAS

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.