GridView is a responsive Blogger template for personal blogs, online magazines, photography journals, and mixed-media websites. Its masonry grid brings articles, images, videos, audio, and galleries together, with two sidebars on individual posts and static pages.

Customize backgrounds, colors, and fonts through Blogger Theme Designer. Manage navigation, header images, social links, widgets, and main-grid settings through Blogger's Layout page.

Key Features

• Responsive Masonry Grid: Choose up to four columns, with fewer columns on narrower screens.
• Dedicated Main Grid Settings: Control card elements, date formats, excerpt length, media, galleries, and related content.
• Blogger Customizer Support: Explore 35 settings groups for backgrounds, colors, fonts, and individual theme areas.
• Flexible Header & Navigation: Configure a header image with caption, primary/footer dropdown menus, social icons, RSS, and search.
• Custom Content Widgets: Add grid, list, or three-tab post sections with label filters, IDs, exclusions, sorting, and visibility controls. Compatible widgets can fetch posts from another public Blogger blog.
• News & Profile Widgets: Highlight posts with the trending ticker, introduce your blog with About & Social, and display recent comments.
• Save & Share: Offer browser-based article bookmarks and sharing links for Facebook, X, Pinterest, Reddit, and LinkedIn.
• Related Posts & Author Bio: Help readers discover more content, with configurable related lists inside main and custom grid cards.
• Sorting & Pagination: Sort main listings by date, updates, comments, or random order, with dynamic numbered navigation and consistent random ordering across pages.
• Flexible Advertisement Area: Add, edit, or remove ad gadgets as needed. Each complete group of four posts allows one populated ad card.
• Finishing Details: Four footer columns, post formatting styles, automatic page titles, canonical URLs, Open Graph, and Twitter Cards.

Get Started in Three Steps

1. Install: back up your current theme and install the supplied XML.
2. Configure: arrange Layout gadgets and adjust the main grid.
3. Personalize: save your Theme Designer changes and check desktop/mobile views.

The documentation includes full settings/widget codes, post-format examples, troubleshooting, and a final checklist.

Frequently Asked Questions

Do I need coding knowledge?

Colors, fonts, and backgrounds use Theme Designer. Menus and images use Layout gadgets; main-grid settings and custom widgets use supplied HTML snippets with documented examples.

How many ad gadgets can I add?

There is no fixed two-gadget limit. Replace, remove, or add gadgets freely. Each contributes one card, with one ad allowed per four posts on the current page.

Do saved posts sync between devices?

No. Bookmarks stay in the visitor's browser for that site. They do not sync across devices, and clearing site storage removes them.

Which Blogger feed setting should I use?

For complete feed-based feature support, go to Settings → Site feed → Allow blog feed, select Full, and click Save. This supplies complete post content for media, galleries, and excerpts in feed-loaded cards/widgets. It also makes complete posts available through your public feed.

Can I show sidebar widgets on the homepage?

The two sidebars appear on posts and static pages. Use Featured Widgets or footer columns for widgets needed on listing pages.

See GridView in Action

Explore the responsive layout below and try the live demo before configuring your blog.

View Live Demo  |  Read Documentation

ListMode is a clean, responsive Blogger template designed for bloggers, writers, and content-focused websites. With a minimalist layout, bold typography, and built-in support for featured post areas, ListMode makes it easy to create a professional blog without writing code. All key elements — including menus, header image, and social icons — can be managed directly through the Layout page, making it ideal for beginners and advanced users alike. Customization is easy through Blogger’s built-in Theme Designer — no coding required.

Key Features:

