Bootstrap is a popular CSS Framework that can help you build web user interfaces faster and more efficiently. The newest version of Bootstrap 5 alpha has been released not a long time ago effectively removing jQuery as a dependecy and dropping support for IE 10 and 11.
The Bootstrap carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.
And now with this code, you can show Blogger posts by label, and you can easily customize it further to your heart's content.
The Code
Place this code given below inside your template where you want the carousel to show up.
Note: Do not forget to change the default label name "Product" given in this tutorial to your own label name.
<b:if cond='data:view.isHomepage'>
<div class='carousel slide' data-ride='carousel' id='carouselExampleIndicators'>
<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>
<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<div class="carousel-inner">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url.replace('/s72-c/','/s'+1600+'-c/');}catch(error)
{s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}else thumburl='http://3.bp.blogspot.com/-zP87C2q9yog/UVopoHY30SI/AAAAAAAAE5k/AIyPvrpGLn8/s1600/picture_not_available.png';}
var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="June";monthnames[7]="July";monthnames[8]="Aug";monthnames[9]="Sept";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<div class="carousel-item">');if(showpostthumbnails==true)
document.write('<img class="img-fluid slide" src="'+thumburl+'"/>');document.write('<div class="carousel-caption d-md-block"><h1><a class="" href="'+posturl+'">'+posttitle+'</a></h1><p>');
if("content"in entry){var postcontent=entry.content.$t;}
else
if("summary"in entry){var postcontent=entry.summary.$t;}
else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');}
else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf("");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('</p>');}}
var towrite='';var flag=0;document.write('');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}
if(showcommentnum==true)
{if(flag==1){towrite=towrite+' | ';}
if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}
if(displaymore==true)
{if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a class="btn btn-outline-light" href="'+posturl+'" class="url">Read Article »</a>';flag=1;;}
document.write(towrite);document.write('</div></div>');if(displayseparator==true)
if(i!=(numposts-1))
document.write('');}document.write('</div>');}
//]]>
</script>
<script type='text/javascript'>var numposts = 3;var showpostthumbnails = true;var displaymore = true;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 100;</script>
<script src='/feeds/posts/default/-/Product?published&alt=json-in-script&callback=labelthumbs' type='text/javascript'/>
<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>
</div>
</b:if>
The CSS
Add this little piece of style code to your Blogger Theme.
#carouselExampleIndicators .carousel-inner{height:100%;}
#carouselExampleIndicators .carousel-caption {top:10%;bottom:20%;}
#carouselExampleIndicators .carousel-caption h1 a{color:#fff !important;font-weight:900;font-size:100px;}
#carouselExampleIndicators .slide {width:100%;height:100%;overflow:hidden;}
#carouselExampleIndicators .carousel-item {position:relative;}
#carouselExampleIndicators .carousel-item:before {content:"";display:block;position:absolute;top:0;bottom:0;left:0;right:0;background:rgba(0, 0, 0, 0.5);transition:all .2s linear;}
#carouselExampleIndicators .carousel-control-prev-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;}
#carouselExampleIndicators .carousel-control-next-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;}
Congratulations! Now you can use this carousel component for your website to showcase the best blog posts on your homepage. If you appreciate this tutorial and like using Bootstrap CSS to build websites and web interfaces, consider checking out our free premium Blogger theme: Webmaker v5.
