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

Clean Gallery Blogger Template Features

• Fully responsive design that works on all devices
• Gallery-style homepage layout with grid post display
• Multiple post layouts (default, left sidebar, full width)
• Advanced customization options through Blogger Template Designer
• SEO optimization with Schema.org structured data
• Structured data included
• Over 50 color options for complete customization (Check Colors)
• Google Fonts integration with multiple font options (Check Fonts)
• Support for a background image (Check Background Image Support)
• Related posts with thumbnails (label-based post matching)
• Clean Admin Layout page (Check Layout)
• 14+ widget areas (Header banner area, Full-width content area, sidebar, 4 columns footer)
• Full width not found(404) page Check 404 Page
• Mobile-friendly navigation with hamburger menu
• Tabbed widget area
• Numbered page navigation
• Custom post navigation
• Built-in social media integration with 30+ platforms
• Post share buttons for all major platforms
• Custom profile widget
• Open Graph and Twitter Card support
• Integrated search form
• Back-to-top button
• Google Fonts and Font Awesome 6.7.2 icons
• Minified CSS and JavaScript for faster loading
• Cross-browser compatibility
• Many more features...

How To Configure Top Navigation Menu

<nav class='nav-primary' id='primary-navigation' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
<ul class='menu pg-nav-menu menu-primary' id='menu-primary-navigation'>

<li class='menu-item'><a expr:href='data:blog.homepageUrl'>Home</a></li>

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

...

</ul>
</nav>

How To Configure Social Buttons

<ul class='menu-social-navigation'>
<li><a href='https://twitter.com/' rel='nofollow' target='_blank' title='Twitter'><i class='fa fa-twitter'/></a></li>
<li><a href='https://www.facebook.com/' rel='nofollow' target='_blank' title='Facebook'><i class='fa fa-facebook'/></a></li>
<li><a href='https://plus.google.com/' rel='nofollow' target='_blank' title='GooglePlus'><i class='fa fa-google-plus'/></a></li>
...
</ul>

How To Configure Numbered Page Navigation

var pageNaviConf = {
    perPage: 12,
    numPages: 6,
    firstText: "First",
    lastText: "Last",
    nextText: "Next",
    prevText: "Prev"
}

var pageNaviConf = {
    perPage: 6,
    numPages: 6,
    firstText: "First",
    lastText: "Last",
    nextText: "Next",
    prevText: "Prev"
}

How To Create Full Width or Left Sidebar Posts/pages

Clean Gallery Responsive View

Note

The Clean Gallery template is a powerful, flexible solution for bloggers who want a modern, responsive design with gallery-style post display. With its comprehensive customization options, SEO features, and social media integration, it's well-suited for a wide range of blogging needs.

For the best results, take time to customize the template to match your brand and content style. The template's flexibility allows for extensive customization while maintaining its core functionality and design integrity.

Clean Gallery WordPress Version

https://themesdna.com/clean-gallery-pro-wordpress-theme/

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://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

Neat Mag Blogger Template Features

• 100% Responsive / Mobile Friendly
• Search Engine Friendly
• Unlimited Colors to Choose
• Hundreds of Fonts to Select
• Unlimited Slider Widgets
• Recent Posts with Thumbnails
• Unlimited Different Featured Posts Areas
• Related Posts with Thumbnails
• Different Layout Options for Posts and Pages (full width/left sidebar/right sidebar)
• 4 Columns Footer Widgets Area
• Full Width Not Found(404) Page
• Top Multi-level Navigation Menus
• Numbered Posts Navigation
• Custom Post Navigation
• Social Profiles Widget
• Post Share Buttons
• Facebook and Twitter Meta Data
• Many More Features...

How To Configure Top Navigation Menu

<ul class='pgnav pg-nav-menu-dropdown'>

<li><a class='pg-active' expr:href='data:blog.homepageUrl'><i class='fa fa-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 a Slider Widget

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

<script src="https://neatmag.blogspot.com/feeds/posts/default/-/Motion Design?alt=json-in-script&callback=pgfeaturedslider&max-results=6"></script>

How To Add a Post Style 1 Widget

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

<script src="https://neatmag.blogspot.com/feeds/posts/default/-/Graphic Design?alt=json-in-script&callback=pgpoststyleone&max-results=6"></script>

How To Add a Post Style 2 Widget

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

<script src="https://neatmag.blogspot.com/feeds/posts/default/-/Web Design?alt=json-in-script&callback=pgpoststyletwo&max-results=6"></script>

How To Add a Recent Posts Widget

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

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

How To Configure Numbered Posts Navigation

var pageNaviConf = {
    perPage: 6,
    numPages: 6,
    firstText: "First",
    lastText: "Last",
    nextText: "Next",
    prevText: "Prev"
}

