How To Create A Blogger Popular Posts Carousel

Stylish Popular Posts Carousel for Blogger

After reading a lot of questions regarding resizing the Popular Posts thumbnail image size, I decided to write this tutorial. But that wasn't enough. The reason for the many questions is that publishers using Blogger are searching for a better, more attractive way to display their popular posts.

I wrote the code for a blogger carousel as displayed on this blog's homepage and decided to offer it for free for download.

Customizable Date-range & Number of Sildes

The Date-range for the Popular Posts Carousel can be set to show All time posts, posts from the Last 30 days or posts from the Last 7 days.

The number of slides can be also modified to show anywhere between one and ten slides requiring only a minor code modification to adjust the number of carousel indicators.

Minimalist Carousel Controls

The Blogger Carousel can be controlled by using the left / right minimalist arrows or the minimalist carousel indicators.
Autoplay with 5 second interval and pause on hover.

Carousel Caption

The Carousel Caption contains Post Title and Post Excerpt presented on a semi-transparent black background.

Twitter Bootstrap 3

The standard Twitter Bootstrap 3 carousel element was used along with the standard bootstrap styling. You can of course use any other jQuery carousel and replace the bootstrap markup in the wodget code.

---

How to Implement the Carousel in your Blog

To easily follow this tutorial add the Twitter Bootstrap CSS to your blog.

Add the this line of code before the closing of your head tag:

<link href='//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css' rel='stylesheet'/>

Now ad this code before the closing of your body tag:

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/>
<script src='//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js'/>
<script type='text/javascript'>
 $(&#39;#PopularPosts2&#39;).addClass(&#39;carousel slide thumbnail&#39;).removeClass(&#39;PopularPosts widget section&#39;);
 $(&#39;#homecarousel&#39;).removeClass(&#39;section&#39;);
 $(function(){$(&#39;.item:first-child&#39;).addClass(&#39;active&#39;);});
 $(document).ready(function() {$(&#39;.carousel&#39;).carousel({interval: 5000})});
 $(document).ready(function() {$(&#39;.carouselimg&#39;).attr(&#39;src&#39;, function(i, src) {return src.replace( &#39;s72-c&#39;, &#39;s1600&#39; );});});
</script>

This bit of code is for adding the Twitter Bootstrap JavaScript and initializing the carousel.


For the last part add the Carousel code to your Blogger template where you would like the carousel to appear:

<b:section class='container' id='homecarousel' maxwidgets='1' showaddelement='no'>
  <b:widget id='PopularPosts2' locked='false' title='Popular Posts' type='PopularPosts'>
    <b:includable id='main'>
 <ol class='carousel-indicators'>
     <li class='active' data-slide-to='0' data-target='#homecarousel'/>
     <li data-slide-to='1' data-target='#homecarousel'/>
     <li data-slide-to='2' data-target='#homecarousel'/>
     <li data-slide-to='3' data-target='#homecarousel'/>
     <li data-slide-to='4' data-target='#homecarousel'/>
   </ol>
 <div class='carousel-inner'>
      <b:loop values='data:posts' var='post'>
          <div class='item'>
              <b:if cond='data:post.thumbnail'>
              <a expr:href='data:post.href'>
                <img alt='' border='0' class='carouselimg' expr:src='data:post.thumbnail'/>
              </a>
              </b:if>
              <div class='carousel-caption'>
                <h2 class='carouseltitle'><a expr:href='data:post.href'><data:post.title/></a></h2>
               <p><data:post.snippet/></p>
            </div>
         </div>
      </b:loop>
    </div>
    <b:include name='quickedit'/>
 <a class='left carousel-control' data-slide='prev' href='#PopularPosts2'>
     <span class='icon-prev'/>
   </a>
   <a class='right carousel-control' data-slide='next' href='#PopularPosts2'>
     <span class='icon-next'/>
   </a>
 </b:includable>
  </b:widget>
</b:section>

Remember to change the number of carousel indicators depending on the number of slides you setup for your carousel. For setting up the number of slides click the Quick Edit button on the carousel, after adding the code above and saving your blog. As you can see in this case there are 5 indicators so when configuring the carousel either set the number of posts to 5.

Leave your questions and suggestions in the comments section below.