GridView Theme Documentation

Theme Installation

After purchasing the GridView Blogger template, use the download instructions in your product delivery email to obtain the template package. Follow the steps below to extract and install the template on your blog.

Before installing: Save your current theme using Theme → More (the dropdown menu) → Backup → Download. Keep a separate copy of any existing gadget content you want to reuse. See Blogger’s theme instructions.

Recommended feed setting for GridView:

Go to Blogger Dashboard → Settings → Site feed → Allow blog feed, select Full, and click Save. Use Full so GridView's feed-based features can access complete post content, including video/audio embeds, gallery images and longer snippets when loading custom widgets or paginated post cards.

This setting is recommended for complete feature support; it is not required just to upload/install the XML. Short or Until Jump Break can omit content that cards need, while None disables feeds. Full also makes complete post content available through your public site feed. See Check Your Blogger Feeds.

How to Download After Purchase

  1. Check your email inbox (or spam folder) for the product delivery email.
  2. Click the provided download link to download the .zip file to your computer.
  3. Right-click the ZIP file and choose "Extract All", or use a tool like WinRAR or 7-Zip to unzip the package.
  4. Inside the extracted folder, you’ll find the template file named gridview-blogger-template.xml.

Method 1: Copy-Paste XML into Edit HTML (Recommended)

Open the supplied XML file in a plain-text editor and replace the code in Blogger’s Edit HTML editor with its complete contents.

  1. Open the gridview-blogger-template.xml file using a text or code editor (e.g., Notepad, Notepad++, VS Code, Sublime Text).
    Important: Avoid using MS Word or rich text editors, as they may alter or corrupt the code.
  2. Select all code using Ctrl + A (Cmd + A on Mac) and copy it with Ctrl + C (Cmd + C on Mac).
  3. Go to your Blogger Dashboard and choose your blog.
  4. Click Theme on the sidebar.
  5. Click the dropdown arrow ▼ next to Customize and select Edit HTML.
  6. Inside the code editor:
    • Press Ctrl + A (Cmd + A on Mac) to select all existing code.
    • Press Delete or Backspace to clear the editor.
    • Paste the copied template code using Ctrl + V (Cmd + V on Mac).
  7. Click the Save icon in the top-right corner.
Why we recommend this method:
  • Lets you check that the entire supplied XML file has been copied.
  • Lets you inspect the template code before saving.
  • After saving, check your Layout gadgets and view your blog to confirm the installation.

Method 2: Uploading the XML File

This method is easier for beginners and involves uploading the full XML template file without manual editing.

  1. Go to your Blogger Dashboard and select your blog.
  2. From the sidebar, click Theme.
  3. Click the dropdown arrow ▼ next to Customize and select Restore.
  4. Click Upload, browse your extracted folder, and select the gridview-blogger-template.xml file.
  5. Click Open to upload and install the template.

Troubleshooting Tips

  • Didn’t receive the download email? Check your spam/junk folder and contact the seller if the delivery email is missing.
  • Template not saving? Make sure you copied the entire XML code from the .xml file without missing any part.
  • Layout broken or widgets missing? Re-add or configure them via the Layout section.
  • Changes not showing? Clear browser cache with Ctrl + F5 (Cmd + F5 on Mac).
  • Want to revert? Restore your saved XML file via Theme → More (the dropdown menu) → Restore → Upload.
  • Still can’t install the theme? Contact us for help.

How to Configure Meta Tags

This tutorial will guide you through editing specific values within your Blogger meta tags by accessing the Edit HTML section. Meta tags provide information about your blog's content to search engines and social media platforms. Editing these values can improve your blog's visibility and sharing capabilities.

1 Access the Theme's XML Code

  1. Log in to Blogger.com and open your blog.
  2. From the left-hand menu, click Theme.
  3. Click the dropdown arrow ▼ beside the Customize button.
  4. Select Edit HTML to open the theme’s source code.

2 Locate the Meta Tags Code

Inside the HTML editor, look for the meta tags area located at the top of the theme’s source code.

If you unable to find it, click inside the HTML Editor and press Ctrl + F (Cmd + F on Mac) to open the search box and look for:

<meta content='@yourtwitterhandle' name='twitter:site'/>

This will take you to the meta tags area inside the <head> section of your theme.

3 Edit the Values

Carefully edit the values within the content attribute of the following meta tags:

Twitter Handle

Locate the lines:

<meta content='@yourtwitterhandle' name='twitter:site'/>
<meta content='@yourtwitterhandle' name='twitter:creator'/>

Replace '@yourtwitterhandle' with your actual Twitter(X) username (including the '@' symbol).

For example:

<meta content='@newbthemes' name='twitter:site'/>
<meta content='@newbthemes' name='twitter:creator'/>
Good to know:
  • The GridView theme and Blogger generate page titles, canonical URLs, Open Graph tags and Twitter Card tags from your blog and page data. The Twitter description is included when a page description is available, and the Twitter share image is included when a featured image is available.
  • These two Twitter handle lines are the manual placeholders in this meta-tag block. Descriptions and share images also depend on the blog/post information you provide in Blogger.

4 Save Your Changes

  1. Once you have edited the necessary values, click the Save icon () at the top right corner of the HTML Editor.
  2. Blogger will display a message indicating that the theme has been saved.
  3. You can now close the HTML Editor and view your blog to ensure the changes are reflected (though meta tags are not directly visible on the page, search engines and social media will use them).

Important Notes

  • Be careful when editing HTML. Incorrect modifications can break your blog's layout or functionality. If you are unsure about any changes, it's best to leave them as they are or consult a professional.
  • Back up your theme before making changes. Before editing the HTML, you can download a backup of your current theme in the "Theme" section (click the dropdown next to "Customize" and select "Backup"). This allows you to restore your blog if something goes wrong.
  • Changes may not be immediately visible. It might take some time for search engines and social media platforms to recrawl your blog and recognize the updated meta tag information.

How to Add a Header Image

Your theme includes a dedicated Header Image section at the top of your blog, above the site header. Follow these simple steps to add or update your header image using the built-in Image gadget.

1 Access the Header Image Settings

  1. Log in to Blogger.com and select your blog.
  2. From the left sidebar, click Layout.
  3. Locate the Header Image section in your layout.
    This contains a pre-configured Image gadget (named 'Header Image') that is locked to maintain your theme's design.
  4. Click Edit on the Header Image gadget to open settings.

2 Configure Your Header Image

The image configuration popup contains these options:

Image

  • Upload an image from your computer
  • Or paste an image URL if hosted elsewhere.

Image Link (Optional)

Make your header clickable by entering a destination URL.

Caption (Optional)

This text will appear over your header image as a big overlay title.

Image Recommendations:
  • Ideal width: 1200px or wider (for high-resolution displays).
  • Height: Adjust according to your design needs.
  • File type: JPG or PNG with optimized compression.
  • File size: Under 500KB for faster loading.

3 Save and Publish

  1. Click on the Save of the Image gadget popup.
  2. Click on the Save button of the Layout page.
  3. View your blog to see the changes.

Troubleshooting Tips

  • Image not appearing? Check if you clicked both Save buttons.
  • Image looks distorted? Try using a different aspect ratio.
  • Slow loading? Compress images before uploading (aim for under 500KB)
  • Changes not visible? Clear your browser cache (Ctrl+F5)

How to Set Up the Primary Menu

Your Blogger theme includes a Primary Menu powered by a built-in "Link List" gadget. This lets you create dropdowns and multi-level navigation without writing any code — just by editing items in the Layout section.

Step 1: Go to the Layout Page

  1. Log in to Blogger.com and select your blog.
  2. From the left sidebar, click Layout.
  3. Locate the Primary Menu section in your layout.
    This contains a pre-configured LinkList gadget (named 'Primary Menu Links') that is locked to maintain your theme's design.
  4. Click Edit on the Primary Menu Links gadget to open settings.

Step 2: Add or Edit Menu Items

