In this article, we'll be building a recent posts slider, as mentioned in the title.
The recent posts slider will reveal post details either when focused or when the user hovers their mouse or cursor over one of the post cards—just like in the example image below..
The implementation is quite simple: just place the following script inside the <head>...</head> section.
<!-- jQuery (required by OwlCarousel) [If already have, skip this] -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- OwlCarousel JS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script src="https://rawcdn.githack.com/Id-Yuu/Js/25007c24d52d6bb87264f3014eeb326fc2d8830a/slider-detail-hover.js"></script>Next, save the stylesheet..
/* Slider Container Style
======================= */
#empty-message.empty-message {display: none;}
#blog-carousel {position: relative;}
#blog-carousel .owl-prev span {position: absolute;top: 41%;left: 0;background: rgb(0 0 0 / 80%);color: #fff;border: none;font-size: 24px;cursor: pointer;z-index: 1;padding: 5px 10px;}
#blog-carousel .owl-next span {position: absolute;top: 41%;right: 0;background: rgb(0 0 0 / 80%);color: #fff;border: none;font-size: 24px;cursor: pointer;z-index: 1;padding: 5px 10px;}Save the JavaScript above right before the closing </body> tag.
<script type="text/javascript">
window.handleFeed = function (e) {
var t, o; const n = document.getElementById("blog-carousel"), s = null !== (o = null === (t = e.feed) || void 0 === t ? void 0 : t.entry) && void 0 !== o ? o : [], l = document.getElementById("empty-message"); if (!n || !l) return console.error("Container or empty message not found"); 0 !== s.length ? (l.style.display = "none", s.forEach((e => { const t = document.createElement("slide-card"); t.data = e, n.appendChild(t) })),
setTimeout((() => { $(n).owlCarousel({ items: 5, margin: 5, autoplay: !0, loop: !0, autoplayHoverPause: !0, nav: !0, dots: !1, responsive: { 0: { items: 2 }, 480: { items: 3 }, 576: { items: 4 }, 768: { items: 4 }, 1e3: { items: 5 } } }) }), 1e3)) : l.style.display = "block"
};
(function () {
const script = document.createElement("script");
// XXXXX = your blog ID
script.src = "https://www.blogger.com/feeds/XXXXXXXXXX/posts/default?alt=json-in-script&callback=handleFeed";
document.body.appendChild(script);
})();</script>And to display it, add an HTML/JavaScript widget in the layout section.
<div class="owl-carousel" id="blog-carousel"></div>
<div id="empty-message" class="empty-message">No blog posts found.</div>Note: For post labels, use the following labels:
<!-- Genre for Label Posts -->
Action, Adult Cast, Adventure, Anthropomorphic, Autobiografi, Avant Garde, CGDCT, Childcare, Comedy, Crossdressing, Delinquents, Demons, Detective, Dokumenter, Drama, Ecchi, Emotional Damage, Erotica, Fantasy, Furry, Gag Humor, Game, Girls Love, Gore, Gourmet, Harem, Hentai, Historical, Horror, Idols (Female), Isekai, Josei, Love Polygon, Hentai, Magic, Magical Sex Shift, Mahou Shoujo, Martial Arts, Mecha, Medical, Military, Music, Mystery, Mythology, Organized Crime, Otaku Culture, Parody, Performing Arts, Post-Apocalyptic, Psychological, Racing, Reincarnation, Religi, Reverse Harem, Romance, Romantic Subtext, Samurai, School, Sci-Fi, Seinen, Shoujo, Shounen, Showbiz, Slice of Life, Space, Sports, Strategy Game, Super Power, Supernatural, Survival, Suspense, Team Sports, Thriller, Time Travel, Urban Fantasy, Vampire, Video Game, Villainess, Workplace,
<!-- Status for Label Posts -->
"Ongoing",
"Completed"
<!-- Type for Label Posts -->
"TV",
"Movie",
"OVA",
"ONA",
"Special"Download Preview Sample.html
- Yuu