How To Add Grid Style V1 Blogger Posts In Blogspot?

In the series of our previous post of styling up blogger post automatically in List Style Blogger Posts as top bloggers are doing, Here we are with our second code in which your all blog post will be in Grid Style on archive, home, label and search page that looks great and attract visitors and also can show maximum post on the same size of page also.

In this code we just convert your all post in a grid style with also a thumbnail image align to top and automatically a read more link after some words. This code will only work on archive, labels, search and homepage and will show the full post on your main post page or static page. You didn’t have to do anything like aligning the image at left or adding a read more after some words in every post, It will automatically do it himself and will show you the new awesome style of your posts.

Some people looking for this code after seeing this on many blogs templates but he didn’t find this because blogger templates provider create a template with this code and force people to use their template. But now peoples are free to use the code with their own desire template. Expandable post or popularly known as “Read More” is a feature that make your blog shows only a part of your posts on index pages i.e. Home, Labels and Archive pages. We also fixed the biggest bug ever in this code that will effect Next/Prev/Home Buttons so don’t worry about anything.

At the end of each preview there will be a link to the post page, usually attached to the phrase “Read More”. We will describe her that “How To Add Auto First Image Thumbnail & ReadMore Link After Given Length In Blogspot Posts By Adding Awesome JavaScript Code Easily?”

Some guys are looking for this codes and they even didn’t get or it seems to be very hard to add it but here we have both solution that will help them too. So without any more description, just move forward to the code to get spice up your blog through seeing the features list and also the live DEMO and a screenshoot which have some extra style codes.

Features:

1.) All Post Becomes Grid Styled.
2.) Post Is Untouched While Editing.
3.) Length Of The Post (On Home, Labels And Archive Pages) Can Be Changed, But It Affects All The Posts.
4.) Auto Read More Will Applied On All Posts, No Exception.
5.) The First Picture In Each Post Will Be Automatically Used As A Thumbnail (On Home, Labels And Archive Pages). You Can Also Choose Not To Show Thumbnail.
5.) Only Loads The Snippet (On Home, Labels And Archive Pages).
6.) It’s Will Make Professional Looking Blog.
7.) Visitors Have To Click Read More To View The Full Post That Will Increases Your Page Views.
8.) Will Decrease Your Page (On Home, Labels And Archive Pages) Loading Time.
9.) Perfect For Better SEO.
10.) You Don’t Have To Add -The Jump Break- In Every Post.
11.) It Will Effect All Of Your Post In Your Blog (New To Old).
12.) 99% Of Blogger Are Using This Code.
13.) Uses HTML-Javascript Code.
14.) Quick To Load And Easy To Install.
15.) No Any External File Added.

How To Add In Your Blog:

1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To “Template“.
4.) Click “Edit HTML“.
5.) Click “CTRL+F” Inside The Template BoxTo Find </head> Code.
6.) Now Copy The Below Code And Paste It Before The Above Code.

<!-- Auto Image Thumbnail & ReadMore Link By EXEIdeas Script Start-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot; ;
summary_noimg = 500;
summary_img = 350;
img_thumb_height = 200;
img_thumb_width = 250;
</script>
<script type='text/javascript'>
//<![CDATA[
/*
Grid Style Blogger Posts Thumbnail & ReadMore V1 (June 02, 2013)
Copyright (c) 2013 EXEIdeas From www.exeideas.com
*/
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){var div=document.getElementById(pID);var imgtag="";var img=div.getElementsByTagName("img");var summ=summary_noimg;if(img.length>=1){imgtag='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';summ=summary_img}var summary=imgtag+'<div>'+removeHtmlTag(div.innerHTML,summ)+'</div>';div.innerHTML=summary}
//]]>
</script>
<style type='text/css'>
.post {width:46.7%;height:336px;float:left;margin:10px;position:relative;display: block;}
.post h3{height:32px;margin-top:0px;padding:5px;font-family: Helvetica, Arial;line-height:1em;font-weight: bold;  font-size:16px;letter-spacing:-0.5px;}
.post-body {padding:5px;height:241.5px;font-family: Helvetica, Arial; font-size: 13px; }
.post-footer {margin-top:0px;height:20px;}
.post-labels {display:none;}
.mobile .post {width:auto;height:auto;}
.mobile .post-body {height:auto;}
</style>
</b:if>
</b:if>
<!-- Auto Image Thumbnail & ReadMore Link By EXEIdeas Script End -->