Aquí te dejo un ejemplo de cómo podrías crear un div `searchx` que contenga un icono de búsqueda y, al hacer clic en él, se abra un modal con un formulario de búsqueda y la lista de resultados obtenidos por el JSON Feed de Blogger.
HTML:
```html
<div id="searchx">
<span class="icono-busqueda">🔍</span>
</div>
<div id="modal-busqueda" class="modal">
<div class="modal-contenido">
<span class="cerrar-modal">×</span>
<h2>Buscar en el blog</h2>
<form id="form-busqueda">
<input type="text" id="input-busqueda" placeholder="Buscar...">
<button type="submit" id="boton-busqueda">Buscar</button>
</form>
<div id="resultados-busqueda"></div>
<button type="button" id="boton-cargar-mas">Cargar más entradas</button>
</div>
</div>
```
En este ejemplo, `searchx` es el contenedor que contendrá el icono de búsqueda. Al hacer clic en `searchx`, se abrirá un modal con el formulario de búsqueda y la lista de resultados de entradas cargadas desde el JSON Feed de Blogger. En este ejemplo, el modal tiene una clase CSS `modal` y tiene un id `modal-busqueda`.
CSS:
```css
#searchx {
display: inline-block;
border: none;
background: none;
font-size: 1.5rem;
margin-right: 1rem;
cursor: pointer;
}
#searchx .icono-busqueda {
display: inline-block;
vertical-align: middle;
}
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.4);
}
.modal-contenido {
background-color: white;
margin: 10% auto;
padding: 20px;
border: 1px solid #888;
width: 60%;
}
.cerrar-modal {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.cerrar-modal:hover,
.cerrar-modal:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
#form-busqueda {
margin-bottom: 1rem;
position: relative;
}
#form-busqueda input[type=text] {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
font-size: 1.2rem;
}
#form-busqueda button {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 1.2rem;
}
#form-busqueda button:hover {
background-color: #45a049;
}
#resultados-busqueda {
margin-bottom: 1rem;
}
#resultados-busqueda li {
display: flex;
align-items: center;
margin-bottom: 0.5rem;
}
#resultados-busqueda li img {
width: 80px;
margin-right: 1rem;
}
#boton-cargar-mas {
display: none;
width: 100%;
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
margin-top: 1rem;
font-size: 1.2rem;
}
#boton-cargar-mas:hover {
background-color: #45a049;
}
```
El CSS define el estilo de los elementos HTML mencionados anteriormente. En particular, el modal tiene una opacidad de 0.4 y se muestra en el centro de la pantalla. Además, el CSS define la apariencia del formulario de búsqueda, resultados y el botón de cargar más.
JavaScript:
```javascript
var botonBusqueda = document.getElementById('boton-busqueda');
var inputBusqueda = document.getElementById('input-busqueda');
var resultadosBusqueda = document.getElementById('resultados-busqueda');
var botonCargarMas = document.getElementById('boton-cargar-mas');
var URLFeed = '
https://tu-blog.blogspot.com/feeds/posts/default?alt=json&max-results=10';
function mostrarModal() {
document.getElementById('modal-busqueda').style.display = "block";
}
function cerrarModal() {
document.getElementById('modal-busqueda').style.display = "none";
}
function cargarEntradas() {
botonCargarMas.style.display = "none";
fetch(URLFeed).then(function(response) {
return response.json();
}).then(function(data) {
var entradas = data.feed.entry.slice(0, 5);
if (entradas.length > 0) {
entradas.forEach(function(entrada) {
var imagen = '';
entrada.link.forEach(function(link) {
if (link.rel == 'alternate') {
urlEntrada = link.href;
} else if (link.rel == 'enclosure') {
imagen = '<img src="' + link.href + '">';
}
});
var fechaEntrada = new Date(entrada.published.$t);
var fecha = fechaEntrada.getDay() + '/' + fechaEntrada.getMonth() + '/' + fechaEntrada.getFullYear();
resultadosBusqueda.innerHTML += '<li><a href="'+ urlEntrada +'" target="_blank">' + imagen + entrada.title.$t + '</a> (' + fecha + ')</li>';
});
if (data.feed.entry.length > 5) {
botonCargarMas.style.display = "block";
}
} else {
resultadosBusqueda.innerHTML = '<li>No hay resultados para la búsqueda.</li>';
}
});
}
botonBusqueda.addEventListener('click', function(event) {
event.preventDefault();
resultadosBusqueda.innerHTML = '';
cargarEntradas();
});
botonCargarMas.addEventListener('click', function() {
URLFeed += '&start-index=6';
cargarEntradas();
});
document.getElementById('searchx').addEventListener('click', mostrarModal);
document.querySelector('.cerrar-modal').addEventListener('click', cerrarModal);
```
El script define la lógica necesaria para cargar la lista de entradas del JSON Feed de Blogger, mostrarlas en el modal y permitir al usuario cargar más entradas a través de un botón "Cargar más".
Aquí hay algunas cosas que debes cambiar en el HTML y el JavaScript para que el ejemplo funcione en tu blog:
- En la línea 18 del HTML (`<button type="submit" id="boton-busqueda">Buscar</button>`), debes cambiar el nombre del botón y el atributo `type` según sea necesario.
- En la línea 21 del JavaScript (`var URLFeed = '
https://tu-blog.blogspot.com/feeds/posts/default?alt=json&max-results=10';`), debes cambiar `tu-blog` por el nombre de tu blog.
- Si deseas cambiar el número de entradas que se muestran en cada carga, cambia el valor `5` en las líneas 23 (`var entradas = data.feed.entry.slice(0, 5);`) y 49 (`URLFeed += '&start-index=6';`) del JavaScript.
Ten en cuenta que el ejemplo solo muestra la imagen, el título y la fecha de las entradas en los resultados de búsqueda. Si deseas agregar más detalles, debes actualizar el código del JavaScript en consecuencia.
Espero que esto te ayude a comprender cómo crear un modal de búsqueda con entradas cargadas automáticamente desde el JSON Feed de Blogger.