How to Create Website Preview Cards for a Blogger Blogroll in India

A website preview card in a Blogger blogroll is a visual link shown on your blog beside the name of another website. Start with Blogger’s built-in Blog List (also called a blogroll) widget and inspect its available display options. If those options do not produce the card you want, customize the theme’s layout and styling. What appears depends on the widget options, your theme, and whether the linked site exposes a usable image or feed thumbnail.

This guide is about previews displayed inside your Blogger site. A preview that appears when someone shares your Blogger URL on WhatsApp, X, Facebook, or another service is a separate feature based on page metadata and the sharing platform’s cache.

1. Start with Blogger’s Blog List widget

Blogger’s Help describes the building block this way: “A widget is a page element such as a page, a blogroll, or anything else you can add from the ‘Page Elements’ tab.” The wording refers to an older interface, so labels in your dashboard may differ. Open your blog’s layout editor and look for the built-in Blog List or blogroll widget. Check the options actually offered in your account and theme; there is no verified universal switch that turns every Blog List into a rich preview-card grid.

1. Open the Blogger dashboard for the blog you want to edit.
2. Go to the layout editor and locate the Blog List/blogroll widget, or add one if appropriate for your layout.
3. Inspect its settings for title, linked blogs, and any thumbnail or feed display option. Available settings can vary, so use the labels shown in your dashboard.
4. Save, then view the published blog at desktop and narrow/mobile widths. Confirm that the links and any thumbnails appear as intended.

A first-party Blogger Developers announcement from 2008 described Blog Lists displaying the most recent thumbnail from Blogger and other Media RSS-enabled feeds. That is a reason to check your current widget settings, not proof that the same option remains available or behaves the same way today. See the Blogger Developers archive and Blogger Help on layouts and gadgets.

2. Decide whether the built-in result is enough

Approach	Setup	Control over image and text	Dependencies	Maintenance
Blog List widget	Usually the quickest place to start	Limited to the widget’s current settings	May depend on feed or thumbnail information from linked sites	Usually lower, though options and rendering can vary
Theme-level customization	Requires editing and checking your theme	More control over card appearance and content	Depends on the markup and data available to your chosen implementation	Theme changes can require adjustments

This is a practical comparison, not a measured performance result. If a tidy linked list meets your needs, keep it. Customize only when the list lacks the image, description, spacing, or responsive arrangement your readers need.

3. Customize the theme for card-style links

Blogger themes organize page content with sections and widgets and support layout and theme customization. A card design may therefore require a theme-level change when the built-in widget does not expose the presentation you want. The documentation reviewed does not establish one HTML/CSS snippet that works universally across current Blogger themes.

Before editing

• Save a copy of your current theme so you can restore it if the edit causes a problem.
• Identify how your theme renders the Blog List widget and where its markup and styles belong. Theme structures differ; do not paste an unadapted snippet into an arbitrary location.
• Decide where each card’s image, site name, destination URL, and short description will come from. Do not assume every external site supplies a thumbnail or feed in a format your implementation can use.
• Keep each card understandable without its image. Give linked images meaningful alternative text, and avoid duplicating nearby link text in a way that makes screen-reader output confusing.

Illustrative HTML and CSS pattern

The following is a presentation pattern, not a drop-in Blogger widget. Adapt its markup to the data and location supported by your theme. Replace the example destination and image with content you have permission to use, and ensure the image URL is actually available to the browser.

<div class="blogroll-cards">
  <article class="blogroll-card">
    <a class="blogroll-card__link" href="https://example.com/">
      <img
        class="blogroll-card__image"
        src="https://example.com/preview.jpg"
        alt="Preview of Example site"
        loading="lazy"
      >
      <div class="blogroll-card__body">
        <h3>Example site</h3>
        <p>A short, useful description of the site.</p>
      </div>
    </a>
  </article>
</div>

.blogroll-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1rem;
}
.blogroll-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #d8dce2;
  border-radius: .75rem;
}
.blogroll-card__link {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
.blogroll-card__link:focus-visible {
  outline: 3px solid #2457c5;
  outline-offset: 3px;
}
.blogroll-card__image {
  display: block;
  width: 100%;
  height: auto;
}
.blogroll-card__body {
  padding: 1rem;
}
.blogroll-card__body h3 {
  margin: 0 0 .5rem;
}
.blogroll-card__body p {
  margin: 0;
}

The CSS uses a responsive grid whose columns shrink to fit available space; it does not impose a Blogger-required image ratio or dimension. Choose image treatment based on your actual content and theme. If you crop images to a fixed height, check that the crop preserves useful details.

Content and accessibility checklist

• Use the site’s recognizable name as the heading and a concise description that helps readers decide whether to follow the link.
• Use meaningful alt text when an image conveys information. If it is purely decorative and the adjacent text already names the site, an empty alt attribute may be more appropriate.
• Make the destination clear, and ensure keyboard users can see the focus indicator.
• Check text contrast, wrapping, and spacing at desktop and mobile widths.
• Test a broken or missing thumbnail. The card should remain usable if an external image is unavailable.

Blogger’s image guidance covers image descriptions, including alt text and titles: Blogger Help.

4. Understand thumbnails and feed limits

A Blog List can only show a thumbnail if its current implementation can obtain one. The linked site may not expose an image or feed thumbnail in a form the gadget or your customization can use. An image may also be unavailable, blocked, or changed later. A custom theme can give you more control over the layout, but it cannot guarantee that every external site supplies suitable preview content.

For reliable presentation, choose a fallback: a neutral site mark you are entitled to use, a text-only card, or a locally hosted image with appropriate rights. Avoid scraping external pages or assuming their images can be reused. If you manage the linked site, publishing feed content and suitable images may help consumers that support them, but it does not guarantee a Blogger thumbnail.

5. Check the result on desktop and mobile

1. Save the layout or theme edit and open the public blog page.
2. Check that every card links to the intended destination and that the title and description are readable.
3. Resize the browser to a narrow viewport or inspect the page on a phone. Look for horizontal overflow, cramped text, and images that dominate the card.
4. Test keyboard navigation and confirm each link has a visible focus state.
5. Reload after clearing or bypassing the browser cache if a saved CSS change does not appear. Also check whether your theme or a caching layer is serving an older page.

6. Troubleshooting

Symptom	Likely cause	What to try
No thumbnail appears in the Blog List	The current widget or theme does not offer that option, or the linked site provides no usable feed thumbnail	Inspect the widget’s actual settings and theme behavior. Use a theme customization with an image you can provide, or keep a text link.
The thumbnail is broken	The image URL is wrong, unavailable, or no longer served	Check the URL in a browser and replace it with an image you control or a text-only fallback.
Cards look like plain links	The CSS was not loaded, selectors do not match the rendered markup, or the theme overrides the styles	Inspect the rendered page and adapt selectors to the theme. Confirm the CSS is saved in a location the theme uses.
Cards overflow on phones	Fixed widths, long unbroken text, or images wider than their container	Use a responsive grid, allow text to wrap, and constrain images to the card width.
Theme layout breaks after an edit	The markup was inserted in an incompatible location or conflicts with theme structure	Restore the saved theme copy, then make smaller changes in the correct widget or theme section.
A social share still has no preview	On-site blogroll styling does not set or refresh metadata used by external sharing services	Check the Blogger page’s metadata and the social platform’s preview behavior separately. Social services may cache previews.

7. Blogroll cards versus social-sharing cards

These are different outputs. A blogroll card is rendered by your Blogger page’s widget or theme. A social-sharing preview appears when another service processes a shared page URL; it depends on page metadata and that service’s behavior, including caching. Blogger documents share buttons and site feeds, but those do not establish that social metadata creates cards inside a Blog List. A Blogger Help Community discussion about Open Graph and Twitter metadata addresses the external-sharing case, not the on-site blogroll: Blogger Help Community.

A custom domain is not established as a prerequisite for blogroll thumbnails or cards. Do not buy one solely to enable this layout; consider one only for your broader site needs. See Blogger Help on custom domains.

8. Or skip the browser setup

If you need a screenshot image for a card or want to inspect how a linked page renders, ScreenshotNeo can return an image or PDF from one GET request. The example below saves a screenshot of Stripe as WebP. Create an API key and see the ScreenshotNeo API documentation for request options and response details.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

ScreenshotNeo removes cookie banners, newsletter popups, and chat widgets before the shot; bot checks, blank pages, and failed loads are never billed. Its MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. A screenshot is an image asset, not a substitute for a site’s feed thumbnail or permission to reuse its content. For a blogroll image, use content you have rights to publish and add suitable alt text.

Learn about ScreenshotNeo, or sign up for 1,000 free screenshots a month with no card.

FAQ

Does every Blogger theme support thumbnail cards in a Blog List?

The reviewed documentation does not confirm a universal setting. Check the options in your own widget and theme; richer styling may need theme customization.

Do I need a custom domain?

No custom-domain requirement for this task was established by the documentation reviewed.

Can I use the same card to control what appears on social media?

No. On-site blogroll rendering and external sharing previews are separate. Social services use page metadata and their own preview handling.

What if a linked site has no suitable thumbnail?

Use a text-based card or an image you are allowed to publish, and make sure the link remains clear if the image fails.

Sources

• Blogger Help: Layouts and gadgets
• Blogger Help: Images and descriptions
• Blogger Developers archive (historical Blog List thumbnail announcement)
• Blogger Help: Custom domains
• Blogger Help Community: external sharing preview discussion