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 != "static_page"'><b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>","<data:post.url/>","<data:post.title/>");</script>
<span class='readmore' style='float:right;'><a expr:href='data:post.url'>Read More »</a></span></b:if></b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><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 != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<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:
Post a Comment