Creating a Grid View for Your Blog Posts

Sample Grid View

In the world of web design and content presentation, the grid view has become a popular and visually appealing way to showcase blog posts. It offers an organized and structured layout that can help your readers quickly browse through your content. Whether you're a blogger, a content creator, or a website owner looking to revamp your blog layout, this guide will walk you through the steps to create a stunning grid view for your blog posts.

Step-by-Step Creating a Grid View for Your Blog Posts 

To create a grid view of your post you may follow the procedure step by step below:

How Display Blog Post In Grid View With Thumbnails Photo?

Blogger Posts displaying In Grid View With Thumbnails  

Welcome to the Blog Eazy tutorial today, I will show you how to display Blogger posts in grid view with thumbnails with pictures. Grid View is a script for a blogger blog that will display Blogger blog posts in Grid style with Thumbnails on the homepage and archive pages. This is best for blogs with videos and wallpapers. Before proceeding to the steps for adding a grid view.

If you are running a Wallpaper or Funny Images niche blog, Here is a  for you. In this article, we gonna discuss how you can display blogger posts in grid view with thumbnails. Grid View with Thumbnails is a script for self-hosted Blogger blogs that displays blog posts as a thumbnail grid of images in the homepage and archive pages. 

Normally, your posts are displayed in full length with a large image that takes too much space in your blog and required too much scrolling. 

So, now if you would like to have your blog clean and fast loading then you should try out the gallery grid, with thumbnails and post titles, linking back to the source post. Before you go for the steps of installing this feature to your blog Please check out these steps below:

Step 1: Go to Blogger Theme and click the Edit HTML button.

Step 2: Here we click anywhere in the code and press Ctrl+F and find the </head> tag and paste the code above the </head> tag.


<b:if cond='data:blog.pageType == "index"'> <script language='javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/> <script type='text/javascript'>//<![CDATA[ $(document).ready(function() { var width = 200; var height = 170; var placeholder = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbv05IrHZOQ0xM_Azm187wvOi3BmG9cGBx_vAa5IN4lRwDyyTFXIgXbB6J-AuO9NzG3ub7TaMo0gdqJP7PHtG_llcQJQY2-8pSlobFDqL0hVXLAYAOtiSTl6ddGI_yiO6JiuKlTTGYoiE/s1600/no-thumb.png'; var margins = "0px 0px 10px 10px"; var fitThumb = 1; var titleTopPadding = 5; var titleBottomPadding = 8; var titleLeftRightPadding = 5; var titlePadding = titleTopPadding + 'px ' + titleLeftRightPadding + 'px ' + titleBottomPadding + 'px ' + titleLeftRightPadding + 'px'; $('.post-body').each(function(n, wrapper){ var wrapper = $(wrapper); var image = $(wrapper).find('img').first(); var link = wrapper.parent().find('h3 a'); var linkURL = link.attr('href'); var linkTitle = link.text(); $(link).remove(); wrapper.empty(); if (image.attr('src')) { var thumbHeight = image.attr('height'); var thumbWidth = image.attr('width'); var thumbParent = $(image).parent(); wrapper.append(thumbParent); if (fitThumb) { image.attr({src : image.attr('src').replace(/s\B\d{3,4}/,'s' + width + '-c')}); image.attr('width',width).attr('height',height); } else { image.attr({src : image.attr('src').replace(/s\B\d{3,4}/,'s' + width)}); image.attr('width',width); var changeHeight = (thumbHeight/thumbWidth * width).toFixed(0); image.attr('height',changeHeight); } } else { var image = $('<img>').attr('src',placeholder).attr('height',height).attr('width',width); var thumbParent = $('<a>').append(image).appendTo(wrapper); } thumbParent.attr('href',linkURL).css('clear','none').css('margin-left','0').css('margin-right','0').addClass('postThumbnail'); var thumbTitle = $('<div> ').prepend(linkTitle).css('padding',titlePadding).css('opacity','0.9').css('filter','alpha(opacity=0.9)').css('width',width).appendTo(thumbParent); var ptitleHeight = thumbTitle.height(); var summary = parseInt(ptitleHeight) + parseInt(titleTopPadding) + parseInt(titleBottomPadding); thumbTitle.css('margin-top','-'+summary+'px'); wrapper.css('float','left').css('height',height).css('width',width).css('margin',margins).css('overflow','hidden'); }); $('#blog-pager').css('clear','both'); }); function hideLightbox() { var images = document.getElementsByTagName('img'); for (var i = 0 ; i < images.length ; ++i) { images[i].onmouseover=function() { var html = this.parentNode.innerHTML; this.parentNode.innerHTML = html; this.onmouseover = null; }; } } if (window.addEventListener) { window.addEventListener('load',hideLightbox,undefined); } else { window.attachEvent('onload',hideLightbox); } //]]></script> <style> .post { border-bottom: 0 dotted #E6E6E6; margin-bottom: 0; padding-bottom: 0; } h2,.post-footer { display:none; } a.postThumbnail div { text-decoration: none; color: #fff; font-size: 12px; font-weight: bold; text-transform: capitalize; background: rgb(125,126,125); /* Old browsers */ background: -moz-linear-gradient(top, rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,126,125,1)), color-stop(100%,rgba(14,14,14,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); background: -o-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); background: -ms-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); background: linear-gradient(to bottom, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); } a.postThumbnail:hover div { display: block; } .post-body img { background-color: transparent; border: 1px solid transparent; padding: 0px; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; opacity: 1; transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out; } .post-body img:hover { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter: alpha(opacity=70); -moz-opacity: 0.7; -khtml-opacity: 0.7; opacity: 0.7; } </style> </b:if>

So, happy blogging with displaying a grid view instead of a list view in your blog post.