Hello, Friends, Many of my posts related to Recent Posts Widgets were outdated so instead of updating those posts with the same code and design I have created a couple of great looking widgets which will be published in upcoming days.
This widget is not new but we have used TinySlider which is a Vanilla Javascript Based Slider Plugin which is lightweight and has zero dependencies.
This is the reason we have used the tiny slider to achieve the Sliding Effect and used Blogger JSON API to fetch the posts.
This Carousel Recent Posts Widget Looks very stylish and it is modular you don't need to tweak your template just you need to add this plugin in your layout using add a gadget section.
For the DEMO Purpose, I'm using this widget in my blog you can scroll down to see it live and working.
You may still have doubts regarding the responsiveness of this widget if you have any doubt just open my blog in your mobile phones or tablets to check the real responsiveness thanks to Tiny Slider 2 Plugin we got a lot of options to make it responsive.
I think now its time to add the widget I will show you how you can add it. If you are a new blogger you can be surprised or find this code too long but this is the code that I wrote I'm not minimising so that if a user wants to customize or create their own widget they can easily do.
STEP 2: In The Left Side Bar You will find Layout Section as highlighted in the image above Click on Layout.
STEP 3: Click On "Add a Gadget" As highlighted in the image above.
STEP 4:After Clicking on "Add a Gadget" Choose "HTML/JavaScript" from the list & as highlighted in the image above.
///////////////////////////////////////////
A Widget Developed By Kahkashan Khan
Author: Kahkashan Khan
Publisher: https://www.kbloggertricks.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>
0 comments:
Post a Comment