How To Add Loading Effect In Read-More Post Images?
Read more script is now standard these days. Almost every blog on the world is using it except some jump-break lovers. Well, it is free and is compatible with all major browsers, so there is no problem in using it. These days, developers are trying different things with read more script. Some are attempting to make it informational for their visitors, and some are trying to make it materialized and some are trying to make it animated. They are making it informational by adding post info about comments, its labels and of course, read more link that is its primary function.
We have, actually, given our read more script posts a unique look by adding materialized design, unique read more responsive button, the background around images, loading effect and animation. Loading effect in the is the unique things that we have. If, your blog is about designing or provide inspiration with CSS, then it is important that you have a different design of your blog. Until today, we have never seen a blog who have loading effect in read more script and in this situation, if you add this effect in your blog, then it would attract your visitors with a high intensity.
That's why, today we have brought you a tutorial that is easy-to-understand and easy-to-implement too! In this tutorial, we will tell you, how to add a pleasant looking, loading effect in your blogger blog.
We have, actually, given our read more script posts a unique look by adding materialized design, unique read more responsive button, the background around images, loading effect and animation. Loading effect in the is the unique things that we have. If, your blog is about designing or provide inspiration with CSS, then it is important that you have a different design of your blog. Until today, we have never seen a blog who have loading effect in read more script and in this situation, if you add this effect in your blog, then it would attract your visitors with a high intensity.
That's why, today we have brought you a tutorial that is easy-to-understand and easy-to-implement too! In this tutorial, we will tell you, how to add a pleasant looking, loading effect in your blogger blog.
Is It SEO Friendly?
Yeah of course! Truly, we will do it by using Lazy load script. Using this script, not only your blog will become more SEO optimized but your blog's page loading speed will also get decreased, and you will see an effect on your points on Google Pagespeed!
Actually, in regular lazy loading scripts that are available here-n-there, there is no option for adding any image until the image loads correctly. But the script that we are going to share with you today has that option. Using it, you can put different-different loading images in your read more posts' pictures and that loading images will get disappeared after the thumbnail of post get loaded correctly!
Will It Increase My Blog's Loading Speed?
Of course, not! It will even decrease your blog's loading speed and give a pleasant impression of your blog to the visitor because he will not see any image that is half loaded or still loading slowly. He will only see the images that has been loaded and are ready to be seen and rest images will appear as "loading" because of the script that we are going to share.
Nice. How To Implement It?
The steps for applying this effect in your blog are very clear. Here are the steps, please and waiting to be followed:
- Go to Blogger > Template > Edit HTML
- Now, find this line in your template:
- You will probably get this like chunk of JavaScript:
- If you have found it, replace it with the code given below, and if you have not found it, it means that you have not installed read more plugin in your blog. In this case, add the below code above </head> in your blogger blog:
- Save your template, and you're done!
function removeHtmlTag
<script type='text/javascript'>
var thumbnail_mode = "yes"; //yes - with thumbnail, no - no thumbnail
summary_noimg = 545; //summary length when no image
summary_img = 455; //summary length when with image
img_thumb_height = 200;
img_thumb_width = 200;
</script>
<script type='text/javascript'>
//<![CDATA[
// Auto Read More With Thumbnail and Summary Plugin
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><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 Start -->
<script type='text/javascript'>
var thumbnail_mode = "yes"; //yes - with thumbnail, no - no thumbnail
summary_noimg = 545; //summary length when no image
summary_img = 455; //summary length when with image
img_thumb_height = 200;
img_thumb_width = 200;
</script>
<script type='text/javascript'>
//<![CDATA[
// Auto Read More With Thumbnail and Summary Plugin
// Script By Blogger Guider
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 class="lazy1 wow zoomIn readmore-style"><img class="lazy" itemprop="image" src="http://s1.postimg.org/rumicdggv/text_min.png" data-original="'+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>
<script type='text/javascript'>
//<,b.loaded=!0;var e=a.grep(i,function(a){return!a.loaded});if(i=a(e),j.load){var f=i.length;j.load.call(b,f,j)}}).attr("src",c.attr("data-"+j.data_attribute))}}),0!==j.event.indexOf("scroll")&&c.bind(j.event,function(){b.loaded||c.trigger("appear")})}),e.bind("resize",function(){g()}),/(?:iphone|ipod|ipad).*os 5/gi.test(navigator.appVersion)&&e.bind("pageshow",function(b){b.originalEvent&&b.originalEvent.persisted&&i.each(function(){a(this).trigger("appear")})}),a(c).ready(function(){g()}),this},a.belowthefold=function(c,f){var g;return g=f.container===d||f.container===b?(b.innerHeight?b.innerHeight:e.height())+e.scrollTop():a(f.container).offset().top+a(f.container).height(),g<=a(c).offset().top-f.threshold},a.rightoffold=function(c,f){var g;return g=f.container===d||f.container===b?e.width()+e.scrollLeft():a(f.container).offset().left+a(f.container).width(),g<=a(c).offset().left-f.threshold},a.abovethetop=function(c,f){var g;return g=f.container===d||f.container===b?e.scrollTop():a(f.container).offset().top,g>=a(c).offset().top+f.threshold+a(c).height()},a.leftofbegin=function(c,f){var g;return g=f.container===d||f.container===b?e.scrollLeft():a(f.container).offset().left,g>=a(c).offset().left+f.threshold+a(c).width()},a.inviewport=function(b,c){return!(a.rightoffold(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.abovethetop(b,c))},a.extend(a.expr[":"],{"below-the-fold":function(b){return a.belowthefold(b,{threshold:0})},"above-the-top":function(b){return!a.belowthefold(b,{threshold:0})},"right-of-screen":function(b){return a.rightoffold(b,{threshold:0})},"left-of-screen":function(b){return!a.rightoffold(b,{threshold:0})},"in-viewport":function(b){return a.inviewport(b,{threshold:0})},"above-the-fold":function(b){return!a.belowthefold(b,{threshold:0})},"right-of-fold":function(b){return a.rightoffold(b,{threshold:0})},"left-of-fold":function(b){return!a.rightoffold(b,{threshold:0})}})}(jQuery,window,document);
//]]>
</script>
<script>
$(function() {
$("img.lazy").lazyload({
effect : "fadeIn"
});
});
</script>
<!-- Auto read more script End -->
Customization:
The script needs some customizations that you should be done on it to make it pleasant for you. The only customization that you should do is, putting your loading image!
Can you see dark-blue backgrounded colored text in the above code? It is the URL of the default loading image. If you are interested in changing it, you can, surely!
Here, I am going to list some best loading images. Choose one of them and start showing it off!
1- Blogger's Loader:
2. Gears Loader:
3. Facebook Loader:
4. Green, Simple Loader:
5. Alexa Loader:
6. Blue Loader:
7. Windows 10 Loader:
8. Spinner:
9. Google+ Loader:
10. Blue, Unique, Twitter Spinner:
11. Twitter (rosetta) Loader (blue):
12. Twitter (rosetta) Loader (grey):
Final Words
I hope you have liked this Lazy Load script that has SEO optimized your blog and given it an awesome look. Do you know? I was collecting those loaders from different sites since many days, and that's how I shared the best ones with you. At last, don't forget to share this post on Twitter with a mention of @BloggerExplorer or @BloggerGuider. We will surely retweet your tweet
0 Response to "How To Add Loading Effect In Read-More Post Images?"
Posting Komentar