Skip to main content

Blogger Posts By Label Bootstrap Carousel

Do you want to add Bootstrap carousel that shows posts from particular label (category) in your Blogger blog?

Blogger Posts By Label Bootstrap Carousel

You have come to the right place.

Bootstrap Carousel is a slideshow component for cycling through elements—images or slides of text—like a carousel.

SEE LIVE DEMO

There are many benefits of this widget, if you want to display different label posts on homepage then it will attract your visitors attention and it will also attract some curiosity towards your blog's design also.

Here are the steps to be followed:

First, make sure you have intsall the Bootstrap files on your theme. Click here to learn more about it.

The Script

Place this code where you want the carousel to show up.


<section id='hero'>
<div class='hero-container'>
<div class='carousel slide carousel-fade' data-bs-interval='5000' data-bs-ride='carousel' id='heroCarousel'>
<ol class='carousel-indicators' id='hero-carousel-indicators'/>

<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('<div class="carousel-background"><img src="'+thumburl+'"/></div>');document.write('<div class="carousel-container"><div class="carousel-content"><h2 class="animate__animated animate__fadeInDown">'+posttitle+'</h2><p class="animate__animated animate__fadeInUp">');
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 href="'+posturl+'" class="btn-get-started animate__animated animate__fadeInUp scrollto">More »</a>';flag=1;;}
document.write(towrite);document.write('</div></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 = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 140;</script>
<script src='/feeds/posts/default/-/Featured?published&amp;alt=json-in-script&amp;callback=labelthumbs' type='text/javascript'/>

<a class='carousel-control-prev' data-bs-slide='prev' href='#heroCarousel' role='button'>
<span aria-hidden='true' class='carousel-control-prev-icon fa fa-caret-left'/>
<span class='sr-only'>Previous</span>
</a>

<a class='carousel-control-next' data-bs-slide='next' href='#heroCarousel' role='button'>
<span aria-hidden='true' class='carousel-control-next-icon fa fa-caret-right'/>
<span class='sr-only'>Next</span>
</a>


</div>
</div>
</section>

Replace The Following With Your Details:

var numposts = 3 - Replace 3 with the number of post you want to show.

Note: The default Label name for the carousel is "Featured". You can change it to your own Lable name.

The CSS

Place this CSs code on your theme.


#hero{width:100%;height:100vh;background-color:rgba(21,27,26,.7);overflow:hidden;padding:0}
#hero .carousel-item{width:100%;height:100vh;background-size:cover;background-position:center;background-repeat:no-repeat}
#hero .carousel-item::before{content:'';background-color:rgba(21,27,26,.3);position:absolute;height:100vh;width:100%;top:0;right:0;left:0;bottom:0}
#hero .carousel-container{display:flex;justify-content:center;align-items:center;position:absolute;bottom:0;top:0;left:0;right:0}
#hero .carousel-content{text-align:center;}
#hero h2{color:#fff;margin-bottom:30px;font-size:48px;font-weight:700}
#hero p{width:80%;-webkit-animation-delay:.4s;animation-delay:.4s;margin:0 auto 30px auto;color:#fff}
#hero .carousel-inner .carousel-item{transition-property:opacity;background-position:center top}
#hero .carousel-inner .carousel-item,
#hero .carousel-inner .active.carousel-item-start,
#hero .carousel-inner .active.carousel-item-end{opacity:0;}
#hero .carousel-inner .active,
#hero .carousel-inner .carousel-item-next.carousel-item-start,
#hero .carousel-inner .carousel-item-prev.carousel-item-end{opacity:1;transition:0.5s;}
#hero .carousel-inner .carousel-item-next,
#hero .carousel-inner .carousel-item-prev,
#hero .carousel-inner .active.carousel-item-start,
#hero .carousel-inner .active.carousel-item-end{left:0;transform: translate3d(0, 0, 0);}
#hero .carousel-control-prev, #hero .carousel-control-next {width:10%;}
#hero .carousel-control-next-icon,#hero .carousel-control-prev-icon{background:0 0;font-size:48px;line-height:1;width:auto;height:auto}
#hero .carousel-indicators li{cursor:pointer;opacity:1}
#hero .carousel-indicators .active{background-color:#1bbca3}
#hero .btn-get-started{font-family:Roboto,sans-serif;font-weight:500;font-size:14px;letter-spacing:1px;display:inline-block;padding:12px 32px;border-radius:50px;transition:.5s;line-height:1;margin:10px;color:#fff;-webkit-animation-delay:.8s;animation-delay:.8s;border:2px solid #ef6603;background:#ef6603}
#hero .btn-get-started:hover{background:#fc8129;border:2px solid #fc8129;color:#fff;text-decoration:none}
@media (max-width:768px){#hero h2{font-size:28px}}
@media (min-width:1024px){#hero p{width:60%}#hero .carousel-control-next,#hero .carousel-control-prev{width:5%}}

The 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.

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