Grid Style Auto readmore Hack for Blogger Template

Grid Style Auto readmore Hack for Blogger Template

Comments: 0
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. 

Speak Your Mind

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 *