Skip to main content

Blogger Popular Posts Bootstrap Carousel

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!

Turn Your Website
into a Lead-Generating Machine

Webcopy, Designs and SEO are King, Queen, and Knight respectively. And how well you use them together creates a user experience that either drives people away or makes them click the "buy" button.

Copywriting

Want to make your offers irresistible? We write conversion-optimized copy for small and medium brands, digital agencies and online stores.

Custom Web Design

Creating a branded website can be the best thing you do for your business. Branding can help you figure out what and how to communicate your company's story.

Skyrocket Your Traffic

For more than 20 years, we've been providing SEO solutions for businesses wanting to expand their online presence, increase leads and grow their revenue.

Contact

Contact Us

About us

Archie Webmaker is a digital branding agency with a magical touch on brand identity, brand strategy, and marketing to drive business success.

Call Us

Email Us

archie@archiewebmaker.com
archiewebmaker@gmail.com

Working Hours

Mon - Fri: 9AM to 5PM
Saturday: 9AM to 1PM