Menús de capítulos en blogs: ¿Cómo lograrlos como este sitio?

Allan Cano

Allan Cano Seguir

Iota
Verificación en dos pasos activada
Desde
26 Feb 2014
Mensajes
2.017
Hola, pues me gustaría mucho poner una lista de capítulos como la de la imagen, aquí está el enlace a la página también Magical Shopping Arcade Abenobashi Online | Magical Shopping Arcade Abenobashi Sub Español | Legion Anime En verdad les agradecería mucho la ayuda, pues deseo un menú así desde que empece con los blog's. pero jamás e podido poner uno así.

T5tzBq0.png
 
xcite

xcite

Delta
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
12 May 2013
Mensajes
569
Pon ésto y me dices si funciona :encouragement: :

Insertar CODE, HTML o PHP: 
<style>
#lcmain {
position: relative;
margin: 5px auto -1px;
width: 632px;
}
.tab_content {
font-size: 1.2em;
padding: 0px;
}
.listap {
color: #f0f0f0;
}
#lcholder {
padding-bottom: 10px;
width: auto;
overflow: hidden;
position: relative;
list-style: none;
font-family: Verdana,Geneva,sans-serif;
margin: 1px;
padding: 0;
}
.alerta {
border: 0px solid;
background-repeat: no-repeat;
background-position: 10px center;
margin-top: 0px;
padding: 9px 10px 7px 35px;
color: #fff;
background-color: #3A5576;
background-image: url(http://legionanime.com/img/alerta.png);
font-size: 12px;
text-decoration: none;
font: 14px Helvetica;
text-shadow: black 0px 1px 10px;
color: #fff;
line-height: 1.3em;
border-top: none;
text-height: 20px;
line-height: 22px;
text-align: center;
}
#lcholder {
list-style: none;
font-family: Verdana,Geneva,sans-serif;
}
.tab_content {
font-size: 1.2em;
}
Inherited from div.listap
.listap {
color: #f0f0f0;
}
.swPage>li.lcc, li.lcc {
margin-bottom: 4px;
}
li {
margin: 0;
padding: 0;
outline: none;
}
.swPage>li.lcc>a.lcc, a.lcc {
background-image: none;
background-color: #121212;
overflow: hidden;
display: block;
font-style: normal;
height: 20px;
text-decoration: none;
color: #303030;
font: 12px Helvetica;
text-shadow: black 0px 1px 10px;
color: #f0f0f0;
line-height: 1.3em;
border-top: none;
text-transform: uppercase;
border: 1px solid #303030;
-webkit-transition-duration: .4s;
-webkit-transition-property: background-color color;
line-height: 28px;
padding: 2px 7px 7px;
}
.swPage>li.lcc>a.lcc:visited, a.lcc:visited {
background-color: #292929;
border-right: 1px solid #292929;
border-bottom: 1px solid #292929;
color: #fff;
text-shadow: #292929 0 1px 0;
}

.swPage>li.lcc>a.lcc, a.lcc {
font-style: normal;
color: #303030;
font: 12px Helvetica;
text-shadow: black 0px 1px 10px;
color: #f0f0f0;
line-height: 1.3em;
text-transform: uppercase;
line-height: 28px;
}
.swPage>li.lcc>a.lcc:visited, a.lcc:visited {
color: #fff;
text-shadow: #292929 0 1px 0;
}
.swPage>li.lcc>a.lcc:visited, a.lcc:visited {
background-color: #292929;
border-right: 1px solid #292929;
border-bottom: 1px solid #292929;
color: #fff;
text-shadow: #292929 0 1px 0;
}
.swPage>li.lcc>a.lcc:hover, a.lcc:hover {
background-color: #3A5576;
color: #fff;
text-shadow: #3A5576 0 1px 0;
-webkit-transition-duration: .4s;
-webkit-transition-property: background-color color;
}
.swPage>li.lcc>a.lcc:visited, a.lcc:visited {
color: #fff;
text-shadow: #292929 0 1px 0;
}
.swPage>li.lcc>a.lcc:hover, a.lcc:hover {
color: #fff;
text-shadow: #3A5576 0 1px 0;
}
</style>

