jueves, 28 de mayo de 2009

El formulario de comentarios (forma sencilla) si tu plantilla es muy antigua

Habíamos visto anteriormente como implementar el formulario de comentarios en las plantillas que llevaban tiempo online o con bastantes modificaciones.



El problema surge cuando algunos modelos de plantilla no tienen incorporado el código que debemos localizar en la explicación anterior (es el caso de la Aspire por ejemplo, o de muchas de las plantillas adaptadas de Wordpress).



Hay otro método aún más sencillo y que parece funcionar sin problemas:



[1] Localizamos esta línea de código en la plantilla con los artilugios expandidos:


<b:include data='post' name='comments' />


[2] Justo después pegamos esta otra línea de código:

<b:include data='post' name='comment-form'/>


[3] Guardamos cambios.





miércoles, 27 de mayo de 2009

Como colocar el Formulario de comentarios Blogger si tu plantilla es antigua

Ya podemos incluir en nuestro blog un formulario de comentarios "incrustado" en el pie de nuestras entradas al final de los comentarios.



De momento esta opción solamente está disponible en Blogger in Draft que, como ya casi todos sabréis es una especie de "laboratorio de pruebas", donde el equipo de Blogger va añadiendo nuevas funcionalidades que los usuarios podemos probar antes de incluirlas en el Blogger "normal".



Actualización:

La opción ya está incluida en la "Configuración" del panel de Blogger "normal", aunque sigue siendo necesario en algunas plantillas, seguir los pasos de esta entrada para mostrar el formulario.



Disponer de esta opción en nuestros blogs es, de entrada, bastante sencillo:



[1] Accedemos a nuestro panel de Blogger a través de Blogger in Draft.



[2] Una vez allí, pinchamos en la pestaña "Configuración" de nuestro menú y después en "comentarios".



[3] Veremos entonces una nueva opción que dice "Ubicación del formulario de comentarios", ahí marcaremos "Entrada incrustada a continuación":






[4] Si todo ha ido según lo previsto, el formulario debería verse ya debajo de los comentarios de cada entrada:





El formulario será así de sencillo de implementar en los blogs de nueva creación o en los blogs que no hayan personalizado ciertos aspectos de la plantilla.



Si hemos modificado estas partes del código de la plantilla como es mi caso, entonces seguramente aunque habilitemos la opción para mostrar el formulario, este no funcionará.




Como podéis comprobar acabo de implementarlo en El Escaparate y, de momento, parece funcionar correctamente sin necesidad de hacer grandes cambios en el código de la plantilla.



La forma de implementarlo sin necesidad de cambios demasiado complicados, la he encontrado esta tarde guiándome por Blogger Buster, y digo guiándome porque mi plantilla está tan modificada que el código que Amanda nos muestra apenas coincidía con el mio.



Aún así y tomando las debidas precauciones (guardar una copia de la plantilla es imprescindible) no pude resistirme a probarlo.



Os explico como Amanda ha logrado incluir el formulario en su plantilla previamente modificada:



[1] En primer lugar es imprescindible marcar la opción en "Configuración - Comentarios" que ya expliqué al comienzo de esta entrada.




[2]Una vez habilitada la opción y comprobado que el formulario no aparece en nuestro blog, vamos a la parte de "Edición html" de nuestro panel y marcamos la casilla para expandir las plantillas de artilugios.



Tendremos que localizar este código:



<p class='comment-footer'> <b:if cond='data:post.allowComments'> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a> </p> </b:if>



[3] Una vez localizado tendremos que cambiarlo por este otro:



<p class='comment-footer'> <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> </p></b:if>





Notas: Tened en cuenta lo que ya os comentaba antes:



el código que Amanda nos indica no estará igual en una plantilla con modificaciones previas pero si aún así decidís probarlo como hice yo, no os será demasiado difícil encontrar el código correcto si os fijáis bien e incluso si recordáis alguno de los cambios que hicisteis antes en esa zona.



