INSERT READ MORE WITH THUMBNAIL AUTOMATICALLY IN YOUR BLOG

This is for the bloggist or blogger who need to insert jumpbreak or ‘read more’ to their blog automatically without going through the stress of inserting it manually through their blog post.

We all know that to make our blog very beautiful, we need to use jumpbreak in the Homepage of the blog. Jumpbreak or ‘Read More’ as it is most often called is a design allowing you to break your post, showing only the summarize version in the blog or website front page or homepage. This can be done through clicking on the jumpbreak icon on the blog edit page.

Inserting a ‘read more’ manually maybe a difficult task most especially when you have a large write up to do. Just follow the below steps to know how you can insert an automatic read more just the way you see in www.dekokoblog.com.ng

1. Log into your Blogger account
2. Click on your blog you need to design
3. Click on Template, Back up your Template
4. Edit HTML, Proceed and tick on Expand Template
5. Search for </head> and add below code right after the line

<!-- Auto read more script Start -->

<script type='text/javascript'>

var thumbnail_mode = "yes"; //yes -with thumbnail, no -no thumbnail

summary_noimg = 430; //summary length when no image

summary_img = 340; //summary length when with image

img_thumb_height = 200;

img_thumb_width = 200;

</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){

        var div = document.getElementById(pID);

        var imgtag = "";

        var img = div.getElementsByTagName("img");

        var summ = summary_noimg;

        if(thumbnail_mode == "yes") {

        if(img.length>=1) {   

               imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';

               summ = summary_img;

        }

        }

        var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';

        div.innerHTML = summary;

}

//]]>

</script>

<!-- Auto read more script End -->

After that, find this line in your template code <data:post.body/>

Replace it with the code below

<!-- Auto read more Start -->

<!-- http://www.dekokoblog.com.ng -->

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<data:post.body/>

<b:else/>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>

<data:post.body/>

<b:else/>

<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>

<a class='more' expr:href='data:post.url'>Read more ...</a>

</b:if>

</b:if>

<!-- Auto read more End -->

You can now Save the Template.

You can customize your Templates by

thumbnail_mode –set to “yes” if you want to show thumbnail with text summary. Set to other than “yes” to show only text summary.

summary_img –specify the number of characters (including spaces) you want to show in the summary, with thumbnail.

summary_noimg –specify the number of characters (including spaces) you want to show in the summary, when there is no thumbnail.

img_thumb_height and img_thumb_width -specify the thumbnail height and width (in pixels).

It works for me, I hope it works for you. 

Like our facebook page and also subscribe with your email so as not to miss anything.

Cheers