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.
3. and paste the following Code Before </head>.
<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.
<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.
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.
After a long we are back again with a beautiful subscription box, If you aren’t building a email subscription widget, you’re missing significant opportunities to capture leads, build community, and create a sustainable way to communicate with those who are interested in what you have to say (and/or sell). Your subscriber is like diamond and it’s a resource you must develop, nurture and grow. It doesn’t matter what type of business or nonprofit work you are in or how big or small you are. You need to build your email subscription. But simply putting a newsletter sign-up form on your site isn’t the most effective thing you can do. It’s also about how you place it on your site, what tactics you use to drive subscribers and it’s a LOT about content… what you share and how you communicate with your email subscription list so that you provide them value. So today we sharing with you a subscription widget with elegant design we have used image for background and also use HTML5 required attribute and some eye caching CSS3 effects we hope you may like it.
