Before some days I had published a post regarding blogger jump break feature. But many people had problems so I thought to provide my visitors with a more flexible auto read more link.
But first of all I would
like to distinguish it from blogger page break. As we know that blogger
jump break requires to be included in each post but auto read more link
doesn't requires to place any code while editing your post.
And the most important
feature which it has is that it also displays thumbnail which the
default jump break doesn't. You just have to add a one time code in your
template and you are done.
Just follow the steps below;
- Go to dashboard>Template>Edit Html.
- Click on Expand Widget's Template.
- Then search for </head> tag in your template.
- After finding this tag, you should copy the below code and paste it just after </head>;
<!-- Auto read more script Start by modernhackerss.blogspot.com -->
<script type=
'text/javascript'
>
var
thumbnail_mode =
"yes"
;
//yes -with thumbnail, no -no thumbnail
summary_noimg = 430;
//summary length when no image
summary_img = 340;
//summary length when with image
img_thumb_height = 200;
img_thumb_width = 200;
</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){
var
div = document.getElementById(pID);
var
imgtag =
""
;
var
img = div.getElementsByTagName(
"img"
);
var
summ = summary_noimg;
if
(thumbnail_mode ==
"yes"
) {
if
(img.length>=1) {
imgtag =
'<span style="float:left; padding:0px 10px 5px 0px;"><img src="'
+img[0].src+
'" width="'
+img_thumb_width+
'px" height="'
+img_thumb_height+
'px"/></span>'
;
summ = summary_img;
}
}
var
summary = imgtag +
'<div>'
+ removeHtmlTag(div.innerHTML,summ) +
'</div>'
;
div.innerHTML = summary;
}
//]]>
</script>
<!-- Auto read more script End by modernhackerss.blogspot.com-->
- Now search for this piece of code; <data:post.body/>
- After finding <data:post.body/> replace it with the below code;
<b:
if
cond=
'data:blog.pageType == "item"'
>
<data:post.body/>
<b:
else
/>
<b:
if
cond=
'data:blog.pageType == "static_page"'
>
<data:post.body/>
<b:
else
/>
<div expr:id=
'"summary" + data:post.id'
><data:post.body/></div>
<script type=
'text/javascript'
> createSummaryAndThumb("summary<data:post.id/>");
</script>
<a class=
'more'
expr:href=
'data:post.url'
>Read more ...</a>
</b:
if
>
</b:
if
>
- Finally save your template and you are done.
Some Tweaks;
Here are some tweaks that you can perform in the code;
- You may find <data:post.body/> twice or thrice. If it is the case than i strongly recommend you to choose the first one.
- You can change the value of "img_thumb_height" and "img_thumb_width" to change the height and width of the thumbnail in pixels respectively.
- You can edit the value of "summary_noimg" and "summary_img" to change the number of characters to appear when there is no image and when there is image respectively.
- Change "Read more ..." with the text to appear as read more link. For eg:see more>>,get more>>,show more..,etc.
For any help post your comments here....
0 comments:
Post a Comment