Crear índice alfabético y de géneros en WordPress

Jbryan

Jbryan Seguir

Curioso
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
8 Nov 2013
Mensajes
11
Hola soy nuevo en el Foro, y tambien nuevo en Wordpress. :)

me gustaria recibir la ayuda de todos los que esten dispuestos a ayudar :encouragement:
quiero implementar un indice alfabelico (A,B,C,D...,Z,0-9) y Generos (Accion, C.Ficcion,Etc.)
a mi blog de worpress que recien estoy creando sobre animes.

Ejem.
weee.jpg


si alguien conoce un tutorial sobre este tema, se lo pido de favor que me lo enviara para seguir aprendiendo.
y si alguien quiere ofrecer sus servicios (acerlo por mi), yo les puedo dar unos cuantos dolarillos a su cuenta PAYPAL en forma de agradecimiento. espero puedan ayudarme.
 

Adjuntos

  • weee.jpg
    weee.jpg
    55,5 KB · Visitas: 72
JuanM32

JuanM32

Zeta
Verificación en dos pasos activada
Desde
27 Sep 2009
Mensajes
1.831
Por favor, ten en cuenta 📝 que si deseas hacer un trato 🤝 con este usuario, está baneado 🔒.
Puedes hacerlo con Tags y Categorias.
 
rayden

rayden

Dseda
Programador
Verificación en dos pasos activada
Desde
16 May 2011
Mensajes
1.121
Estilo

<style type="text/css">
#letras {
display:inline-block;
width:400px;
font-size:0;
position:relative;
vertical-align:middle;
text-align:center;
background-color:#eee;
box-shadow:inset 0 2px 6px 1px #c7c7c7;
border-radius:5px;
border-spacing:10px;
height:65px;
margin:0 2px 0 3px;
padding:6px;
}


#letras li {
display:inline-block;
list-style:none;
text-align:center;
position:relative;
vertical-align:middle;
background:0;
font-size:11px;
height:19px;
line-height:18px;
border:1px solid #cacaca;
border-radius:3px;
box-shadow:0 1px 2px 0 #e4e4e4,inset 0 1px 0 0 #FFF;
margin:1px 1px 1px 0;
padding: 0px 10px 0px 0px;
}


#letras li a{
color:inherit;
text-decoration:none;
display:block;
width:100%;
height:100%;
text-shadow:0 1px 0 #fff;
padding:0 6px;
}


#letras li:hover a,#generos li:hover a {
background-color:rgba(135,228,236,.2);
}
</style>
Hacer clic para expandir...

Html
<ul id="letras">
<li> <a href="/letras/a">A</a> </li>
<li> <a href="/letras/b">B</a> </li>
<li> <a href="/letras/c">C</a> </li>
<li> <a href="/letras/d">D</a> </li>
<li> <a href="/letras/e">E</a> </li>
<li> <a href="/letras/f">F</a> </li>
<li> <a href="/letras/g">G</a> </li>
<li> <a href="/letras/h">H</a> </li>
<li> <a href="/letras/i">I</a> </li>
<li> <a href="/letras/j">J</a> </li>
<li> <a href="/letras/k">K</a> </li>
<li> <a href="/letras/l">L</a> </li>
<li> <a href="/letras/m">M</a> </li>
<li> <a href="/letras/n">N</a> </li>
<li> <a href="/letras/o">O</a> </li>
<li> <a href="/letras/p">P</a> </li>
<li> <a href="/letras/q">Q</a> </li>
<li> <a href="/letras/r">R</a> </li>
<li> <a href="/letras/s">S</a> </li>
<li> <a href="/letras/t">T</a> </li>
<li> <a href="/letras/u">U</a> </li>
<li> <a href="/letras/v">V</a> </li>
<li> <a href="/letras/w">W</a> </li>
<li> <a href="/letras/x">X</a> </li>
<li> <a href="/letras/y">Y</a> </li>
<li> <a href="/letras/z">Z</a> </li>
<li> <a href="/letras/0-9">0-9</a>
</li>
</ul>
Hacer clic para expandir...

reemplaza con los link.
 
Jbryan

Jbryan

Curioso
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
8 Nov 2013
Mensajes
11
Xfusion dijo:
Puedes hacerlo con Tags y Categorias.
Hacer clic para expandir...

de que forma? ...

rayden dijo:
Estilo

<style type="text/css">
#letras {
display:inline-block;
width:400px;
font-size:0;
position:relative;
vertical-align:middle;
text-align:center;
background-color:#eee;
box-shadow:inset 0 2px 6px 1px #c7c7c7;
border-radius:5px;
border-spacing:10px;
height:65px;
margin:0 2px 0 3px;
padding:6px;
}


#letras li {
display:inline-block;
list-style:none;
text-align:center;
position:relative;
vertical-align:middle;
background:0;
font-size:11px;
height:19px;
line-height:18px;
border:1px solid #cacaca;
border-radius:3px;
box-shadow:0 1px 2px 0 #e4e4e4,inset 0 1px 0 0 #FFF;
margin:1px 1px 1px 0;
padding: 0px 10px 0px 0px;
}


#letras li a{
color:inherit;
text-decoration:none;
display:block;
width:100%;
height:100%;
text-shadow:0 1px 0 #fff;
padding:0 6px;
}


#letras li:hover a,#generos li:hover a {
background-color:rgba(135,228,236,.2);
}
</style>

Html

<ul id="letras">
<li> <a href="/letras/a">A</a> </li>
<li> <a href="/letras/b">B</a> </li>
<li> <a href="/letras/c">C</a> </li>
<li> <a href="/letras/d">D</a> </li>
<li> <a href="/letras/e">E</a> </li>
<li> <a href="/letras/f">F</a> </li>
<li> <a href="/letras/g">G</a> </li>
<li> <a href="/letras/h">H</a> </li>
<li> <a href="/letras/i">I</a> </li>
<li> <a href="/letras/j">J</a> </li>
<li> <a href="/letras/k">K</a> </li>
<li> <a href="/letras/l">L</a> </li>
<li> <a href="/letras/m">M</a> </li>
<li> <a href="/letras/n">N</a> </li>
<li> <a href="/letras/o">O</a> </li>
<li> <a href="/letras/p">P</a> </li>
<li> <a href="/letras/q">Q</a> </li>
<li> <a href="/letras/r">R</a> </li>
<li> <a href="/letras/s">S</a> </li>
<li> <a href="/letras/t">T</a> </li>
<li> <a href="/letras/u">U</a> </li>
<li> <a href="/letras/v">V</a> </li>
<li> <a href="/letras/w">W</a> </li>
<li> <a href="/letras/x">X</a> </li>
<li> <a href="/letras/y">Y</a> </li>
<li> <a href="/letras/z">Z</a> </li>
<li> <a href="/letras/0-9">0-9</a>
</li>
</ul>

reemplaza con los link.
Hacer clic para expandir...


en donde coloco todos estos codigos?

estoy usando esta plantilla Theme de películas gratis para WordPress - Vozidea.com
 
Hay que estar conectado o registrado para responder aquí.
Arriba