Grid Style Auto readmore Hack for Blogger Template

Grid Style Auto readmore Hack for Blogger Template

Comments: 12
data:blog.title
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="http://3.bp.blogspot.com/-3BR2BjElkKA/VHVyFYB5YnI/AAAAAAAAIQQ/mn2P4ty1EH8/s1600/BloggerSpice%2Bno%2Bimage.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. 

Related Post

Speak Your Mind

Anonymous 7/13/2017

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.

Anonymous 7/30/2017

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

Anonymous 10/20/2017

Because the admin of this site is working, no uncertainty very quickly it
will be well-known, due to its quality contents.

Anonymous 10/25/2017

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!

Anonymous 10/27/2017

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.

Anonymous 10/29/2017

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.

Anonymous 10/29/2017

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.

Rabbi Khan says: 11/18/2017

Thank you :)

Rabbi Khan says: 11/21/2017

Welcome. And thanks for your lovely comment. :)

Rabbi Khan says: 11/21/2017

Thank you for dropping your lovely comment. :)

Rabbi Khan says: 11/21/2017

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

Rabbi Khan says: 11/21/2017

Thank you. May your wish come true. ;)

Facebook Group Community Code ConverterHide Code Converter Show EmoticonHide Emoticon

If you Got questions? Ask ’em below! While we’re here, you might like to leave a comment and let me know if you have any stories or questions.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *