Thursday, October 22, 2015

How To Add Loading Effect In Read-More Post Images?
Loading Effect On 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.

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:
  1. Go to Blogger > Template > Edit HTML
  2. Now, find this line in your template:
  3. function removeHtmlTag
  4. You will probably get this like chunk of JavaScript:
  5. <script type='text/javascript'>
      var thumbnail_mode = &quot;yes&quot;; //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>
  6. 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:
  7.       <!-- Auto read more script Start -->
          <script type='text/javascript'>
            var thumbnail_mode = &quot;yes&quot;; //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'>
            //<![CDATA[
            /*! Lazy Load 1.9.3 - MIT license - Copyright 2010-2013 Mika Tuupola */
            !function(a,b,c,d){var e=a(b);a.fn.lazyload=function(f){function g(){var b=0;i.each(function(){var c=a(this);if(!j.skip_invisible||c.is(":visible"))if(a.abovethetop(this,j)||a.leftofbegin(this,j));else if(a.belowthefold(this,j)||a.rightoffold(this,j)){if(++b>j.failure_limit)return!1}else c.trigger("appear"),b=0})}var h,i=this,j={threshold:0,failure_limit:0,event:"scroll",effect:"show",container:b,data_attribute:"original",skip_invisible:!0,appear:null,load:null,placeholder:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC"};return f&&(d!==f.failurelimit&&(f.failure_limit=f.failurelimit,delete f.failurelimit),d!==f.effectspeed&&(f.effect_speed=f.effectspeed,delete f.effectspeed),a.extend(j,f)),h=j.container===d||j.container===b?e:a(j.container),0===j.event.indexOf("scroll")&&h.bind(j.event,function(){return g()}),this.each(function(){var b=this,c=a(b);b.loaded=!1,(c.attr("src")===d||c.attr("src")===!1)&&c.is("img")&&c.attr("src",j.placeholder),c.one("appear",function(){if(!this.loaded){if(j.appear){var d=i.length;j.appear.call(b,d,j)}a("<img />").bind("load",function(){var d=c.attr("data-"+j.data_attribute);c.hide(),c.is("img")?c.attr("src",d):c.css("background-image","url('"+d+"')"),c[j.effect](j.effect_speed),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() {
              $(&quot;img.lazy&quot;).lazyload({
                effect : &quot;fadeIn&quot;
              });
            });
          </script>
          <!-- Auto read more script End -->
  8. Save your template, and you're done!

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:

smooth-loader

2. Gears Loader:

smooth-loader

3. Facebook Loader:

smooth-loader

4. Green, Simple Loader:

smooth-loader

5. Alexa Loader:

smooth-loader

6. Blue Loader:

smooth-loader

7. Windows 10 Loader:

smooth-loader

8. Spinner:

smooth-loader

9. Google+ Loader:

smooth-loader

10. Blue, Unique, Twitter Spinner:

smooth-loader

11. Twitter (rosetta) Loader (blue):

smooth-loader

12. Twitter (rosetta) Loader (grey):

smooth-loader
Submit Url

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