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--> © 2025 Manajmnt code Share to : ☷✎ Related How-to run HTML, CSS, JS code in iframe from textarea value In this code we will be share with you how to create simple editor with preview for HTML CSS and Jav… Read MoreHow-to make input form and textarea like bootstrap stylein this example we learn how to make input form and textarea like bootstrap style with CSS only <… Read MoreMany ways to Creating text box in htmlThere are many ways to creating text box in HTML, here are some tricks for making the text appear in… Read More Comments AnonymousJuly 27, 2021 at 9:35 AMWell done! Really useful information. Visit Steps to Create a Carousel Post on Facebook in 2021ReplyDeleteRepliesReplyAdd commentLoad more... Post a Comment message
Well done! Really useful information. Visit Steps to Create a Carousel Post on Facebook in 2021
ReplyDelete