Auto
Read More Feature to homepage of blog/website, gives a very good professional
looks to your dull and simple blog/site. It’s a new and famous look now a day
on blogging. People are very much excited for this “Auto Read More With Thumbnail For
Blogger/BlogSpot posts”. And today I am telling you How to make the blog home page to be
displayed with auto “READ MORE” button and “Thumbnail”. Without wasting time let’s
start working on “How To add the Auto Read More With Thumbnails” in blog.
Features Of Auto Read More
|
This “Auto Read More” have certain attractive and specific features as
- 1- It shows the “title of the post”
- 2- It displays the a short “summary of post”
- 3- It shows a “thumbnail”
- 4- After title, summary and thumbnail, it shows the
- 5- The “Automatic Read More Script” summarizes the content and the post summary shows only on the blog “home page, categories and archive pages”.
- 6- The script is very much “easy to handle” with simple coding.
How To Add Auto
Read More Feature in blog posts
|
STEP 1:
Go to blogger dashboard
then go to Template
then click on Edit
Template
STEP 2:
Click inside the edit
template box, now press CTRL+F keys
and search this code:
<data:post.body/>
Here you will find more
than one code, but you have to replace the third one code with the code, given
below
<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>
If you are not finding
any changes after doing all steps then please replace the second <data:post.body/> code as well.
STEP 3:
After you have done first 2
steps, now in this step search this code
</head>
STEP 4:
Here just above </head> tag, add the below code
<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>
Customization
|
Now customize the code
according to your needs as
- 1- To change the number of words shown, when there is no image, modify 490 values.
- 2- To change the number of words shown, when post has image, modify 400 values.
- 3- To change the width of image, modify 180 values
- 4- To change the height of image, modify 160 values
STEP 5
No click on “SAVE TEMPLATE” button. That’s it.
Congratulation! You have all done. Enjoy it….
Closing Words
|
Auto Read More With Thumbnail For Blogger/BlogSpot posts is very famous and useful feature to give the professional look to your
blog/site. Now a day’s it’s very much in. Hope you will like this. For more
help related to any gadget just write below in comment. I am here to help all
new earners and bloggers here.
good i try immediately!
ReplyDelete