Skip to main content

How to Create Blogger Post Carousel By Label Using Bootstrap

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.

 How to Create Blogger Post Carousel By Label Using Bootstrap

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&amp;alt=json-in-script&amp;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.

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