Widget Code Generator (Popular posts, Recent posts, etc.)

Widget Code Generator

Create Popular/Recent/Related Posts widgets and get copy-ready code for Blogger & WordPress.

SEO-friendly • Lightweight • Copy & Paste

Customize widget type, style, and content options below — then copy the HTML/CSS/JS snippet into your blog's sidebar or post. Includes accessibility and structured data tips.

Widget type Recent Posts Popular Posts Related Posts

Platform Generic HTML (any platform)Blogger / BlogspotWordPress (Widget)

Posts count

Show thumbnails Yes — 80×80 thumbnailsNo — Titles only Excerpt length (characters) Widget title Background color Accent / link color Font family

SEO tip: keep widget title concise and include your target keyword (e.g. "Popular posts on SEO"). Use rel="noopener noreferrer" on external links and include descriptive aria-label attributes.

Generated snippet

Preview will appear here after generating.

Copyable code

/* Generated code will appear here */

How it works

This builder produces a self-contained HTML/CSS/JS widget that you can paste into most blog sidebars. For dynamic platforms (WordPress/Blogger) you'll often replace the static list with platform-specific loops — this tool provides generic markup ready to be adapted.

---

Accessibility & SEO

1. Use semantic elements: <aside>, <h3>, <ul>.
2. Make titles links with descriptive anchor text (avoid "click here").
3. Include structured data (Article / BlogPosting) on your posts — widgets should not duplicate full content.

---

Platform notes

Blogger: use b:loop or feed-based techniques for dynamic lists. WordPress: paste the HTML into a Text widget or convert to a shortcode/plugin for dynamic behavior.

Copy the generated code into your blog. Update any platform-specific placeholders (e.g., {{POST_URL}}, {{POST_TITLE}}) with your CMS templating as needed.