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

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 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/-QPseh4i9CJQ/WncMARH9a8I/AAAAAAAATW0/a5Ai6eThzIYz2z4JTcWBkqpOzIDUH6l6ACLcBGAs/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 -->

MusicLand 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