You'll now see a screen titled Configure Link List. This is where you manage your navigation.

  • Click Add a New Item to insert a new link.
  • In the Site name field, type the name of the menu item.
  • In the Site URL field, add the link (or use # as a placeholder).
  • Use the / arrows to reorder items.
  • Click Save when you're done.

Step 3: Create Dropdown Menus Using Underscores

The Primary Menu supports nested dropdowns using underscores; the example below demonstrates 10 submenu levels. Add items in parent-first order without skipping a level. You control the structure by adding underscores (_) in front of the "Site name":

Menu Type What to Enter in "Site name" Field
Top-Level Menu Item Business
First-Level Submenu _ Internet
Second-Level Submenu __ Sub Child Category 1

No underscore : Top-level menu item.
One underscore (_) : First-level submenu
Two underscores (__) : Second-level submenu (nested under first-level)
And so on...

Example Menu Structure

Home
Business
_ Internet
_ Market
_ Stock
Downloads
_ Dvd
_ Games
_ Software
__ Office
Parent Category
_ Child Category 1
__ Sub Child Category 1
__ Sub Child Category 2
__ Sub Child Category 3
_ Child Category 2
_ Child Category 3
_ Child Category 4
Depth
_ Level 01
__ Level 02
___ Level 03
____ Level 04
_____ Level 05
______ Level 06
_______ Level 07
________ Level 08
_________ Level 09
__________ Level 10
Health
_ Childcare
_ Doctors
Uncategorized

Extra Tips

  • Use # for items without a final link.
  • Keep the Sorting option set to Don't sort.
  • The supplied gadget is named Primary Menu Links. Dropdown behavior depends on the link order and underscores, not on the gadget title.
  • The theme script will automatically build dropdowns based on the underscore structure.

Step 4: Save and View

  1. Click Save in the widget popup.
  2. Reload your blog homepage.
  3. Hover over menu items like Business or Parent Category to see dropdowns.

That's it! You've successfully created a structured primary menu for your blog using the Layout page.

Main Posts Grid & Supported Post Formats

Publish Different Post Formats in One Grid

GridView's main Blog Posts area supports normal image posts, text-only posts, YouTube, Vimeo/Dailymotion, HTML5 video, HTML5 audio, SoundCloud/Spotify and galleries. This is the main post listing on the homepage, label, search and archive pages; it adapts its masonry columns to the available width.

  1. Create or edit a post in Blogger. Add your title and content.
  2. For media examples below, switch the post editor to HTML view and insert the appropriate code. Replace example.com URLs and YOUR_VIDEO_ID/YOUR_TRACK_ID placeholders with your own accessible media.
  3. For a gallery, add the Gallery label in the post settings.
  4. Publish or update the post, then open a listing page containing it to check its grid card.

These examples belong in a post's content. You do not need to add a custom widget or paste data-gridview-widget code to enable the main grid. The data-gridview-thumbnail and data-gridview-media settings described under Custom Grid Widget Settings do not configure this main Blog Posts grid. Use Main Posts Grid Settings for its independent controls.

7.1. Normal Image Post

Upload an image with the Blogger post editor, or add an accessible image URL in HTML view. Add your article text as usual. Blogger must recognize a featured image for the main card thumbnail.

<p>Your introduction goes here.</p>
<img src="https://example.com/photo.jpg" alt="Describe the image">
<p>Continue your article here.</p>

The main card uses the featured image and displays its title and text snippet.

7.2. Text-Only Post

Write a post without images, iframes, video or audio. No special label or format setting is needed.

<p>This is a text-only article introduction.</p>
<p>Add the rest of your article here.</p>

The card displays its title, snippet and available metadata without an image/media area.

7.3. YouTube Post

In the post editor's HTML view, insert a YouTube embed iframe. Replace YOUR_VIDEO_ID with the video ID, or use the iframe from YouTube's Embed option. A watch-page link alone is not an embed.

<iframe src="https://www.youtube.com/embed/YOUR_VIDEO_ID"
        title="Your video title"
        allow="autoplay; encrypted-media; picture-in-picture"
        allowfullscreen></iframe>
<p>Introduce your video here.</p>

Supported /embed/ URLs on youtube.com or youtube-nocookie.com produce a clickable video poster. Clicking it loads the player with an autoplay request; actual playback follows browser/provider rules.

7.4. Vimeo / Dailymotion Post

Use the provider's iframe embed code. Choose one example below and replace its placeholder ID.

<iframe src="https://player.vimeo.com/video/YOUR_VIDEO_ID"
        title="Your Vimeo video" allowfullscreen></iframe>
<iframe src="https://www.dailymotion.com/embed/video/YOUR_VIDEO_ID"
        title="Your Dailymotion video" allowfullscreen></iframe>

The grid inserts the supported iframe player in the card.

7.5. HTML5 Video Post

Use a hosted media file with a browser-supported format. Provide a src on the video element or nested source elements; an optional poster supplies the player's cover image.

<video controls poster="https://example.com/video-poster.jpg">
  <source src="https://example.com/video.mp4" type="video/mp4">
  Your browser does not support this video format.
</video>
<p>Describe your video here.</p>

The main grid creates an HTML5 video player with controls and preload=none. Media hosting, access and codecs determine whether the file can play.

7.6. HTML5 Audio Post

Use a hosted audio file, with a src attribute or nested source elements. Keep the intended audio player as the post's first media element.

<audio controls>
  <source src="https://example.com/audio.mp3" type="audio/mpeg">
  Your browser does not support this audio format.
</audio>
<p>Introduce the recording here.</p>

The card contains an HTML5 audio player with controls and preload=none.

7.7. SoundCloud / Spotify Post

Copy the provider's iframe Embed code into the post's HTML view. Use the player URL, not a normal track page link. Choose one example and replace its placeholder ID.

<iframe src="https://w.soundcloud.com/player/?url=https%3A%2F%2Fapi.soundcloud.com%2Ftracks%2FYOUR_TRACK_ID&amp;visual=false"
        title="Your SoundCloud track" height="166"></iframe>
<iframe src="https://open.spotify.com/embed/track/YOUR_TRACK_ID"
        title="Your Spotify track" height="352"
        allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"></iframe>

The theme supports SoundCloud player embeds from w.soundcloud.com and Spotify embeds from open.spotify.com. It uses an explicit positive numeric/pixel height when supplied. Otherwise Spotify defaults to 352px, SoundCloud visual=true to 450px, and other supported SoundCloud players to 166px. Percentage heights use the fallback.

7.9. Media Selection & Final Checks

  • One intended player per post: the main grid selects the first iframe, video or audio element in document order. It does not combine several players into one card. An unsupported iframe placed first can prevent a later supported player or gallery from being selected.
  • Gallery selection: galleries are considered when there is no iframe/video/audio candidate, or when main media=false bypasses that candidate, provided main gallery remains enabled. Use the exact Gallery label and two or more accessible images. Main galleries now skip failed images; if all images fail, the gallery is removed and layout is recalculated. Main and custom galleries have separate settings namespaces.
  • Image overlays: when a supported player or gallery replaces the original thumbnail, the thumbnail's bookmark/share/category overlays are removed with it. The card title, snippet and available footer metadata remain.
  • Use the actual embed: a normal provider URL or a clickable link is not enough. Supported player hosts are youtube.com, youtube-nocookie.com, player.vimeo.com, dailymotion.com, w.soundcloud.com and open.spotify.com, including their supported subdomains.
  • Use complete post content: keep media embeds/images in the post HTML. Feed-loaded listing pages also need the media to be available in the feed; check Blogger Feed Settings if a format works on the first listing but not after pagination.
  • Check the published result: view both the listing card and the individual post, then test at desktop and mobile widths. Try player controls, gallery arrows and any relevant page navigation. A provider restriction, missing file or unsupported codec can prevent playback even when the markup is correct.

For other loading or layout issues, see Troubleshooting & Final Checklist.

7.10. Configure Main Posts Grid Settings

The main listing now has its own configuration gadget. Go to Blogger Dashboard → Layout → Main Posts Grid Settings and edit the locked HTML gadget with that name. It contains settings only; it does not add a second visible post grid.

  1. Edit the existing settings block and keep data-gridview-main-settings="true" exactly. Only the first matching block is read.
  2. Adjust the main-grid attributes below, save the gadget and Layout changes, then reload a main listing page.
  3. Check the homepage and relevant label/search/archive pages, including their pagination. These settings do not style/configure individual article bodies or independent custom widgets.

Full Settings Code

All 23 attributes are included: the required configuration marker and 22 settings. The values below match the supplied theme configuration.

<div data-gridview-main-settings="true"
     data-gridview-main-orderby="date"
     data-gridview-main-order="desc"
     data-gridview-main-date-format="MMMM dd, YYYY"
     data-gridview-main-snippet-length="140"
     data-gridview-main-title="true"
     data-gridview-main-columns="4"
     data-gridview-main-thumbnail="true"
     data-gridview-main-media="true"
     data-gridview-main-gallery="true"
     data-gridview-main-save="true"
     data-gridview-main-share="true"
     data-gridview-main-labels="true"
     data-gridview-main-author="true"
     data-gridview-main-date="true"
     data-gridview-main-comments="true"
     data-gridview-main-snippet="true"
     data-gridview-main-related="true"
     data-gridview-main-related-count="3"
     data-gridview-main-related-thumbnail="true"
     data-gridview-main-related-tax="label"
     data-gridview-main-related-orderby="random"
     data-gridview-main-related-order="desc"></div>

Example Usage

This example uses up to three columns, most-commented-first ordering, a 200-character excerpt, no gallery navigation and text-only main related lists. Use one settings block, either the full reference or an adjusted example.

<div data-gridview-main-settings="true"
     data-gridview-main-orderby="comments"
     data-gridview-main-order="desc"
     data-gridview-main-date-format="MMMM dd, YYYY"
     data-gridview-main-snippet-length="200"
     data-gridview-main-title="true"
     data-gridview-main-columns="3"
     data-gridview-main-thumbnail="true"
     data-gridview-main-media="true"
     data-gridview-main-gallery="false"
     data-gridview-main-save="true"
     data-gridview-main-share="true"
     data-gridview-main-labels="true"
     data-gridview-main-author="true"
     data-gridview-main-date="true"
     data-gridview-main-comments="true"
     data-gridview-main-snippet="true"
     data-gridview-main-related="true"
     data-gridview-main-related-count="3"
     data-gridview-main-related-thumbnail="false"
     data-gridview-main-related-tax="label"
     data-gridview-main-related-orderby="random"
     data-gridview-main-related-order="desc"></div>

Main settings use data-gridview-main-*. Custom Grid Widgets use their separate data-gridview-* options. There is no main count, source-blog, label-filter or display-location attribute: the current Blogger listing determines the content and page size.

7.11. Main Grid Settings Reference

AttributeDescriptionAccepted ValuesDefault
data-gridview-main-settingsExact marker used to find this block. Keep true; false does not disable the main grid. Missing/nonmatching configuration uses defaults.truetrue
data-gridview-main-orderbySort the matching main listing by publication date, updated date, comment count or random order.date / modified / comments / randomdate
data-gridview-main-orderAscending or descending order of the selected sort field.asc / descdesc
data-gridview-main-date-formatPattern for main card dates. See the main-grid date examples below; this is not the custom-widget PHP-style format.Main-grid date tokensMMMM dd, YYYY
data-gridview-main-snippet-lengthMaximum excerpt length in Unicode code points, not words. Default 140.Whole number 1-1000140
data-gridview-main-titleShow the main card title; does not hide individual article titles.true / falsetrue
data-gridview-main-columnsMaximum main-grid columns. Fewer columns are used at narrower widths.Whole number 1-44
data-gridview-main-thumbnailShow the complete image/media area. False removes thumbnails, players and galleries.true / falsetrue
data-gridview-main-mediaEnable supported iframe/native video and audio. False bypasses players and can use an available static image. Galleries have their own switch.true / falsetrue
data-gridview-main-galleryEnable Gallery-labelled multi-image card navigation independently of media.true / falsetrue
data-gridview-main-saveShow the main card bookmark button. Does not disable saved posts globally or control every related-item button.true / falsetrue
data-gridview-main-shareShow main card thumbnail share controls.true / falsetrue
data-gridview-main-labelsShow main card category labels.true / falsetrue
data-gridview-main-authorShow main card author metadata.true / falsetrue
data-gridview-main-dateShow main card date metadata.true / falsetrue
data-gridview-main-commentsShow main card comment counts in the footer and thumbnail overlay where available.true / falsetrue
data-gridview-main-snippetShow the main card excerpt.true / falsetrue
data-gridview-main-relatedShow related lists inside main cards; does not configure the large single-post related section.true / falsetrue
data-gridview-main-related-countMaximum related items inside each main card, subject to matching candidates.Whole number 1-103
data-gridview-main-related-thumbnailShow images in main-card related lists; titles remain when false.true / falsetrue
data-gridview-main-related-taxMatch the first label when available, or match the post author. Without a label the label-mode candidate pool is unrestricted; an unavailable/Unknown author prevents author-mode matches.label / authorlabel
data-gridview-main-related-orderbySort the main-card related candidate pool; random shuffles candidates.date / modified / comments / randomrandom
data-gridview-main-related-orderAscending or descending related ordering for non-random sorting.asc / descdesc

Boolean values: main-grid flags trim spaces and ignore case; false, FALSE and spaced false disable an option. Other supplied values enable it. Use true/false for clarity. This does not change the custom-widget rule that only exact lowercase false disables an optional flag.

Numbers: invalid or out-of-range main values use their default, rather than being clamped. For example columns=5 uses 4, related-count=11 uses 3, and snippet-length=1001 uses 140. Decimal, negative, zero and nonnumeric values are invalid.

Media combinations: thumbnail=false hides the entire area. With thumbnail=true, media=false bypasses video/audio players but gallery=true can still show gallery navigation, even on a Gallery-labelled post that contains an embedded player. Set gallery=false as well to prevent gallery navigation. Available static thumbnails can remain when players/galleries are disabled.

Related content: main-card related lists use up to 500 summary-feed candidates plus available fallbacks, exclude the current post and apply their matching/count/sort controls. Their settings are separate from custom-grid related settings and the individual post's large related section.

7.12. Main Dates, Excerpts & Sorting

data-gridview-main-date-format uses its own tokens: YYYY/yyyy, YY/yy, MMMM, MMM, MM, M, dd, d, EEEE, EEE, HH, mm and ss. Empty/missing patterns default to MMMM dd, YYYY. Unrecognized text is retained; unsupported strings are not automatically replaced by a default.

Main Date PatternExample Output
MMMM dd, YYYYOctober 31, 2026
YYYY-MM-dd2026-10-31
EEEE, MMM d, yySaturday, Oct 31, 26
YYYY-MM-dd HH:mm:ss2026-10-31 09:08:07

Do not copy Y-m-d from the custom-widget Date Formats table into the main pattern: it would produce Y-m-31 for the example date. Main excerpts count Unicode code points; custom post widgets count words, and recent-comment excerpts count characters. Time tokens use the feed timestamp's time components.

Non-default main ordering indexes the matching listing's summary feed and sorts across the matching results, not just the cards currently visible. It retains label, search and archive selection, then loads the current page's post bodies. Feed availability is therefore important; Loading posts can appear while this completes. On initialization failure, native Blogger content/navigation can remain as a fallback.

Random main ordering keeps a generated gridview-main-seed in navigation URLs so the ordering stays consistent across those pages. Use the theme's generated links. Custom-order pagination uses Previous/Next instead of Newer/Older wording.

How to Add a Grid Posts Widget

Quick Start Guide

If you're using the GridView Blogger theme, you can easily add grid posts widgets to different sections of your website using the code provided below. You can insert the grid posts code using any of the following methods:

  1. Use an "HTML/JavaScript" gadget by going to the Blogger Dashboard → Layout.
  2. Use the "HTML view" of the post editor by editing any post or page.
  3. Add it directly into the theme by going to Blogger Dashboard → Theme → "Edit HTML".

The left and right sidebars exist only on individual posts and static pages. A widget in a sidebar cannot appear on the homepage, label, search or archive pages, even with data-display-locations="all". Use Featured Widgets or a footer column for those pages. When inserting a snippet directly into the XML, use valid XML syntax and escape special characters such as &amp; in attribute URLs; gadget Content fields and the post editor’s HTML view accept the HTML examples below.

To display a grid posts widget in the theme's featured area (below the website's header), follow these steps:

  1. Go to your Blogger Dashboard → Layout.
  2. Click Add a Gadget in the "Featured Widgets" section and choose HTML/JavaScript.
  3. Add the code snippet given below.
  4. Customize the data-gridview-* attributes as needed.

