How To Add Grid Style V1-Optimized Blogger Posts In Blogspot?

Blogger auto image thumbnail and read more hack are common now but since Google Site Speed checking arthrogram updated, now those blog that have HD images in posts and using Image Thumbnail & ReadMore code for main page are got hit and lost upto 40% of speed in Google Page Analytic. Now you are thinking that you are using fully optimize images that are also important still not able to fix this issue.

So here we are with another awesome version of this code that will kick off this updated and will give you your page speed back or even more then it and also user will experience more speed then before. As you know that we keep page speed on top in SEO tips list so we have to keep an eye on this. Now the code is same as it was in Grid Style V1 Blogger Posts but we just added some more features and fixed this HD image issue.

Features:

1.) Uses Pure HTML-Javascript-Blogspot Code.
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).
6.) You Can Also Add Default Thumbnail That Will Be Shown There Where There Is No Image In Post.
7.) Only Loads The Snippet (On Home, Labels And Archive Pages).
8.) It’s Will Make Professional Looking Blog.
9.) Visitors Have To Click Read More To View The Full Post That Will Increases Your Page Views.
10.) Will Decrease Your Page (On Home, Labels And Archive Pages) Loading Time.
11.) Perfect For Better SEO.
12.) You Don’t Have To Add -The Jump Break- In Every Post.
13.) It Will Effect All Of Your Post In Your Blog (New To Old).
14.) 99% Of Blogger Are Using This Code.
15.) All Post Becomes Grid Styled.
16.) Quick To Load And Easy To Install.
17.) No Any External File Added.
18.) Image Resize Error Fixed In Google Page Speed.
19.) Small Images On Main Page Originally.
20.) Images Will Be Resized Actually Not Through CSS.

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 ReadMore List Style Post V1-Optimized By EXEIdeas Code Start -->
 <b:if cond='data:blog.pageType != &quot;item&quot;'>
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
 <style type='text/css'>
 .date-outer .post-outer {width:40%;height:auto;float:left;margin:10px;position:relative;display: block;padding:10px;border:1px solid #dedede;}
 .date-outer .post-outer #exe_short_post img {float:left;margin-right:5px;padding:5px;border-right:1px solid #dedede;margin-left:0;}
 .date-outer .post-outer #exe_short_post span {text-align:justify;word-break:break-all;font-size:15px;}
 .date-outer .post-outer h2.post-title {font:normal 26px Helvetica,Open Sans,Arial;margin:0px;padding:0 0 5px 0;border-bottom:1px solid #D8D8D8;}
 .exe_readmore {color:#333333;font-size:13px;font-weight:700;text-transform:uppercase;position:relative;right:0px;float:right;padding:5px;}
 .exe_readmore:hover {background:#333333;color:#ffffff;}
 .jump-link {display:none;}
 </style>
 <script type='text/javascript'>
 var exe_summary_count = 250;
 var exe_img_height = 150;
 var exe_img_width = 200;
 var exe_defaultImg = "https://lh4.googleusercontent.com/-fj6pace2cv0/U9Jt75Kq8PI/AAAAAAAARtE/ttg-4YuCOfQ/s250/exe_empty_thumbnail.jpg";
 </script>
 <script type='text/javascript'>
 // List Style V1-Optimized Blogger Posts
 // Code Written By EXEIdeas (www.exeideas.com)
 // Copyright 2014. All Right Reserved.
 //<![CDATA[
 var _0x7034=["x3C","x69x6Ex64x65x78x4Fx66","x73x70x6Cx69x74","x6Cx65x6Ex67x74x68","x3E","x73x75x62x73x74x72x69x6Ex67","","x6Ax6Fx69x6E","x63x68x61x72x41x74","x20","x2Ex2Ex2E","x67x65x74x45x6Cx65x6Dx65x6Ex74x42x79x49x64","x3Cx64x69x76x20x69x64x3Dx22x65x78x65x5Fx73x68x6Fx72x74x5Fx70x6Fx73x74x22x3Ex3Cx69x6Dx67x20x73x72x63x3Dx22","x22x20x77x69x64x74x68x3Dx22","x70x78x22x20x68x65x69x67x68x74x3Dx22","x70x78x22x2Fx3E","x3Cx73x70x61x6Ex3E","x69x6Ex6Ex65x72x48x54x4Dx4C","x3Cx2Fx73x70x61x6Ex3Ex3Cx2Fx64x69x76x3E"];function removeHtmlTag(_0xb0c3x2,_0xb0c3x3){if(_0xb0c3x2[_0x7034[1]](_0x7034[0])!=-1){var _0xb0c3x4=_0xb0c3x2[_0x7034[2]](_0x7034[0]);for(var _0xb0c3x5=0;_0xb0c3x5<_0xb0c3x4[_0x7034[3]];_0xb0c3x5++){if(_0xb0c3x4[_0xb0c3x5][_0x7034[1]](_0x7034[4])!=-1){_0xb0c3x4[_0xb0c3x5]=_0xb0c3x4[_0xb0c3x5][_0x7034[5]](_0xb0c3x4[_0xb0c3x5][_0x7034[1]](_0x7034[4])+1,_0xb0c3x4[_0xb0c3x5][_0x7034[3]]);} ;} ;_0xb0c3x2=_0xb0c3x4[_0x7034[7]](_0x7034[6]);} ;_0xb0c3x3=(_0xb0c3x3<_0xb0c3x2[_0x7034[3]]-1)?_0xb0c3x3:_0xb0c3x2[_0x7034[3]]-2;while(_0xb0c3x2[_0x7034[8]](_0xb0c3x3-1)!=_0x7034[9]&&_0xb0c3x2[_0x7034[1]](_0x7034[9],_0xb0c3x3)!=-1){_0xb0c3x3++;} ;_0xb0c3x2=_0xb0c3x2[_0x7034[5]](0,_0xb0c3x3-1);return _0xb0c3x2+_0x7034[10];} ;function createSummaryAndThumb(_0xb0c3x7,_0xb0c3x8){var _0xb0c3x9=document[_0x7034[11]](_0xb0c3x7);var _0xb0c3xa=_0x7034[12]+_0xb0c3x8+_0x7034[13]+exe_img_width+_0x7034[14]+exe_img_height+_0x7034[15];var _0xb0c3xb=exe_summary_count;var _0xb0c3xc=_0xb0c3xa+_0x7034[16]+removeHtmlTag(_0xb0c3x9[_0x7034[17]],_0xb0c3xb)+_0x7034[18];_0xb0c3x9[_0x7034[17]]=_0xb0c3xc;} ;
 //]]>
 </script>
 </b:if>
 </b:if>
 <!-- Auto ReadMore List Style Post V1-Optimized By EXEIdeas Code End -->

8.) You Will Find Three Of Them, Replace The Second & Third One With The Following Code.

<!-- Auto ReadMore List Style Post V1-Optimized By EXEIdeas Code Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<b:if cond='data:post.thumbnailUrl'>
<script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;, &quot;<data:post.thumbnailUrl/>&quot;); </script>
<b:else/>
<script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;, exe_defaultImg); </script>
</b:if>
<script type='text/javascript'>
//<![CDATA[
var _0x4f05=["x67x65x74x45x6Cx65x6Dx65x6Ex74x42x79x49x64","x69x6Dx67","x67x65x74x45x6Cx65x6Dx65x6Ex74x73x42x79x54x61x67x4Ex61x6Dx65","x6Cx65x6Ex67x74x68","x73x72x63","x2Fx73","x2Dx63","x72x65x70x6Cx61x63x65","x42x6Cx6Fx67x31"];function resizeThumb(_0x6ad0x2,_0x6ad0x3,_0x6ad0x4){var _0x6ad0x5=document[_0x4f05[0]](_0x6ad0x2),_0x6ad0x6=_0x6ad0x5[_0x4f05[2]](_0x4f05[1]);for(var _0x6ad0x7=0;_0x6ad0x7<_0x6ad0x6[_0x4f05[3]];_0x6ad0x7++){_0x6ad0x6[_0x6ad0x7][_0x4f05[4]]=_0x6ad0x6[_0x6ad0x7][_0x4f05[4]][_0x4f05[7]](//s72-c/,_0x4f05[5]+_0x6ad0x3+_0x4f05[6]);} ;} ;resizeThumb(_0x4f05[8],exe_img_width);//]]>
</script>
<a class='exe_readmore' expr:href='data:post.url'>Read More...</a>
</b:if>
</b:if>
<!-- Auto ReadMore List Style Post V1-Optimized By EXEIdeas Code End -->

9.) Click Preview. If It Works, Then Click Save.

Next/Prev/Home Buttons Bugs Fixed:

If You Have A Custom Template Or Blogger Official Template, There May Be A Bug After Adding The Above Code That Will Hide Your Next/Prev/Home Buttons Which Are At The Near Of End Of Blog And Move Them Anywhere Else. If You Are Watching This Bug Then Don’t Feel Horrible Because Here IS The Fix For You.
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 Box To Find <b:includable id=’nextprev’> Code.
6.) Now Copy The Below Code And Paste It Just After The Above Code.

 <div style='clear:both;'/>

7.) Click “Save” Template.

Customization:

1.) Change https://lh4.googleusercontent.com/-fj6pace2cv0/U9Jt75Kq8PI/AAAAAAAARtE/ttg-4YuCOfQ/s250/exe_empty_thumbnail.jpg To Your Desired NoImage Thumbnail If Your Post Doesn’t Have Image.
3.) Summary Words Count On Main Pages (On Home, Labels And Archive Pages) Is 250. You Can Change It With Your Desire.
4.) Height Of Thumbnail Of Your Image On The Page (On Home, Labels And Archive Pages) Is 150 You Can Change It With Your Desire.(It Is Calculated In Pixels)
5.) Width Of Thumbnail Of Your Image On The Page (On Home, Labels And Archive Pages) Is 200 You Can Change It With Your Desire.(It Is Calculated In Pixels)
6.) You Can Change The Words “Read More…” With Your Desire, If You Want To Show An Image Instead Of  Text Then Change It With

<img  src="https://1.bp.blogspot.com/-Tp2IeCY8rwY/TpvG0uIwGUI/AAAAAAAAAfE/T2e0SlO1E5I/s1600/Read-More-Button.png" title="Read The Full Awesome Article" alt="Read More"  />

Note:

If You Have Already Inserted -The Jump Break- Option In Your Previous Post, After Applying This Code You Will See The Two “Read More…” Link Below Every Old Post. Then Please Contact Me Or Comment Here, I Will Set It For You.