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

Robots txt file generator, blogger seo tools

GIMP: A Powerful Open-Source Image Editing Software

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

Related

Comments

Post a Comment