8.1. Grid Posts Widget Code

Full Widget Code

Includes all 29 supported attributes. This reference uses all labels from the current blog and explicitly allows all page types. For a homepage-only widget, set data-display-locations="home".

<div data-gridview-widget="grid"
     data-gridview-source-blog=""
     data-gridview-label=""
     data-gridview-ids=""
     data-gridview-exclude=""
     data-gridview-count="4"
     data-gridview-orderby="date"
     data-gridview-order="desc"
     data-gridview-thumbnail="true"
     data-gridview-media="true"
     data-gridview-author="false"
     data-gridview-date="true"
     data-date-format="Y-m-d"
     data-gridview-comments="true"
     data-gridview-snippet="false"
     data-gridview-snippet-length="20"
     data-gridview-save="true"
     data-gridview-share="true"
     data-gridview-columns="4"
     data-gridview-title="true"
     data-gridview-labels="true"
     data-gridview-related="false"
     data-gridview-related-thumbnail="true"
     data-gridview-related-count="3"
     data-gridview-related-tax="label"
     data-gridview-related-orderby="random"
     data-gridview-related-order="desc"
     data-display-locations="all"
     data-display-location-url=""></div>

Example Usage

The following example shows a ready-to-customize usage configuration. Use either the full code above or this example for one widget; you do not need to paste both.

<div data-gridview-widget="grid"
     data-gridview-source-blog=""
     data-gridview-label="Sports"
     data-gridview-ids=""
     data-gridview-exclude=""
     data-gridview-count="4"
     data-gridview-columns="4"
     data-gridview-orderby="date"
     data-gridview-order="desc"
     data-gridview-thumbnail="true"
     data-gridview-media="true"
     data-gridview-title="true"
     data-gridview-labels="true"
     data-gridview-author="false"
     data-gridview-date="true"
     data-date-format="Y-m-d"
     data-gridview-comments="true"
     data-gridview-snippet="false"
     data-gridview-snippet-length="20"
     data-gridview-save="true"
     data-gridview-share="true"
     data-gridview-related="false"
     data-gridview-related-thumbnail="true"
     data-gridview-related-count="3"
     data-gridview-related-tax="label"
     data-gridview-related-orderby="random"
     data-gridview-related-order="desc"
     data-display-locations="home"
     data-display-location-url="">
</div>

The data-gridview-widget="grid" is the required attribute that tells the widget script to initialize a grid posts widget. The widget will not function without this attribute, so make sure it's included in your HTML.

8.2. Grid Posts Widget Settings

This widget supports a total of 29 settings, which are controlled via data-* attributes within the widget code. Below is a complete list of all 29 data attributes, along with their expected value types and default values.

Note: Some attributes are boolean (true/false), while others accept text or numeric values. Missing settings use the defaults listed below. For boolean settings, only the exact lowercase value false disables the option; other supplied values enable it. Use lowercase true or false. Numeric settings are parsed as integers: unparseable values and zero use the default, and other values are clamped to the documented range. Text settings follow the rules in their individual rows.

Keep data-gridview-widget="grid"; other settings are optional. The example explicitly uses data-display-locations="home". Change it to all or post,static_page when embedding the widget in a post or static page. If a feed fails, the label has no posts, or a non-empty source-blog URL is invalid, the widget displays “No posts found.”

8.2.1. Blog Settings

Attribute Description Accepted Values Default
data-gridview-source-blog Homepage URL of another Blogger site to fetch posts from.

Must be an HTTPS homepage URL. If the attribute is empty or missing, posts from your current blog will be displayed.		 Examples:
https://yourblog.blogspot.com/
https://yourcustomdomain.com/		 Empty (current blog)
data-gridview-label A label name to filter posts.
(Only posts with this label will be displayed).

If the label name is empty or if this data attribute is not present, posts from all labels will be displayed.		 Examples:
Sports, Web Design		 Empty
data-gridview-ids Comma-separated list of specific Blogger post IDs or full post URLs to display.
(Up to 100 items. Posts are shown in the given order. When used together with a label, only matching posts are kept.)		 Examples:
1234567890123456789
https://yourblog.blogspot.com/2024/12/post.html		 Empty
data-gridview-exclude Comma-separated list of post IDs or full post URLs that should be excluded from the widget. Examples:
1234567890123456789
https://yourblog.blogspot.com/2024/12/post.html		 Empty
data-gridview-count Number of posts to fetch.
(Will be clamped to the 1–100 range)		 Examples: 4, 8, 12 4
data-gridview-columns Number of columns to display posts in.
(Will be clamped to the 1–10 range. On small screens fewer columns are shown automatically. The grid uses a masonry layout.)		 Examples: 2, 3, 4 4

8.2.2. Thumbnail, Media & Gallery Settings

Attribute Description Accepted Values Default
data-gridview-thumbnail Show or hide the entire image/media area, including static thumbnails, video, audio and galleries. Set false to hide all of these visual/media blocks. true / false true
data-gridview-media Enable supported embedded/native video and audio in custom grid cards. Set false to use an available static image instead. Galleries remain enabled; use data-gridview-thumbnail="false" to hide the entire image/media area. true / false true

Supported Media in Grid Cards

Place the media in the post content so it is available in the Blogger feed. These settings apply to custom grid widgets; list and tabbed widgets continue to use image thumbnails.

  • Video embeds: supported YouTube, Vimeo and Dailymotion iframe embeds. Supported YouTube embeds use a clickable video poster.
  • Audio embeds: SoundCloud player iframes from w.soundcloud.com and Spotify player iframes from open.spotify.com.
  • Native video/audio: HTML <video> and <audio> elements with a src URL or nested <source> elements. Playback depends on the browser supporting the supplied media format. Relative native media URLs are resolved against the post URL.
  • Galleries: add the Gallery label (case-insensitive) to a post containing at least two usable images. Previous/next buttons navigate the images, and image alt text provides the captions. Failed images are skipped; the gallery is removed if all images fail.

When more than one media type is available, the card chooses a supported iframe video first, then native video, iframe audio, native audio, a multi-image gallery, or a static image.

Media versus thumbnails: data-gridview-media="false" disables video/audio players, but does not disable galleries. Its static-image fallback uses the first post image, a native video's poster, or the feed thumbnail when available. If the post qualifies as a gallery, gallery navigation still appears. data-gridview-thumbnail="false" hides the entire image/media area. Save/share/category overlays and the extra thumbnail comment link are created only for static image cards; they can appear again when a video/audio card falls back to an image.

SoundCloud and Spotify Player Height

The theme uses a positive numeric/pixel height from the embed's inline style, then its height attribute. If neither provides a usable height, Spotify defaults to 352px, SoundCloud with visual=true to 450px, and other supported SoundCloud embeds to 166px. Percentage heights use the fallback. This sizing is automatic in the main grid and custom grid widgets; there is no audio-height data attribute to add.

8.2.3. Post Title Settings

