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

© Manajmnt code

Share to :

☷✎