Mostrando Links como pestañas
Este es un pequeño, y poco complicado hack que permitira darle estilo a tus links, la utilidad de esto nos ayuda a tener varios links que podemos añadir y borrar de una manera rapida y sencilla utilizando el widget que nos proporciona blogger, pero con un mejor estilo, podemos tener los links de manera horizontal o vertical, exactamente como las categorias.
Ahora bien, los pasos a realizar son los siguientes (basados en pestañas verticales):
Nos dirigimos a:
Plantilla--Elementos de la pagina
Luego clickamos en "Añadir un nuevo elemento de pagina" y seguidamente escojemos el widget "Lista de Vinculos"
Blogger le otorga un identificador a cada "widget" que nosotros creamos, dependiendo del numero de widgets que tengamos en nuestro blog, por ejemplo si fuera la unica "Lista de Vinculos" que tengamos en nuestro blog, el codigo seria el siguiente:
<b:widget id='LinkList1' locked='false' title='Links' type='LinkList'/>
Notese que el identificador corresponde a "LinkList1" el cual nos indica que es la primera Lista de Vinculos creada. (paso ya antes mencionado)
Ahora escogemos el estilo de las pestañas (verticales):
En este caso tenemos 14 diseños el cual nos los brinda csspicstock.blogspot.com, yo escogi el Menu4:
/*- Menu 4--------------------------- */
#menu4 {
width: 200px;
margin: 10px;
border-style: solid solid none solid;
border-color: #000;
border-size: 1px;
border-width: 1px;
}
#menu4 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
#menu4 li a:link, #menu4 li a:visited {
color: #CCC;
display: block;
background: url(http://photos1.blogger.com/blogg1600/menu4.gif);
padding: 8px 0 0 10px;
}
#menu4 li a:hover {
color: #FFF;
background: url(http://photos1.blogger.com/1600/menu4.gif) 0 -32px;
padding: 8px 0 0 10px;
}
El cual colocamos antes de ]]></b:skin>
Ahora si vamos a comenzar con lo mas complicado...
Nos dirigimos a:
Plantilla--Edicion de HTML--Expandir plantillas de artilugios
Buscamos el siguiente codigo:
<b:widget id='LinkList1' locked='false'
title='Links' type='LinkList'>
<b:includable id='main'>
<b:if
cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li><a
expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
Y lo reemplazamos con el siguiente:
<b:widget id='LinkList1'
locked='false' title='Links' type='LinkList'>
<b:includable id='main'>
<div id='menu4'>
<b:if
cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li><a
expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
Recordad que LinkList1 corresponde al identificador de la Lista de Vinculos (como antes mencionado)
Listo, Guardamos todos los cambios y ya tenemos nuestras links en forma de pestañas ;)
Web Hosting en Mexico
11 comments:
Tengo problemas, no me deja guardar la plantilla , me dice q no sta correcta
pd: no tengo mu claro lo de linklist, a mi me pone labe12 en vez de link list, tengo q cambair en el codigo cuando pone linklist x labe12 cada vez q salga?
Me ha servido mucho tu pagina web, y ahora quiero aplicar esto de laspestañas, porfavor me puedes ayudar ;
Primero si no te molesta de a pasos, voy a añadir una lista de vinculos y losprimeros codigos que me das, ¿donde los debo poner?... más que nada es eso, todavia no he pasado a "lo más difícil" que es al cambiar el codigo del html,, pero pormientras , me ayudas con esto?
HOLA MIRA ME SALE ESTE MENSAJE DE ERROR NO PUEDO! PONER LAS PESTAÑAS ME PODES AYUDAR
No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
Mensaje de error de XML: The element type "div" must be terminated by the matching end-tag "
Simplemente cierren la etiqueta
/*- div que quedo abierta--------------------------- */
/*- colocando un /div despues de b:include name='quickedit --------------------------- */
Hola, asi tal como está el código saldrá ese mensaje de error: "No se ha podido analizar su plantilla..." pues como dice ese mensaje falta cerrar un elemento div. Ese elemento div que falta cerrar es el de la cuarta línea (el div que encierra al menu4). Así que una forma de resolver sería cerrarlo agregándole una barra oblicua -slash- despues de la comilla de cierre. Lo hice, ya no apareció el mensaje de error pero tampoco he visto cambio en mi blog, es verdad que aparecen ordenados verticalmente los links pero asi de una forma nada llamativa, nada estetica. Es decir ese codigo css (el famoso menu 4) que ha aportado, que ha hecho de bueno? no lo tengo claro.
revisa mi blog funciona, al final esta una larga lista que hice con este truco
Corrobore el código no hay ningún cambio aparte del que comente y que ya conoces bien, simplemente añadir el elemento < / div > en el lugar que indico, después de < b : include name=' quickedit ' / > y al lado del elemento < / div > que está presente en el código, con lo cual son dos elementos de cierre y no uno. De todas formas para que te convenzas visita el blog tengo el truco en dos listas de vínculos. Suerte y paciencia.
hola he seguido todos los pasos que me dices, primero el codigo de las pestañas y luego he cambiado el otro codigo he guardado y todo bien, pero en el blog nosalen las pestañas ¿me queda hacer algo mas? ayuda porfa
hola hice todo como mandabas y guarde y perfecto pero no me salen pestañas ¿queda algo por hacer? como salen las pestañas? gracias
Revisa mi blog y ve a administrar ese listado es como te deberían aparecer tus pestañas, por lo demás si hiciste todo deberá estar bien, revisa que tipo de pestañas escogiste.
este esta bien complicado XD
Post a Comment