After creating a custom popular post widget, I decided to turn it into a Bootstrap Carousel. The default Popular Posts is a widget provided by blogger, which allows you to display Popular Posts on your sidebar or footer. This widget shows the most visited posts of a blog, you have four different combinations for displaying this widget i.e.

• Post title with image, date and thumbnail.
• Post list with different background colors.
• Optionally, you can display post summary and comment numbers.

Today, we'll transform this into a beautiful Bootstrap Carousel widget. I wrote the code for a Blogger carousel as displayed on the WebMaker's homepage and decided to offer it for free.

The Widget Code

<b:if cond='data:view.isHomepage'>

<b:section class='carousel slide' data-ride='carousel' id='carouselExampleIndicators' name='Featured section'>

<b:widget id='PopularPosts2' locked='false' title='Popular posts' type='PopularPosts' version='2' visible='true'>

<b:widget-settings>

<b:widget-setting name='numItemsToShow'>3</b:widget-setting>

<b:widget-setting name='showThumbnails'>true</b:widget-setting>

<b:widget-setting name='showSnippets'>true</b:widget-setting>

<b:widget-setting name='timeRange'>ALL_TIME</b:widget-setting>

</b:widget-settings>

<b:includable id='main' var='this'>

<ol class='carousel-indicators'>

<li class='active' data-slide-to='0' data-target='#carouselExampleIndicators'/>

<li data-slide-to='1' data-target='#carouselExampleIndicators'/>

<li data-slide-to='2' data-target='#carouselExampleIndicators'/>

</ol>

<div class='carousel-inner'>

<b:loop values='data:posts' var='post'>

<div class='carousel-item'>

<b:with value='data:post.featuredImage.isResizable?resizeImage(data:post.featuredImage, 1600, &quot;1600:640&quot;): data:post.thumbnail' var='image'><img class='img-fluid' expr:alt='data:post.title' expr:src='data:image' layout='responsive' width='100%' height='640'/></b:with>

<div class='carousel-caption d-none d-md-block'>

<h5><a expr:href='data:post.url' expre:title='data:post.title'><data:post.title/></a></h5>

<p><b:eval expr='snippet(data:post.body, {length: 140, links: false})'/></p>

</div>

</div>

</b:loop>

</div>

<a class='carousel-control-prev' data-slide='prev' href='#carouselExampleIndicators' role='button'>

<span aria-hidden='true' class='carousel-control-prev-icon'/>

<span class='sr-only'>Previous</span>

</a>

<a class='carousel-control-next' data-slide='next' href='#carouselExampleIndicators' role='button'>

<span aria-hidden='true' class='carousel-control-next-icon'/>

<span class='sr-only'>Next</span>

</a>

</b:includable>

</b:widget>

</b:section>

</b:if>

The script

You need to add this script most probably above the </body> tag. This script adds the "active" class to your first carousel item. This is important.

<script type='text/javascript'>
 
$(document).ready(function(){
  
$('.carousel-inner .carousel-item:first').addClass('active');  });
   
</script>

Copy-paste the code above where you want the carousel to show up in your theme.

Make sure you have enabled the Bootstrap CSS file and load the Bootstrap JS file on your theme correctly.

Lastly, remember to change the number of carousel indicators depending on the number of post/slides you setup for your carousel.

That's it!