• Responsive & Mobile-Friendly: Optimized layout for all screen sizes, from desktop to smartphone.
• Customizable via Blogger Theme Designer: Modify fonts, colors, and styling effortlessly without editing code.
• Header Image Support: Upload and change your blog’s header image through the Layout page — no HTML editing needed.
• Two Navigation Menus: Easily add and manage primary and secondary menus via the Layout section.
• Header Social Icons: Add your social media links without touching the code — fully configurable in Layout.
• Label-Based Featured Post Sections: Highlight posts from specific labels (e.g., "Tech", "News") using attractive grid displays.
• AJAX Navigation in Featured Sections: Load more posts seamlessly in label-based featured areas — no page reloads.
• Slider & News Ticker: Both support posts filtered by label, perfect for dynamic content highlights.
• Related Posts with AJAX Navigation: Keeps readers engaged with smooth loading of related content below posts.
• Social Share Buttons: Built-in sharing buttons make it easy for readers to share your content on social media.
• 4-Column Footer Area: Add multiple widgets like recent posts, labels, or social feeds in an organized footer layout.
• Post Styling Enhancements: Includes pre/code formatting, mark/highlight styles, blockquotes, tables, and more.
• Author Box & Related Posts: Built-in components to increase user engagement and blog exploration.
• SEO & Sharing Optimized: Supports Open Graph and Twitter Cards for enhanced visibility.

Detailed Documentation Included

ListMode comes with comprehensive documentation to guide you through theme installation, menu setup, news ticker, slider, featured posts areas, header image, social buttons, meta tag configuration, and more — making it perfect for beginners.

Read the official documentation here: https://docs.newbloggerthemes.com/listmode/

ListMode Theme is Ideal For:

Personal bloggers, writers, tutorial creators, tech news publishers, and anyone who wants a clean, fast, and fully customizable Blogger theme with advanced featured post capabilities.

How To Configure Top Navigation Menu

<ul class='menu powerwp-nav-menu menu-primary' id='menu-primary-navigation'>

<li><a expr:href='data:blog.homepageUrl'>Home</a></li>

<li><a href='#'>Business</a>
<ul class='sub-menu'>
<li><a href='#'>Internet</a></li>
<li><a href='#'>Market</a></li>
<li><a href='#'>Stock</a></li>
</ul>
</li>

...

</ul>

How To Add Featured Posts Widgets

How To Configure Footer Social Buttons

<div class='powerwp-social-icons clearfix'>
<div class='powerwp-social-icons-inner clearfix'>
<div class='powerwp-container clearfix'>

<a class='powerwp-social-icon-twitter' href='#' target='_blank' title='Twitter'><i aria-hidden='true' class='fa fa-twitter'/></a>
<a class='powerwp-social-icon-facebook' href='#' target='_blank' title='Facebook'><i aria-hidden='true' class='fa fa-facebook'/></a>
<a class='powerwp-social-icon-google-plus' href='#' target='_blank' title='Google Plus'><i aria-hidden='true' class='fa fa-google-plus'/></a>
<a class='powerwp-social-icon-pinterest' href='#' target='_blank' title='Pinterest'><i aria-hidden='true' class='fa fa-pinterest'/></a>
<a class='powerwp-social-icon-linkedin' href='#' target='_blank' title='Linkedin'><i aria-hidden='true' class='fa fa-linkedin'/></a>
...

</div>
</div>
</div>

PowerWP Blogger Template Responsive View

How To Configure Top Navigation Menu

<ul class='freshwp-nav-menu menu-primary' id='menu-primary-navigation'>

<li><a expr:href='data:blog.homepageUrl'>Home</a></li>

<li class='menu-item-has-children'><a href='#'>Business</a>
<ul class='sub-menu'>
<li><a href='#'>Internet</a></li>
<li><a href='#'>Market</a></li>
<li><a href='#'>Stock</a></li>
</ul>
</li>

...

</ul>

How To Add Featured Posts Widgets and Other Widgets

How To Configure Footer Social Buttons

<div class='freshwp-social-icons clearfix'>
<div class='freshwp-social-icons-inner clearfix'>

<a class='freshwp-social-icon-twitter' href='#' target='_blank' title='Twitter'><i aria-hidden='true' class='fa fa-twitter'/></a>
<a class='freshwp-social-icon-facebook' href='#' target='_blank' title='Facebook'><i aria-hidden='true' class='fa fa-facebook'/></a>
<a class='freshwp-social-icon-google-plus' href='#' target='_blank' title='Google Plus'><i aria-hidden='true' class='fa fa-google-plus'/></a>
<a class='freshwp-social-icon-pinterest' href='#' target='_blank' title='Pinterest'><i aria-hidden='true' class='fa fa-pinterest'/></a>
<a class='freshwp-social-icon-linkedin' href='#' target='_blank' title='Linkedin'><i aria-hidden='true' class='fa fa-linkedin'/></a>
...

