Tenemos una nueva versión de este tutorial, míralo aquí
Anteriormente en HoyGeek vimos en como colocar calificaciones mediante estrellas a nuestras entradas, al estilos de los blog de cine. En esta ocasión seguiremos con esa temática de los blog de cine.
Para empezar es importante que tengamos jQuery en nuestro blog, si no estas seguro si es que lo tienes integrado entra a este enlace.
Para lograr este efecto el único código que vamos a usar sera el siguiente:
<div class="capitulo">A primera vista el código puede ser un poco confuso si conocemos un poco de programación, pero tranquilos no es necesario que entendamos todo. Aquí les explicare lo necesario para agregar el contenido que queramos.
<input class="bt-capitulo" type="button" value="Titulo de la Pestaña" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; this.value = 'Titulo de la Pestaña'; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none'; this.value = 'Titulo de la Pestaña'; }" />
</div><div><div class="ctncapitulo" style="display: none;">
Aqui va el Contenido</div></div>
- Como observamos tenemos tres oraciones de color turquesa , este texto sera el botón el cual mostrara el contenido al hacer click sobre el.
- Lo siguiente que modificaremos será casi al final del código, donde dice "Aquí va el Contenido". Como el texto lo dice, aquí pondremos, en este caso, el reproductor de algún capitulo o lo que queramos.
El siguiente es agregar los estilos. En esta parte puedes dejar fluir tu creatividad, ya que puedes modificar la apariencia como tu desees. De todas formas aquí te dejo los estilos que hemos visto en la página de ejemplo:
input.bt-capitulo {
width: 100%;background: #111;color: #fff;border: 0;text-align: left;padding: 8px 5px;border-bottom: solid 1px #828282;outline: none;}.ctncapitulo {
background: rgba(210, 210, 210,0.2);padding: 10px;}
Una vez modificado lo anterior ya tendremos listo todo y podremos agregar los capítulos que queramos en una sola entrada de nuestro blog como las páginas de películas/series que siempre vemos en internet.
Pestañas para Capítulos de Series en una sola Entrada
4.20/5 -1289
HoyGeek
hola, no me salio, hize exactamente lo que hicistes en el video y no salio
ResponderBorrarSi funciona, lo adapte para mi pagina y tenia el mismo error que ustedes y era xq se modificaba y quedaba mal escrito. tienen que estar aleajados entre si por ejemplo asi.
Borrarcomo asi
Borrarno me funciona, no abre al hacer click amigo
ResponderBorrarSi funciona, lo adapte para mi pagina y tenia el mismo error que ustedes y era xq se modificaba y quedaba mal escrito. tienen que estar aleajados entre si por ejemplo asi.
Borrarno funciona, no pierdan el timepo con esta mierda...
ResponderBorrarCerra el orto, hdp que si funciona y más claro, deja esto para los que si sabemos, aunque sea un poco de informática, no para un sin conocimientos como tú, además vienes a insultar tras que esta dando su apoyo, gente como tú DA ASCO (sin ofender) ¯\_(ツ)_/¯
Borrarsi funciona bro tienes que saber configurar
Borrarera callarlo no humillarlo jajaja, pd: si funciona y mucho mejor si lo combinan con un para tener capitulos y en el titulo de la pestaña tener solo las temporadas
Borraryo creo que seria mejor que explique desde cero para entender mejor
ResponderBorrarSi funciona, muchas gracias parcero...
ResponderBorrarLo que tienen que hacer es al publicar o guardar la entrada o pagina tienen que hacerlo en modo HTML no en REDACTAR, les dejo la prueba.
https://pelimega4all.blogspot.com/2019/05/esto-es-guerra-descargar-por-mega.html
Hola buen dia, me funciona todo pero el segundo código no lo agarra daben que puede ser?
BorrarJoao Nazareno, el segundo código son estilos CSS y aquí tienes una guía completa donde explico como agregarlo. Un saludo.
BorrarSi funciona, muchas gracias parcero...
ResponderBorrarLo que tienen que hacer es al publicar o guardar una entrada o pagina es hacerlo en modo HTML no en REDACTAR, les dejo la prueba. (Quedo mal redactado el de arriba, disculpa)
https://pelimega4all.blogspot.com/2019/05/esto-es-guerra-descargar-por-mega.html
exelente para poder subir series a mi blog
ResponderBorrarhola amigo no se como poner dos capítulos no puedo bro
ResponderBorrarhermano el problema es que no se puede poner dos videos diferentes brother
ResponderBorrarsi lo que quieres es tener varios capitulos de cualquier seriee una sola pagina solamente tienes que repetir el codigo de los botones y tambien el codigo de tu video, según los capítulos que tenga
BorrarEste comentario ha sido eliminado por el autor.
ResponderBorrarEste comentario ha sido eliminado por el autor.
ResponderBorrarHola, una pregunta ¿Cómo le cambio el estilo de fuente? Ayuda por favor y gracias.
ResponderBorrarPor cierto, otra pregunta, hay forma de poner una imagen en el mismo lugar que dice "Capítulo/Episodio 1"
Hola Redflix, para poder cambiar el estilo de fuente tienes que agregarle la propiedad font-family al selector input.bt-capitulo. En HoyGeek tenemos un tutorial de como agregar y cambiar fuentes en Blogger, puedes revisarlo aquí.
Borrarcoloquen el otro capitulo debajo de las etiquetas div> para que les salga el otro capitulo o imagen que quieren
ResponderBorrarfUNCIONA A LA PERFECCIÓN, TE AGRADEZCO....
ResponderBorrarSierto aprendan a Configurar...Les doy (2) TIPS.... (1) - bean el video una vez o mas sin ver o aser alguna otra cosa y no se distraigan con nada nada de nada.... (2) - despues buelvan a ver el video pero ahora bayan siguiendo los pasos cada paso q agan en el video aganlo ustedes mismos asi iran aprendiendo asta saber saser las cosas osea tener la configuracion q quieren aser en su mente la tendran pero aganlo con calma y mas cuando esten biendo y asiendo los pasos deverdad les servira tendran q tener paciencia no digo q yo tenga no la verdad soy muy inpaciente pero ago lo mismo varias veces asta q sale pero si veo q ise todo correcto y no me sirvio ahi es por algo de configuracion q trair adicionalmente la app o pagina, TIP (EXTRA) - anoten en un cuaderno o su blog de notas de su pc cel etc eso no importa lo q importa es q anoten los pasos para asi bayan aprendiendo mas facil despues de verse el video varias veces si quieren q les enseñe mas TIPS CONSEJOS O LOS AYUDE contactenme por VIA - (FACEBOOK), https://www.facebook.com/profile.php?id=100086222545510
ResponderBorraro por VIA (TELEGRAM), https://t.me/+laeWS52ZhU9hYWVh