Automatic updating jQuery Content Slider for Blogger

Let me introduce you to a very new technique to show slideshow of your recent posts in Blogger blogs. With this tweak applied, you no longer need to edit your widget HTML codes more than once. This jQuery content slider uses my small jQuery content slider technique which I posted in my previous post.

First look at the demo page to know what I am actually talking about.

Blogger Blogs encloses all of its content inside division with class name blog-posts, further each posts are wrapped inside a division with class name date-outer according to the date. And again inside date-outer block, each posts will be blocked in post-outer.

In this tutorial I am assuming that you don't have multiple posts in single day. First we'll have to tweak the CSS code which will bring all of the posts one above another like in photo slide.

Note: If you don't know the codding thing and just want to get it done then click here.
To do so, we'll use following code:

  .blog-posts {
  height:400px;
  position:relative;
  overflow:hidden;
  }
  
  .date-outer {
  position:absolute;
  top:0;
  left:0;
  background:#fff;
  }
  

We have abosolutely positioned all the date-outer blocks relative to .blog-posts. In simple words, We have placed all the content blocks one above another. You can change the height of the main box to your required size.

Now anything left is to add sliding effect to it so that the contents keeps sliding one over another.

I'll be tweaking the codes of small jQuery content slider technique so that it properly fits to Blogger's Posts.

  <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
  <script type='text/javascript'> 
  

    var x = 2;
    function slideSwitch() {
    x += 1;
    if (x &gt; 4) {
    x = 1;
    }
    $(&quot;.blog-posts div.date-outer:nth-child(n)&quot;).animate({opacity:0}).css(&#39;z-index&#39; , &#39;-1000&#39;);
    $(&quot;.blog-posts div.date-outer:nth-child(&quot; + (x) + &quot;)&quot;).animate({opacity:1}).css(&#39;z-index&#39; , &#39;1&#39;);
   }
   
    $(document).ready(function() {
    setInterval( &quot;slideSwitch()&quot;,5000);
    });
  </script>
  

Copy the above code just below </title> tag.

This will do the job. But we are not done yet. We'll have to tweak it again so that it will appear only in home page.


Easy Steps
Search for </title>, and paste the following code below </title>.

  <b:if cond='data:blog.url== data:blog.homepageUrl'>
  <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
  <script type='text/javascript'> 
  
    var x = 2;
    function slideSwitch() {
    x += 1;
    if (x &gt; 4) {
    x = 1;
    }
    $(&quot;.blog-posts div.date-outer:nth-child(n)&quot;).animate({opacity:0}).css(&#39;z-index&#39; , &#39;-1000&#39;);
    $(&quot;.blog-posts div.date-outer:nth-child(&quot; + (x) + &quot;)&quot;).animate({opacity:1}).css(&#39;z-index&#39; , &#39;1&#39;);
  
    }
  
    $(document).ready(function() {
    setInterval( &quot;slideSwitch()&quot;, 5000 );
    });
  </script>
  <style type='text/css'>
    .blog-posts {
    height:450px;
    position:relative;
    overflow:hidden;
    }
  
    .date-outer {
    position:absolute;
    top:0;
    left:0;
    background:#fff;
    }</style>
  </b:if>
  

Simply done, you'll have automatically updated content slider at your home page and normal page inside your posts.

If you liked this article Bookmark and Subscribe us.