LATEST >>

Welcome Here And Thanks For Visiting. Like Us On Facebook...

EXEIdeas – Let's Your Mind Rock » Blogspot / Blogspot Tricks » How To Add Grid Style V2-Optimized Blogger Posts In Blogspot?

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

Add-Grid-Style-V2-Optimized-Auto-ReadMore-And-Thumbnail-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 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 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:50%;height:500px;float:left;margin:20px 1% 0px 1%;}
 .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:18px;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;width:100%;}
 .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'>
 // Grid 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 -->

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.

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="http://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.

You Like It, Please Share This Recipe With Your Friends Using...

14 Responses to “How To Add Grid Style V2-Optimized Blogger Posts In Blogspot?”

  1. pls help, this thing is not working

  2. Anubhav Anand says:

    after applying this code , everything is messed up. I am already using auto read more script. please help me……….

  3. Henriko says:

    Hi,

    Thank’ for this great tutorial.

  4. Andrea says:

    I think I did it good, but the posts appear in one column, not two columns.

    • EXEIdeas says:

      Your edit of code. Its ok. Now you have to add fixed height to the short posts on main page like add .date-outer.post-outer{height:500px;}. If you dont know, then add our code again. We also added it there.

  5. Andrea says:

    Thnks so much for the repply.

    Ok. The posts are now in two columns. But post navigation appear on the top, below posts. How can I fix it? Inside a “div”?or section?

    Thanks again and sorry

Leave a Reply

Your email address will not be published. Required fields are marked *