How To Add List Style V2-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 List Style V2 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 List 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:auto;margin:20px 0px 0px 20px;}
 .date-outer .post-outer .post-body {font-family:Helvetica, Arial;font-size:13px;}
 .date-outer .post-header {margin:0px;}
 .date-outer .post-outer h2.exe_post_TITLE {margin:0px;font-size:24px;font-family:fantasy;font-weight:normal;}
 .date-outer .post-outer h2.exe_post_TITLE a:hover{text-decoration:underline;}
 .date-outer .post-outer img.exe_post_IMG {margin-right:10px;float:left;}
 .date-outer .post-outer .exe_post_Desc {font-size:12px;padding: 10px;display: block;}
 .date-outer .post-outer .post-footer {text-align:left;display:block;padding:10px;font-size:11px;}
 .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;}
 .post-title, .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 V2-Optimized Blogger Posts
 // Code Written By EXEIdeas (www.exeideas.com)
 // Copyright 2014. All Right Reserved.
 //<![CDATA[
var _0x8936=["\x3C","\x69\x6E\x64\x65\x78\x4F\x66","\x73\x70\x6C\x69\x74","\x6C\x65\x6E\x67\x74\x68","\x3E","\x73\x75\x62\x73\x74\x72\x69\x6E\x67","","\x6A\x6F\x69\x6E","\x63\x68\x61\x72\x41\x74","\x20","\x2E\x2E\x2E","\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x42\x79\x49\x64","\x3C\x64\x69\x76\x20\x69\x64\x3D\x22\x65\x78\x65\x5F\x70\x6F\x73\x74\x5F\x44\x49\x56\x22\x3E\x3C\x69\x6D\x67\x20\x73\x72\x63\x3D\x22","\x22\x20\x77\x69\x64\x74\x68\x3D\x22","\x70\x78\x22\x20\x68\x65\x69\x67\x68\x74\x3D\x22","\x70\x78\x22\x20\x63\x6C\x61\x73\x73\x3D\x22\x65\x78\x65\x5F\x70\x6F\x73\x74\x5F\x49\x4D\x47\x22\x2F\x3E","\x3C\x68\x32\x20\x63\x6C\x61\x73\x73\x3D\x22\x65\x78\x65\x5F\x70\x6F\x73\x74\x5F\x54\x49\x54\x4C\x45\x22\x3E\x3C\x61\x20\x68\x72\x65\x66\x3D\x22","\x22\x3E","\x3C\x2F\x61\x3E\x3C\x2F\x68\x32\x3E\x3C\x73\x70\x61\x6E\x20\x63\x6C\x61\x73\x73\x3D\x22\x65\x78\x65\x5F\x70\x6F\x73\x74\x5F\x44\x65\x73\x63\x22\x3E\x3C\x73\x70\x61\x6E\x3E","\x69\x6E\x6E\x65\x72\x48\x54\x4D\x4C","\x3C\x2F\x73\x70\x61\x6E\x3E\x3C\x2F\x64\x69\x76\x3E"];function removeHtmlTag(_0xbb2bx2,_0xbb2bx3){if(_0xbb2bx2[_0x8936[1]](_0x8936[0])!=-1){var _0xbb2bx4=_0xbb2bx2[_0x8936[2]](_0x8936[0]);for(var _0xbb2bx5=0;_0xbb2bx5<_0xbb2bx4[_0x8936[3]];_0xbb2bx5++){if(_0xbb2bx4[_0xbb2bx5][_0x8936[1]](_0x8936[4])!=-1){_0xbb2bx4[_0xbb2bx5]=_0xbb2bx4[_0xbb2bx5][_0x8936[5]](_0xbb2bx4[_0xbb2bx5][_0x8936[1]](_0x8936[4])+1,_0xbb2bx4[_0xbb2bx5][_0x8936[3]]);} ;} ;_0xbb2bx2=_0xbb2bx4[_0x8936[7]](_0x8936[6]);} ;_0xbb2bx3=(_0xbb2bx3<_0xbb2bx2[_0x8936[3]]-1)?_0xbb2bx3:_0xbb2bx2[_0x8936[3]]-2;while(_0xbb2bx2[_0x8936[8]](_0xbb2bx3-1)!=_0x8936[9]&&_0xbb2bx2[_0x8936[1]](_0x8936[9],_0xbb2bx3)!=-1){_0xbb2bx3++;} ;_0xbb2bx2=_0xbb2bx2[_0x8936[5]](0,_0xbb2bx3-1);return _0xbb2bx2+_0x8936[10];} ;function EXEcreateSummaryAndThumb(_0xbb2bx7,_0xbb2bx8,_0xbb2bx9,_0xbb2bxa){var _0xbb2bxb=document[_0x8936[11]](_0xbb2bx7);var _0xbb2bxc=_0x8936[12]+_0xbb2bxa+_0x8936[13]+exe_img_width+_0x8936[14]+exe_img_height+_0x8936[15];var _0xbb2bxd=exe_summary_count;var _0xbb2bxe=_0xbb2bxc+_0x8936[16]+_0xbb2bx9+_0x8936[17]+_0xbb2bx8+_0x8936[18]+removeHtmlTag(_0xbb2bxb[_0x8936[19]],_0xbb2bxd)+_0x8936[20];_0xbb2bxb[_0x8936[19]]=_0xbb2bxe;} ;
 //]]>
 </script>
 </b:if>
 </b:if>
 <!-- Auto ReadMore List Style Post V1-Optimized By EXEIdeas Code End -->

7.) Find <data:post.body/>
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'> EXEcreateSummaryAndThumb(&quot;summary<data:post.id/>&quot;, &quot;<data:post.title/>&quot;, &quot;<data:post.url/>&quot;, &quot;<data:post.thumbnailUrl/>&quot;); </script>
<b:else/>
<script type='text/javascript'> EXEcreateSummaryAndThumb(&quot;summary<data:post.id/>&quot;, &quot;<data:post.title/>&quot;, &quot;<data:post.url/>&quot;, exe_defaultImg); </script>
</b:if>
<script type='text/javascript'>
//<![CDATA[
var _0x4f05=["\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x42\x79\x49\x64","\x69\x6D\x67","\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x73\x42\x79\x54\x61\x67\x4E\x61\x6D\x65","\x6C\x65\x6E\x67\x74\x68","\x73\x72\x63","\x2F\x73","\x2D\x63","\x72\x65\x70\x6C\x61\x63\x65","\x42\x6C\x6F\x67\x31"];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.

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.