Si habéis incluido la forma de mostrar el antiguo formulario de Blogger debajo de las entradas, tendréis que volver a la configuración original antes de implementar el formulario nuevo.



Por si os sirve de referencia os diré que yo había incluido ahí la imagen con un lápiz que sustituía al "Publicar un comentario en la entrada" y que mi código se veía así:




<p class='comment-footer'> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><img alt='Enlace para comentar' src='http://2.bp.blogspot.com/_sbaQpFxeL1Q/R_4XR7UekbI/AAAAAAAAAJU/rhqHxL2mMLI/s400/



nombrenndn7.jpg' title='Deja tu comentario'/></a> </p> </b:if>





Una vez incluido el nuevo formulario en el blog podemos hacerle algunas mejoras de diseño.

martes, 26 de mayo de 2009

48 trucos para mejorar tu blog alojado en Blogger

Aca algunas cosas imprescindibles para mejorar sus blogs en blogger.

  1. Ajustes básicos para personalizar la plantilla. (4 Truquitos)
  2. Como programar posts futuros.
  3. Títulos de colores en el sidebar.
  4. Como colocar imagen a pie de los post.
  5. Widgets para mostrar el Top Comentaristas.
  6. Como crear un álbum o galería de fotos con Flickr.
  7. Mandar un post a Twitter.
  8. Agregar sidebar extra en la plantilla.
  9. Crear una barra de navegación.
  10. Como utilizar dominio propio.
  11. Como convertir etiquetas en botones.
  12. Agregar paginación.
  13. Como crear un buscador interno.
  14. Como añadirle un favicon a tu blog.
  15. Creando mensajes al azar.
  16. Slideshows con la galería de imágenes o contenido del blog.
  17. Añade imágenes a las etiquetas en Blogger.
  18. Tutorial paso a paso: Migración de Blogger a Worpress.
  19. Tutorial para expandir y/o contraer posts.
  20. Redireccionar un blog en Blogger.
  21. Añadir tag clouds, nube de etiquetas.
  22. Colocar en el sidebar los seguidores de tu blog.
  23. Como agregar entradas relacionadas.
  24. Como agregar Meta Tags.
  25. Como colocar banners 125 x 125.
  26. Crear sitemap y enviarlo a Google y Yahoo.
  27. Armar lista de entradas recientes.
  28. Ultimos comentarios personalizados con iconos.
  29. Firma personal que nunca desaparece.
  30. Imagen delante de “Publicado por”, “Comentarios” y “Etiquetas”.
  31. Personalizar el mensaje de suscripción al feed.
  32. Como Sacar el Título y la Descripción del blog.
  33. Mostrar firma en los feeds de blogger.
  34. Dos columnas en un post.
  35. Botón agregar a favoritos en tu blog.
  36. Crear barra de menu para tu Blog.
  37. Colocar en grande la primera letra de los posts.
  38. Como publicar videos.
  39. Poner comentarios al estilo Wordpress.
  40. Formulario de comentarios estilo Wordpress.
  41. Fecha al estilo Wordpress.
  42. Añade un banner a tu blog y el código para que te enlacen.
  43. Formulario de contacto sin servicios externos.
  44. Colocar columnas en el footer.
  45. Firma en los comentarios del autor.
  46. Como poner emoticonos en los comentarios.
  47. Como mostrar/ocultar vínculos en las entradas.
  48. Ocultar la fecha de las entradas.

lunes, 25 de mayo de 2009

Truco: Añadir tres columnas en la sección del footer (pie del blog)

Nota de El Escaparate de Rosa



[1] Necesitaremos retirar cualquier elemento que tengamos colocado en el footer del blog. Podemos moverlo a la sidebar de forma temporal y, una vez añadidas las tres columnas en el footer, volver a colocarlo en esa sección.



[2] Iremos ahora a la parte del HTML de nuestra plantilla y buscamos, casi al final de su código, estas líneas Sin expandir artilugios:




<div id='footer-wrapper'>

<b:section class='footer' id='footer'/>

</div>




