Create Grid View on Home Page in Blogger

      

     Having a unique blog main page display can be done if we try, generally the appearance of the blogger blog will be static or vertical by default.

 This blog's vertical static display is usually displayed both on desktop and mobile, why is the vertical static display widely used by blog template makers? Static display is not too complicated, besides that static display has advantages, namely that part or half of the content of the post will be displayed on the blog's veranda.

      We can make changes to the vertical static display into a grid or boxes on the blog homepage. In addition to the default display of free or premium templates and even free defaults from blogger, we are able to make the homepage look GRID. Customizing the appearance of the blogger homepage into a grid is usually used by movie streaming blogs, movie downloads or photo gallery blogs.

How to create grid view ?

Here are the steps:

Step 1. Go to your Blogger admin dashboard.

Step 2. Select "Theme" menu >> select down arrow beside "Customize" then select  "Edit HTML".

Step 3.  In the box press "CTRL + F" to search type "</head>", then copy and paste javascript code below before or above the "</head>".

  <script type='text/javascript'>

posts_no_thumb_sum = 100;

posts_thumb_sum = 100;

</script>

<script type='text/javascript'>

//<![CDATA[

function removeHtmlTag(strx,chop){

if(strx.indexOf("<")!=-1)

{

var s = strx.split("<");

for(var i=0;i<s.length;i++){

if(s[i].indexOf(">")!=-1){

s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);

}

}

strx = s.join("");

}

chop = (chop < strx.length-1) ? chop : strx.length-2;

while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;

strx = strx.substring(0,chop-1);

return strx+'...';

}

function createSummaryAndThumb(pID, pURL, pTITLE){

var div = document.getElementById(pID);

var imgtag = "";

var img = div.getElementsByTagName("img");

var summ = posts_no_thumb_sum;

if(img.length>=1) {

imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'"><img src="'+img[0].src+'" /></a></span>';

summ = posts_thumb_sum;

}

else {

imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdgu0GaW7fU_eCf6YiYluZxUoCmAicf8R_NWB4D6y1eoQ4CAbJzuu2EcEqLVRy3ktHdK1wiwWxJhZODrE1u7uzHgKbhG1yWheSzHGNt1j9zldfKTrT8UsYApRduZIDy94J1btQKgWT6EbB/s1600/no+image.jpg" style="margin-top: -30px;" /></a></span>';

summ = posts_thumb_sum;

}

var summary = imgtag + '<a href="'+ pURL +'"><div class="post-summary-text">' + removeHtmlTag(div.innerHTML,summ) + '</div></a>';

div.innerHTML = summary;

}

//]]>

</script>

Step 4. Then  press "CTRL + F" to search type "data:post.body", then replace with code below.

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

    <b:if cond='data:blog.pageType != &quot;item&quot;'>

        <div expr:id='&quot;summary&quot; + data:post.id'>

            <data:post.body/>

        </div>

        <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;);</script>

        <b:if cond='data:post.allowComments'>

            <a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>

                <data:post.numComments/>

            </a>

        </b:if>

    </b:if>

</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

    <data:post.body/>

</b:if>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>

    <data:post.body/>

</b:if>  

Step 5. Then  press "CTRL + F" again to search type "</head>", then copy and paste css code below before or above the "</head>".

    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<b:if cond='data:blog.pageType!= &quot;item&quot;'>

<style>

#blog-pager {

clear:both;

}

.post {

height: 250px;

width:42%;

overflow: hidden;

display:inline-block;

text-decoration:none;

float:left;

margin:10px;

  border:solid 2px;

padding: 0px !important;

}

  .post:hover {

  border: solid 2px blue;

  

  }

h3.post-title a {

font-size:75%;

font-family: &#39;Open Sans Condensed&#39;, sans-serif;

text-transform:uppercase;

padding:0;

color:#444;

}

h3.post-title {

height: 42px;

text-align:center;

width:100%;

margin:0!important;

padding-bottom: 4%;

}

.date-header {

display: none;

}

.post-body a {

text-decoration: none;

}

.posts-thumb {

width:100%!important;

height:auto!important;

overflow:hidden;

clear:both;

}

.post-body img {

display:block;

width:100%!important;

height:auto!important;

border:none;

outline:none;

position:relative;

margin: 0px;

padding:0;

}

.post-summary-text {

color:#777;

font-size:100%!important;

font-family: &#39;Open Sans Condensed&#39;, sans-serif;

text-align:left;

clear:both;

overflow:hidden;

margin:5px 0 0;

padding:7% 1%;

}

a.comment-bubble {

display:none;

  }

a.comment-bubble:before {

content: &quot;Comments: &quot;;

}

.post-header,

.post-footer {

 clear:both;

display:none !important;

}

</style></b:if></b:if>

<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>

Step 6. Save the theme and preview your home page.

You can customize the grid layout by edit the css code in step 5.

Okay, that's enough for now from me, if you have any questions, please comment in the comments column. If something goes wrong I apologize. Hopefully helpful, and thank you.

"Look for someone who is willing to accept your situation, your family and your job. In fact, happiness is about being together and being grateful."