Grid Style Auto readmore Hack for Blogger Template

Grid Style Auto readmore Hack for Blogger Template
auto redmore

Auto readmore code is widely used for increasing the template loading speed. Most popular auto readmore style is magazine style. But Grid mode is getting more popular now a days. Because users can able to display more posts in small space by Grid style, where by Magazine style auto readmore code is not possible.

Readmore: 


Most of the template gets popular by watching their looks and appearance and majority of users prefer clean and simple style template. And Auto readmore is mainly responsible to make a Blogger template either beautiful or ugly. So for this reason template developers used different types of auto readmore code to make it more attractive. In this article I am going to share a simple Grid style auto redmore code which will help the blog designer to make their template design beautiful.


The main features of this auto readmore hack are as follows-
  • Blog posts will be displayed as with image thumbnail and short summaries.
  • Blog posts image will be re sized into preset thumbnail size and able to crop image accurately.
  • You can also fix the number of character or text will be displayed in the short summery.
  • Image thumbnail size is highly customization.
  • It will automatically add jump break into your archive and index pages after adding it.


auto readmore hack


Note that before applying this Auto readmore trick adjust the template width. For displaying the post thumbnail Outer wrapper should be minimum 1100px width.

For adding this Grid style auto readmore hack please follow the below steps-

Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Click on  Now click on -> Template -> Edit HTML-> Unfold code  ►

Step 3 Now Find this code </head> by Pressing Ctrl+F (Windows) or CMD+F (Mac)

Step 4 Paste the below code Above/before </Head> 

<script type='text/javascript'>
posts_noimage_sum = 100;
posts_img_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_noimage_sum;
if(img.length>=1) {
imgtag = '<span class="post-img" style="float:left; margin-right: 10px;"><a href="'+ pURL +'"><img src="'+img[0].src+'" /></a></span>';
summ = posts_img_sum;
}

else {
imgtag = '<span class="post-img" style="float:left; margin-right: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVYvftnNO5AjlI6_o3tCv_N_gCu8aGgWQE1JL75uRDD1DZuYEE1Iu8kGKAO55oI9Rlivybzdn7UNbqL0eE4UlAJNznNFddy9HivS_YjrXknowO-wK5QfW7zSDHcwU5CGYlVfkT0CTlCQyK/s1600/BloggerSpice+no+image.jpg" style="margin-top: -10px;margin-left: -10px;" /></a></span>';
summ = posts_img_sum;
}

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

<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: auto;
width:30.8%;
overflow: hidden;
display:inline-block;
text-decoration:none;
float:left;
margin:0 1.1% 2%;
padding: 0px !important;
}

h3.post-title a {
font-size:75%;
font-family: &#39;Oswald&#39;, sans-serif;
text-transform:uppercase;
padding:0;
color:#444;
}
h3.post-title {
height: 24px;
text-align:center;
width:100%;
margin:0!important;
padding-bottom: 4%;
}
.date-header {
display: none;
}

.post-body a {
text-decoration: none;
}
.post-img {
width:100%!important;
height:190px!important;
overflow:hidden;
clear:both;
}
.post-body img {
display:block;
width:100%!important;
height:auto!important;
max-width:800px!important;
max-height:400px!important;
min-width:190px!important;
min-height:190px!important;
border:none;
outline:none;
position:relative;
margin: 0px;
padding:0;
}
.post-summary-details {
color:#777;
font-size:100%!important;
font-family: &#39;Oswald&#39;, sans-serif;
text-align:center;
clear:both;
overflow:hidden;
margin:5px 0 0;
padding:7% 10%;
}
a.comment-bubble {
color:#fff;
text-decoration:none;
font-size:100%;
font-weight: bold;
right:10px;
position:absolute;
top:165px;
text-shadow:1px 2px 1px #333;
font-family: &#39;Oswald&#39;, sans-serif;
}
a.comment-bubble:before {
content: &quot;Comments: &quot;;
}
.post-header,.post-footer {
display:none;
}
</style></b:if></b:if>

<link href='http://fonts.googleapis.com/css?family=Oswald:400,700|Open+Sans:400,700' rel='stylesheet' type='text/css'/>


Step 5 Now Find this code <data:post.body/> by Pressing Ctrl+F (Windows) or CMD+F (Mac)

Step 6 Replace it with the below code.  

<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 7 And now click on Save templates button.

That's it. You have successfully applied auto readmore hack in your Blogger template. Now check your Blog site and see your posts that is displaying in Grid style. Hopefully your site will now load faster than before. For any further query feel free to write me. Thank you. 
Go Up