Códigos para trabajar en esta página
Hay muchas funcionalidades que se le pueden agregar a este sitio web, cada
tema para cada entrada requiere una funcionalidad diferente, que se traduce en
un codigo diferente para añadirlas.
Así que aquí estaré agregando los códigos que se necesitan para cada
funcionalidad, mi objetivo con esto es acelerar el proceso de creacion de las
entradas.
- Elementos con boostrap: https://getbootstrap.com/docs/5.0/components/accordion/
- Link para identar codigo: https://webformatter.com/html
- Font Awesome 5: https://fontawesome.com/v5/search?home
Tabla de contenido
- Tabla de contenido
- Poner codigos para copiar
- Embeber un video de Youtube
- Poner un botón
- Crear link de descarga directo con google drive
- Evitar la publicidad en los IFRAMES
- Agregar las pestañas
- Alertas
- Ficha Técnica
- Boton Mostrar Ocultar
- Botones de descarga
- Copyright
- Agregar un indice
- Crear fila horizontal
- Botones de colores
- Agregar Tablas
Imagen a la derecha de texto con figcaption
<div>
<div style="float: right; position: relative; text-align: center; margin: 15px;" >
<!-- Imagen Aqui-->
<figcaption class="custom-caption">Figcaption</figcaption>
</div>
<div style="text-align: justify;">
Texto al lado de la imagen
</div>
</div>
Poner imagen a la derecha o izquierda con texto
style="padding: 19px 15px 0px 15px;" align="right" width="450px"
Poner codigos para copiar
<br>
<p class="tcode">Título</p>
<code class="code">
<button class="code-copy"><i class="fas fa-copy fa-fw"></i></button>
<pre class="html">... Código ...</pre>
</code>
<br />
Embeber un video de Youtube
<div class="js-player" data-plyr-embed-id="PZbkF-15ObM" data-plyr-provider="youtube"></div>
Poner un botón
<a class="btn1 color-verde" href="https://www.autohotkey.com/" target="_blank">Descargar AutoHotkey 35.5kb<i class="fas fa-download"></i></a>
Para crearlo vamos a poner la id del archivo
El enlace que nos proporciona google Drive es similar al siguiente:
https://drive.google.com/file/d/1ANDcc90D8bAUVtgwFOmXPDVv507XXXXX/view?usp=download
Lo único que haremos será copiar la ID del archivo, la cual es lo
resaltado en amarillo y ubicarlo donde se muestra a continuación:
Crear link de descarga directo con google drive
https://drive.google.com/uc?export=download&id=Id_Archivo
Evitar la publicidad en los IFRAMES
<iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" class="videoEstilos" frameborder="0" height="450px" id="video_opc2" sandbox="allow-forms allow-pointer-lock allow-same-origin allow-scripts allow-top-navigation" src="" width="100%"></iframe>
Agregar las pestañas
<!--TABS DE VIDEOS-->
<div id="video-container">
<!-- Opciones -->
<ul class="tab-buttons"><li onclick="changeTab(0)" class="active">Video 1</li>
<li onclick="changeTab(1)">Video 2</li></ul>
<!-- Contenedor 1 -->
<div class="tab-content active">
<iframe id="video1" width="100%" height="400" src="https://www.youtube.com/embed/nJtiYPe9nv4?si=3XVXUFGO5PuYWd0G" frameborder="0" allowfullscreen></iframe>
</div> <!-- Contenedor 2 --><div class="tab-content">
<iframe id="video2" width="100%" height="400" src="https://www.youtube.com/embed/2-mCpRYCM7A" frameborder="0" allowfullscreen></iframe>
</div>
<!-- Agrega más divs con iframes según sea necesario -->
</div>
Alertas con boostrapt
Alerta Simple
Alerta Simple Secundaria
Alerta correcta
Alerta de peligro
Alerta de advertencia
alerta de informacion
alerta gris
alerta oscura
Alertas
<div class="alerta azul">
Si necesitas más detalles acerca de la App o acerca de la instalación puedes ver el video siguiente.
</div>
Ficha Técnica
<!-- FICHA TECNICA -->
<div class="center">
<ul class="ficha">
<li class="titulo">Ficha Técnica</li>
<li>Elemento 1</li>
<li>Elemento 2</li>
</ul>
</div>
Boton Mostrar Ocultar
<br />
<!--SINOPSIS-->
<div class="center">
<details>
<summary>Sinopsis</summary>
<p>Texto de la sinopsis</p>
</details>
</div>
<br />
Podemos poner botones de descarga para drive, mediafire, mega, share,
download Botones de descarga
<!-- BOTON DE DESCARGA -->
<center><div class="ab-download">
<span class="ab-icon drive"></span>
<span class="ab-name">DRIVE</span>
<span class="ab-size">1.27mb</span>
<a class="download-message" onclick="openDownloadModal(event)" href="#" data-download-link="#" target="_blank">Descargar</a>
</div></center>
Título
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
★COPYRIGHT / LICENSING★
►All rights belong to their respective owners. If any owner of track/background used in this mix is unhappy, feel free to contact me if anything is wrong: (thesoulofwind@outlook.com)
- Request to remove a video
- Adding any kind of information which belongs to the video (audio OR visual - Illustrator, Composer, Publisher, purchase-links...)
───────────────────
Poner un Indice
Para el titulo vamos a poner id="titulo1"
<!-- INDICE -->
<details open>
<summary>Índice</summary>
<ol>
<li><a href="titulo1">Lineas</a></li>
</ol>
</details>
Título
§kAdmin§r
Crear Fila horizontal
<!-- FILA HORIZONTAL -->
<div class="download_container center">
</div>
Crear Botones de Colores
<!-- BOTON -->
<a class="btn color-verde" href="#">Boton verde<i class="fas fa-download"></i></a>
Agregar Tablas
<table>
<!-- Titulos -->
<tr>
<th>Nombre</th>
<th>Versión</th>
<th>Peso</th>
<th>Enlace</th>
</tr>
<!-- -->
<tr>
<td>E 13 km/h</td>
<td>E 11 km/h</td>
<td>E 13 km/h</td>
<td>E 11 km/h</td>
</tr>
</table>
0 Comentarios