github-readme-blog-cards

KO | EN

gitlite — search

#javascript #llm #golang #go #android #rust #deep-learning #macos #nodejs #windows #vue #ios #openai #open-source

github-readme-blog-cards

(★ 7)

Ditch plain links — showcase your blogs with clean, customizable cards in your GitHub README. 🔥

github-readme-blog-cards Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<img src="https://res.cloudinary.com/djix6uusx/image/upload/v1754362230/blog-logo_jrjmgp.png" width="130px"/>
 <h3 align="center">Github Readme Blog Cards</h3>

Turn your blog links into sleek preview cards — perfect for showcasing your latest posts right inside your GitHub README!

## ⚡ Quick setup

1. Copy-paste the HTML code below into your GitHub profile README
2. Replace `<blog_URL>` with the URL and `Blog Title` with the title of your blog.

```md
<a href="<blog_URL>">
 <img src="https://github-readme-blog-cards.onrender.com?url=<blog_URL>" alt="Blog Title"/>
</a>
```

⚠️ **Important :** Use HTML `<img>` tags instead of Markdown image syntax `![]()`. Blog URLs contain _special_ characters (@, :, /) and additional parameters that can break Markdown parsing, causing images to fail loading. HTML syntax ensures _reliable_ rendering across all scenarios.

### Example :point_down:

```md
<a href="https://medium.com/@RitikaAgrawal08/exploring-css-flexbox-getting-started-with-the-basics-1174eea3ad4e">
 <img src="https://github-readme-blog-cards.onrender.com?url=https://medium.com/@RitikaAgrawal08/exploring-css-flexbox-getting-started-with-the-basics-1174eea3ad4e" alt="CSS Flexbox"/>
</a>
```

## ⚙ Demo Site

Here you can customize your blog card with a live preview.

<https://github-readme-blog-cards.onrender.com/demo>

## 🔧 Options

The `url` field is **required**. All other fields are _optional_.

## 🖼 Layouts

To use a **layout**, append `&layout=` followed by layout value available at the end of source URL :

```md
<a href="<blog_URL>">
 <img src="https://github-readme-blog-cards.onrender.com?url=<blog_URL>&layout=horizontal" alt="Blog Title"/>
</a>
```

## 🌈 Themes

To use a **theme**, append `&theme=` followed by a theme value available at the end of source URL :

```md
<a href="<blog_URL>">
 <img src="https://github-readme-blog-cards.onrender.com?url=<blog_URL>&theme=dark" alt="Blog Title"/>
</a>
```

## 🤗 Contributions

Contributions are most welcome! Feel free to [open an issue](https://github.com/Ritika-Agrawal811/github-readme-blog-cards/issues/new/choose) or submit a [pull request](https://github.com/Ritika-Agrawal811/github-readme-blog-cards/compare) if you have a way to improve this project.

Make sure your request is meaningful and you have tested the app locally before submitting a pull request.

Refer to [CONTRIBUTING.md](/CONTRIBUTING.md) for more details on contributing, installing requirements, and running the application.

## 🙋‍♂️ Support

Give a ⭐ if you like this project, and share it with your friends!

• • •

#### Thanks so much! Happy Coding! ✨

Inspired by [Github Readme Streak Stats](https://github.com/DenverCoder1/github-readme-streak-stats) :fire:

github-readme-blog-cards

github-readme-blog-cards Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

github-readme-blog-cards

github-readme-blog-cards Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README