MIni Recent Posts With Carousel Sliding Widget
<!--
///////////////////////////////////////////
A Widget Developed By MM Nauman
Author: MM Nauman
Publisher: https://www.allbloggertricks.com
////////////////////////////////////////////
Support
Sliding Feature Used
Slider: Tiny Slider 2
License: MIT
Author: https://github.com/ganlanyuan/tiny-slider
Please Don't Remove this Comments, This will Help the Authors.
-->
<link href='https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.3/tiny-slider.css' rel='stylesheet'/>
<style>
:root{
--success: rgb(40 167 69); /* Light Green Color*/
--light: rgb(248 249 250); /* Whitish Color */
--dark: rgb(52 58 64); /* Dark Gray Color*/
--gray: rgb(108 117 125); /* Normal Gray Color*/
--pink: rgb(232 62 140); /* Pink Color*/
}
.ABT_Recent_Posts{
margin-top: 30px;
}
.ABT_Recent_Posts div h2{
font-size: 16px;
margin-top: 10px;
text-transform: capitalize;
padding: 5px;
min-height: 80px;
}
.ABT_Recent_Posts div h2 a:hover{
text-decoration: none;
color: var(--success);
}
.ABT_Recent_Posts div{
text-align: center;
background-color: var(--light);
}
.ABT_Recent_Posts div a {
color: var(--gray);
}
.ABT_Recent_Posts img{
width: 100%;
max-height: 200px;
min-height: 200px;
height: 100%;
object-fit: cover;
}
.ABT_Recent_Posts div p{
margin: 0
}
.ABT_Recent_Posts div p a{
display: block;
background: var(--pink);
color: var(--light);
padding: 10px;
transition: all .5s;
}
.ABT_Recent_Posts div p a:hover{
background: var(--dark);
color: var(--light);
text-decoration: none;
}
.ABT_Recent_Posts div p{
border-radius: 4px;
}
.tns-controls {
width: fit-content;
margin: 20px auto;
}
.tns-controls button{
margin: 0px 15px;
outline: none;
border: none;
font-size: 20px;
background: unset;
padding: 5px 10px;
border-radius: 4px;
background-color: rgba(0,0,0,.1);
}
.tns-controls button:hover{
background-color: rgba(0,0,0,.2);
}
</style>
<div class='ABT_Recent_Posts'>
<!-- Dynamic Data will be added here-->
</div>
<script>
let TotalPosts = 10; // Number of posts you want to display
function ABT_Fetch_Recent_Posts(JSON) {
const POSTS = JSON.feed.entry;
let PostTitle, PostURL = "";
let JumpLinkText = "Read More";
let RecentPostsContainer = document.querySelector(".ABT_Recent_Posts");
for (let i = 0; i < TotalPosts; i++) {
//Get Title and URL of the Post
POSTS[i].link.forEach((el, i) => {
if (el.rel === "alternate") {
PostTitle = el.title;
PostURL = el.href;
}
})
//Get Post Thumbnail
let thumbnail = POSTS[i].media$thumbnail && POSTS[i].media$thumbnail.url;
if (thumbnail) {
thumbnail = thumbnail.replace("s72-c", "");
} else if (POSTS[i].content.$t.match(/(http)?s?:?(\/\/[^"']*\.(?:png|jpg|jpeg|gif|png|svg))/)) {
thumbnail = POSTS[i].content.$t.match(/(http)?s?:?(\/\/[^"']*\.(?:png|jpg|jpeg|gif|png|svg))/)[0];
} else {
thumbnail = "https://placeholder.pics/svg/300/DEDEDE/555555/Image%20Not%20Loaded";
}
RecentPostsContainer.innerHTML += `<div>
<img src="${thumbnail}" alt="${PostTitle}"/>
<h2>
<a href="${PostURL}">${PostTitle}</a>
</h2>
<p><a href="${PostURL}">${JumpLinkText}</a></p>
</div>`;
}
}
var blogLink = document.location.origin;
var callScript = document.createElement("script");
callScript.src = `${blogLink}/feeds/posts/default?alt=json-in-script&start-index=1&max-results=${TotalPosts}&callback=ABT_Fetch_Recent_Posts`;
let Recent_Posts_Container = document.querySelector('.ABT_Recent_Posts');
document.body.appendChild(callScript);
let SliderOptions = [
"<i class='fas fa-arrow-left'/>",
"<i class='fas fa-arrow-right'/>",
];
window.onload = () => {
tns({
container: ".ABT_Recent_Posts",
items: 1,
mouseDrag: true,
autoplay: true,
controls: true,
arrowKeys: false,
gutter: 10,
nav: false,
slideBy: 1,
autoplayHoverPause: true,
autoplayButtonOutput: false,
controlsText: [
"<i class='fas fa-arrow-left'></i>",
"<i class='fas fa-arrow-right'></i>",
],
controlsPosition: "bottom",
loop: false,
preventScrollOnTouch: "force",
autoplayTimeout: 6000,
rewind: true,
responsive: {
0: {
items: 1,
},
320: {
items: 1,
},
460: {
items: 2,
},
600: {
items: 3,
},
800: {
items: 4,
},
}
});
}
</script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js'></script>
Posting Komentar untuk "MIni Recent Posts With Carousel Sliding Widget"