Attribute Description Accepted Values Default
data-gridview-title Show or hide post titles.
(Titles are always clickable)		 true / false true

8.2.4. Post Meta Settings

Attribute Description Accepted Values Default
data-gridview-labels Show up to 3 post labels as category links over image thumbnails. These links are absent on video, audio and gallery cards, and on cards without a static image thumbnail. true / false true
data-gridview-author Show or hide author names. true / false false
data-gridview-date Show or hide date. true / false true
data-date-format Date format of the post date. Check available date formats Y-m-d
data-gridview-comments Show or hide the comment count in the footer. An additional count linking to the comments section appears over static image thumbnails, but not over video, audio or gallery cards. true / false true

8.2.5. Post Snippet Settings

Attribute Description Accepted Values Default
data-gridview-snippet Show or hide post snippet. true / false false
data-gridview-snippet-length Length of the snippet text, counted in words.
(Will be clamped to the 1–100 range)		 Examples: 12, 20, 30 20

8.2.6. Post Ordering Settings

Attribute Description Accepted Values Default
data-gridview-orderby Sort posts by published date, updated date, comment count or randomly.
(Ignored when data-gridview-ids is used.)		 date / modified / comments / random date
data-gridview-order Use asc for ascending or desc for descending order of the selected sort field. This setting is ignored when orderby is random or explicit post IDs/URLs are supplied. asc / desc desc

8.2.7. Save & Share Settings

Attribute Description Accepted Values Default
data-gridview-save Show a bookmark button on image thumbnails so visitors can save posts in their browser. In this custom grid widget it is absent when thumbnails are disabled, no image is available, or the card uses video, audio or gallery media. true / false true
data-gridview-share Show social share buttons (Facebook, X, Pinterest, Reddit, LinkedIn) on image thumbnails. These buttons are absent on video, audio and gallery cards, and on cards without a static image thumbnail. true / false true

8.2.9. Visibility Settings

Attribute Description Accepted Values Default
data-display-locations Where the widget is displayed.
Use a single value or a comma-separated list (e.g. home,post).

If the data-display-locations attribute contains custom—either alone or with other comma separated values—you must also specify a custom URL using the data-display-location-url attribute.		 Examples:
home
post,static_page
home,post
home,archive,label
custom
Check available display locations		 home
(in the "Featured Widgets" area)
all
(everywhere else)
data-display-location-url If you use custom, specify the relative or absolute URL where the widget should appear. The URL must have the same origin as the page being viewed. Only the pathname is matched; query strings and fragments are ignored. Example:
https://yourblog.blogspot.com/p/about.html
/p/about.html
/2024/12/awesome-blog-post-with-everything-with.html		 Empty string

How to Add a List Posts Widget

Quick Start Guide

If you're using the GridView Blogger theme, you can easily add list posts widgets to different sections of your website using the code provided below. The theme already ships with several list posts widgets — Web Design, Life Style, Entertainment and Print Design in the footer columns, and Movies and Fashion in the sidebars. You can insert the list posts code using any of the following methods:

  1. Use an "HTML/JavaScript" gadget by going to the Blogger Dashboard → Layout.
  2. Use the "HTML view" of the post editor by editing any post or page.
  3. Add it directly into the theme by going to Blogger Dashboard → Theme → "Edit HTML".

To edit one of the default widgets (e.g. Web Design), go to Blogger Dashboard → Layout and click the edit icon of that HTML gadget, then customize the data-gridview-* attributes.

9.1. List Posts Widget Code

Full Widget Code

Includes all 19 supported attributes. This reference uses all labels from the current blog. List titles are always displayed; there is no list-widget title visibility attribute.

<div data-gridview-widget="list"
     data-gridview-source-blog=""
     data-gridview-label=""
     data-gridview-ids=""
     data-gridview-exclude=""
     data-gridview-count="5"
     data-gridview-orderby="date"
     data-gridview-order="desc"
     data-gridview-thumbnail="true"
     data-gridview-author="false"
     data-gridview-date="true"
     data-date-format="Y-m-d"
     data-gridview-comments="true"
     data-gridview-snippet="true"
     data-gridview-snippet-length="20"
     data-gridview-save="true"
     data-gridview-share="true"
     data-display-locations="all"
     data-display-location-url=""></div>

Example Usage

The following example shows a ready-to-customize usage configuration. Use either the full code above or this example for one widget; you do not need to paste both.

<div data-gridview-widget="list"
     data-gridview-source-blog=""
     data-gridview-label="Web Design"
     data-gridview-ids=""
     data-gridview-exclude=""
     data-gridview-count="5"
     data-gridview-orderby="date"
     data-gridview-order="desc"
     data-gridview-thumbnail="true"
     data-gridview-author="false"
     data-gridview-date="true"
     data-date-format="Y-m-d"
     data-gridview-comments="true"
     data-gridview-snippet="true"
     data-gridview-snippet-length="20"
     data-gridview-save="true"
     data-gridview-share="true"
     data-display-locations="all"
     data-display-location-url="">
</div>

The data-gridview-widget="list" is the required attribute that tells the widget script to initialize a list posts widget. The widget will not function without this attribute, so make sure it's included in your HTML.

9.2. List Posts Widget Settings

This widget supports a total of 19 settings, which are controlled via data-* attributes within the widget code. Below is a complete list of all 19 data attributes, along with their expected value types and default values.

Note: Some attributes are boolean (true/false), while others accept text or numeric values. Missing settings use the defaults listed below. For boolean settings, only the exact lowercase value false disables the option; other supplied values enable it. Use lowercase true or false. Numeric settings are parsed as integers: unparseable values and zero use the default, and other values are clamped to the documented range. Text settings follow the rules in their individual rows.

Keep data-gridview-widget="list"; other settings are optional. If a feed fails, the label has no posts, or a non-empty source-blog URL is invalid, the widget displays “No posts found.”

9.2.1. Blog Settings

Attribute Description Accepted Values Default
data-gridview-source-blog Homepage URL of another Blogger site to fetch posts from.

Must be an HTTPS homepage URL. If the attribute is empty or missing, posts from your current blog will be displayed.		 Examples:
https://yourblog.blogspot.com/
https://yourcustomdomain.com/		 Empty (current blog)
data-gridview-label A label name to filter posts.
(Only posts with this label will be displayed).

If the label name is empty or if this data attribute is not present, posts from all labels will be displayed.		 Examples:
Web Design, Movies		 Empty
data-gridview-ids Comma-separated list of specific Blogger post IDs or full post URLs to display.
(Up to 100 items. Posts are shown in the given order. When used together with a label, only matching posts are kept.)		 Examples:
1234567890123456789
https://yourblog.blogspot.com/2024/12/post.html		 Empty
data-gridview-exclude Comma-separated list of post IDs or full post URLs that should be excluded from the widget. Examples:
1234567890123456789
https://yourblog.blogspot.com/2024/12/post.html		 Empty
data-gridview-count Number of posts to fetch.
(Will be clamped to the 1–100 range)		 Examples: 2, 3, 5 5

9.2.2. Thumbnail & Image Settings

Attribute Description Accepted Values Default
data-gridview-thumbnail Show or hide post thumbnails.
(Thumbnails float to the left with the text wrapping around them.)		 true / false true

9.2.3. Post Title Settings

List posts always display a clickable post title. The list widget does not support hiding titles with data-gridview-title.

9.2.4. Post Meta Settings

Attribute Description Accepted Values Default
data-gridview-author Show or hide author names. true / false false
data-gridview-date Show or hide date. true / false true
data-date-format Date format of the post date. Check available date formats Y-m-d
data-gridview-comments Show or hide comment count. true / false true

9.2.5. Post Snippet Settings

Attribute Description Accepted Values Default
data-gridview-snippet Show or hide post snippet. true / false true
data-gridview-snippet-length Length of the snippet text, counted in words.
(Will be clamped to the 1–100 range)		 Examples: 12, 20, 30 20

9.2.6. Post Ordering Settings

Attribute Description Accepted Values Default
data-gridview-orderby Sort posts by published date, updated date, comment count or randomly.
(Ignored when data-gridview-ids is used.)		 date / modified / comments / random date
data-gridview-order Use asc for ascending or desc for descending order of the selected sort field. This setting is ignored when orderby is random or explicit post IDs/URLs are supplied. asc / desc desc

9.2.7. Save & Share Settings

Attribute Description Accepted Values Default
data-gridview-save Show a bookmark button on each post so visitors can save posts in their browser. true / false true
data-gridview-share Show a social share button (Facebook, X, Pinterest, Reddit, LinkedIn) on each post thumbnail. true / false true

9.2.8. Visibility Settings

Attribute Description Accepted Values Default
data-display-locations Where the widget is displayed.
Use a single value or a comma-separated list (e.g. home,post).

If the data-display-locations attribute contains custom—either alone or with other comma separated values—you must also specify a custom URL using the data-display-location-url attribute.		 Examples:
home
post,static_page
home,post
home,archive,label
custom
Check available display locations		 home
(in the "Featured Widgets" area)
all
(everywhere else)
data-display-location-url If you use custom, specify the relative or absolute URL where the widget should appear. The URL must have the same origin as the page being viewed. Only the pathname is matched; query strings and fragments are ignored. Example:
https://yourblog.blogspot.com/p/about.html
/p/about.html
/2024/12/awesome-blog-post-with-everything-with.html		 Empty string

How to Add a Tabbed Posts Widget

Quick Start Guide

The GridView Blogger theme includes a Tabbed Posts Widget that displays up to 3 post lists behind tab buttons. The theme already ships with one configured in the right sidebar (the "Tabbed Widget" HTML gadget with Web Design, Fashion and Random tabs). You can insert the tabbed widget code using any of the following methods:

  1. Use an "HTML/JavaScript" gadget by going to the Blogger Dashboard → Layout.
  2. Use the "HTML view" of the post editor by editing any post or page.
  3. Add it directly into the theme by going to Blogger Dashboard → Theme → "Edit HTML".

To edit the default tabbed widget, go to Blogger Dashboard → Layout → click the edit icon of the "Tabbed Widget" HTML gadget and customize the code below.

10.1. Tabbed Widget Code

Full Widget Code

Includes the widget marker, both visibility attributes, every shared post setting on the wrapper, and every per-tab setting on each of three tabs. The wrapper provides shared defaults; an attribute on an inner tab overrides the wrapper value, including data-date-format. Remove repeated inner attributes when you want a tab to inherit later wrapper changes.

