Inicio Blog Blog Archive Page

Blog Archive Page

Paginated blog listing with filters

Archive Listing Browse
Copia este prompt y pégalo en ChatGPT o Claude
Create a blog archive/listing page:

1. PAGE HEADER
- Page title: "Blog" or "All Articles"
- Post count: "128 articles"
- Search bar

2. FILTER OPTIONS
Categories:
- All (default)
- Technology
- Design
- Tutorials
- Opinion
- News

Tags (if separate from categories):
- Popular tags as clickable pills

Sort by:
- Latest (default)
- Oldest
- Most Popular
- Most Commented

3. POST LIST LAYOUT

Option A - List view:
- Featured image left
- Content right
- Title, excerpt, meta

Option B - Grid view:
- Cards in 2-3 columns
- Image top, content bottom

Option C - Mixed:
- Featured post large
- Rest in grid

4. POST CARD ELEMENTS
- Featured image
- Category badge
- Title (linked)
- Excerpt (2-3 lines)
- Author avatar and name
- Date
- Read time
- Tags (optional)

5. PAGINATION
Option A - Numbered:
- Previous, 1, 2, 3, ..., 10, Next
- Current page highlighted

Option B - Load more:
- "Load More Posts" button
- Shows loading state

Option C - Infinite scroll:
- Auto-loads on scroll
- "Back to top" button

6. SIDEBAR (optional)
- Search
- Categories list
- Popular posts
- Tags cloud
- Newsletter signup
- About widget
- Social follow

7. EMPTY STATE
When no posts match filter:
- "No articles found"
- "Try a different category"
- Suggested posts

8. CATEGORY/TAG ARCHIVE
When viewing specific category:
- Category name as title
- Category description
- Post count
- Filtered posts

Design: Scannable, easy to browse. Good use of whitespace. Quick access to posts.

Cómo usar este prompt

  1. 1 Copia el prompt de arriba
  2. 2 Pégalo en tu herramienta de IA favorita (ChatGPT, Claude, v0, etc.)
  3. 3 La IA generará el código del sitio web por ti
  4. 4 Personaliza e itera según tus necesidades

Acerca de este Prompt de Blog

Este prompt Blog Archive Page está diseñado para ayudarte a crear rápidamente sitios web profesionales de blog usando herramientas de IA como ChatGPT, Claude, v0 de Vercel, Cursor y Bolt.new.

Ya seas desarrollador, diseñador o emprendedor, este prompt de IA gratuito te da una ventaja al crear blog archive page. Simplemente copia el prompt, pégalo en tu asistente de código IA favorito y personalízalo para tu marca.

Herramientas de IA Compatibles

  • ChatGPT (GPT-4) - Excelente para generación detallada de código y explicaciones
  • Claude 3 - Excelente para diseños web complejos y matizados
  • v0 de Vercel - Perfecto para componentes React y Next.js
  • Cursor - Ideal para codificación potenciada por IA en tu IDE
  • Bolt.new - Prototipado rápido y apps full-stack
  • Lovable - Constructor de sitios web IA fácil de usar

Etiquetas

Archive Listing Browse Blog Prompt de IA Plantilla Gratis Constructor Web Diseño Web Prompt Copiar Pegar