Home
Blogger

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. 

11 comments

  1. I simply could not go away your site prior to suggesting
    that I extremely enjoyed the standard information a person provide on your visitors?
    Is going to be again steadily in order to inspect new posts.
  2. Muito bom sua postagem, esse e o melhor site que ja vi,
    essa postagem e incrivel, continue com o bom trabalho vou
    baixar muita coisa aqui. obrigado
  3. Because the admin of this site is working, no uncertainty very quickly it
    will be well-known, due to its quality contents.
    • Thank you. May your wish come true. ;)
  4. Hi there would you mind stating which blog platform you're using?
    I'm going to start my own blog soon but I'm having a hard time making
    a decision between BlogEngine/Wordpress/B2evolution and Drupal.

    The reason I ask is because your design seems different then most
    blogs and I'm looking for something unique.
    P.S Apologies for being off-topic but I had to ask!
    • Hi There ;)
      Start with WordPress. And buy host from SiteGround for faster load. You can read my guideline from below URL.

      http://www.bloggerspice.com/2017/02/start-a-wordpress-blog.html
  5. Thanks for every other great article. The place
    else may just anyone get that kind of information in such an ideal approach of
    writing? I have a presentation next week, and I am at the look for such
    info.
  6. Hi, I do think this is a great site. I stumbledupon it ;) I may return yet again since i
    have bookmarked it. Money and freedom is
    the greatest way to change, may you be rich and continue to guide other people.
    • Thank you for dropping your lovely comment. :)
  7. We're a bunch of volunteers and starting a brand new scheme in our
    community. Your website offered us with helpful info to
    work on. You've done an impressive activity and our whole group might be thankful to you.
    • Welcome. And thanks for your lovely comment. :)
Go Up