Hacktime

Que seria de la web sin este blog

Categorias en forma de Pestañas para Blogger Beta

Posted by yaju en noviembre 3, 2006

Bueno amigos Hoctro’s Place nos trae un nuevo hack, es un poco complicado.
Vamos a realizarlo:

0. Etiquetar nuestros posts, si no sabes como visitad: http://help.blogger.com/bin/answer.py?answer=44498&topic=9084

1. Dirigirnos a: Plantilla–Edicion de Html–Expandir plantillas de artilugios

2. Modificar esta linea:
<b:section class=”header” id=”header” maxwidgets=”1″ showaddelement=”no”>

por esta:

<b:section class=”header” id=”header” maxwidgets=”2” showaddelement=”yes“>

3. Antes de: ]]></b:skin> colocar este codigo:

/*- Menu Tabs F */

#tabsF {
float:left;
width:100%;
font-size:80%;
line-height:normal;
border-bottom:1px solid #000;

}
#tabsF ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsF li {
display:inline;
margin:0;
padding:0;
}
#tabsF a {
float:left;
background:url(“http://www.anniyalogam.com/labeltabs/tableftF.gif&#8221;) no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsF a span {
float:left;
display:block;
background:url(“http://www.anniyalogam.com/labeltabs/tabrightF.gif&#8221;) no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}
/* Commented Backslash Hack hides rule from IE5-Mac */
#tabsF a span {float:none;}
/* End IE5-Mac hack */
#tabsF a:hover span {
color:#FFF;
}
#tabsF a:hover {
background-position:0% -42px;
}
#tabsF a:hover span {
background-position:100% -42px;
}

4. Por ultimo buscamos el siguiente codigo:

<b:widget id=’Label1′ locked=’false’ title=’Etiquetas’ type=’Label’>
<b:includable id=’main’>
<b:if cond=’data:title’>
<h2><data:title><h2>
<b:if>
<div class=’widget-content’>
<ul>
<b:loop values=’data:labels’ var=’label’>
<li>
<b:if cond=’data:blog.url == data:label.url’>
<data:label.name/>
<b:else/>
<a expr:href=’data:label.url’><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>

<b:include name=’quickedit’/>
</div>
</b:includable>
</b:widget>

Y lo cambiamos por:


<b:widget id=’Label1′ locked=’false’ title=” type=’Label’>
<b:includable id=’main’>
<div id=’tabsF‘>
<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>
<!– <b:include name=’quickedit’/> –>
</div>
</b:includable>
</b:widget>

Listo ya tenemos nuestras categorias en forma de pestañas.

Nota: Antes de realizar el paso 4 necesitamos añadir las Eiquetas al blog ¿Como? Nos dirigimos a: Plantilla–Elementos de la pagina–Añadir nuevo elemento de pagina, y añadimos las Etiquetas

