Do you want to add Bootstrap carousel that shows posts from particular label (category) in your Blogger blog?
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.
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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9BcT75SEjLdh0eam6jCZEGNDxT1sufihVWZb_Aa_QVe9b8X1OaAI5HAcVAfcduGFAhdYJ3TGaVtnu_HGpngsPzDh-dEOOER7AlRGIN0P5ehW7AQBFYUiSt9RH1g9iC2JtkrlM7BqU5RM/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&alt=json-in-script&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!
Comments
Post a Comment