Cómo crear un widget acordeón
En este nuevo tutorial aprenderás a crear un widget acordeón con unos simples pasos, solo debes seguir las instrucciones tal como lo muestro en este tutorial, te será de gran ayuda al momento de insertar en tu sitio web y tener más opciones de diseño web.
Widget acordeón
Un acordeón es un menú compuesto de encabezados apilados verticalmente que revelan más detalles cuando se activan (a menudo con un clic del mouse). Dado que este patrón de diseño web resalta solo la información más importante de una sección, pero hace que el resto sea fácilmente accesible, es un elemento común en el diseño responsivo.
¿Que es un acordeón en diseño web?
Un acordeón es un menú compuesto de encabezados apilados verticalmente que revelan más detalles cuando se activan (a menudo con un clic del mouse). Dado que este patrón de diseño web resalta solo la información más importante de una sección, pero hace que el resto sea fácilmente accesible, es un elemento común en el diseño responsivo .
Este patrón de diseño es ideal para dividir contenido extenso o complejo en fragmentos digeribles. También es ideal para sitios móviles, ya que reduce la cantidad de tiempo que el usuario debe desplazarse.
A continuación se muestra un ejemplo de un widget acordeón utilizado en Ayudadeblogger.com:
Esto permite a los usuarios controlar qué leer y cuándo, lo que puede mejorar su experiencia de usuario. En el ejemplo anterior, los lectores pueden hacer clic y ver su contenido y omitir el resto. O pueden pasar por alto el menú por completo. De cualquier manera, ellos pueden decidir cuál es su experiencia de lectura.
Nota importante:
Antes de empezar este tutorial, se recomienda realizar una copia de seguridad de su blog de Blogger, o primero practicar en un blog de ejemplos. Si no sabe cómo realizar una copia de seguridad de su blog, puede seguir las instrucciones del siguiente enlace:
Realizar una copia de seguridad de mi blog de Blogger
Ayudadeblogger.com no se responsabiliza, si no realizo correctamente la inserción del código, para más detalles específicos, puede visitar el siguiente enlace:
Tutorial
1.- Dirijase a Blogger.com
<link href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet" type="text/css"/><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
]]></b:skin>
.collapse{display:none}#accordion h3{margin:0}.showx .collapse{display:block}.collapse .card-body{padding:10px 25px 40px;color:#555}button.btn.btn-link{display:block;background:#fff;border:none;outline:none;width:100%;margin:10px 0;padding:10px 25px;cursor:pointer;text-transform:none;text-align:left}button.btn.btn-link:before{content:'\f107';font-family:'Font Awesome 5 Free';font-weight:600;font-size:2rem;color:#122949;position:absolute;left:25px;top:15px;opacity:.7;transform:rotate(-90deg);transition:all .3s ease-in-out}.showx button.btn.btn-link:before{transform:rotate(0deg)}.card{background:#fff;box-shadow:0 2px 2px 0 rgba(0,0,0,0.1);border:1px solid #eee;border-radius:5px;position:relative;overflow:hidden;margin:10px 0;padding:0 0 0 40px}.card-header button h4{font-weight:400;color:#122949;font-size:1.1rem;margin:0}#accordion .card-body img{margin:20px auto;border-radius:7px}
</body>
<script>//<![CDATA[// Accordion FAQ$("#accordion .btn").click(function() {var get_target = $(this).attr("data-target");$(get_target).slideToggle("fast");$(this).parent().parent().toggleClass("showx")}),$(document).ready(function() {var get_target;"true" == $("#accordion .btn").attr("aria-expanded") && (get_target = $(this).attr("data-target"), $(get_target).slideToggle("fast"))});//]]></script>
<div id='accordion'><!-- Acordeon 1 --><div class='card showx'><div class='card-header' id='cabecera-1'><button aria-controls='desprender-1' aria-expanded='true' class='btn btn-link' data-target='#desprender-1' data-toggle='collapse'><h4>Que es la IA?</h4></button></div><div aria-labelledby='cabecera-1' class='collapse' data-parent='#accordion' id='desprender-1'><div class='card-body'>La inteligencia artificial (IA) es un campo de la informática que se centra en crear sistemas que puedan realizar tareas que normalmente requieren inteligencia humana.<center><img alt="Image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9zYzZwHyBgTPE0_pGOOCisZ007Z2LIC8bBz8yeyZa7rcFsjI3SlWs9FkDyfdZFQhC6jQCH6E_y0NtCnlamBjHJCULVmvES4kh1F1n3edXspu-989icVIvegQefANBifpWo4gp9cs6NY1IUXePcBGeS7UlA_CwaIKPMZQkh32nTSqNdJBjX5ctcfZnns8/s400/formulario-de-contactos-blogger.webp"/></center></div></div></div><!-- fin acordeon 1 --><!-- acordeon 2 --><div class='card'><div class='card-header' id='cebecera-2'><button aria-controls='desprender-2' aria-expanded='true' class='btn btn-link' data-target='#desprender-2' data-toggle='collapse'><h4>La IA permite a las computadoras realizar funciones avanzadas, como:</h4></button></div><div aria-labelledby='cabecera-2' class='collapse' data-parent='#accordion' id='desprender-2'><div class='card-body'>Ver, Comprender y traducir lenguaje, Analizar datos, Hacer recomendaciones, Resolver problemas, Interactuar con el lenguaje, Ser creativa.
La IA se usa en muchos ámbitos, como el comercio, el control del tráfico aéreo, y para crear recomendaciones personalizadas. </div></div></div><!-- fin acordeon 2 --><!-- acordeon 3 --><div class='card'><div class='card-header' id='cabecera-3'><button aria-controls='desprender-3' aria-expanded='true' class='btn btn-link' data-target='#desprender-3' data-toggle='collapse'><h4>Algunos ejemplos de aplicaciones de IA son: </h4></button></div><div aria-labelledby='cabecera-3' class='collapse' data-parent='#accordion' id='desprender-3'><div class='card-body'>El reconocimiento óptico de caracteres (OCR), El control del tráfico aéreo, El Siri de Apple.</div></div></div><!-- fin acordeon 3 --></div>
0 comments:
Publicar un comentario