Monday 14 July 2014

HOW TO PUT AUTOMATIC "READ MORE FEATURE" ON BLOGGER POSTS

It is s very good thing after selecting a good template, you try to redesign the way your write-ups should appear on your blog that won't scare people away.When someone is reading a topic, he may be scared thinking its a very long one seeing how the texts go so down.
Using the "Read More" link helps to arrange and add more respect and uniqueness to your blog.
 Lets go there:

There are two ways to add 'Read more' link or tag to your posts

1.USING THE JUMP BREAK WHILE EDITING
 The first one is the one you insert when you are composing your post on your dashboard. When you reach where you want to add the 'Read More' tag click on 'INSERT JUMP BREAK'. See picture below
The Circled button is where you click.



2.  HTML AUTO METHOD: This is a configuration you will make and you won't need to be placing the Jump break individually. Here even if you post via e-mail, you got nothing to worry 'cos the 'Read More' link will be there automatically. Let's go there

STEP 1: Go to  Blogger Dashboard ==> Template==>(Click on) Edit HTML


STEP 2:
Click anywhere inside the code area, and press Ctrl + F on your keyboard.
You will see a search bar

STEP 3:
on the Search bar that appeared type in the following and hit enter on your keyboard
<data:post.body/>  
Note: After you type in the above, you will find more than one entry in the section, but stop at the third one.

STEP 4: 
Delete the code (The third one) and replace it with 
 <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;,&quot;<data:post.title/>&quot;);</script>
 <span class='readmore' style='float:right;'><a expr:href='data:post.url'>Read More &#187;</a></span></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 5:
Just the same way, search for </head> 
Above the </head> add the following 
 <script type='text/javascript'>
posts_no_thumb_sum = 450;
posts_thumb_sum = 390;
img_thumb_height = 160;
img_thumb_width = 180;
</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_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></a></span>';
summ = posts_thumb_sum;
}

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

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
.post-footer {display: none;}
.post {margin-bottom: 10px; border-bottom: 1px dotted #E6E6E6; padding-bottom: 20px;}
 .readmore a {text-decoration: none; }
</style>
</b:if>
</b:if>

Number of Characters shown when there's no thumbnail: 450 - You  can modify this
Number of Characters shown when there's thumbnail:  390- You can modify this  
The Height when there's thumb_nail: 160
The width "            "          "            :  180
You can modify any of the above.

STEP 6: 
Click on Save template . That's all.

Note: Incase you didnt notice a change after step 4, then you can replace the second <data:post.body/> like you did to the 3rd one on Step3 and 4 above. Meaning you replace the 2nd and the 3rd code you got when you searched leaving the 1st. 


No comments: