Como colocar categorías (Etiquetas) en forma de pestañas, Blogger


Lo primero que deben hacer es colocar un gadget con las etiquetas, si es que no lo tienen. Para eso deben ir a Diseño, Elementos de pagina, y agregan gadget, ahí deben Añadir un gadgetEtiquetas” que se encuentra en la lista que aparecerá.

etiquetas_tabs_1.JPG

Luego debemos ir a Edicion de html, y seleccionar el cuadro de Expandir Artilugios.

etiquetas_tabs_2.JPG

Ahora busquemos en el código la parte que dice:

  1. <b class='header' id='header'>

Y la sustituimos por:

  1. <b class='header' id='header'>

Ahora tenemos que buscar la parte que dice

  1. ]]&gt;</b>

Y justo arriba de esto pegar este código:

  1. /*- Menu Tabs F */
  2. #tabsF {
  3. float:left;
  4. width:100%;
  5. font-size:80%;
  6. line-height:normal;
  7. border-bottom:1px solid #000;
  8.  
  9. }
  10. #tabsF ul {
  11. margin:0;
  12. padding:10px 10px 0 50px;
  13. list-style:none;
  14. }
  15. #tabsF li {
  16. display:inline;
  17. margin:0;
  18. padding:0;
  19. }
  20. #tabsF a {
  21. float:left;
  22. background:url("http://www.anniyalogam.com/labeltabs/tableftF.gif") no-repeat left top;
  23. margin:0;
  24. padding:0 0 0 4px;
  25. text-decoration:none;
  26. }
  27. #tabsF a span {
  28. float:left;
  29. display:block;
  30. background:url("http://www.anniyalogam.com/labeltabs/tabrightF.gif") no-repeat right top;
  31. padding:5px 15px 4px 6px;
  32. color:#666;
  33. }
  34. /* Commented Backslash Hack hides rule from IE5-Mac */
  35. #tabsF a span {float:none;}
  36. /* End IE5-Mac hack */
  37. #tabsF a:hover span {
  38. color:#FFF;
  39. }
  40. #tabsF a:hover {
  41. background-position:0% -42px;
  42. }
  43. #tabsF a:hover span {
  44. background-position:100% -42px;
  45. }

Finalmente debemos buscar y sustituir el código:

  1. <b id='Label1' title='Etiquetas'>
  2. <b id='main'>
  3. <b>
  4. <h2><h2>
  5. <b>
  6. <div class='widget-content'>
  7. <ul>
  8. <b>
  9. <li>
  10. <b>
  11.  
  12. <b />
  13. <a></a>
  14. </b>
  15. ()
  16. </li>
  17. </b>
  18. </ul>

Por lo siguiente:

  1. <b id='Label1' title='Etiquetas'>
  2. <b id='main'>
  3. <div id='tabsF'>
  4. <ul>
  5. <li><a><span>Inicio</span></a></li>
  6. <b>
  7. <li><a><span></span></a></li>
  8. </b>
  9. </ul>
  10. </div>
  11. </b>
  12. </b>

Y Listo!! La plantilla esta lista, si queremos que esto aparezca en la parte superior del blog solo debemos arrastrarlo de la sidebar hacia la parte superior, esto debes hacerlo en Elementos de pagina donde verás todas las secciones de tu blog:

etiquetas_tabs_3.JPG

Este es el resultado en un blog de pruebas, con la plantilla minima blue:

etiquetas_tabs_4.JPG

Puedes descargar la plantilla Minima Blue con los cambios ya realizados:
Descargar (boton derecho de mouse, guardar como…)

Artículos Relacionados

Soy Blogger desde hace mucho tiempo. Inicialmente este blog se creó para entregar tutoriales paso a paso a las personas que estuvieran ingresando al mundo online. Muchos de mis tutoriales no requieren de conocimiento previo ni habilidades, la idea siempre fue tender una mano a los que usualmente no entienden nada. Como pueden ver estuvo bastante abandonado por varios años pero ahora lo retomaré con otro énfasis, explicación de herramientas mas complejas, y en la medida de lo posible se irán renovando los post que con el tiempo han quedado obsoletos.

About patriram

Soy Blogger desde hace mucho tiempo. Inicialmente este blog se creó para entregar tutoriales paso a paso a las personas que estuvieran ingresando al mundo online. Muchos de mis tutoriales no requieren de conocimiento previo ni habilidades, la idea siempre fue tender una mano a los que usualmente no entienden nada. Como pueden ver estuvo bastante abandonado por varios años pero ahora lo retomaré con otro énfasis, explicación de herramientas mas complejas, y en la medida de lo posible se irán renovando los post que con el tiempo han quedado obsoletos.

Leave a Reply

Your email address will not be published. Required fields are marked *