Using "Auto Read More", you can make your blog post look beautiful and make reader easy finding what they need.If they want to read full post,they just click on "Read More" Link and then it take them to the actual post.
Do you know how to do it? If you still don't know yet, So today please let me show you how do it .
How To Add Auto "Read More" To Blogger ?
1. go to your blog dashboard > click on "Template" > click on "Edit HTML"
2. Use keys " Ctrl+F" to show search box > past code below in search box.
<data:post.body/>
3. Press "Enter" you will see both <data:post.body/> stay in different row
4. replace both <data:post.body/> with codes below
<!-- "Read More" - 4Share2016.blogspot.com -->
<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>
<!-- End "Read More" - 4Share2016.blogspot.com -->
Note: Don't edit code above. It will not work.
5. After you finish all steps above, now go to search box and search </head> and copy the following code below, then past above </head>
<!-- 4Share2016.blogspot.com -->
<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>
<!-- 4Share2016.blogspot.com -->
Note:
posts_no_thumb_sum = 490; - Edit number of alphabets for post no image
posts_thumb_sum = 400; - Edit number of alphabets for post no image
img_thumb_height = 160; - Edit height of first image in your post
img_thumb_width = 180; - Edit width of first image in your post
6. Last step just click on "Save Template" to finish, then click on view blog to see.
After you read this topic, I hope you can do it and you tell me by comment of it doesn't work.
Thank you so much for your reading and the mixture for the mistakes that I wrote by unintentional and expect that all readers favored me to write.
5. After you finish all steps above, now go to search box and search </head> and copy the following code below, then past above </head>
<!-- 4Share2016.blogspot.com -->
<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>
<!-- 4Share2016.blogspot.com -->
posts_no_thumb_sum = 490; - Edit number of alphabets for post no image
posts_thumb_sum = 400; - Edit number of alphabets for post no image
img_thumb_height = 160; - Edit height of first image in your post
img_thumb_width = 180; - Edit width of first image in your post
6. Last step just click on "Save Template" to finish, then click on view blog to see.
After you read this topic, I hope you can do it and you tell me by comment of it doesn't work.
Thank you so much for your reading and the mixture for the mistakes that I wrote by unintentional and expect that all readers favored me to write.
Finally, If you found this topic, please give it a like to show your support,it really help us out!
If you know someone who needs to see it, please share it to show your relationship!
Leave a comment below with your thoughts and I will accept all your concept. Thank you!