<div id="lcmain" style="overflow: hidden; width: 554px; float:right; margin-top:1px; " scrolling="yes"><div id="asc" class="tab_content" style="display: block;"><ul id="lcholder"><div class="alerta" style="margin-bottom:5px"><center>Nota: los capitulos han sido invertidos de manera Ascendente.</center></div><div style="overflow:scroll;height:560px;overflow-x:hidden; overflow-y: auto;">

<li class="lcc"><a class="lcc" href="http://legionanime.com/ver/magical-shopping-arcade-13.html"><font style="text-transform: capitalize">Capitulo: 13 - Resurrección</font></a></li><li class="lcc"><a class="lcc" href="http://legionanime.com/ver/magical-shopping-arcade-12.html"><font style="text-transform: capitalize">Capitulo: 12 - Distrito de Hollywood</font></a></li>

<li class="lcc"><a class="lcc" href="http://legionanime.com/ver/magical-shopping-arcade-11.html"><font style="text-transform: capitalize">Capitulo: 11 - Distrito de batalla</font></a></li><li class="lcc"><a class="lcc" href="http://legionanime.com/ver/magical-shopping-arcade-10.html"><font style="text-transform: capitalize">Capitulo: 10 - Distrito de cuentos de hadas</font></a></li>

<li class="lcc"><a class="lcc" href="http://legionanime.com/ver/magical-shopping-arcade-9.html"><font style="text-transform: capitalize">Capitulo: 9 - El sauce llorón</font></a></li><li class="lcc"><a class="lcc" href="http://legionanime.com/ver/magical-shopping-arcade-8.html"><font style="text-transform: capitalize">Capitulo: 8 - Distrito escolar</font></a></li>

<li class="lcc"><a class="lcc" href="http://legionanime.com/ver/magical-shopping-arcade-7.html"><font style="text-transform: capitalize">Capitulo: 7 - El nacimiento de Abenobashi</font></a></li><li class="lcc"><a class="lcc" href="http://legionanime.com/ver/magical-shopping-arcade-6.html"><font style="text-transform: capitalize">Capitulo: 6 - Distrito comercial Hervido</font></a></li>

<li class="lcc"><a class="lcc" href="http://legionanime.com/ver/magical-shopping-arcade-5.html"><font style="text-transform: capitalize">Capitulo: 5 - Distrito Prehistórico</font></a></li><li class="lcc"><a class="lcc" href="http://legionanime.com/ver/magical-shopping-arcade-4.html"><font style="text-transform: capitalize">Capitulo: 4 - Distrito de artes marciales</font></a></li>

<li class="lcc"><a class="lcc" href="http://legionanime.com/ver/magical-shopping-arcade-3.html"><font style="text-transform: capitalize">Capitulo: 3 - Distrito ultra comercial galáctico</font></a></li><li class="lcc"><a class="lcc" href="http://legionanime.com/ver/magical-shopping-arcade-2.html"><font style="text-transform: capitalize">Capitulo: 2 - Distrito de espada y magia</font></a></li>

<li class="lcc"><a class="lcc" href="http://legionanime.com/ver/magical-shopping-arcade-1.html"><font style="text-transform: capitalize">Capitulo: 1 - Distrito Comercial Mágico</font></a></li>


</div></ul></div></div>
 
Allan Cano

Allan Cano

Iota
Verificación en dos pasos activada
Desde
26 Feb 2014
Mensajes
2.017
Woww me a funcionado todo muy bien pero sólo lo he puesto en añadir un gadget, la parte que dice <style> y termina con </style> Van agregadas en la plantilla en la opción Editar HTML? ¿en que parte de la plantilla van agregadas?
Y ¿cómo agrego mis propios capítulos? sólo borrando cambiando uno en uno los enlaces?

Es maravilloso =D:welcoming::welcoming: Ya casi queda lista.
 
xcite

xcite

