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.

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

Nota de El Escaparate de Rosa

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

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









Vista "blog"





[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

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:

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.

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

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.

50 Amazing Blogger Tricks & Hacks / 50 Fantasticos Trucos para Blogger

Via TechXav

Have you ever wondered how those bloggers remove the Blogger Navbar? Or how they add a Read More link in their posts?

Well in this article, I’ve post an amazing collection of 50 Amazing Blogger Tricks Hacks which are useful to bloggers using the Blogger platform.

1. Expandable Posts or Read More Hack

2. Recent Posts Widget

3. Recent Comment Widget

4. Top Commentators Widget

5. Remove Label Post Count

6. Add Page Element to Header and Blog Posts

7. Sticky Posts in Blogger

8. Add Images or Icons to Sidebar Links

9. Remove NavBar in Blogger

10. Add Scrollbars to Blog Widgets

11. Add Favicon to Blogger URL

12. Simple Search Widget

13. Wrap Adsense Ads in Post Body

14. Special Effects for Peekaboo Posts

15. Page Navigation Hack for Blogger

16. Uploading Animated .gif Image to Blogger

17. Making Pull Down Menu

18. Add “Print this” Option in your Blog

19. Speed up your Blogger Page Load Time

20. Random Background Image

21. Ratings for Posts

22. TabView Widget

23. Adding a Front Page to your Blog

24. Creating Thumbnail Pictures

25. Adding a BreadCrumb Trail to your Blog Post

26. Showing your Blogger Labels as Vertical Tabs

27. Navigation Bar

28. Add Digg Button to Blogger Post

29. Social Bookmarking Widget

30. Add Signature to your Posts

31. Add Background Music

32. Embed Comment Box Below Blogger Post

33. Remove Word Verification from Blogger Comments

34. Show Blog Post Headers In Archive

35. Disable Right Click on Blog

36. Label Cloud in your Blog

37. E-mail Icon Generator

38. Podcast in Blogger

39. Transparent Background

40. Rounded Corner Headers

41. Insert Powerpoint and PDF Files

42. Flash for Blogger

43. Author Comment Highlighting

44. Control Number of Posts in Label Pages

45. Sidebar Comments Display

46. Show Recent Referrers

47. Language Translation Widget

48. Postpone or Delay your Blog Posts Via E-mail

49. Add Clickable Pictures to your Blog

50. “Email Me” Link

51. Make your Blog DoFollow (Thanks to DoFollow Fan for the tip!)

Menus Menu barra superior con buscador incluido

Extraido del Escaparate de Rosa

Un menú horizontal tipo Navbar para colocar en la parte superior de nuestro blog y que además de los enlaces que añadamos en el, lleva un sencillo buscador incorporado, que funciona muy bien.
Como podéis ver en la imagen de ejemplo, la barra del menú ocupará todo el ancho de la pantalla:



Para colocarlo en nuestro blog solo son necesarios dos simples pasos:

[1] En la parte de "Edición Html" de nuestra plantilla sin expandir las plantillas de artilugios, localizamos la etiqueta ]]> y justo antes pegamos este código CSS:

/*-- CSS Menu Superior-- */
#navtop { background: #dcdcdc ; height: 26px; width: 100%; margin: 0px auto 24px auto; font-family: "Century Gothic", Palatino Linotype, Trebuchet MS, sans-serif; font-variant: small-caps; font-weight: bold; color:#737374; font-size: 14px; border-bottom: 1px solid #afafaf;}
.nav {width: 950px; margin: auto;}

