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.

miércoles, 29 de abril de 2009

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

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

lunes, 20 de abril de 2009

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;

miércoles, 4 de marzo de 2009

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

viernes, 20 de febrero de 2009

Como poner un Traductor en Blogger

Una vez mas el Escaparate de Rosa tiene respuesta a una pregunta que muchos hacen.

Solo copien este Codigo y ponganlo en un Widget de Html en su blog y veran los resultados.

En donde esta: http://algodeblogs.blogspot.com/ cambien por la direccion de su Blog



<center><img src="http://1.bp.blogspot.com/_8PJ-pgoBhWQ/SQRy1OOWfHI/AAAAAAAAEi8/3lFRIrhKEn0/s320-R/84056383at1.png"/></center>

<form id="translateForm" action="http://www.worldlingo.com/S1790.5/translation" target="_blank">

<input value="ES" name="wl_srclang" type="hidden"/>


<select style="font-size: 70%; width: 160px;" name="wl_trglang">

<option value="EN"/>Español - Inglés

<option value="FR"/>Español - Francés


<option value="DE"/>Español - Alemán

<option value="IT"/>Español - Italiano

<option value="PT"/>Español - Portugués


<option value="RU"/>Español - Ruso

</select>

<input value="http://algodeblogs.blogspot.com/" name="wl_url" type="hidden"/>


<input style="font-size: 70%; width: 50px;" value="Traduce" type="submit"/>

</form>



Para ajustarlo al tamaño de vuestra sidebar, podéis cambiar el ancho de la caja donde dice width: 160px por los pixeles adecuados y en el botón podéis cambiar el texto sustituyendo "Traduce" por lo que queráis mostrar, para adaptar el tamaño del botón al texto que coloquéis en el, cambiáis su tamaño en donde veis width: 50px.

viernes, 13 de febrero de 2009

WordPress 2.8 soportará instalación de themes desde el Panel

Estás leyendo: WordPress 2.8 soportará instalación de themes desde el Panel.
RSS

WordPress 2.8 soportará instalación de themes desde el Panel
Escrito por Marlex el 13 de Febrero del 2009 - Ir a los Comentarios ↓

WordPress LogoLa nueva versión de WordPress, la 2.8, permitirá que los usuarios puedan instalar themes para su sistema de WordPress a través del panel de control de WP, al igual que se puede hacer con los plugins, que se pueden cargar desde el repositorio de WP o desde un archivo ZIP.

Probablemente esta funcionalidad sea poco aprovechada ya que, cabe destacar que muchos de los themes que actualmente se utilizan en los blogs, son editados primero en el ordenador, y luego subido a las instalaciones personalizadas de WP, haciendo inútil el instalarlos directamente desde internet sin antes editarlos primero, aunque sabemos que el panel de edición de themes es bastante útil en ese sentido.



Ejner69, además, publica una captura de la opción de subida de themes a través de un Zip, y también la posibilidad de buscarlos en el directorio de themes de WordPress en su sitio oficial.