BUSCA Y ENCONTRARAS

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;