Add unto page break with read more and post thumbnail for blogger
Has a blogger expecially a young blogger running a blogspot blog, you should have noticed that all the default templates readily available on Blogger theme section when enabled for your blog will always display your full post instead of a summary of the post as seen on other blogs that are also powered by Blogger.
It's both annoying to you the blogger and the audience you're interacting with
Thanks to GOD, blogspot introduce a page break but you would have to apply it for every article you wrote, it's not even stylish.... So why use it?
Here today I am going to teach you how to add instantly read more option with thumbnail to Blogger posts. When you click on "Read More" link, it will automatically redirect to the particular post.
You know I never give out any tutorial unless I'm sure and I've tested it.... See ours below
Now to the tutorial
Step 1:log in to your Blogger dashboard
Step 2:Go to Template and click on the Edit HTML button.
I advice you Always backup your template before editing it
Step 3:Click inside the code area, then press the CTRL + F keys and search for this code:
<data:post.body/>
Note: after hitting Enter, you'll find this code more than once but you need to stop at the third one.
Step 4: Replace the code above with this one:
<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>
You don't see any changes after going through all the steps, please try to replace the second <data:post.body/> as well.
Step 5: Find this code
</head>
Step 6:copy paste the below code just above it.
<script type='text/javascript'>
posts_no_thumb_sum = 490 ;
posts_thumb_sum = 400 ;
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>
How to customise it
1- modify the 490 values to Change the number of words shown, when there is no image
2- modify the 400 values to change the number of words shown when post has an image
3- Change the width of image, modify
180 values
4- Change the height of image, modify
160 values
Step 7:Click on the Save template button to save the changes.
Step 8:leave a comment
About author
olaitan Michael aka CRYSTAL is a professional blogger and a freelancer,he designs and sell professional templates and blogs you can contact him through 08106511037 and 07053356460 or his mail Olaitanmichael94@gmail.com
It's both annoying to you the blogger and the audience you're interacting with
Thanks to GOD, blogspot introduce a page break but you would have to apply it for every article you wrote, it's not even stylish.... So why use it?
Click here:Easiest method to remove Powered by blogger Attribution
Here today I am going to teach you how to add instantly read more option with thumbnail to Blogger posts. When you click on "Read More" link, it will automatically redirect to the particular post.
You know I never give out any tutorial unless I'm sure and I've tested it.... See ours below
Step 1:log in to your Blogger dashboard
Step 2:Go to Template and click on the Edit HTML button.
I advice you Always backup your template before editing it
Step 3:Click inside the code area, then press the CTRL + F keys and search for this code:
<data:post.body/>
Note: after hitting Enter, you'll find this code more than once but you need to stop at the third one.
Step 4: Replace the code above with this one:
<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>
You don't see any changes after going through all the steps, please try to replace the second <data:post.body/> as well.
Step 5: Find this code
</head>
Step 6:copy paste the below code just above it.
<script type='text/javascript'>
posts_no_thumb_sum = 490 ;
posts_thumb_sum = 400 ;
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>
How to customise it
1- modify the 490 values to Change the number of words shown, when there is no image
2- modify the 400 values to change the number of words shown when post has an image
3- Change the width of image, modify
180 values
4- Change the height of image, modify
160 values
Step 7:Click on the Save template button to save the changes.
Step 8:leave a comment
Click here:How to add category and multiple blog posts into a page on blogger
About authorolaitan Michael aka CRYSTAL is a professional blogger and a freelancer,he designs and sell professional templates and blogs you can contact him through 08106511037 and 07053356460 or his mail Olaitanmichael94@gmail.com
Comments
Post a Comment