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

[Jbryan]

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.

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.

 

[JuanM32]

Puedes hacerlo con Tags y Categorias.

 

[rayden]

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.

 

[Jbryan]

Puedes hacerlo con Tags y Categorias.

de que forma? ...

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.

en donde coloco todos estos codigos?

estoy usando esta plantilla Theme de películas gratis para WordPress - Vozidea.com

 

[rayden]

Debajo del banner

 

[Jbryan]

Debajo del banner

ok gracias intentare hacerlo 🙂