Pestañas automáticas con categorías

tag:blogger.com,1999:blog-1533846826144829986.post-48581930934521788782007-08-14T15:06:00.000+02:002007-09-20T17:58:29.884+02:00Pestañas automáticas con categorías<div align="justify">Este es un código para que, según vayais creando categorías en vuestro blog, se generen automáticamente unas etiquetas horizontales con los nombres, a modo de índice.</div><br /><div align="justify"></div><img id="BLOGGER_PHOTO_ID_5095255653075291666" style="DISPLAY: block; MARGIN: 0px auto 10px; CURSOR: hand; TEXT-ALIGN: center" alt="" src="http://bp2.blogger.com/_0eC4K-qZ7AM/RrX8BUlajhI/AAAAAAAABCw/jvdjTE3AdXg/s400/botones1.jpg" border="0" /><br /><div align="justify"></div><div align="justify">Se entra por Plantilla-->Edición de HTML y se pincha "Expandir plantillas de artilugios". Si las queremos poner en la cabecera, en primer lugar hay que cambiar el valor de maxwidgets para que podamos añadir un nuevo elemento. Esto ya se explicó al comienzo de <a href="http://oloman-cosicas.blogspot.com/2007/05/imagen-con-pestaas-en-cabecera-y-2.html">este otro post</a>.</div><br /><div align="justify">A continuación, en la parte de los estilos, vamos a crear uno nuevo para este tipo de pestañas. Por tanto, el siguiente código hay que ponerlo antes de <span style="color:#ff0000;">]]></b:skin></span></div><br /><div align="justify"></div><div align="center"><textarea rows="4" cols="50">#etiquetasA {float:left;width:100%;font-size:80%;line-height:normal;}#etiquetasA ul {margin:0;padding:0px 0px 0 0px;list-style:none;}#etiquetasA li {display:inline;margin:0;padding:0;}#etiquetasA a {float:left;background:url("http://bp0.blogger.com/_0eC4K-qZ7AM/Rq83AUlaizI/AAAAAAAAA9A/rTkB_e0x14A/s400/boton+izquierdo.jpg") no-repeat left top;margin:0;padding:0 0 0 4px;text-decoration:none;}#etiquetasA a span {float:left;display:block;background:url("http://bp0.blogger.com/_0eC4K-qZ7AM/Rq83AUlaiyI/AAAAAAAAA84/CB64V0zkyEc/s400/boton+derecho.jpg") no-repeat right top;padding:5px 15px 19px 6px;color:#ffffff;}/* Commented Backslash Hack hides rule from IE5-Mac */#etiquetasA a span {float:none;}/* End IE5-Mac hack */#etiquetasA a:hover span {color:#ffffff;}#etiquetasA a:hover {background-position:0% -42px;}#etiquetasA a:hover span {background-position:100% -42px;</textarea></div><br /><div align="justify">Una vez creado el estilo, hay que buscar el código del widget donde se generan automáticamente las categorías y cambiarlo. Casi todos los blogs lo incorporan en sus plantillas, pero si no lo tuvierais creado tendríais que hacerlo antes de cambiar nada. Eso es en Plantilla-->Elementos de página-->Añadir un elemento de página-->Etiquetas</div><br /><div align="justify">El artilugio contiene la expresión</div><div align="justify"><span style="color:#ff0000;"><b:widget id='Label1' locked='false' title='Etiquetas' type='Label'></span></div><br /><div align="justify">Hay que sustituir todo lo que está entre esta línea y <span style="color:#ff0000;"><b:/widget ></span>, ambas inclusive, por lo siguiente:</div><br /><div align="center"><textarea rows="4" cols="50"><b:widget id='Label1' locked='false' title='Indice - Temas' type='Label'><b:includable id='main'><div id='etiquetasA'><ul><li><a expr:href='data:blog.homepageUrl'><span>Inicio</span></a></li><b:loop values='data:labels' var='label'><li><a expr:href='data:label.url'><span><data:label.name/></span></a></li></b:loop></ul></div></b:includable></b:widget></textarea></div><br /><div align="justify">Lo normal es que las etiquetas las tengais en la barra lateral, pero el diseño de estas hacen que el lugar idóneo sea en la cabecera o en el pie de página. Para moverlas, en Elementos de Página hay que pinchar y arrastrar el artilugio hasta el lugar deseado.</div><br /><div align="justify">Las dos imágenes que se usan como fondo (background:url...) son las que forman los botones. Este código "corta" la imagen del botón por la izquierda, según la longitud del nombre de categoría que contiene la etiqueta. Por eso hace falta una segunda imagen que reproduce la parte izquierda del botón y que se superpone. Apenas de unos pixels de ancha.</div><br /><div align="justify">Para hacerlas con vuestro propio diseño, teneis que construir una imagen de 84 pixels de alto. En los 42 de arriba iría el botón original y en los 42 de abajo, el que quereis que muestre al pasar el ratón por encima. Luego los almacenais en un post en borrador o en cualquier servidor de imágenes, tomando nota de la dirección. Estos son los que se han usado en este ejemplo:</div><br /><div align="center"><img id="BLOGGER_PHOTO_ID_5095260377539317314" style="MARGIN: 0px 10px 10px 0px; CURSOR: hand" alt="" src="http://bp3.blogger.com/_0eC4K-qZ7AM/RrYAUUlajkI/AAAAAAAABDI/NiMuOxlonLk/s400/boton+izquierdo.jpg" border="0" /><img id="BLOGGER_PHOTO_ID_5095260377539317298" style="MARGIN: 0px 10px 10px 0px; CURSOR: hand" alt="" src="http://bp3.blogger.com/_0eC4K-qZ7AM/RrYAUUlajjI/AAAAAAAABDA/YtCmOUx8tUw/s400/boton+completo.jpg" border="0" /></div><br /><div align="justify">Con 180 pixels de ancho debe sobrar para la gran mayoría de etiquetas. Si teneis etiquetas muy largas, hay que darle más anchura. Como se ha explicado, hay que hacer una segunda imagen para la parte izquierda. Para ello, simplemente crear una nueva imagen con el recorte de la parte "diferente" del botón.</div><br /><div align="justify">Experimentando con el código y con el tamaño de alto de las imágenes, podeis conseguir otro tamaño de etiquetas-botones. Previa puesta a salvo de vuestra plantilla mediante una copia de seguridad...como siempre.</div><br /><div align="justify"><img id="BLOGGER_PHOTO_ID_5095256817011428898" style="DISPLAY: block; MARGIN: 0px auto 10px; CURSOR: hand; TEXT-ALIGN: center" alt="" src="http://bp1.blogger.com/_0eC4K-qZ7AM/RrX9FElajiI/AAAAAAAABC4/Lk8hubP_-4E/s400/botones2.jpg" border="0" /></div><br /><div align="justify">Más información:</div><div align="justify"><ul><li><a href="http://oloman-cosicas.blogspot.com/2007/05/imagen-con-pestaas-en-cabecera-1.html">Otra manera</a> de diseñar etiquetas</li><li>Idea cogida de <a href="http://gemablog-.blogspot.com/">GemaBlog</a> </li></ul></div><div class="blogger-post-footer"><hr/><a href="http://oloman-cosicas.blogspot.com">Cosicas</a></div>Olomanhttp://www.blogger.com/profile/11489455592466904176noreply@blogger.com