</div>
</div>

FreshWP Blogger Template Responsive View

Glass Template Features:

• Powerfull Admin Panel
• Fully Responsive
• Fully customizable Design
• Search Engine Optimized
• 8 Home Layout Boxs Style
• Smooth News Ticker
• Adsense Ready
• jQuery and CSS3 Effects
• Multi Level Dropdown Menu
• Responsive Menu Mobile
• Font Awesome Icons Integration
• Full Images Quality
• Random Posts / Recent Posts / Label Posts
• Contact US Form
• Feedburner Form
• Custom Widgets
• Blogger Comments
• Social Media Counter
• Shortcodes
• Dark Mode
• and more…

How To Setup Primary Navigation Menu

<div class='menu-primary-container'>
<ul class='menus menu-primary'>

<li><a expr:href='data:blog.homepageUrl'>Home</a></li>

<li><a href='#'>Downloads</a>
<ul class='children'>
<li><a href='#'>Dvd</a></li>
<li><a href='#'>Games</a></li>
<li><a href='#'>Software</a>
<ul class='children'>
<li><a href='#'>Office</a>
</li>
</ul>
</li>
</ul>
</li>

...

</ul>
</div>

How To Setup Secondary Navigation Menu

<div class='menu-secondary-container'>
<ul class='menus menu-secondary'>

<li><a expr:href='data:blog.homepageUrl'>Home</a></li>

<li><a href='#'>Business</a>
<ul class='children'>
<li><a href='#'>Internet</a></li>
<li><a href='#'>Market</a></li>
<li><a href='#'>Stock</a></li>
</ul>
</li>

...

</ul>
</div>

How To Setup Featured Content Slider:

<!-- Slide 1 Code Start -->
<li>
    <a href='ENTER-SLIDE-1-LINK-HERE'><img src='https://2.bp.blogspot.com/-WbBTK545NLA/W9vmYMjWn0I/AAAAAAAAUr0/k2kbtWu0XdYNON15ezZCpEQpJhViQ17-QCLcBGAs/s1600/1.jpg'/></a>
    <div class='flex-slideinfo'>
        <h3><a href='ENTER-SLIDE-1-LINK-HERE'>This is default featured slide 1 title</a></h3>
        <p>Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by NewBloggerThemes.com.</p>
    </div>
</li>
<!-- Slide 1 Code End -->

MaxBench Blogger Template Responsive View

How To Configure Top Navigation Menu

<ul class='maddmag-menu' id='maddmag-primary-menu'>

<li><a expr:href='data:blog.homepageUrl'>Home</a></li>

<li><a href='#'>Business</a>
<ul class='sub-menu'>
<li><a href='#'>Internet</a></li>
<li><a href='#'>Market</a></li>
<li><a href='#'>Stock</a></li>
</ul>
</li>

...

</ul>

How To Configure Featured Posts Slider

<script src="https://YOURBLOGNAME.blogspot.com/feeds/posts/default/-/LABELNAME?alt=json-in-script&callback=maddmagfeaturedposts&max-results=6"></script>

<script src="https://maddmagazine-nbt.blogspot.com/feeds/posts/default/-/Print Design?alt=json-in-script&callback=maddmagfeaturedposts&max-results=6"></script>

How To Add a Featured Posts Widget

<script src="https://YOURBLOGNAME.blogspot.com/feeds/posts/default/-/LABELNAME?alt=json-in-script&callback=maddmagrecentposts&max-results=5"></script>

<script src="https://maddmagazine-nbt.blogspot.com/feeds/posts/default/-/Print Design?alt=json-in-script&callback=maddmagrecentposts&max-results=5"></script>

How To Add a Recent Posts Widget

<script src="https://YOURBLOGNAME.blogspot.com/feeds/posts/default?alt=json-in-script&callback=maddmagrecentposts&max-results=5"></script>

<script src="https://maddmagazine-nbt.blogspot.com/feeds/posts/default?alt=json-in-script&callback=maddmagrecentposts&max-results=5"></script>

How To Configure Social Buttons

