Home Blog Blog Post Page

Blog Post Page

Article page with content, author info, and related posts

Article Post Content
Copy this prompt and paste it into ChatGPT or Claude
Create a blog post/article page:

1. POST HEADER
- Breadcrumb: Home > Category > Post
- Category tag (colored)
- Title (H1, large, compelling)
- Subtitle/excerpt
- Meta info:
  - Author with avatar
  - Publish date
  - Updated date (if different)
  - Read time
- Featured image (full-width or contained)
- Image caption/credit

2. ARTICLE CONTENT AREA
Max-width for readability (680-720px)

Content elements:
- Paragraphs with good line-height
- Headings (H2, H3, H4)
- Blockquotes (styled distinctly)
- Code blocks (syntax highlighted)
- Inline code
- Images with captions
- Image galleries
- Embedded videos
- Bullet and numbered lists
- Tables
- Callout boxes (tip, warning, note)
- Pull quotes
- Dividers

3. TABLE OF CONTENTS (optional)
- Sticky sidebar or top of post
- Auto-generated from headings
- Smooth scroll to sections
- Highlight current section

4. ENGAGEMENT ELEMENTS
Inline:
- Highlight to share
- Click to tweet quotes

Bottom of post:
- Share buttons (Twitter, Facebook, LinkedIn, Copy link)
- Like/clap button
- Save/bookmark button

5. AUTHOR BOX
- Author photo (larger)
- Author name and title
- Bio paragraph
- Social links
- "View all posts by [Author]"

6. TAGS SECTION
- "Tagged:" followed by tags
- Clickable, links to tag archive

7. COMMENTS SECTION
- Comment count
- Comment form (if logged in)
  - Or "Sign in to comment"
- Comment list:
  - Avatar
  - Name and date
  - Comment text
  - Reply button
  - Like/upvote
- Threaded replies
- Load more comments

8. RELATED POSTS
- "You might also like"
- 3 related post cards
- Based on category or tags

9. NAVIGATION
- Previous/Next post links
- Back to blog link

10. NEWSLETTER CTA
- End-of-post signup prompt
- "Enjoyed this? Subscribe for more"

Design: Typography-focused. Comfortable reading experience. Mobile: Full-width images, adjusted font sizes.

How to use this prompt

  1. 1 Click the "Copy Prompt" button above to copy the full prompt to your clipboard
  2. 2 Open ChatGPT, Claude, or your preferred AI assistant
  3. 3 Paste the prompt and customize any placeholder text (like product names or brand colors)
  4. 4 Let the AI generate your website code or design specifications

About this Blog Prompt

This Blog Post Page prompt is designed to help you quickly create professional blog websites using AI tools like ChatGPT, Claude, v0 by Vercel, Cursor, and Bolt.new.

Whether you're a developer, designer, or entrepreneur, this free AI prompt gives you a head start on building blog post page. Simply copy the prompt, paste it into your favorite AI coding assistant, and customize it to match your brand.

Compatible AI Tools

  • ChatGPT (GPT-4) - Great for detailed code generation and explanations
  • Claude 3 - Excellent for complex, nuanced website designs
  • v0 by Vercel - Perfect for React and Next.js components
  • Cursor - Ideal for AI-powered coding in your IDE
  • Bolt.new - Quick prototyping and full-stack apps
  • Lovable - User-friendly AI website builder

Tags

Article Post Content Blog AI Prompt Free Template Website Builder Web Design Copy Paste Prompt