<div data-gridview-widget="tabbed"
     data-gridview-source-blog=""
     data-gridview-label=""
     data-gridview-ids=""
     data-gridview-exclude=""
     data-gridview-count="3"
     data-gridview-orderby="date"
     data-gridview-order="desc"
     data-gridview-thumbnail="true"
     data-gridview-author="false"
     data-gridview-date="true"
     data-date-format="Y-m-d"
     data-gridview-comments="true"
     data-gridview-snippet="true"
     data-gridview-snippet-length="20"
     data-gridview-save="true"
     data-gridview-share="true"
     data-display-locations="all"
     data-display-location-url="">
  <div data-gridview-tab="Popular"
       data-gridview-source-blog=""
       data-gridview-label=""
       data-gridview-ids=""
       data-gridview-exclude=""
       data-gridview-count="3"
       data-gridview-orderby="comments"
       data-gridview-order="desc"
       data-gridview-thumbnail="true"
       data-gridview-author="false"
       data-gridview-date="true"
       data-date-format="Y-m-d"
       data-gridview-comments="true"
       data-gridview-snippet="true"
       data-gridview-snippet-length="20"
       data-gridview-save="true"
       data-gridview-share="true"></div>

  <div data-gridview-tab="Recent"
       data-gridview-source-blog=""
       data-gridview-label=""
       data-gridview-ids=""
       data-gridview-exclude=""
       data-gridview-count="3"
       data-gridview-orderby="date"
       data-gridview-order="desc"
       data-gridview-thumbnail="true"
       data-gridview-author="false"
       data-gridview-date="true"
       data-date-format="Y-m-d"
       data-gridview-comments="true"
       data-gridview-snippet="true"
       data-gridview-snippet-length="20"
       data-gridview-save="true"
       data-gridview-share="true"></div>

  <div data-gridview-tab="Random"
       data-gridview-source-blog=""
       data-gridview-label=""
       data-gridview-ids=""
       data-gridview-exclude=""
       data-gridview-count="3"
       data-gridview-orderby="random"
       data-gridview-order="desc"
       data-gridview-thumbnail="true"
       data-gridview-author="false"
       data-gridview-date="true"
       data-date-format="Y-m-d"
       data-gridview-comments="true"
       data-gridview-snippet="true"
       data-gridview-snippet-length="20"
       data-gridview-save="true"
       data-gridview-share="true"></div>
</div>

Example Usage

The following example shows a ready-to-customize usage configuration. Use either the full code above or this example for one widget; you do not need to paste both.

<div data-gridview-widget="tabbed" data-date-format="Y-m-d">

  <div data-gridview-tab="Fashion"
       data-gridview-label="Fashion"
       data-gridview-ids=""
       data-gridview-exclude=""
       data-gridview-count="3"
       data-gridview-orderby="comments"
       data-gridview-order="desc"
       data-gridview-thumbnail="true"
       data-gridview-author="false"
       data-gridview-date="true"
       data-gridview-comments="true"
       data-gridview-snippet="true"
       data-gridview-snippet-length="20"
       data-gridview-save="true"
       data-gridview-share="true"></div>

  <div data-gridview-tab="Web Design"
       data-gridview-label="Web Design"
       data-gridview-count="3"
       data-gridview-orderby="date"
       data-gridview-order="desc"
       data-gridview-thumbnail="true"
       data-gridview-author="false"
       data-gridview-date="true"
       data-gridview-comments="true"
       data-gridview-snippet="true"
       data-gridview-snippet-length="20"
       data-gridview-save="true"
       data-gridview-share="true"></div>

  <div data-gridview-tab="Random"
       data-gridview-label=""
       data-gridview-count="3"
       data-gridview-orderby="random"
       data-gridview-thumbnail="true"
       data-gridview-author="false"
       data-gridview-date="true"
       data-gridview-comments="true"
       data-gridview-snippet="true"
       data-gridview-snippet-length="20"
       data-gridview-save="true"
       data-gridview-share="true"></div>

</div>

The data-gridview-widget="tabbed" is the required attribute that tells the widget script to initialize a tabbed widget. The widget will not function without this attribute, so make sure it's included in your HTML. Each inner <div data-gridview-tab="..."> becomes one tab.

10.2. Tabbed Widget Settings

The tables below list 2 widget-level settings plus 17 settings per tab (a maximum of 3 tabs are displayed). Tab settings can also be placed on the outer wrapper as shared defaults; each inner tab can override them. The visibility attributes data-display-locations and data-display-location-url are also supported on the outer wrapper (see Display Locations). If no tab definitions are found, the widget automatically shows three default tabs: Popular (most commented), Recent and Random.

Note: Some attributes are boolean (true/false), while others accept text or numeric values. Missing settings use the defaults listed below. For boolean settings, only the exact lowercase value false disables the option; other supplied values enable it. Use lowercase true or false. Numeric settings are parsed as integers: unparseable values and zero use the renderer default (see the tab count exception below), and other values are clamped to the documented range. Text settings follow the rules in their individual rows.

Keep data-gridview-widget="tabbed" on the wrapper. Other settings are optional. Each list always displays clickable post titles; share controls require a thumbnail. An empty tab displays “No posts found.”

10.2.1. Widget Settings

These attributes go on the outer wrapper element:

Attribute Description Accepted Values Default
data-gridview-widget Widget type. Must be tabbed. tabbed None — required
data-date-format Date format used for the post dates inside all tabs. An inner tab can override it with its own data-date-format. Check available date formats Y-m-d

10.2.2. Tab Settings

These attributes go on each inner <div data-gridview-tab="..."> element (one per tab, up to 3 tabs):

Attribute Description Accepted Values Default
data-gridview-tab The name displayed on the tab button. Any text Tab 1 / Tab 2 / Tab 3
data-gridview-source-blog HTTPS homepage URL of another Blogger site, without a path, query, fragment or login details. Empty or missing values use the current blog. Can also be set on the outer wrapper to apply to all tabs. Examples:
https://yourblog.blogspot.com/
https://yourcustomdomain.com/		 Empty (current blog)
data-gridview-label A label name to filter posts.
(Only posts with this label will be displayed).

If empty or missing, posts from all labels will be displayed.		 Examples:
Fashion, Web Design		 Empty
data-gridview-ids Comma-separated list of specific Blogger post IDs or full post URLs to display. Examples:
1234567890123456789
https://yourblog.blogspot.com/2024/12/post.html		 Empty
data-gridview-exclude Comma-separated list of post IDs or full post URLs that should be excluded. Examples:
1234567890123456789
https://yourblog.blogspot.com/2024/12/post.html		 Empty
data-gridview-count Number of posts to show in the tab (1–100). Missing or empty values use 3; zero or unparseable non-empty values use the list renderer default of 5. Examples: 3, 5, 8 3
data-gridview-orderby Sort posts by published date, updated date, comment count or randomly. date / modified / comments / random date
data-gridview-order Use asc for ascending or desc for descending order of the selected sort field. This setting is ignored when orderby is random or explicit post IDs/URLs are supplied. asc / desc desc
data-gridview-thumbnail Show or hide post thumbnails. true / false true
data-gridview-author Show or hide author names. true / false false
data-gridview-date Show or hide date. true / false true
data-date-format Override the wrapper date format for this tab only. Omit this attribute to inherit the wrapper value. Check available date formats Wrapper value, or Y-m-d
data-gridview-comments Show or hide comment count. true / false true
data-gridview-snippet Show or hide post snippet. true / false true
data-gridview-snippet-length Length of the snippet text, counted in words. Examples: 12, 20, 30 20
data-gridview-save Show or hide the bookmark button on each post. true / false true
data-gridview-share Show a social share button on each post thumbnail. true / false true

How to Add an About & Social Widget

Quick Start Guide

The GridView Blogger theme includes an About & Social Widget that shows a profile image, a short description and a row of social icon buttons. The theme already ships with one configured in the left sidebar (the "About Us" HTML gadget). You can insert the about widget code using any of the following methods:

  1. Use an "HTML/JavaScript" gadget by going to the Blogger Dashboard → Layout.
  2. Use the "HTML view" of the post editor by editing any post or page.
  3. Add it directly into the theme by going to Blogger Dashboard → Theme → "Edit HTML".

To edit the default widget, go to Blogger Dashboard → Layout → click the edit icon of the "About Us" HTML gadget and customize the code below.

11.1. About Widget Code

Full Widget Code

Includes every fixed profile/appearance attribute, both visibility attributes, and placeholders for the ten social platform names listed in this guide. Add an image URL and the social URLs you want; empty URLs are ignored. Social attributes are extensible: use data-gridview-social-{platform} for another Font Awesome brand name, such as data-gridview-social-x-twitter. There is no finite list of all possible platform suffixes. About-widget links require HTTP(S) URLs; the envelope URL can point to your contact page.

<div data-gridview-widget="about-social"
     data-gridview-name="My Blog"
     data-gridview-image=""
     data-gridview-description="Write a short description of your blog here."
     data-gridview-round="false"
     data-gridview-social-facebook=""
     data-gridview-social-twitter=""
     data-gridview-social-instagram=""
     data-gridview-social-youtube=""
     data-gridview-social-linkedin=""
     data-gridview-social-pinterest=""
     data-gridview-social-reddit=""
     data-gridview-social-github=""
     data-gridview-social-rss=""
     data-gridview-social-envelope=""
     data-display-locations="all"
     data-display-location-url=""></div>

Example Usage

The following example shows a ready-to-customize usage configuration. Use either the full code above or this example for one widget; you do not need to paste both.

<div data-gridview-widget="about-social"
     data-gridview-name="My Blog"
     data-gridview-image="https://yourdomain.com/path-to-profile-image.jpg"
     data-gridview-description="Dictum pellentesque sollicitudin pharetra habitasse mus, tenetur fugit qui doloribus! Excepteur nulla."
     data-gridview-round="true"
     data-gridview-social-facebook="https://facebook.com/"
     data-gridview-social-twitter="https://twitter.com/"
     data-gridview-social-instagram="https://instagram.com"
     data-gridview-social-youtube="https://youtube.com/"
     data-gridview-social-linkedin="https://linkedin.com/"
     data-gridview-social-pinterest="https://pinterest.com/"
     data-gridview-social-reddit="https://www.reddit.com/"
     data-gridview-social-github="https://github.com/">
</div>

The data-gridview-widget="about-social" is the required attribute that tells the widget script to initialize an about widget. The widget will not function without this attribute, so make sure it's included in your HTML.

11.2. About Widget Settings

This widget uses 4 profile/appearance settings, the required data-gridview-widget="about-social" marker, and any number of social buttons. All of them are controlled via data-gridview-* attributes within the widget code.

Note: If an attribute is missing, that element is simply not displayed.

Keep data-gridview-widget="about-social". Other settings are optional; missing images and descriptions are omitted, and social links with unsupported URLs are ignored.

11.2.1. Profile Settings

Attribute Description Accepted Values Default
data-gridview-name Name of your blog/brand. Used as the alt text of the profile image. Any text Empty
data-gridview-image URL of the profile image. Example:
https://yourdomain.com/profile.jpg		 Empty
data-gridview-description Short description text shown under the image. Any text Empty

11.2.2. Social Button Settings

Attribute Description Accepted Values Default
data-gridview-round Show the social icons as circles instead of squares. Only the exact lowercase value true enables round icons; all other values use square icons. true / false false
data-gridview-social-{platform} HTTP or HTTPS social profile URL (relative URLs are resolved against your blog). Other URL schemes, including mailto:, are ignored in this About widget. Replace {platform} with a platform name to get its icon (e.g. data-gridview-social-facebook). Add as many as you need. Examples:
facebook, twitter, instagram, youtube, linkedin, pinterest, reddit, github, rss, envelope
(or any other Font Awesome brand name)		 -

Icon Mapping:

  • facebook → and twitter → use special icons.
  • rss → and envelope → .
  • Every other platform name uses the matching Font Awesome brand icon (e.g. instagram → , github → ).
  • Attributes with an empty or invalid URL are ignored.

How to Add a Recent Comments Widget

Quick Start Guide

The GridView Blogger theme includes a Recent Comments Widget that lists the latest comments of your blog. The theme already ships with one configured in the left sidebar (the "Recent Comments" HTML gadget). You can insert the recent comments code using any of the following methods:

  1. Use an "HTML/JavaScript" gadget by going to the Blogger Dashboard → Layout.
  2. Use the "HTML view" of the post editor by editing any post or page.
  3. Add it directly into the theme by going to Blogger Dashboard → Theme → "Edit HTML".

To edit the default widget, go to Blogger Dashboard → Layout → click the edit icon of the "Recent Comments" HTML gadget and customize the code below.

12.1. Recent Comments Code

Full Widget Code

Includes all seven supported attributes. Keep the initialization marker exactly data-gridview-comments="true". These are comment settings, not post-list settings.

<div data-gridview-comments="true"
     data-gridview-count="5"
     data-gridview-snippet-length="110"
     data-gridview-author="true"
     data-gridview-date="false"
     data-gridview-avatar="false"
     data-gridview-snippet="true"></div>

Example Usage

The following example shows a ready-to-customize usage configuration. Use either the full code above or this example for one widget; you do not need to paste both.

<div data-gridview-comments="true"
     data-gridview-count="4"
     data-gridview-snippet-length="110"
     data-gridview-author="true"
     data-gridview-date="false"
     data-gridview-avatar="true"
     data-gridview-snippet="true"></div>

The data-gridview-comments="true" is the required attribute that tells the widget script to initialize a recent comments widget. The widget will not function without this attribute, so make sure it's included in your HTML.

12.2. Recent Comments Settings

This widget supports a total of 7 settings, which are controlled via data-gridview-* attributes within the widget code. Below is a complete list of all 7 data attributes, along with their expected value types and default values.

Note: Some attributes are boolean (true/false), while others accept numeric values. Missing settings use the defaults listed below. The initialization marker data-gridview-comments must be exactly true. For the author, date, avatar and snippet options, only the exact lowercase value false disables the option; other supplied values enable it. Use lowercase true or false. Numeric settings are parsed as integers: unparseable values and zero use the default, and other values are clamped to the documented range. Text settings follow the rules in their individual rows.

Keep the required data-gridview-comments="true" marker. Other omitted settings use the defaults below.

12.2.1. All Settings

Attribute Description Accepted Values Default
data-gridview-comments Required marker: the value must be exactly true. Missing or other values do not initialize the widget. true None — required
data-gridview-count Number of comments to display.
(Will be clamped to the 1–50 range)		 Examples: 4, 5, 10 5
data-gridview-snippet-length Maximum length of each comment text, counted in characters.
(Will be clamped to the 1–500 range)		 Examples: 80, 110, 200 110
data-gridview-author Show the commenter name before the comment text (e.g. "John: ..."). true / false true
data-gridview-date Show or hide the comment date.
(Shown in Y-m-d format)		 true / false false
data-gridview-avatar Show or hide the commenter avatar image. true / false false
data-gridview-snippet Show or hide the comment text. true / false true

How to Add a Saved Posts Widget

Quick Start Guide

The GridView Blogger theme includes a Saved Posts feature. Visitors can click the bookmark icon on any post to save it in their browser, then open the bookmark button in the site header to read or remove saved posts. The theme already ships with a saved posts list configured in the right sidebar (the "Saved Articles" HTML gadget). You can insert the saved posts code using any of the following methods:

  1. Use an "HTML/JavaScript" gadget by going to the Blogger Dashboard → Layout.
  2. Use the "HTML view" of the post editor by editing any post or page.
  3. Add it directly into the theme by going to Blogger Dashboard → Theme → "Edit HTML".

13.1. Saved Posts Widget Code

Full Widget Code

This widget supports only the saved-posts marker, so its full code and usage example are identical. It has no count, label, source-blog, date-format or appearance data attributes.

<div data-gridview-saved-posts="true"></div>

Example Usage

The following example shows a ready-to-customize usage configuration. Use either the full code above or this example for one widget; you do not need to paste both.

<div data-gridview-saved-posts="true"></div>

Keep the data-gridview-saved-posts attribute so the script can find the saved posts list. The example uses true for clarity; the script checks for the attribute’s presence, so setting its value to false does not disable it. Remove the widget or its marker to remove that list.

Good to know:
  • This widget has no other settings — it automatically lists the posts saved in the visitor's browser.
  • Saved posts are stored locally in each visitor's browser (localStorage), not in your Blogger account. They do not sync between browsers or devices, and clearing site data removes them. Saving requires available browser storage.
  • The header also includes a bookmark button that opens the same saved posts list in a popup dialog.

How to Add Grid Advertisements

Your theme includes a dedicated Grid Advertisements section. Each gadget there with a non-empty widget-content area becomes one ad card in the main post grid, including homepage, label, search and archive listings. Ads are not inserted into custom grid widgets or individual post/page bodies. You can manage any number of ad gadgets in this section. The supplied gadgets are examples, not required slots or a fixed limit: replace their content, remove them, or add more HTML/JavaScript gadgets to suit your blog.

Step 1: Access the Grid Advertisements Section

  1. Log in to Blogger.com and select your blog.
  2. From the left sidebar, click Layout.
  3. Locate the Grid Advertisements section in your layout.
  4. Click Edit on an existing ad gadget to change its content, or click Add a Gadget and choose HTML/JavaScript to add another ad. Remove any sample or existing ad gadgets you do not want.

Step 2: Add Your Ad Code

Paste your advertisement code (e.g. Google AdSense code, a banner image or custom HTML) into the Content field of the gadget.

Good to know:
  • Add as many ad gadgets as you need. Each non-empty gadget contributes one reusable ad card; a single gadget is not repeated throughout the grid. The number of visible ads depends on both the configured gadgets and the posts on the current page.
  • One ad card is shown after each complete group of four posts, at the 5th, 10th, 15th positions, and so on, up to the number of non-empty ad gadgets. A page with 0-3 posts shows no ads; 4-7 posts allow up to one ad; 8-11 allow up to two; 12-15 allow up to three, and so on, provided enough populated gadgets are configured. Unused ad cards are not appended at the end. Empty gadgets do not consume a slot, and the same rule applies after pagination.
  • Widget titles are hidden inside ad cards.
  • Empty gadgets are ignored — leave the content blank to disable an ad slot.

Step 3: Save and View

  1. Click Save in the widget popup.
  2. Click the Save button of the Layout page.
  3. Reload your blog homepage to see the ad cards inside the post grid.

How to Customize GridView with Blogger Theme Designer

Customize Your Theme Without Editing Code

Blogger Customizer (Theme Designer) support is built into GridView. You can change the page background image, colors and fonts directly from Blogger Dashboard → Theme → Customize. The theme defines 35 customization groups for areas such as the header, menus, post cards, sidebars, footer and popup dialogs.

  1. Open Theme → Customize for the blog where GridView is installed.
  2. Use Background to change the page background image.
  3. Open Advanced, choose a GridView settings group, and adjust its colors or fonts.
  4. Check the preview, then click Save to apply your changes.

16.1. Open the Blogger Customizer

  1. Sign in to Blogger and select your blog.
  2. Choose Theme from the dashboard menu.
  3. Under My theme, click Customize to open the Theme Designer.
  4. Choose Background or Advanced from the designer’s menu, depending on what you want to change.

Start from the installed GridView theme. Before making a large set of changes, keep a backup using Theme → More (the dropdown menu) → Backup → Download.

16.2. Change the Background Image and Color

  1. In the Customizer, open Background and select the background image control.
  2. Choose a replacement image or upload your own using the options Blogger provides.
  3. Adjust the available image positioning, tiling or scrolling options to suit your image, and check the preview.
  4. To change the page’s base color, open Advanced → Body → Body Background Color.
  5. To use a plain color without a pattern or photo, remove the background image in Background and set Body Background Color.

GridView ships with a repeating background image. The page background and the backgrounds of post cards, sidebar widgets and the footer have separate controls, so changing the page background does not recolor those areas.

The page background is separate from the large Header Image at the top of the blog. Change that image through Layout → Header Image (see Header Image). Its caption font and color are available under Advanced → Header Image.

16.3. Change Theme Colors

Open Advanced and select the group for the part of the blog you want to style. The names below match the settings defined by GridView:

What to ChangeGroup and Example Controls
Accent colorBody → Main Color controls shared accents, including the ticker heading background, post-title hover color and several button/focus accents.
General text and linksBody → Main Text Color, Main Link Color, Main Link Hover Color, General Headings Color, Content Links Color and Content Links Hover Color.
Site headerSite Header → Header Background Color and Site Title Color.
Main and footer navigationPrimary Menu and Secondary Menu contain separate link, hover, submenu and responsive menu icon colors. Secondary Menu styles the footer navigation.
TickerTrending News Ticker → News Ticker Background Color, News Ticker Heading Color, and date/text/hover colors. The heading’s background uses Body → Main Color.
Post cardsGrid Posts → Grid Posts Background Color, Grid Posts Border Color, Grid Post Title/Footer Background Color and title/category/footer colors.
Widgets and footerUse Sidebar Widgets, Widget Title Bars, Featured and Custom Widgets, Footer and Copyrights for the relevant area.
Saved posts and bookmark/share buttonsSaved Posts Dialog controls the popup and saved-list colors. Save and Share Overlays controls the image-overlay icons, hover states, saved indicator and focus outline.

