Grid Style Auto readmore Hack for Blogger Template

Grid Style Auto readmore Hack for Blogger Template

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. 
Grid Style Auto readmore Hack for Blogger Template
4 Stars stars - "Grid Style Auto readmore Hack for Blogger Template" Auto readmore code is widely used for increasing the template loading speed. Most popular auto...

Post a Comment

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

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 *