Home
Blogger

Add Auto Read More With Wide Image Thumbnail and CSS3 Button

Add Auto Read More With Wide Image Thumbnail and CSS3 Button
jump break

Auto read more add a jump break option into your blog post on homepage. As a result it shows the post summary with image thumbnail. If is beneficial to use that it will reduce the post length on home page and a readmore option will appear which will help you to enter into full post. In addition you can skip to any number of posts on home page. Suppose if you have a blog template but hasn’t auto readmore added then it will show the full post as a result it will occupy the huge space and in the landing page it will show all full post with all images which can make your template loading slower. However if you add auto readmore then it will bring all the post in a summary where you can display 8 to 10 post on your blog home page without any slowing the loading time as well as it will make your blog template professional. If you don’t use any auto readmore option then the visitors can read full post without clicking on any post as a result your page view will lesser, even you have big chunk of visitors. A blog with auto readmore option only can bring more page view, whenever a visitor click on readmore option then it will be counted as page view. I believe this trick is not unknown to you for this reason I have brought to you this option with wide image thumbnail and CSS readmore button.

Main features of this 'Auto read more' hack

  • Your Blog posts will be displayed as short summaries with a read more link.
  • Your Blog posts image will be re sized into wide thumbnail and display left site of the summery.
  • You can also fix how many character or text will be displayed in the summery.
  • You can customize the size of the image thumbnail.
  • It will automatically add jump break into your archive and index pages after adding it.

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 ]]></b:skin> by Pressing  Ctrl + F

Step 4 Paste the below code  After/below ]]></b:skin> or Above </Head> and Save the templates. 

<!-- Auto Readmore by www.bloggerspice.com -->
<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 450;
summary_img = 300;
img_thumb_height = 180;
img_thumb_width = 300;
</script>
<script type='text/javascript'>
//<![CDATA[
// <!-- Summary Posts with thumbnails www.bloggerspice.com -->
// <!-- http://www.bloggerspice.com -->
 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){
                var div = document.getElementById(pID);
                var imgtag = "";
                var img = div.getElementsByTagName("img");
                var summ = summary_noimg;
                if(img.length>=1) {      
                                if(thumbnail_mode == "float") {
                                                imgtag = '<span style="float:left; padding:0px 20px 5px 0px;margin:0 0 0 0 !important;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
                                                summ = summary_img;
                                } else {
                                                imgtag = '<div style="padding:0 5px" align="center"><img style="max-width:'+img_thumb_width+'px; max-height:'+img_thumb_height+'px;" src="'+img[0].src+'" /></div>';
                                                summ = summary_img;
                                }
                }
           
                var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
                div.innerHTML = summary;
}
 //]]>
</script>


Understanding The Code

The code in red sets how the post summary's are displayed. Remember if a post has an image it will be re sized into a thumbnail to be displayed beside the summery. If the post does not have an image just a text summery will be displayed.
  • summary_ noimg= 450; --> The length of the summery if the blog post does not have a thumbnail.
  • summary_img = 330; --> The length of the summery if there is an image in the post that will be converted into a thumbnail.
  • null_thumb_height = 180; --> The height in pixels of the thumbnail.
  • null_thumb_width = 300; --> The width in pixels of the thumbnail.
Step 5 Now Find this code <data:post.body/> by Pressing  Ctrl + F

Step 6 Replace it with the below code and Save the templates.  

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<p><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;);</script>
<span class='jump-link' style='float:right'><a expr:href='data:post.url'>Read more...</a>
</span></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if></p>
</b:if>

 Adding CSS Readmore Button 

Step 1 Now again Find this code ]]></b:skin> by Pressing  Ctrl + F

Step 2 Paste the below code  Before/above ]]></b:skin> and Save the templates.  

/* Read more CSS by www.bloggerspice.com */
.jump-link a {
background-color: #EEE;
background-image: -webkit-gradient(linear, left top, left bottom, from(#EEE), to(#CCC));
background-image: -webkit-linear-gradient(top, #EEE, #CCC);
background-image: -moz-linear-gradient(top, #EEE, #CCC);
background-image: -ms-linear-gradient(top, #EEE, #CCC);
background-image: -o-linear-gradient(top, #EEE, #CCC);
background-image: linear-gradient(top, #EEE, #CCC);
border: 1px solid #CCC;
border-bottom: 1px solid #BBB;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
color: #333 !important;
font: bold 12px Arial, Verdana, sans-serif;
line-height: 1;
padding: 5px 10px;
text-align: center;
text-shadow: 0 1px 0 #EEE;
display: inline-block;
margin: 20px 5px 0;
}
.jump-link a:hover {
background-color: #dddddd;
background-image: -webkit-gradient(linear, left top, left bottom, from(#dddddd), to(#bbbbbb));
background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb);
background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb);
background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb);
background-image: -o-linear-gradient(top, #dddddd, #bbbbbb);
background-image: linear-gradient(top, #dddddd, #bbbbbb);
border: 1px solid #bbb;
border-bottom: 1px solid #999;
cursor: pointer;
text-shadow: 0 1px 0 #ddd;
text-decoration:none;
}
.jump-link a:active {
border: 1px solid #aaa;
border-bottom: 1px solid #888;
-webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
-moz-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
-ms-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
-o-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
}

Customization 

  • Change EEE blue marked and all color code to get different color button 

If you feel any problem then feel free to ask me. I will response you as soon as possible.

6 comments

  1. Awesome bro :) you rock..

    -TheTricksLab.com
    • thanks bro
  2. bro it's not working in my template
    http://bditupdates.blogspot.com/
    plz help...
    • your templates already has autoreadmore. This code is effective for those template which has not auto readmore activated. Suppose you would find in blogger default template like Simple, Ethernal, Awesome inc...I use the above code in creation my designed templates.
  3. I love this site soo much, actually i trust it alot, and hey there are 3 similar codes of so you should replace the second code. (k)
  4. not work for me :?
Go Up