how to add Related post for blogger using slider owl carousel

in your blogger template search of <div class="post-footer-line post-footer-line-1">, and put in this code bellow , if your blog ltr direction remove rtl:true, option:

       <!--related post-->
      
            <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>

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

</style>

      

  
  
  <b:if cond='data:blog.pageType == "item"'>
    <script style='display:none' type='text/javascript'>
   //<![CDATA[
  function related_post(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.category[i].term;
      if (json.feed.entry[i].media$thumbnail != null){
       
       var thumbnail= json.feed.entry[i].media$thumbnail.url.replace(/\/s72\-c\//,'/s300/');
        var item = '<img src='+ thumbnail +' /><a class="title-recpost" href=' + postUrl + '>' + postTitle + '</a>';
            }
      else{
         var item = '<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>';
      }
      var doc=document.createElement("div");
      doc.className="item";
      doc.innerHTML=item;
      document.getElementsByClassName('owl-carousel related_post')[0].appendChild(doc)
      
    }
  }
   //]]>
</script>
    <div class='owl-carousel related_post'/>
    
  <b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast != "true"'/>
    <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_post&max-results=6"' type='text/javascript'></script></b:loop>
  
  <div style='clear:both'/><!-- remove --></b:if>
  


  <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.related_post').owlCarousel({
      rtl:true,
        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>







      
      
      <!--related post-->

how to add Related post for blogger using slider owl carousel

☷✎

how to add Related post for blogger using slider owl carousel

Comments

Post a Comment

Meta keywords generator tool for Blogger

Create direct download link for google drive file online

Custom permalink creator for blogger

GIMP: A Powerful Open-Source Image Editing Software

blogger meta description generator