This nice trick will
automatically create post summaries with thumbnails.You don't need to add any
extra code in every blogger post that you make. if you display full posts on
your home page it will severely slow down the load time, Also With the jump break
in place visitors that land on your home page will see a selection of your
posts without the need to scroll. Using automatic read more on your blog will
make your blog load faster by showing few post instead of the full post on the
homepage. This Tricks will summarize content and show only summary in Home
page, Archives Page and Label Page using Automatic Read More simple script in
your template.
How Apply
Auto Read More
Always Remember Before Editing Your Template Make a Template
Backup (how to make a template
backup)
1. Login to your Blogger account >> Go to Dashboard
>> Template >> Edit HTML Check the
Expand Widget Templates check box on top right of the HTML Window.
2. Press CTRL+F In the code window find the </head>
line.
<script type='text/javascript'>var thumbnail_mode =
"no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</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(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>
Note:
summary_ noimg= 430; >> The length of the summery if the post does not have a thumbnail.
summary_img = 340; >>The length of the summery if there is an image in the post that will be converted into a thumbnail.
null_thumb_height = 120; >> The height in pixels of the thumbnail.
null_thumb_width = 120; >>The width in pixels of the thumbnail.
4. Find The Following code <data:post.body/> and replace with below Code.
summary_ noimg= 430; >> The length of the summery if the post does not have a thumbnail.
summary_img = 340; >>The length of the summery if there is an image in the post that will be converted into a thumbnail.
null_thumb_height = 120; >> The height in pixels of the thumbnail.
null_thumb_width = 120; >>The width in pixels of the thumbnail.
4. Find The Following code <data:post.body/> and replace with 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> <span class='jump-link' style='font-weight:bold;padding:5px;float:right;text-align:right;'><a expr:href='data:post.url'>Continue Reading...</a></span><div style='clear: both;'/> </b:if> </b:if>
You can change the words “Read more” with your own Words.
and now add some css codes for Read More button I have three style for Read More buttons.
and now add some css codes for Read More button I have three style for Read More buttons.
1 Blue Color Button
Add Below code before/above ></b:skin>
.jump-link { display: block; font-size: 12px; font-weight: bold; text-align:right;} .jump-link a { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff; padding: 6px 15px; background: -moz-linear-gradient( top, #42aaff 0%, #003366); background: -webkit-gradient( linear, left top, left bottom, from(#42aaff), to(#003366)); -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; border: 1px solid #003366; -moz-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 1px rgba(255,255,255,0.5); -webkit-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 1px rgba(255,255,255,0.5); box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 1px rgba(255,255,255,0.5); text-shadow: 0px -1px 0px rgba(000,000,000,0.7), 0px 1px 0px rgba(255,255,255,0.3);}
2
Gray Color Button
.jump-link {
display: block;
font-size:
12px;
font-weight:
bold;
text-align:right;
}
.jump-link a {
font-family:
Arial, Helvetica, sans-serif;
font-size:
12px;
color:
#000000;
padding:
6px 15px;
background:
-moz-linear-gradient(
top,
#ffffff
0%,
#b5b5b5);
background:
-webkit-gradient(
linear,
left top, left bottom,
from(#ffffff),
to(#b5b5b5));
-moz-border-radius:
10px;
-webkit-border-radius:
10px;
border-radius:
10px;
border:
3px solid #0088ff;
-moz-box-shadow:
0px
1px 3px rgba(000,000,000,0.5),
inset
0px 0px 3px rgba(255,255,255,1);
-webkit-box-shadow:
0px
1px 3px rgba(000,000,000,0.5),
inset
0px 0px 3px rgba(255,255,255,1);
box-shadow:
0px
1px 3px rgba(000,000,000,0.5),
inset
0px 0px 3px rgba(255,255,255,1);
text-shadow:
0px
1px 2px rgba(000,000,000,0.5),
0px
1px 2px rgba(252,254,255,0.9);
}
3 Black & Gray Button
.jump-link {display: block; font-size: 12px; font-weight: bold; text-align:right;} .jump-link a { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff; padding: 6px 15px; background: -moz-linear-gradient( top, #eaeaea 0%, #000000); background: -webkit-gradient( linear, left top, left bottom, from(#eaeaea), to(#000000)); -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border: 1px solid #a2a89f; -moz-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 2px rgba(255,255,255,1); -webkit-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 2px rgba(255,255,255,1); box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 2px rgba(255,255,255,1); text-shadow: 0px -1px 0px rgba(000,000,000,0.4), 0px 1px 0px rgba(255,255,255,0.3);}
Note:- If you want to add just read more text don’t add
button CSS code in b:skin> section and click on save you're Done!
Need Help!….
I just hope this little object may help in adding a new spice to your blog's appearance. If you have any problems installing the widget, just post me a query. If you encountered any problem during installation of the codes then feel free to let me know. Thanks for reading our post. Stay Connected for daily update.
Need Help!….
I just hope this little object may help in adding a new spice to your blog's appearance. If you have any problems installing the widget, just post me a query. If you encountered any problem during installation of the codes then feel free to let me know. Thanks for reading our post. Stay Connected for daily update.
No comments:
Post a Comment