Main Color is a shared accent setting. Areas with their own color controls retain those settings; use the relevant group to build a consistent palette. Check text against its background, including hover and saved states.

16.4. Change Fonts and Text Size

  1. Open Advanced and choose the appropriate settings group.
  2. Select the named font control, choose a font family, and adjust its size and the style options shown by Blogger.
  3. Check the text in the preview. Use the matching group for other titles, menus or widgets that need a different font.
GroupFont ControlApplies To
BodyBody FontGeneral body text, including post text that inherits the body font.
BodyGeneral Headings 1 Font through General Headings 6 FontGeneral h1–h6 headings; titles with dedicated controls use their own settings.
Site HeaderSite Title FontThe text version of your site title.
Header ImageHeader Image Caption FontThe caption displayed over the header image.
Primary Menu / Secondary MenuPrimary Menu Font / Secondary Menu FontMain navigation / footer navigation.
Trending News TickerNews Ticker FontTicker text.
Grid PostsGrid Post Titles Font / Grid Post Categories FontGrid card titles / category labels.
Single PostsSingle Post Title Font / Single Post Meta FontIndividual post titles / post metadata. Single Post Meta Font also styles the main grid card footer.
Widget Title Bars / FooterWidget/Section Titles Font / Footer Widget Titles FontWidget and section headings / footer widget headings.
Widget Post ItemsWidget Post Titles Font / Widget Post Meta FontWidget post titles, including custom list/tabbed titles / the widget metadata that uses this control.
Author Bio Box / Related PostsAuthor Bio Name Font / Related Post Titles FontAuthor name / related-post headings.
Search OverlaySearch Heading Font / Search Field FontSearch popup heading / search input text.
Saved Posts DialogSaved Dialog Title Font / Saved Post Titles FontSaved popup heading / saved article titles.
HTML Inputs / Comments / pre TagButtons Font / Comment Form Title Font / pre/code Tags FontGeneral HTML buttons / comment form heading / formatted code blocks.

GridView has separate font settings for different areas. Changing Body Font does not replace a dedicated title, menu or widget font. Text styled directly inside a post or a third-party gadget may also retain its own formatting.

16.5. Advanced Settings Group Guide

The following groups are defined in the GridView template. Use their exact names when looking through Advanced. A change is visible when the corresponding element is present on the page you are previewing.

Advanced GroupWhat You Can Style
BodyPage background, body/general-heading fonts, main accent, text and link colors.
Site HeaderSite title font/color and header background.
Header ImageCaption font and color.
Primary MenuMain navigation font, links, hover states, submenu and responsive icon colors.
Secondary MenuFooter navigation font, background, borders, links, submenu and responsive icon colors.
Header Social ButtonsHeader social icon colors and hover colors.
Trending News TickerTicker font, background, heading text, dates and links.
Widget Title BarsWidget/section title font, bar background, border, text and shadow colors.
Grid PostsPost card backgrounds/borders, title and category fonts/colors, and footer colors.
Single PostsIndividual post title font/colors and post metadata font/colors.
Author Bio BoxAuthor name font, bio text and inner border.
Related PostsRelated title font and related item background/hover colors.
Sidebar WidgetsSidebar widget backgrounds, borders and link/hover colors.
Tabs and Labels CloudTab button text/background and label-cloud link/background/hover colors.
PaginationPage navigation link backgrounds, borders, text and hover states.
FooterFooter background, text, links, widget heading font/colors/borders and list borders.
CopyrightsCopyright bar background, border, text and link hover color.
Search OverlaySearch heading/input fonts, field colors, placeholder color and submit hover background.
HTML InputsGeneral button font/colors and HTML input text, border and focus text colors.
HTML TablesTable caption/header colors, borders, alternating rows and row hover color.
Selected TextText selection foreground and background.
hr TagHorizontal rule border and shadow colors.
pre TagFormatted code-block font, text and background.
code TagInline code text and background.
Marked and Inserted TagHighlighted/inserted text background.
CommentsComment card backgrounds/borders, author/date/action colors, avatars and form heading font.
Content BoxesContent box backgrounds and borders.
Widget Post ItemsWidget post title/meta fonts and colors, plus empty-message color.
Featured and Custom WidgetsCustom widget backgrounds/borders, featured heading bars, metadata and thumbnail fallback colors.
Native Featured PostBlogger Featured Post gadget card background.
Widget FormsWidget form labels, fields, borders, button text and hover background.
Saved Posts DialogDialog/list backgrounds, borders, title fonts, text, close controls and remove-button states.
Save and Share OverlaysOverlay button backgrounds/icons, hover/saved states and focus outline.
Back to Top ButtonBack-to-top background and icon color.
BlockquoteQuotation mark and citation colors.

16.6. Save and Check Your Changes

  1. Review the Customizer preview as you adjust the background, colors and fonts.
  2. Click Save in the Theme Designer.
  3. Open or reload your blog. Check the homepage and an individual post; sidebar settings appear on posts and static pages.
  4. Check your menus, footer, widget headings and text at desktop and mobile widths. Open Search or Saved Posts on the live blog when checking their popup styling.
If a change is hard to see:
  • Check that you saved the changes and are viewing the correct blog.
  • Use the specific group for that element. For example, Grid Posts controls card titles, while Single Posts controls individual post titles.
  • Remove the page background image if you want only the base background color to show.
  • Check for custom CSS or formatting in a post/gadget that overrides the theme’s styling.

For Blogger’s general instructions, see Use themes to change how your blog looks.

Date Formats

For main Blog Posts dates, use the separate Main Date Patterns. The table below lists the available date format values for the data-date-format attribute on custom grid, list and tabbed widgets. Missing, empty or unsupported formats fall back to Y-m-d. Time formats use the time components in the feed timestamp. Relative dates change with the current date; the relative example below is illustrative. The ticker and recent comments dates use fixed Y-m-d formatting.

Format KeyExample Output
H:i00:50
g:i a12:50 am
g:i A12:50 AM
g:i:s a12:50:48 am
g:i:s A12:50:48 AM
d.m.y27.11.10
Y.m.d2010.11.27
Y-m-d2010-11-27
Y/m/d2010/11/27
m.d.Y11.27.2010
m-d-Y11-27-2010
m/d/Y11/27/2010
d.m.Y27.11.2010
d-m-Y27-11-2010
d/m/Y27/11/2010
relative_14 years 8 months 2 days ago
m/d/Y g:i:s a11/27/2010 12:50:48 am
m/d/Y g:i:s A11/27/2010 12:50:48 AM
Y/m/d at g:i a2010/11/27 at 12:50 am
Y/m/d at g:i A2010/11/27 at 12:50 AM
d F27 November
F, YNovember, 2010
F j, YNovember 27, 2010
d M Y27 Nov 2010
M j, YNov 27, 2010
M j, Y @ H:iNov 27, 2010 @ 0:50
l, F j, YSaturday, November 27, 2010
l, F jS, YSaturday, November 27th, 2010

Display Locations

The table below lists the available display location values for the data-display-locations attribute. You can use a single value or a comma-separated list (e.g. home,post).

Value Widget Visibility Example URL
home In homepage of the blog. https://yourblog.blogspot.com/
post In individual blog post pages. https://yourblog.blogspot.com/2024/12/how-to-make-tea.html
static_page In standalone static pages. https://yourblog.blogspot.com/p/about-us.html
https://yourblog.blogspot.com/p/contact.html
archive In archive pages showing posts by date. https://yourblog.blogspot.com/2024_12_01_archive.html
label In label search pages. https://yourblog.blogspot.com/search/label/Sports
search In search results pages (excluding label searches). https://yourblog.blogspot.com/search?q=woodworking
https://yourblog.blogspot.com/search?updated-max=2024-12-14T17:18:00-07:00&max-results=6
error_page In 404 error pages. https://yourblog.blogspot.com/404
multiple A fallback view type only; it does not include home, label, search or archive. Use home,label,search,archive to target those listing pages. -
singular A fallback view type only; it does not include posts or static pages. Use post,static_page to target both. -
all On every view where the widget’s containing area exists. Sidebars are available only on posts and static pages. -
custom In a custom location defined using the data-display-location-url attribute. -

Troubleshooting & Final Checklist

Use this guide after installing GridView or changing its settings. Start with the checks below, then find the symptom that matches your blog. Some behaviors, such as sidebars appearing only on individual posts and static pages, are part of the theme’s design.

19.1. Start Here

  1. Confirm the installation: use the complete gridview-blogger-template.xml file and save the theme. If an XML error appears, check the reported line and any changes made since installation. See Theme Installation.
  2. Save in the right place: save gadget changes in Layout and appearance changes in the Blogger Customizer, then reload the live blog.
  3. Check the widget code: paste either its Full Widget Code or its Example Usage code for one widget. Keep the required marker, straight quotation marks and complete opening/closing tags. Use an HTML/JavaScript gadget or the post editor’s HTML view.
  4. Check the page and placement: confirm the widget’s visibility attributes and the area where you placed it. The homepage and an individual post do not have the same widget areas.
  5. Check loading: JavaScript must run for custom widgets, the ticker, saved posts, responsive menu toggles and enhanced pagination. Check whether a browser extension, network failure or newly added script is blocking the theme’s scripts or feeds.
  6. Change one thing at a time: compare with the supplied code and temporarily remove the most recent custom edit if the problem began after that edit. Reload the page without clearing site storage; clearing storage can remove saved posts.

19.2. Common Issues & Fixes