var pageNaviConf = {
    perPage: 9,
    numPages: 6,
    firstText: "First",
    lastText: "Last",
    nextText: "Next",
    prevText: "Prev"
}

How To Configure Social Buttons

<div class='widget neatmag-widget-social'>
<h2>Follow &amp; Subscribe</h2>
<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>
<li><a href='https://www.youtube.com/' rel='nofollow' target='_blank' title='Youtube'><span class='screen-reader-text'>Youtube</span></a></li>
...
</ul>
</div>

Neat Mag Blogger Template Responsive View

How To Configure Post Timestamp Format

How To Configure Social Buttons

<div id='luminescence-social-icons'>
<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.linkedin.com/' rel='nofollow' target='_blank' title='Linkedin'><i class='fa fa-linkedin'/></a>
<a href='https://www.pinterest.com/' rel='nofollow' target='_blank' title='Pinterest'><i class='fa fa-pinterest'/></a>
<a href='https://www.instagram.com/' rel='nofollow' target='_blank' title='Instagram'><i class='fa fa-instagram'/></a>
<a href='https://www.flickr.com/' rel='nofollow' target='_blank' title='Flickr'><i class='fa fa-flickr'/></a>
<a href='https://www.youtube.com/' rel='nofollow' target='_blank' title='Youtube'><i class='fa fa-youtube'/></a>
<a href='https://vimeo.com/' rel='nofollow' target='_blank' title='Vimeo'><i class='fa fa-vimeo'/></a>
<a href='mailto:123@abc.com' rel='nofollow' target='_blank' title='Contact'><i class='fa fa-envelope'/></a>
<a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' target='_blank' title='RSS'><i class='fa fa-rss'/></a>
</div>

How To Setup Main Navigation Menu

<div class='luminescence-main-menu-container'>
<ul class='luminescence-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>
</div>

How To Setup Mobile Navigation Menu

<div class='luminescence-menu-mobile-menu-container'>
<ul class='luminescence-nav-menu' id='luminescence-menu-mobile-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>
</div>

Luminescence Lite Blogger Template Responsive View

Pure Gallery Blogger Template Features

• 100% Responsive / Mobile Friendly
• Search Engine Friendly
• Many Colors and Font Options (Check Theme Designer)
• Unlimited Slider Widgets
• Recent Posts with Thumbnails
• Unlimited Different Featured Posts Areas
• Related Posts with Thumbnails
• Different Layout Options for Posts and Pages (full width/left sidebar/right sidebar)
• 4 Columns Footer Widgets Area
• Full Width Not Found(404) Page
• Top Multi-level Navigation Menus
• Numbered Posts Navigation
• Custom Post Navigation
• Social Profiles Widget
• Post Share Buttons
• Facebook and Twitter Meta Data
• Clean Page Layout (Check Layout Page)
• Many More Features...

How To Configure Top Navigation Menu

<ul class='pgnav pg-nav-menu-dropdown'>

<li><a class='pg-active' expr:href='data:blog.homepageUrl'><i class='fa fa-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 a Slider Widget

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

<script src="https://pure-gallery-nbt.blogspot.com/feeds/posts/default/-/Web Design?alt=json-in-script&callback=pgfeaturedslider&max-results=10"></script>

How To Add a Post Style 1 Widget

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

<script src="https://pure-gallery-nbt.blogspot.com/feeds/posts/default/-/Graphic Design?alt=json-in-script&callback=pgpoststyleone&max-results=6"></script>

How To Add a Post Style 2 Widget

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

<script src="https://pure-gallery-nbt.blogspot.com/feeds/posts/default/-/Web Design?alt=json-in-script&callback=pgpoststyletwo&max-results=6"></script>

How To Add a Recent Posts Widget

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

<script src="https://pure-gallery-nbt.blogspot.com/feeds/posts/default?alt=json-in-script&callback=pgpoststyleone&max-results=6"></script>

How To Configure Numbered Posts Navigation

var pageNaviConf = {
    perPage: 6,
    numPages: 6,
    firstText: "First",
    lastText: "Last",
    nextText: "Next",
    prevText: "Prev"
}

var pageNaviConf = {
    perPage: 9,
    numPages: 6,
    firstText: "First",
    lastText: "Last",
    nextText: "Next",
    prevText: "Prev"
}

How To Configure Social Buttons

<div class='widget pg-widget-social'>
<h2>Follow &amp; Subscribe</h2>
<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>
<li><a href='https://www.youtube.com/' rel='nofollow' target='_blank' title='Youtube'><span class='screen-reader-text'>Youtube</span></a></li>
...
</ul>
</div>

Pure Gallery Blogger Template Responsive View