How to add recent posts for blogger using Owl carousel library [ source code ]

In this example we learn how to create slideshow for recent posts in blogger, we use carousel library to do this, it's best library to make amazing slider


  
     <link href='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css' rel='stylesheet' type='text/css'>
 <link href='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css' rel='stylesheet' type='text/css'>
<style>

  .owl-carousel .owl-item img {
    display: block;
    width: 100%;
    height: 40%;
}
  .title-recpost{display:none}
.item:hover .title-recpost{
    display: flex;
position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
   justify-content: center;
    align-items: center;
    color:white;
    transition: 0.5s;
   background: #0000008c;
    text-decoration:none;text-align: center;
}
  
.term{position:absolute; left: 4; border-radius: 3px; background:red; color:white; padding: 0 8px;}

</style>


      <div class='owl-carousel recent-post'></div>
<script style='display:none' type='text/javascript'>
   //<![CDATA[
  function mycallback(json) {
    for (var i = 0; i < json.feed.entry.length; i++) {
      for (var j = 0; j < json.feed.entry[i].link.length; j++) {
        if (json.feed.entry[i].link[j].rel == 'alternate') {
          var postUrl = json.feed.entry[i].link[j].href;
         
          break;}}
      var postTitle = json.feed.entry[i].title.$t;
      var term= json.feed.entry[i].category[0].term;
      if (json.feed.entry[i].media$thumbnail != null){
       
       var thumbnail= json.feed.entry[i].media$thumbnail.url.replace(/\/s72\-c\//,'/s300/');
        var item = '<div class="item"><p class="term">'+term+'</p><img src='+ thumbnail +' /><a class="title-recpost" href=' + postUrl + '>' + postTitle + '</a></div>';
            }
      else{
         var item = '<div class="item"><p class="term">'+term+'</p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSfffxqDrtATTSoqYBcQWW6Z0RJP1IMY7weebNype2rL16nk918VRuN8scyunDBIwW9zSe_62tTjjSYAbE_hDHTcGTl2RYItRUEkf-on8afHE_rlmsAwgYOAFjQe6Ecz8KyowC4UYjB-DR/s0/logo+manajmnt.png" /><a class="title-recpost" href=' + postUrl + '>' + postTitle + '</a></div>';
      }
      var doc=document.createElement("div");
      doc.className="item";
      doc.innerHTML=item;
      document.getElementsByClassName('recent-post')[0].appendChild(doc)
      
    }
  }
   //]]>
</script>
 <script id='rcp' src='https://sports-themexpose.blogspot.com/feeds/posts/summary?max-results=5&alt=json-in-script&callback=mycallback'></script>

    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js'></script>
    <script type='text/javascript'>
  (function ($) {
    'use strict';
    $('.owl-carousel').owlCarousel({
        loop:true,
        margin:10,
        nav:false,
        dots:false,
      autoplay:true,
    autoplayTimeout:1000,
      autoplayHoverPause:true,
        responsive:{
            0:{
                items:1
            },
            600:{
                items:3
            },
            1000:{
                items:5
            }
        }
    })

  })(jQuery); 
  </script>

☷✎

How to add recent posts for blogger using Owl carousel library [ source code ]

Comments

Post a Comment

Meta keywords generator tool for Blogger

Create direct download link for google drive file online

Custom permalink creator for blogger

building text editor template using html css js

Open text file and Save as html file in your local device using File System Access API

How to add recent posts for blogger using Owl carousel library [ source code ]

Related

Comments

Post a Comment