[3] Dependiendo de la plantilla que estemos usando, podría cambiar el código a buscar ("footer" o "footer-wrapper"), en el caso de la Rounders, por ejemplo, hay dos divs en la sección del footer, en cualquier caso, el código que hemos de cambiar es la línea que está resaltada en negrita, sustituyéndola por este código:



<div id='footer-columna-contenedor'>



<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>




<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>

</div>



<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>

<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>

</div>



<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>



<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>


</div>



<div style='clear:both;'/>

<p>

<hr align='center' color='#6633FF' width='90%'/></p>

<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>



<b:section class='footer' id='col-bottom' preferred='yes'>

<b:widget id='Text20' locked='false' title='' type='Text'/>


</b:section>



</div>

<div style='clear:both;'/>



</div>




[4] Añadiremos ahora unas líneas de CSS para controlar la separación de las columnas. Pegamos estas líneas antes de ]]></b:skin>






#footer-columna-contenedor {

clear:both;

}



.footer-columna {

padding: 10px;

}









Vista "editar"


Ejemplo uno







Vista "blog"


Ejemplo dos



[5] Ya podemos guardar los cambios y colocar los elementos que habíamos retirado a la sidebar donde nos parezca mejor.



[6] En el código está incluida una línea de separación entre las tres columnas y el footer antiguo, en el ejemplo podéis ver que se muestra de color azul.


La parte del código que hace que se vea esta línea, es esta:



<hr align='center' color='#5d5d54' width='90%'/>




Podemos cambiar su color en color='#5d5d54'

También podríamos prescindir de ella borrando la línea por completo.



Nota:

Consulta como modificar el diseño de las columnas con CSS

martes, 19 de mayo de 2009

Adicionar espacios extra en la zona de entradas

Entrada sacada de El Escaparate de Rosa







Vamos a ver paso a paso, como incluir una nueva sección sobre y debajo de las entradas dividida en dos columnas. El resultado será algo como esto:



Sección main


Como siempre habrá quien quiera añadir los nuevos espacios solo en la parte de arriba o solo en la de abajo, vamos a ver como hacerlo por separado:




[1] Una vez en nuestro panel de Blogger vamos a la pestaña de Diseño y si tenemos algún gadget añadido sobre o debajo de la zona de entradas, lo retiramos para evitar problemas a la hora de modificar el código, más tarde podemos volver a colocarlos en su sitio de nuevo.



[2] Guardamos cambios.



[3] Vamos a la pestaña de Edición HTML y localizamos el código que pertenece a la sección de las entradas:




<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>


[4] Colocamos el código necesario para la nueva sección de dos columnas en la parte de abajo de las entradas.


Lo haremos en el código anterior de esta manera (el código que hay que añadir está destacado en color verde):



<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 id='main-footer-contenedor'>
<div id='main2' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='main-footer-column' id='main-col1' preferred='yes' style='float:left;'/>
</div>
<div id='main3' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='main-footer-column' id='main-col2' preferred='yes' style='float:left;'/>
</div>
<div style='clear:both;'/>
</div>
</div>



[5] Guardamos los cambios y comprobamos el resultado en la parte de Diseño del panel.



Sección footer




[6] Si lo que queremos es una nueva sección de dos columnas en la parte superior de las entradas, volvemos a situarnos en el código de la plantilla que pertenece a las entradas ( paso [3] ) y añadimos el código necesario (destacado en colo rojo):




<div id='main-wrapper'>

<div id='main-top-contenedor'>



<div id='main-top1' style='width: 50%; float: left; margin:0; text-align: left;'>

<b:section class='main-top-column' id='main-top1' preferred='yes' style='float:left;'/>

</div>



<div id='main-top2' style='width: 50%; float: left; margin:0; text-align: left;'>

<b:section class='main-top-column' id='main-top2' preferred='yes' style='float:left;'/>


</div>

<div style='clear:both;'/>

</div>

<b:section class='main' id='main' showaddelement='no'>

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

</b:section>

</div>



[7] Guardamos los cambios y comprobamos el resultado en la parte de Diseño del panel.