SymptomWhat to Check
Main grid settings seem ignored, or a number/date pattern looks wrong.Edit Layout's Main Posts Grid Settings gadget, keep its exact true marker and use data-gridview-main-* attributes. Check main thumbnail, media and gallery separately. Main numbers outside their range revert to defaults; main snippets count Unicode code points, not words. Main dates use YYYY-MM-dd-style tokens, not the custom widget's Y-m-d. See Main Grid Settings.
Main sorting takes time or random pages seem reordered.Non-default ordering needs the matching summary feed and the current page's post bodies. Check feed/network availability and use generated navigation links, keeping their random seed. Main and custom related thumbnails are independently controlled. See Main Sorting.
The widget code appears as text, or a widget does not initialize. Use the gadget’s HTML Content field or the post editor’s HTML view, rather than pasting code as formatted text. Keep the correct data-gridview-widget value: grid, list, tabbed or about-social. When editing the XML directly, use valid XML escaping. See the corresponding widget code.
A grid, list or tab says “No posts found.” Check the source feed. Try an empty label, empty IDs and empty exclusions to check whether filtering is the cause. Use a published post’s exact label, ID or full URL. A label combined with explicit IDs keeps only posts matching both, and exclusions can remove all results.
Posts from another blog do not load. data-gridview-source-blog must be an HTTPS homepage URL, with no post path, query string, fragment or login details. Leave it empty to use the current blog. The source must provide an accessible Blogger feed; a non-Blogger site URL is not a compatible source. See Blog Settings.
A widget is missing on a particular page. Check data-display-locations. The featured area defaults to home; other custom-widget areas default to all. The grid usage example explicitly uses home. For static pages use static_page, not page. For custom, supply a same-origin URL in data-display-location-url; only its pathname is matched. See Display Locations.
Left and right sidebar widgets are absent on the homepage. This is expected: sidebars are rendered only on individual posts and static pages. Setting a sidebar widget to all does not create a sidebar on listing pages. Put a widget in Featured Widgets or a footer column if it needs to appear there.
Fewer columns or fewer tabs appear than requested. Grid columns reduce automatically to fit the available width, including narrow widget areas on large screens. The tabbed widget displays at most three tab definitions. With no definitions, it uses Popular, Recent and Random. See Grid Settings and Tabbed Settings.
Sorting, counts or snippets look different from the intended settings. Explicit IDs/URLs preserve their listed order; they override ordinary sorting. Random order is not a date order. Counts are limited by available matching posts and the documented numeric ranges. Post snippets count words; recent-comment snippets count characters. Use lowercase true/false for optional boolean settings, and keep required markers unchanged.
A title or font setting seems to have no effect. List and tabbed post titles are always displayed; only the custom grid has a title visibility option. For fonts, use the control for the specific element, such as Grid Posts, Single Posts or Widget Post Items. Body Font does not replace dedicated title/menu/widget fonts. See Fonts & Text Size.
A thumbnail, save button, share control or category overlay is missing. Check that the post has an accessible image and thumbnails are enabled. Broken custom-widget images are removed. In custom grid widgets, save/share/category overlays appear on static image thumbnails, not on video, audio or gallery cards, or cards without thumbnails. Turning media off can restore image controls when a static-image fallback is available, but does not turn galleries off. List/tabbed share controls also require a thumbnail; their save button can remain without one.
Video, audio, gallery or related posts are missing. For custom grids, keep thumbnails enabled. Video/audio players also require the media option to be enabled. Use supported YouTube/Vimeo/Dailymotion or SoundCloud/Spotify iframe embeds, or native video/audio with valid sources, in the post content and feed. For galleries, use the Gallery label and at least two usable images. Media=false does not disable galleries. See Thumbnail, Media & Gallery Settings. Custom-grid related lists require the related option to be enabled and matching candidates: the first label, or an available author when author matching is selected. A card with no candidates has no related list.
An author name is absent. Author display is off by default in custom post widgets. Enable it where required. If the feed does not supply an author, the theme can try to resolve it from same-origin post pages; an unavailable author may remain hidden. An external source does not get this same-origin page lookup.
The recent comments list is empty. Keep data-gridview-comments="true" exactly, and use a separate comments block rather than nesting it inside a custom post widget. “No recent comments available.” can mean no feed entries were returned or the feed was unavailable. Check the comments feed and Blogger’s comment-feed settings.
Saved posts are empty, disappear, or cannot be updated. “No saved posts yet.” is expected before bookmarking a post. Saved posts belong to the current browser and site origin; another browser, device or domain has a separate list. Clearing site data removes the list. If the theme says “Saved posts could not be updated. Browser storage may be full or blocked. Please try again.”, check whether browser storage is available. Do not clear storage as a routine repair. See Saved Posts.
Menu dropdowns are flat or nested under the wrong parent. Keep Link List sorting set to Don’t sort. Put each parent before its children and prefix child names with underscores without skipping a nesting level. At mobile widths, use the Menu and submenu buttons to expand navigation. See Primary Menu and Footer Menu.
The ticker has no matching items, an unexpected order, or will not turn off. Check the selected label and its feed. The ticker sorts up to 40 recent feed entries, not every post in the blog. Only the first settings block is read. Setting data-gridview-ticker to false or removing the block does not disable the ticker; missing configuration uses defaults. See Ticker Settings.
An About/social image or icon is absent. Use an accessible HTTP(S) image URL and the correct Font Awesome platform suffix. Empty or unsupported social URLs are ignored. The About widget does not accept mailto links; its envelope button can link to a contact page. Header Social Links have separate rules and do support Email/mailto links. See About Settings and Header Social Links.
Customizer colors or the header/background image look unchanged. Save the Customizer and use the specific area’s color/font control. A page background image can cover the base color; remove the image for a plain color. The page background is separate from Layout’s Header Image gadget. Check for custom CSS or post/gadget formatting that overrides the theme. See Blogger Customizer.
No grid advertisement appears, or one ad does not repeat. Replace or remove the sample ad gadgets, or add your own non-empty gadgets in Grid Advertisements. There is no fixed two-gadget limit: each eligible gadget contributes one card, and each complete group of four posts allows one configured ad on that page. These cards appear in the main listing grid, not custom grid widgets or single post/page bodies. The theme places the card; an external ad provider still controls whether its ad fills. See Grid Advertisements.
Numbered pagination is missing or says “This page could not be loaded. Please try again.” Reload the listing and check its feed/network availability. On initialization failure, native Blogger Older/Newer navigation remains available. A failed enhanced page request retains the current cards instead of completing the change. Use the navigation links generated by the theme rather than manually assembling pagination URLs.

19.3. Check Your Blogger Feeds

Custom post widgets, recent comments, ticker updates and enhanced pagination depend on Blogger feeds. Replace the example hostname below with the blog you are testing. For an external-source widget, test the source blog’s feed.

https://yourblog.blogspot.com/feeds/posts/default?alt=json&max-results=1
https://yourblog.blogspot.com/feeds/posts/default/-/Sports?alt=json&max-results=1
https://yourblog.blogspot.com/feeds/comments/default?alt=json&max-results=1
  1. Open the relevant URL in your browser. It should return feed data rather than a sign-in screen, unrelated page or error. An empty feed can be valid when there are no matching published entries.
  2. For a label test, replace Sports with the exact label used by your post. Encode spaces in the URL, for example Web%20Design.
  3. For complete GridView feed-based feature support, go to Blogger Dashboard → Settings → Site feed → Allow blog feed, select Full, and click Save. Full supplies the complete post content needed for embedded media, gallery images and longer snippets in feed-loaded cards/widgets. Short or Until Jump Break can omit these elements; None disables the feed. Custom configures post and comment feeds separately.
  4. Check whether a Post feed redirect URL is sending requests to another service. GridView expects Blogger feed data. Public feed widgets cannot fetch a private blog’s site feed.
  5. If a basic feed works, reapply your widget’s label, IDs, exclusions and other options one at a time to find the setting that removes the results.

See Blogger’s official guides to site feeds and blog settings for the available feed options.

19.4. Final Checklist

Work through this checklist after configuring the theme. Check the live blog as well as the Layout and Customizer screens.

  • Installation and backup: the full XML is saved successfully, and a backup of your working theme and reusable gadget content is available.
  • Blog identity: the site title, optional header image/link/caption, descriptions and Twitter/X handle placeholders have been configured. See Meta Tags and Header Image.
  • Appearance: the background, accent colors, text contrast and dedicated fonts are saved in the Customizer. Check headings, links and hover states.
  • Navigation: primary/footer links go to the intended destinations, dropdowns follow the correct order, and mobile Menu/submenu buttons work.
  • Feeds and filters: Allow blog feed is set to Full and saved for complete feed-based feature support; post, label and comments feeds return the expected data. Widget labels, IDs, source blogs and exclusions have been checked.
  • Custom widgets: one code block has been pasted per intended widget, required markers remain present, and tabbed widgets have no more than three intended tabs.
  • Placement: Featured Widgets display on the intended pages. Sidebars are checked on a post or static page, and visibility settings use the correct values.
  • Post content: open an image post, a longer text post and posts with supported video/audio. Check a SoundCloud or Spotify embed, native video/audio sources and a Gallery-labelled post with at least two images where these are used. Check titles, dates, snippets and optional author/related content.
  • Grid media controls: check media=true, media=false and thumbnail=false separately. Video/audio should fall back to an available image with media=false; galleries retain navigation. Thumbnail=false hides the whole image/media area. Save/share/category overlays and the extra thumbnail comment link should appear only on static image cards when enabled.
  • Ticker and comments: the ticker has appropriate items/settings; recent comments show the intended count, avatar, date and text options when comments are available.
  • Saved posts: bookmark a test article, open the header Saved Posts dialog, reload in the same browser, and remove that test bookmark. Confirm the Saved Articles widget stays in sync where it is displayed.
  • Search and listing navigation: test a search term, a label page, an archive and the available next/previous or numbered page links.
  • Links and forms: verify social links, RSS, the header search control, contact-page links and any enabled native Blogger gadgets. Check required form fields where a form is present.
  • Ads: if used, replace/remove unwanted sample banners and add as many ad gadgets as required. Confirm that the main grid displays only the ads allowed by its post count, including after pagination. Empty ad gadgets should not produce cards.
  • Responsive behavior: check desktop and narrow/mobile widths for readable text, adapting columns, usable menus and no unexpected horizontal overflow. Check Search and Saved Posts dialogs, their close buttons and keyboard access.
  • Main configuration: verify the main settings gadget, columns, title/metadata visibility, snippet length and date pattern. Test media/gallery switches separately, related matching and related thumbnails, and pagination after changing sort order. Bookmark a title-hidden test card, and check saved-state synchronization in another tab on the same site.
  • Final reload: reload representative pages after saving. Confirm that a recent custom edit has not introduced a script error or blocked a feed/resource.

19.5. Getting Help

If the problem remains, contact NewBloggerThemes support with enough detail to reproduce it:

  • Your blog URL and the exact affected page URL.
  • The widget name, its Layout area and the configuration code used.
  • What you expected, what appeared instead, and any exact error message.
  • The steps that trigger the issue, your browser/device, and a screenshot if it helps show the layout.
  • Whether the relevant feed URLs work and whether the issue started after a particular edit.
↑