Delta
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
12 May 2013
Mensajes
569
Sí, lo mejor es poner todo lo que va dentro de <style></style> dentro del css de la plantilla (antes de " </b:skin> " ) y si, basta con sustituir el link, saludos!
 
zking

zking

Dseda
Programador
Verificación en dos pasos activada
Desde
15 Jun 2013
Mensajes
1.084
xcite dijo:
Pon ésto y me dices si funciona :encouragement: :

Insertar CODE, HTML o PHP: 
<style>
#lcmain {
position: relative;
margin: 5px auto -1px;
width: 632px;
}
.tab_content {
font-size: 1.2em;
padding: 0px;
}
.listap {
color: #f0f0f0;
}
#lcholder {
padding-bottom: 10px;
width: auto;
overflow: hidden;
position: relative;
list-style: none;
font-family: Verdana,Geneva,sans-serif;
margin: 1px;
padding: 0;
}
.alerta {
border: 0px solid;
background-repeat: no-repeat;
background-position: 10px center;
margin-top: 0px;
padding: 9px 10px 7px 35px;
color: #fff;
background-color: #3A5576;
background-image: url(http://legionanime.com/img/alerta.png);
font-size: 12px;
text-decoration: none;
font: 14px Helvetica;
text-shadow: black 0px 1px 10px;
color: #fff;
line-height: 1.3em;
border-top: none;
text-height: 20px;
line-height: 22px;
text-align: center;
}
#lcholder {
list-style: none;
font-family: Verdana,Geneva,sans-serif;
}
.tab_content {
font-size: 1.2em;
}
Inherited from div.listap
.listap {
color: #f0f0f0;
}
.swPage>li.lcc, li.lcc {
margin-bottom: 4px;
}
li {
margin: 0;
padding: 0;
outline: none;
}
.swPage>li.lcc>a.lcc, a.lcc {
background-image: none;
background-color: #121212;
overflow: hidden;
display: block;
font-style: normal;
height: 20px;
text-decoration: none;
color: #303030;
font: 12px Helvetica;
text-shadow: black 0px 1px 10px;
color: #f0f0f0;
line-height: 1.3em;
border-top: none;
text-transform: uppercase;
border: 1px solid #303030;
-webkit-transition-duration: .4s;
-webkit-transition-property: background-color color;
line-height: 28px;
padding: 2px 7px 7px;
}
.swPage>li.lcc>a.lcc:visited, a.lcc:visited {
background-color: #292929;
border-right: 1px solid #292929;
border-bottom: 1px solid #292929;
color: #fff;
text-shadow: #292929 0 1px 0;
}

.swPage>li.lcc>a.lcc, a.lcc {
font-style: normal;
color: #303030;
font: 12px Helvetica;
text-shadow: black 0px 1px 10px;
color: #f0f0f0;
line-height: 1.3em;
text-transform: uppercase;
line-height: 28px;
}
.swPage>li.lcc>a.lcc:visited, a.lcc:visited {
color: #fff;
text-shadow: #292929 0 1px 0;
}
.swPage>li.lcc>a.lcc:visited, a.lcc:visited {
background-color: #292929;
border-right: 1px solid #292929;
border-bottom: 1px solid #292929;
color: #fff;
text-shadow: #292929 0 1px 0;
}
.swPage>li.lcc>a.lcc:hover, a.lcc:hover {
background-color: #3A5576;
color: #fff;
text-shadow: #3A5576 0 1px 0;
-webkit-transition-duration: .4s;
-webkit-transition-property: background-color color;
}
.swPage>li.lcc>a.lcc:visited, a.lcc:visited {
color: #fff;
text-shadow: #292929 0 1px 0;
}
.swPage>li.lcc>a.lcc:hover, a.lcc:hover {
color: #fff;
text-shadow: #3A5576 0 1px 0;
}
</style>

<div id="lcmain" style="overflow: hidden; width: 554px; float:right; margin-top:1px; " scrolling="yes"><div id="asc" class="tab_content" style="display: block;"><ul id="lcholder"><div class="alerta" style="margin-bottom:5px"><center>Nota: los capitulos han sido invertidos de manera Ascendente.</center></div><div style="overflow:scroll;height:560px;overflow-x:hidden; overflow-y: auto;">