28 comentarios to “Categorias en forma de Pestañas para Blogger Beta”

  1. OSO said

    estuve buscando la etiqueta que mencionas en el primer paso pero no la encontre, tengo una que dice ‘main’ en vez de header…es la misma, o no?, si me puedes ayudar por último pa’ saber después de qué viene
    sería genial
    Gracias

  2. Leonel Alvarado said

    La etiqueta existe solo debemos buscar bien.
    Para mayor informacion contactarme a mi mail leonel@live.com

    Gracias

  3. Erick Jahir said

    hola buen dia, disculpa no encuentro el codigo del paso 4, ya lo busque bien incluso con el buscador de pagina que trae integrado el navegador Firefox y nada, que puedo hacer o que hice mal???

    Saludos y gracias de antemano

  4. Leonel Alvarado said

    El paso numero 4 puede cambiar, intente buscando una parte del codigo por ejemplo buscando una parte del codigo como la primera linea o la mitad de la primera linea.

    Y despues cambiar el codigo, en cualquier caso contacteme a: leonelhack@gmail.com

  5. steppenwolf said

    Me gustaría hacerte una pregunta. ¿Cómo debería hacer, si las labels, las tengo en dos blogs diferentes?
    Te explico:
    Yo tengo mi blog con una página a modo de presentación, desde donde enlazo dos blogs más, uno de cuentos y otro de poesías.
    No se me ocurre como aplicar este truco. Si me das alguna pista, te lo agradeceré.

    Saludos

  6. Gem@ said

    Lo he intentado varias veces, he seguido todos los pasos pero me da error, no consigo ver en vista previa ni guardar los cambios en la plantilla😦

  7. Leonel Alvarado said

    Me puedes mandar el codigo html de tu blog a mi mail. leonelhack@gmail.com

  8. Junio said

    Bueno… sólo llevo cosa de dos meses con esto de los blogs… pero stoy aprendiendo mucho. Y me divierte:

    .- gracias a vosotros, y

    .- gracias a que… soy bastante “osada” con eso de toquetear la plantilla:

    En este caso, como no me salía por ninguna parte la tercera parte del código, y pensando un poco donde debía ir lo que, supuestamente, no estaba en mi plantilla, pues… pensé que el sitio más idóneo era justo detrás de la primera parte del código.

    ¡Y resultó!

    Es decir: primera parte y tercera; una detrás de la otra. Sin más.

    Y… confieso que, dependiendo de lo que vea en “vista previa”, hay veces que no cambio al “yes” del showaddelement y lo dejo como está… la diferencia sólo la veo en que me quedan las categorías perfecta y horizontalmente ordenadas o me sale alguna en vertical (a mí eso me gusta más).

    ¡Ah!: las mías son todas plantillas de esas que diseña y ofrece el panel de blogger-Beta: tengo la 2Round,por ejemplo.
    Y en todas, he podido añadir las categorías de esta entrada, en la forma que señalo.

    Es uno de los trucos más estupendos de este blog🙂

    Un saludo a todos.

  9. Gerizzan said

    Hola, llevo unos cuantos dias bucendo en este blog y les felicito.

    Sobre este truco queria preguntar como seria posible adaptarlo para que sólo saliesen las “labels” que nos interesen, y no todas. Digamos que lo que quiero seria tener “botones” que utilicen ese efecto, y en cada “boton” poner sólo las “labels” que yo elija, y no todas porque ocupan mucho espacio debajo del encabezado.

    Un saludo

  10. Nalath said

    Yo modifico todos los códigos, pero me dice que se me elimina head1…
    No se me ve la cabecera!

  11. Leonel Alvarado said

    Entonces intenta omitiendo el paso numero 2. Que tengas buen dia.

  12. bruno said

    hola me llevo mirando ya durante una hora y pico el codigo y no encuentro el 4 paso…nose si sera por falta de etiquetas:S.
    Tambien busque parte del codigo como comentas aqui peor nada, yo no veo nada con los labels…
    si puedes comentarme algo lo agradeceria.
    un saludo y gracias

  13. Leonel Alvarado said

    Pues intenta dirigiendote a:

    Plantilla–Elelmentos de la pagina–Añadir elelmentos de pagina

    Has click en añadir nuevo elemento y añade las “Eriquetas” e intenta a seguir los pasos de nuevo.

  14. Pedro L. Ferrari said

    Hola Leonel

    Queria agradecerte la información contenida en este post.
    Si bien tuve algunas dificultades en la instalación de las pestañas en cuanto a su tamaño que debí corregir modificando algunos valores propuestos, me resultó!!

    GRACIAS!!

  15. Lord Henry said

    Una pregunta. ¿Puedo elegir qué etiquetas van a aparecer en las pestañas, o sí o sí se verán todas las etiquetas que tengo? Porque me gustaría poner sólo las cinco o seis grandes categorías en las que se divide el blog.

    Gracias de antemano. Un saludo

  16. //Pablnet said

    ojo los que no encuentren el codigo del paso 4… ¿ Pusieron Expandir plantillas de artilugios? a mi me pasó😄. Suerte

  17. Tu Lugar mi Lugar. En Soledad said

    busque este tutorial un monton de veces en miles de paginas y aquie lo encontre muchas gracias a quienes componenn este blog ..
    me costo un poco por que no soy programdora.. solo recien empiezo mi estudio en diseño en comunicacion visual.. asi que ceroo d programacion pero cada vez me gusta mas!! =)

    Espero q sigan bien besotes!

    Desde argentina
    daniela

  18. Lironcillo said

    Hola, me encanta este truco pero a pesar de que hago todo lo que dices, las pestañas me salen apelotonadas en la sidebar en vez de bajo la cabecera. ¿Qué es lo que falla? Me encantaría poder usar estas pestañas…

  19. Lironcillo said

    Creo que ya he encontrado la solución😄

    Gracias por el truco!

  20. ameslari said

    Y cual es la solucion? lironcillo? porque por mas que lo intento no puedo colocar las etiquetas en posicion horizontal arriba bajo la imagen, si no que me salen alineadas perfectamente una encima de la otra😦

    Un ayudita please..

  21. Valkiria said

    Pues bueno, buske y rebuske el kodigo ke dices primero, y no lo enkontre, lo buske bien y nada, no sera ke varia depende la plantilla ke tengas? pues ya hasta me desespere y no lo enkuentro… x_x

  22. Á R T I C A said

    Hola muy bueno el blog, brinda mucha ayuda a gente poco experimentada (como yo :D) bueno estoy igual que OSO y Valkiria, no encuentro la 1er linea que hay q modificar “header” en mi plantilla (Minima Black)y tengo seleccionada Expandir plantillas de artilugios, que solucion tiene??… desde ya gracias…

  23. Valkiria said

    Pues io me salte el primer paso, ya ke no enkontre ese kodigo :S y si salieron los botones, pero no se ve kompleto el nombre :S alguna solucion a eso?

  24. FreeWill said

    Que bueno es este Blog, Gracias por tu ayuda y te invito a que veas el resultado de este hack http://freewill-eureka.blogspot.com Opinador Dañado

  25. Mariana said

    Hola Leonel: he puesto sin problemas las pestañas. La pregunta es: Como puedo ajustar el tamaño para que se vean en la totalidad del blog? Me queda un espacio vacio y se ve antiestetico. Gracias por tu ayuda y saludos…

  26. Mau84 said

    Excelente me funciona perfecto, te recomienda que pongas la aclaracion del paso 4 mas arriba, porque he llegado hasta ahi y tuve que volver todo atras.

  27. lolo... said

    Hola, buen truco, tambien soy nuevo en blogger y la verdad me esta gustando mucho, felicidades esta muy bien su página sigan a delante les deseo lo mejor.

    Y bueno pasando a otras cosas tambien tengo problemas con el paso 4 tengo varias etiquetas de widget que son “header1, Blog1, BloggerButon1, BlogArchive1” cual es la que tengo que borrar para sustituir el codigo que nos dan.

    Muchas gracias y felicidades

  28. lolo... said

    Hola ya funciono, genial gracias ahora solo falta encontrarle un buen lugar y quiza cambiar el color siento que no combina con la plantilla muchas gracias

    saludos.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

 
A %d blogueros les gusta esto: