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>

© Manajmnt code

Share to :

☷✎