<li class="lcc"><a rel="nofollow" class="lcc" href="http://legionanime.com/ver/magical-shopping-arcade-13.html"><font style="text-transform: capitalize">Capitulo: 13 - Resurrección</font></a></li><li class="lcc"><a rel="nofollow" class="lcc" href="http://legionanime.com/ver/magical-shopping-arcade-12.html"><font style="text-transform: capitalize">Capitulo: 12 - Distrito de Hollywood</font></a></li>

<li class="lcc"><a rel="nofollow" class="lcc" href="http://legionanime.com/ver/magical-shopping-arcade-11.html"><font style="text-transform: capitalize">Capitulo: 11 - Distrito de batalla</font></a></li><li class="lcc"><a rel="nofollow" class="lcc" href="http://legionanime.com/ver/magical-shopping-arcade-10.html"><font style="text-transform: capitalize">Capitulo: 10 - Distrito de cuentos de hadas</font></a></li>

<li class="lcc"><a rel="nofollow" class="lcc" href="http://legionanime.com/ver/magical-shopping-arcade-9.html"><font style="text-transform: capitalize">Capitulo: 9 - El sauce llorón</font></a></li><li class="lcc"><a rel="nofollow" class="lcc" href="http://legionanime.com/ver/magical-shopping-arcade-8.html"><font style="text-transform: capitalize">Capitulo: 8 - Distrito escolar</font></a></li>

<li class="lcc"><a rel="nofollow" class="lcc" href="http://legionanime.com/ver/magical-shopping-arcade-7.html"><font style="text-transform: capitalize">Capitulo: 7 - El nacimiento de Abenobashi</font></a></li><li class="lcc"><a rel="nofollow" class="lcc" href="http://legionanime.com/ver/magical-shopping-arcade-6.html"><font style="text-transform: capitalize">Capitulo: 6 - Distrito comercial Hervido</font></a></li>

<li class="lcc"><a rel="nofollow" class="lcc" href="http://legionanime.com/ver/magical-shopping-arcade-5.html"><font style="text-transform: capitalize">Capitulo: 5 - Distrito Prehistórico</font></a></li><li class="lcc"><a rel="nofollow" class="lcc" href="http://legionanime.com/ver/magical-shopping-arcade-4.html"><font style="text-transform: capitalize">Capitulo: 4 - Distrito de artes marciales</font></a></li>

<li class="lcc"><a rel="nofollow" class="lcc" href="http://legionanime.com/ver/magical-shopping-arcade-3.html"><font style="text-transform: capitalize">Capitulo: 3 - Distrito ultra comercial galáctico</font></a></li><li class="lcc"><a rel="nofollow" class="lcc" href="http://legionanime.com/ver/magical-shopping-arcade-2.html"><font style="text-transform: capitalize">Capitulo: 2 - Distrito de espada y magia</font></a></li>

<li class="lcc"><a rel="nofollow" class="lcc" href="http://legionanime.com/ver/magical-shopping-arcade-1.html"><font style="text-transform: capitalize">Capitulo: 1 - Distrito Comercial Mágico</font></a></li>


</div></ul></div></div>
Hacer clic para expandir...

;Me ganastes :mad:, pero gracias por ayudarle
 
Allan Cano

Allan Cano

Iota
Verificación en dos pasos activada
Desde
26 Feb 2014
Mensajes
2.017
xcite dijo:
Sí, lo mejor es poner todo lo que va dentro de <style></style> dentro del css de la plantilla (antes de " </b:skin> " ) y si, basta con sustituir el link, saludos!
Hacer clic para expandir...

Existirá alguna forma de agregar los capítulos automáticamente? por entradas y etiquetas o así algo parecido.

---------- Post agregado el 09-mar-2014 hora: 04:47 ----------

:welcoming::welcoming: Aún me puedes ayudar, pues no entiendo bien como funciona el menú. u.u
 
Hay que estar conectado o registrado para responder aquí.
Arriba