<div class='maddmag-social-wrap'>
<a href='https://twitter.com/' rel='nofollow' target='_blank' title='Twitter'><i class='fa fa-twitter'/></a>
<a href='https://www.facebook.com/' rel='nofollow' target='_blank' title='Facebook'><i class='fa fa-facebook'/></a>
<a href='https://plus.google.com/' rel='nofollow' target='_blank' title='GooglePlus'><i class='fa fa-google-plus'/></a>
<a href='https://www.instagram.com/' rel='nofollow' target='_blank' title='Instagram'><i class='fa fa-instagram'/></a>
<a href='https://www.pinterest.com/' rel='nofollow' target='_blank' title='Pinterest'><i class='fa fa-pinterest'/></a>
<a href='https://www.linkedin.com/' rel='nofollow' target='_blank' title='Linkedin'><i class='fa fa-linkedin'/></a>
...
</div>

Madd Magazine Blogger Template Responsive View

How To Setup Primary Navigation Menu

<div class='menu-primary-container'>
<ul class='menus menu-primary'>

<li><a expr:href='data:blog.homepageUrl'>Home</a></li>

<li><a href='#'>Downloads</a>
<ul class='children'>
<li><a href='#'>Dvd</a></li>
<li><a href='#'>Games</a></li>
<li><a href='#'>Software</a>
<ul class='children'>
<li><a href='#'>Office</a>
</li>
</ul>
</li>
</ul>
</li>

...

</ul>
</div>

How To Setup Secondary Navigation Menu

<div class='menu-secondary-container'>
<ul class='menus menu-secondary'>

<li><a expr:href='data:blog.homepageUrl'>Home</a></li>

<li><a href='#'>Business</a>
<ul class='children'>
<li><a href='#'>Internet</a></li>
<li><a href='#'>Market</a></li>
<li><a href='#'>Stock</a></li>
</ul>
</li>

...

</ul>
</div>

How To Setup Featured Content Slider:

<!-- Slide 1 Code Start -->
<li>
    <a href='ENTER-SLIDE-1-LINK-HERE'><img src='https://3.bp.blogspot.com/-IwGd90rkkP4/WtV1SJpY0HI/AAAAAAAAT6M/07XoUSL4YZotJkIGmrFJVwMNR7Ak68MKQCLcBGAs/s1600/1.jpg'/></a>
    <div class='flex-slideinfo'>
        <h3><a href='ENTER-SLIDE-1-LINK-HERE'>This is default featured slide 1 title</a></h3>
        <p>Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by NewBloggerThemes.com.</p>
    </div>
</li>
<!-- Slide 1 Code End -->

PaperMag Blogger Template Responsive View

How To Configure Top Navigation Menu

<ul class='cleangrid-clearfix' id='cleangrid-primary-menu'>

<li><a href='#'>Home</a></li>

<li class='menu-item-has-children'><a href='#'>Business</a>
<ul class='sub-menu'>
<li><a href='#'>Internet</a></li>
<li><a href='#'>Market</a></li>
<li><a href='#'>Stock</a></li>
</ul>
</li>

...

</ul>

How To Configure Social Buttons

<div class='cleangrid-widget-social'>
<ul>
<li><a href='https://twitter.com/' rel='nofollow' target='_blank' title='Twitter'><span class='screen-reader-text'>Twitter</span></a></li>
<li><a href='https://www.facebook.com/' rel='nofollow' target='_blank' title='Facebook'><span class='screen-reader-text'>Facebook</span></a></li>
<li><a href='https://plus.google.com/' rel='nofollow' target='_blank' title='GooglePlus'><span class='screen-reader-text'>GooglePlus</span></a></li>
<li><a href='https://www.pinterest.com/' rel='nofollow' target='_blank' title='Pinterest'><span class='screen-reader-text'>Pinterest</span></a></li>
<li><a href='https://www.linkedin.com/' rel='nofollow' target='_blank' title='Linkedin'><span class='screen-reader-text'>Linkedin</span></a></li>
<li><a href='https://www.instagram.com/' rel='nofollow' target='_blank' title='Instagram'><span class='screen-reader-text'>Instagram</span></a></li>
...
</ul>
</div>

Clean Grid Blogger Template Responsive View