Sección top

miércoles, 6 de mayo de 2009

News: Starting Your First Blog? 29 Tips, Tutorials and Resources for New Bloggers

Link Original: Problogger

Are you starting your first blog? Looking for some tips and advice for new bloggers?

I just received a tweet from @MillerMosaicLLC asking for some links to posts about starting a blog so I thought instead of just replying to her I’d compile the list here as a post for new bloggers. There are literally thousands of posts in the ProBlogger archives for bloggers starting out - but these would be a good place to start.

Posts on Starting a Blog

There is a lot to think about before and during the process of starting your first blog. These tips and tutorials attempt to give you some questions to think about and some advice on how to practically move forward:

  1. 3 Factors to Consider Before Starting a Blog - Maintaining Blogging Momentum
  2. 9 Tips to Start Blogging Successfully
  3. Starting a New Blog? Start With a Mind Map (will help in choosing topics and categories for your blog)
  4. Crawl before you walk: 6 Step-by-step Instructions for Starting your First Blog
  5. 23 Questions for Prospective Bloggers - Is a Blog Right for You?
  6. How to Choose a Niche Topic for Your Blog
  7. Choosing a Blog Platform
  8. Choosing a Domain Name for your Blog

Writing Blog Content

At the core of every successful blog is great content - without it starting a new blog is almost pointless. How you define ‘great’ content will vary from person to person but I generally put it down to content that is unique and useful. Here are a few other tutorials and tips on creating this type of content on your first blog.

  1. Discover Hundreds of Post Ideas for Your Blog with Mind Mapping
  2. 21 Ways to Write Posts that Are Guaranteed to Grow Your Blog
  3. How to Launch a Blog and Have Fresh Content for Weeks
  4. How to Craft a Blog Post

Blog Promotion/Finding Readers

When starting a your first blog one of the most challenging things is that it is hard to find readers. We all want to be read - here are a few tips on how to make this happen and then how to keep those new readers:

  1. 13 Ways to Promote Your Next Blog Post
  2. How I’d Promote My Blog if I Were Starting Out Again
  3. How to Market Your Blog in 2007 (still very relevant)
  4. 19 Strategies for Finding Readers for your Blog
  5. 11 Ways to Find New RSS Subscribers for Your Blog
  6. A Secret to Finding New Subscribers for Your Blog
  7. 21 Ways to Make Your Blog Sticky

Making Money from Blogs

Not all bloggers choose to try to make money from their blogs (I think this is a good thing). But if you’re one that does want to make money from your new blog then here are a few tips and articles for you to start with:

  1. How I Make Money Blogging
  2. How Bloggers Make Money
  3. Make Money Online Blogs - Should You Start One and How to Choose a Profitable Topic
  4. How quickly after starting a blog should I put ads on it?
  5. How Much Should I Charge for my Advertising Space?
  6. A Reality Check about Blogging for Money

Further Reading and Resources on Starting a New Blog

If what I’ve listed above isn’t enough - here are a few other resources for those wanting to invest into starting out with a blog.

  1. ProBlogger the Book - This book (in which I am a co-author) was written for the beginner blogger. It contains up to date and logically ordered advice on starting new and profitable blogs.
  2. Training Programs - Two great courses/coaching programs for new bloggers are Blog Mastermind and Become a Blogger. Blog Mastermind is a paid coaching program that is one of the more comprehensive training resources going around. Become a Blogger is series of free videos and a great free report/roadmap. It also has a paid program which is ideal for those just starting out. Both of these courses are by Yaro Starak - a great blogger.
  3. Archives - there are a lot more posts that are relevant for bloggers starting their first blogs in the archives of ProBlogger. Another good place to find some of them is my Blogging for Beginners Series helpful. I’ve mentioned some of the posts in this series above but there are a lot more ‘beginner’ type tips and articles listed in it.
  4. Recommended Blogging Resources - lastly I’ve put together a page of tools and resources for bloggers. It covers blogging platforms, designs/templates, tools, training and monetization. I hope you find them useful.