ul.navtop { padding: 0px;}
ul.navtop li { list-style: none; display: inline;}
ul.navtop li a { background: transparent; color:#737374; display: block; float: left; padding: 4px 7px 3px 7px; margin-right: 3px; text-decoration: none; border-right: 1px solid #afafaf; border-left: 1px solid #afafaf;}
ul.navtop li a:visited { text-decoration: none; color: #737374;}
ul.navtop li a:hover { background: #e1477d; color: #ffffff; text-decoration: none; border-right: 1px solid #afafaf; border-left: 1px solid #afafaf; }
ul.navtop li a:active { text-decoration: none; color: #737374; }
ul.navtop li a:focus { color: #41a5c3; outline: 1px dotted #e1477d; }
ul.navtop li.current_page_item a { text-decoration:none; color:#fff; background: #E1477D ; }
ul.navtop li ul { float:left; margin:0; padding:0; }

#searchcont { width: 100%; margin: 12px auto 12px auto; }

#searchform { height:26px; line-height:25px; float:right; margin: 0px; padding: 0px;}
input#s {color: #e1477d; width: 283px; background:#fcfcfc; padding: 2px 4px 2px 4px; border: 1px solid #afafaf;}
input#searchsubmit{ background:#afafaf; color:#fff; font-size:13px; padding: 2px;}

En este código CSS es donde tendréis que cambiar los datos necesarios para modificar el color, tipo de texto, etc. del menú.

[2] Colocaremos ahora el código necesario para que se muestre la "barra menú" en la parte superior del blog y lo haremos justo sobre <div id='header-wrapper'> y si en esa posición el resultado no es el esperado (dependerá del diseño de la plantilla) lo colocaremos después de <body> donde debería de funcionar:

<!-- Menu Superior -->
<div id='navtop'>
<div class='nav'>
<ul class='navtop'>
<li><a href='http://elescaparatederosa.blogspot.com'>Inicio</a></li>
<li><a href='http://draft.blogger.com/profile/06743611108067453905' title='Perfil Blogger'>Sobre mi</a></li>
<li><a href='http://feeds.feedburner.com/blogspot/hnBy' title='Suscribe Feed'>Suscribe Feed</a></li>
<li><a href='mailto:lejaniaimposible@hotmail.com' title='Contactame'>Contacto</a></li>

<li><a href='

http://e[2] Colocaremos ahora el código necesario para que se muestre la "barra menú" en la parte superior del blog y lo haremos justo sobre <div id='header-wrapper'> y si en esa posición el resultado no es el esperado (dependerá del diseño de la plantilla) lo colocaremos después de <body> donde debería de funcionar:

<!-- Menu Superior -->
<div id='navtop'>
<div class='nav'>
<ul class='navtop'>
<li><a href='http://elescaparatederosa.blogspot.com'>Inicio</a></li>
<li><a href='http://draft.blogger.com/profile/06743611108067453905' title='Perfil Blogger'>Sobre mi</a></li>
<li><a href='http://feeds.feedburner.com/blogspot/hnBy' title='Suscribe Feed'>Suscribe Feed</a></li>
<li><a href='mailto:lejaniaimposible@hotmail.com' title='Contactame'>Contacto</a></li>

<li><a href='http://elescaparatederosa.blogspot.com/search/label/?max-results=999' title='Ver todas las entradas'>Ver todas las entradas</a></li>

</ul>
<form action='/search' id='searchform' method='get' style='display:inline;'><input id='search-box' name='q' type='text'/><input id='search-btn' type='submit' value='Buscar'/></form>
</div>
</div>
<!-- Fin Menu superior -->

Tendréis que cambiar en el código mis datos por los vuestros, lo que no os será muy difícil ya que los he colocado resaltados en negrita.lescaparatederosa.blogspot.com/search/label/?max-results=999' title='Ver todas las entradas'>Ver todas las entradas</a></li>
</ul>
<form action='/search' id='searchform' method='get' style='display:inline;'><input id='search-box' name='q' type='text'/><input id='search-btn' type='submit' value='Buscar'/></form>
</div>
</div>
<!-- Fin Menu superior -->

Tendréis que cambiar en el código mis (lescaparatederosa.blogspot.com) datos por los vuestros, lo que no os será muy difícil ya que los he colocado resaltados en negrita.

PAra personalizarlo:

Cambiar el color de la barra aquí:
/*-- CSS Menu Superior-- */
#navtop { background: #dcdcdc ;

Cambiar el color del hover (al pasar el ratón) aquí:
ul.navtop li a:hover { background:#e1477d;

Cambiar el tipo de fuente:
font-family: "Century Gothic", Palatino Linotype, Trebuchet MS, sans-serif;

2440 Temas de Wordpress para descargar cerca de 250 MB

Te gusta wordpress?? pues aca tienes los links para descargarte muchas pero muchas plantillas....

Rapid share links

http://rapidshare.com/files/29218052/wpthemes.part1.rar
http://rapidshare.com/files/29226378/wpthemes.part2.rar
http://rapidshare.com/files/29236225/wpthemes.part3.rar
http://rapidshare.com/files/29240301/wpthemes.part4.rar

Alternate url 1

http://www.lordmax.org/descargas/wpthemes.rar

Alternate url 2

http://ihaslinks.com/upload/2400-wordpress-themes.rar

many themes are free to use for commercial or personnel.
every theme has its own TOS. Just check them when using.

GRacias a:

Free 2400 WordPress Themes - over 250mb